July 25, 2021

Передача макетов разработчику. Он скажет тебе спасибо!

Как готовить файлы с дизайном, чтобы облегчить жизнь себе и разработчику? Олег Дмитриев (Инстаграм @webdmitriev) - разработчик с большим стажем - поделился с нами, дизайнерами, основными моментами, которые значимы при передаче макетов коллегам-разработчикам. А я дополнила их своими правилами подготовки файла с дизайном приложения.

Как готовить файл с дизайном для разработчика

10 рекомендаций от Олега Дмитриева:

В случае больших многостраничных сайтов хорошо, когда помимо макетов есть иерархия страниц, на которой видно, сколько их будет и какие есть внутренние. В одном из недавних крупных проектов только уже ближе к завершению разработки пришли к выводу, что нужны дополнительные внутренние страницы с подробным описанием - это потребовало дополнительных работ.
Когда дизайн сложный, с большим количеством фоновых изображений, у меня часто возникает вопрос: "А что, если текста будет больше?". Поскольку изображения не получится растянуть по высоте - об этом нужно думать заранее.
Должно быть понятно, какие кнопки (ссылки) куда ведут. Когда кнопка называется "Каталог" и ведет в Каталог - вопросов нет. Когда кнопка называется "Подробнее" зачастую непонятно, что должно происходить при клике на нее. В таком случае в Фигме хорошо делать сноски с пояснениями. Если макеты psd, можно создать отдельный текстовый файл и все пояснения - туда.
Если забудешь сделать модальные окна или не захочешь заморачиваться, есть риск, что разработчик сделает их по-своему и они будут не такие красивые, как твой дизайн. Также не стоит забывать про модальные окна с политикой конфиденциальности или "Спасибо за заявку".
Макет желательно делать на 1920px, не меньше. Поскольку в макетах на 1440px возникает сложность с фоновыми изображениями. Как их растягивать под 1920px? Разве что просить дизайнера сделать еще один вариант фона уже под 1920px.
Отдельно вынести все цвета, размеры шрифтов и эффекты при наведении. Возможно, еще какие-то повторяющиеся на сайте элементы. Так верстальщик сможет сразу задать все основные стили повторяющихся элементов и далее они автоматически будут применяться на всем сайте.
Не должно быть бардака в слоях. Когда есть папки с названиями блоков, а слои подписаны, работать сильно проще.
Изображения должны быть такого же размера, какие они в макете. Так они будут меньше весить и сайт будет быстрее загружаться. Иногда при экспорте они намного больше - и тогда приходится вручную менять им размер.
В случае psd макета будет круто, если svg иконки вы пришлете отдельно наряду с макетами. Иначе их приходится искать отдельно и скачивать, чтобы они были именно в svg формате. Из Фотошопа они экспортируются не совсем корректно.
Если планируются анимации на сайте, их лучше прописать заранее в ТЗ. Когда верстка уже готова, зачастую добавить анимации будет сложнее, поскольку придется переписывать код.

5 советов Абрамовой Марины по подготовке файла с дизайном приложения:

Отдельная страница в Figma под каждую задачу. UI дизайн, стайл гайд, вайрфрэймы.
Каждый фрейм должен быть назван в соответствии с наполнением экрана. Например: Sign In, Sign In/error. Каждому экрану помимо имени присваивается номер. Например: 1.0 Sign in, 1.1 Sign in/error.
Разделяю все экраны на сценарии и пишу заголовки/названия соответственно. Например: 1. Регистрация, 2. Поиск, 3. Покупка.
На отдельной странице или фрейме есть style guide. Там указаны все цвета проекта и шрифты.
На отдельном фрейме собираю все компоненты в разных состояниях. Текстовые поля, таб бар, кнопки и т.д. Также на отдельный фрейм я вытаскиваю все иконки.

Было полезно? Остались вопросы? Подписывайся на мой Инстаграм @abramova_freelance, пиши - я с радостью отвечу.

3 дня

старт 06 августа

Марафон

Онлайн

701р.

Подробнее

Присоединяйтесь к марафону по дизайну мобильных приложений. Три дня, три задания, 6 экранов и шоты для Dribbble. Каждому участнику дается обратная связь!