Чек-лист для дизайнера перед сдачей проекта
Проектирование макетов — это как игра в «Дженгу»: стоит упустить одну деталь, и весь проект может рухнуть. Чтобы избежать стрессовых правок и бесконечных «почти готово», я собрал чек-лист для проверки макетов перед отправкой разработчикам. Простой и понятный. Он сохранит ваше время и нервы.
☞Этот чек-лист носит рекомендательный характер.
1. Макеты и сетка
- Создайте макеты для телефонов, планшетов, ноутбуков и мониторов, чтобы дизайн был адаптирован под различные экраны.
- Убедитесь, что все макеты используют сетку (grid), чтобы элементы интерфейса были расположены логично и симметрично. Я использую этот Сайт для построения сеток.
- Для веб-версии дизайн должен быть структурирован в контейнеры и секции, что упрощает адаптивную верстку.
- Проверьте привязку теней и скруглений к стилям, а также их соответствие руководству дизайн-системы. Это поможет сохранить визуальную консистентность во всём проекте.
2. Анимации и поведение элементов
- Приложите видео или ссылки, демонстрирующие поведение кнопок для корректной реализации интерактивных элементов.
- Если в проекте есть сложные анимации, предоставьте ссылки на видео или описание для точной реализации.
- Поведение всех интерактивных элементов (например, кнопки или иконки) должно быть задокументировано: минимум ссылка на видео или текстовое описание.
3. Иконки и их параметры
- Иконки должны находиться в контейнере с одинаковым отступом. Минимальный желательный размер области нажатия для мобильных устройств — 48x48 пикселя, чтобы обеспечить удобство использования.
- Названия иконок должны быть структурированы и содержать указание на размер, например "icon 24px".
- Проверьте размеры иконок и контейнеров на наличие дробных чисел. Все размеры должны быть минимум 1 px для точной верстки.
4. Инпуты и их поведение
- Проверьте все инпуты и их поведение. Приложите видео или прототипы для ясности взаимодействия.
5. Типографика
- Проверьте читаемость шрифтов: семейство, кегль, жирность, наклон, трекинг, интерлиньяж - все важные параметры для правильной типографики.
- С помощью бесплатного плагина Select by Font проверьте все шрифтовые стили, используемые в макете, и убедитесь, что они соответствуют заданным стандартам.
6. Цветовые и графические стили
- Опишите цветовые стили с указанием названия цвета, его номера и области использования. Это упростит соблюдение визуальной консистентности.
- Проверьте контрастность цветов, чтобы убедиться, что они соответствуют стандартам доступности (Accessibility).
- Подготовьте изображения с учетом ресайзов и цветовой коррекции, чтобы они были адаптированы под различные устройства.
- Если в вашем проекте есть тёмная тема, то её тоже сразу протестируйте, чтобы убедиться в корректности отображения.
- Проверьте привязку всех цветов к библиотеке через кнопку «See all library colors».
7. Организация слоёв и компонентов
- Проверьте макет на наличие ненужных элементов и скрытых слоёв. Удалите всё, что не используется, чтобы не загромождать проект.
- Названия всех слоев и компонентов должны быть структурированы в иерархическом порядке для упрощения работы с файлами.
- Присвойте всем слоям и компонентам осмысленные названия. Используйте либо технические названия (согласно утверждённым стандартам), либо названия, описывающие функцию элемента. Это упрощает работу с макетом для всех участников команды.
- Элементы не должны выходить за контейнеры. Убедитесь, что все элементы интерфейса, включая изображения, не выходят за границы контейнеров и корректно ресайзятся.
8. Поддержка файлов и структур
- Подготовьте UI Kit с основными элементами дизайна: кнопками, инпутами, иконками, типографикой и цветовыми палитрами для удобства разработки.
- Подумайте о том, как элементы дизайна будут выглядеть при максимальных и минимальных объемах данных.
С таким подходом работа над проектом станет проще, а результат порадует и вас, и команду. Всё под контролем, детали учтены, и разработка движется без лишних проблем!
Это то, что нужно знать каждому