Сколько ни читал про 8px решетку — так и не смог применить в реальной жизни. Восьмипиксельная сетка разве что для маштабирования иконок работает отлично.
Советы из статьи работают хорошо. Когда хочешь быстро сделать нормальную типографику — используй соотношений 1.25, 1.4. Волшебные цифры и пропорции проверены временем, просты для запоминания, используются и в типографике и в полиграфии и в вебе.
Верно, либо дизайнеру дать инструмент типа Webflow (и тогда результат придется ждать ооочень долго). Но не будет проблем с отступами с разницей в 1px. Либо дизайнер сам все собирает в html (тоже долго)
Современные инструменты и «дизайн-системы» не решают всех проблем со стороны дизайна.
Либо в верстальщика вселить чувство пропорций.
Дизайнера научить кодить очень быстро и качественно (но сколько такому дизайнеру придется заплатить за такую эффективность? Он еще и придумывает-рисует-прототипирует-пишет?) Или в верстальщика вселить чувство пропорций. Что из этого проще — решит бизнес.
Если выложить эту статью и эту работу в дизайнерском сообществе, а не на хабре — можно получить кучу обратной связи, негатива и предложений как улучшить.
Понятно, что неровно, не контрастно, не обдуманно и дизайна нет. Но как упражнения в коде — хорошо для тренировки, только в народ такое лучше не показывать.
Кажется у всех известных мне сервисов прототипирования код просто невозможный для применения разработчиками. Мне Justinmind показался удобнее и быстрее в мелочах. Но когда прямо закопаешься в многостраничном проекте (админке?) понимаешь удобство и универсальность Axure.
Если охота посмотреть на хороший код для разработчиков — можно поизучать такие штуки как bootstrapstudio и Webflow (это не совсем прототипирование, больше генерирование кода :) ).
Отмечу аналоги Justinmind и Proto.io
Justinmind — близок к Axure. Работа с анимациями и интерактивом проще и быстрее.
Proto.io — менеее близок к Axure, но с великолепными удобными анимациями и переходами между страниц.
Я периодически использую Axure (сложное многостраничное) и Proto.io (интерактив в html).
Скетч — ужасная работа с символами((( Как будто разработчики не видели индизайн-фарйворкс и конкурентов. Многие их даже не используют. Но великолепная поддержка кодеров!
Affinity — самый навороченный. Символы, Assets, Styles, продвинутая типографика, крутой экспорт в SVG. Нельзя работать с кодерами(((
Figma — Символы. Совместная работа офигенна. Маркетолог, проектировщик думает над текстом и смыслом, дизайнер оформляет модно. Переводчики переводят. Нет работы с кодерами(((
Adobe XD — символы и Flinto/Marvell.
Axure прекрасен для тестов в реальности и интерактива. Но настолько тяжело и медленно с ним работать, что в дополнение к нему стоит для скорости использовать Sketch, Photoshop, Illustrator и т.д. — для быстрого набрасывания красоты.
Использую Axure когда нужен «Как бы рабочий прототип». Почти как HTML, можно пощупать, покликать, с ховерами, переходами состояний. С сайтом, встроенным в iframe и т.д.
Marvell-Flinto-XD слишком просты и дают лишь навигацию между картинок.
Возможно дизайнерам стоит делать прототипы сразу в коде. Html, jquery, Angular, Vue и вперед. Пока webflow, bootstrapstudio неудобны и Axure позволяет получать результаты быстрее.
Для меня фича №1 — запуск файлов, это умеют делать все конкуренты
Фича №2 — открыть файл. А это значит интеграция с Everything или Locate под Windows для поиска файлов. И под Mac хотя бы с проиндексированной базой Spotlight.
Без этого не конкурент FARR, Listary, Wox, Spotlight (Flashlight и что там еще) — у всех все есть и работает великолепно. Farr и заметки с напоминаниями сделает, Flashlight в Todoist задачу занесет.
Сейчас запуск программ и калькулятор кажется у всех есть. Плагинов катастрофически мало…
Даешь больше полезных плагинов, например как тут http://flashlight.nateparrott.com/browse
Так все графические редакторы, заточенные под вектор и интерфейсы одинаковые. Либо похожи на скетч, либо на иллюстратор)) И нужная функциональность тоже устаканилась, только копируй flinto, sketch и т.д. да дорабатывай.
Balsamiq лучше, быстр и работает оффлайн. Ninjamock приемлем. Кому надо, пользуется Axure. Преимуществ перед этими инструментами не найдено. (Moqups — кто им пользуется в работе?)
Было бы круто, если бы инструмент обладал бы какими-нибудь классными фичами. Навскидку — balsamiq с возможностью расшарить и комментировать прототип.
Советы из статьи работают хорошо. Когда хочешь быстро сделать нормальную типографику — используй соотношений 1.25, 1.4. Волшебные цифры и пропорции проверены временем, просты для запоминания, используются и в типографике и в полиграфии и в вебе.
Современные инструменты и «дизайн-системы» не решают всех проблем со стороны дизайна.
Либо в верстальщика вселить чувство пропорций.
Дизайнера научить кодить очень быстро и качественно (но сколько такому дизайнеру придется заплатить за такую эффективность? Он еще и придумывает-рисует-прототипирует-пишет?) Или в верстальщика вселить чувство пропорций. Что из этого проще — решит бизнес.
Понятно, что неровно, не контрастно, не обдуманно и дизайна нет. Но как упражнения в коде — хорошо для тренировки, только в народ такое лучше не показывать.
Если охота посмотреть на хороший код для разработчиков — можно поизучать такие штуки как bootstrapstudio и Webflow (это не совсем прототипирование, больше генерирование кода :) ).
Justinmind — близок к Axure. Работа с анимациями и интерактивом проще и быстрее.
Proto.io — менеее близок к Axure, но с великолепными удобными анимациями и переходами между страниц.
Я периодически использую Axure (сложное многостраничное) и Proto.io (интерактив в html).
Affinity — самый навороченный. Символы, Assets, Styles, продвинутая типографика, крутой экспорт в SVG. Нельзя работать с кодерами(((
Figma — Символы. Совместная работа офигенна. Маркетолог, проектировщик думает над текстом и смыслом, дизайнер оформляет модно. Переводчики переводят. Нет работы с кодерами(((
Adobe XD — символы и Flinto/Marvell.
Axure прекрасен для тестов в реальности и интерактива. Но настолько тяжело и медленно с ним работать, что в дополнение к нему стоит для скорости использовать Sketch, Photoshop, Illustrator и т.д. — для быстрого набрасывания красоты.
Marvell-Flinto-XD слишком просты и дают лишь навигацию между картинок.
Возможно дизайнерам стоит делать прототипы сразу в коде. Html, jquery, Angular, Vue и вперед. Пока webflow, bootstrapstudio неудобны и Axure позволяет получать результаты быстрее.
Фича №2 — открыть файл. А это значит интеграция с Everything или Locate под Windows для поиска файлов. И под Mac хотя бы с проиндексированной базой Spotlight.
Без этого не конкурент FARR, Listary, Wox, Spotlight (Flashlight и что там еще) — у всех все есть и работает великолепно. Farr и заметки с напоминаниями сделает, Flashlight в Todoist задачу занесет.
Сейчас запуск программ и калькулятор кажется у всех есть. Плагинов катастрофически мало…
Даешь больше полезных плагинов, например как тут http://flashlight.nateparrott.com/browse
Было бы круто, если бы инструмент обладал бы какими-нибудь классными фичами. Навскидку — balsamiq с возможностью расшарить и комментировать прототип.