/ дизайн

Передача макета в разработку (Web)

@img by freepik

Привет!

Сегодня поговорим о том, как подготовить макет для верстальщиков и программистов, чтобы получить оптимальный результат на выходе.

Проблема большинства дизайнеров состоит в том, что они делают НЕДОСТАТОЧНО работы для того, чтобы сверстанный по макету сайт получился “как нужно”.

Чем отличается плохой дизайнер от хорошего? Плохой дизайнер рисует только картинки, забывая о конечном продукте, стоимости вёрстки макета, удобстве в последующей разработке. Другими словами, ему интересно только его поле деятельности, а что произойдёт дальше с продуктом, не имеет никакого значения.

Но если мы знаем основы веб-разработки, правильно подготавливаем макет “на продашкн” — то результат работы верстальщика будет греть душу и дизайнера, и заказчика.

Что нам нужно подготовить и передать разработчикам, чтобы получить идеальный результат:

  1. Дизайн-макет проекта, в качестве файла или ссылки на его скачивание;
  2. Дизайн-макета проекта, загруженный в Zeplin, Sympli или Avocode. Лично я использую Zeplin, так как скорость работы и удобства верстальщика получается на высоте. Но вы можете использовать любой полюбившийся вам инструмент;
  3. Кликабельный прототип в Marvel или Invision с переходами экранов;
  4. Иконки и иллюстрации, использованные в макете, в формате png/jpeg. Для векторной графики/иконок — svg.
  5. Руководство по состояниям интерактивных элементов, UI Kit;
  6. Видео-файлы с нестандартными анимациями или ссылку на похожие примеры из интернета.

Разберем каждый пункт подробнее.

Дизайн-макет ссылкой или файлом

Макет может быть выполнен в любом удобном для вас инструменте, будь то Sketch, Figma, Adobe XD, или любой другой.

Перед отправкой макета стоит убедиться, всё ли в порядке:

  1. Все иконки и иллюстрации помечены как Exportable;
  2. В названии слоёв наведён порядок;
  3. Нет пустых или недоделанных экранов;
  4. Все элементы выстроены по сетке;
  5. Макет выполнен по сетке 4px, 8px, или 10px (на усмотрение дизайнера), сходные элементы приведены к единой системе.
  6. Для каждого экрана отрисовано расположение элементов для мобильной версии и планшетов.
  7. Цвета в макете стандартизированы, в макете нет цветов, которые используются ошибочно.

Подробнее по пункту 5. Использование единообразной системы в макете сильно сберегает время на разработку. Верстальщик сможет использовать в качестве отступов и размеров не абсолютные величины, а пропорциональные (для 4px: 4px, 8px, 12px, 16px), и так далее. Использование сходных элементов (по внешнему виду) даёт возможность разработчику использовать БЭМ, и использовать подклассы для элементов, что также экономит время и уменьшает размер кода, а с ним, соответственно, скорость загрузки сайта/сервиса, и выдачу в поисковых системах.
sketch-layers-pane

Дизайн-макет в Zeplin/Sympli/Avocode

Здесь всё просто — с помощью этого верстальщик сможет самостоятельно, не открывая макет программой (которой у него может и не быть) замерить все расстояния, отступы, размеры, цвета, экспортировать иконки и изображения. Дополнительно он сможет посмотреть CSS свойства объекта и скопировать некоторые из них.

Кликабельный прототип

Необходим для того, чтобы программисты и верстальщики не задумывались над тем, как соединены меж собой экраны. Marvel/Invision дают возможность создавать простейшие анимации при переходе между экранами, что также помогает использовать готовые решения и не задумываться лишний раз об анимации.
ezgif.com-resize-6

Иконки и иллюстрации

Иконки и иллюстрации стоит экспортировать и разложить по папкам. Я предлагаю использовать папку assets/img и assets/ico, и именовать файлы согласно их назначению.

Assets — это стандартная папка, которая используется в большинстве веб-проектов, знакомая любому разработчику.

Шрифты

Стоит положить в папку assets/fonts используемые шрифты, либо указать в readme файле ссылку на их скачивание. Если это бесплатные шрифты от Google — укажите в readme файле ссылку на название шрифта и необходимые для подключения начертания.

Если это платный шрифт — прикладываем ссылку на сайт, где шрифт можно купить (использование платных шрифтов стоит обговорить с заказчиком изначально, до их использования в проекте, чтобы это не стало неприятным сюрпризом и дополнительными тратами).

Руководство по состояниям интерактивных элементов

Я предпочитаю брать за основу UI Kit от Bootstrap, и на его примере делать свой Kit. Использование готовых Kit для примера даёт возможность не забыть о базовых элементах. Для каждого элемента должны быть показаны: нормальное состояние, активное (включенное) состояние, неактивное (недоступное для включения) состояние, при наведении мыши, при правильно введённом значении, ошибочном значении и т.д.

Такая работа сильно экономит время последующей разработки и разгружает мозг разработчика.

Некоторые дизайнеры используют плагин Measure для Sketch, чтобы ещё более наглядно показать размеры элементов, но в большинстве случаев макета в Zeplin будет достаточно.
ui-kit-psd-free-y7

Видео с анимациями

Если вы сделали крутую нестандартную анимацию интерфейса в After Effects, Principle, или другом инструменте анимации, то её тоже нужно экспортировать в формате GIF или MOV, и передать разработчику.

В некоторых случаях для описания анимации подойдёт ссылка на подобную в интернете.
preview

Итого

Как должна выглядеть папка проекта:
files

Надеюсь, что эта статья была полезна. Подписывайся на мой Telegram-канал @ilyadzenski_channel чтобы получать самое свежее первым!

comments powered by HyperComments