Проектирование макетов — важная и ответственная задача для дизайнера, требующая внимания к деталям и тщательной проверки. Нередко из‑за мелких ошибок приходится переделывать работу, теряя драгоценное время. В этой статье я попытался собрать основные пункты, которые облегчат проверку и повысят качество ваших проектов.
Материал разработан как для опытных продуктовых дизайнеров, так и для начинающих специалистов, и носит рекомендательный характер.
Оглавление:
Breakpoint'ы и размеры
Проверьте размеры экранов и элементов, систему отступов, подчинение сетке, а также соблюдение нескольких правил:
Использовано минимальное количество разных отступов в рамках одного экрана.
Не нарушено правило внутреннего и внешнего, согласно которому внутренние отступы и скругления всегда меньше внешних.
Использованы только целые значения рх/dp, нет дробных пикселей.
Проверьте, как будут вести себя элементы интерфейса — кнопки, карточки, колонки текста, картинки — на разных экранах: телефонах, планшетах, ноутбуках и 4К-мониторах.
Эвристики usability и дизайн-принципы
Проверьте проект на соответствие эвристикам usability и дизайн-принципам. Это важно, так как они помогают создавать более интуитивные, эффективные и удовлетворяющие потребности пользователей интерфейсы, сокращая количество ошибок.
Законы / эвристики / принципы (18)
Закон Якоба Нильсена: люди склонны отдавать предпочтение вещам, с которыми были знакомы ранее.
Закон Фиттса: любой элемент, с которым необходимо взаимодействовать, должен быть достаточно большим. Это позволит сразу его заметить и легко щёлкнуть по нему.
Закон Хика: время, необходимое для принятия решений, возрастает с увеличением количества вариантов.
Эффект эстетики: пользователи часто воспринимают эстетически приятный дизайн как более удобный.
Принцип наглядности: снижение когнитивной нагрузки избавляет от необходимости думать там, где этого можно избежать.
Закон Паркинсона: на задачу будет потрачено столько времени, сколько на неё отведено.
Эффект Зейгарник: незавершённые задачи легче запомнить, чем выполненные.
Принцип Парето: во многих случаях примерно 80 % последствий происходит от 20 % причин.
Пиковое правило: разум фокусирует воспоминания вокруг самых эмоционально‑напряжённых моментов и их результата.
Закон Теслера: для любой системы существует определённое количество сложности, которое нельзя уменьшить.
Закон Миллера: человеческий мозг в среднем запоминает 7 (+-2) объектов.
Закон близости: объекты, которые находятся близко друг к другу, имеют тенденцию группироваться вместе.
Закон прегнантности: человеческий глаз любит находить простоту и порядок в сложных формах.
Закон общего пространства: элементы внутри общей границы воспринимаются как группа.
Эффект серийной позиции: пользователи имеют склонность лучше запоминать первый и последний элементы в серии.
Закон сходства: человек склонен воспринимать похожие элементы в дизайне как целостную картину, форму или группу, даже если они разделены.
Закон фон Ресторфа: при наличии нескольких похожих объектов наиболее вероятно запомнится тот, который отличается от остальных.
Закон единой связанности: визуально связанные элементы воспринимаются более цельно, чем просто сгруппированные.
Чистка макетов
Проверьте, нет ли в файле лишних элементов и скрытых слоёв.
-
Переименуйте названия слоёв и компонентов. Используйте техническое (утверждённое) или семантическое (смысловое) наименование. Придавайте всем элементам дизайна значимые и описательные названия в зависимости от функций.
Пример именования слоёв -
Проверьте привязку цветовых стилей через кнопку «See all library colors». Если у вас есть тёмная тема, сразу тестируем и её.
-
Через бесплатный плагин Select by Font проверьте все шрифтовые стили, используемые в макете.
Плагин «Select by Font» -
Тени и скругления: проверьте привязку к токенам и стилям и сверьтесь с руководствами дизайн-системы.
Проверка доступности (Accessibility)
Проверьте контрастность цветов на странице с помощью любого плагина или сервиса.
-
Проверьте читаемость шрифтов: семейство, кегль, жирность, наклон, трекинг, интерлиньяж.
Проверка контрастности через «Contrast ratio» от Siegemedia
Подготовка к передаче разработчикам
Проверьте, что все иконки отрисованы.
Растр переведён в вектор, так как .svg весит килобайты — значительно меньше растра, а значит вёрстка будет легче.
Все фото и видео залиты в один архив с тем же названием, что и в макетах.
Пропишите или покажите поведение текстов для разных разрешений: как меняются кегль, начертание и интерлиньяж, какие текстовые стили применяются.
-
Заранее оставьте комментарии там, где у разработчиков могут возникнуть вопросы. Я, например, собрал локальный компонент «help» под свои требования, который везде за собой таскаю.
Пример «хелпера» для заметок на поле боя. Функциональность докручиваю по мере необходимости
Избавьтесь от кастома, чем его меньше — тем легче вёрстка, а значит дешевле разработка.
Опишите сложные компоненты и визуализируйте их. Например, элементы с динамическим изменением формы.
Подготовьте описание основных сценариев фич. Например: «Сценарий удаления запускается при клике на кнопку „Удалить“», «Появление тени и ресайз фото на +10% происходит только по ховеру».
Проверка состояний элементов/компонентов
Проверьте состояния всех компонентов/элементов интерфейса (активные/неактивные, развёрнутые, вид всех вкладок и т. д.)
-
Продумайте, как будут выглядеть элементы дизайна при минимальном и максимальном количестве данных.
Проверьте соответствие компонентов дизайн-системе или подготовьте спецификации в UI-kit’е с описанием работы компонентов и их состояний.
Анимации
Визуализируйте анимации с помощью Figma или сторонних программ там, где это возможно. Если нет опыта работы с анимацией — приложите референсы.
UX-сценарии
Проверьте, учли ли вы разные варианты завершения UX-сценария. Отобразите сценарии в Figma, или на крайний случай в Miro (будет хорошо накидать прототип в Figma для наглядности и будущих тестов).
Подсказки и Error Page
Наличие иллюстраций и подсказок на экранах с пустыми состояниями или на страницах ошибок (Error Page). Они будут сообщать пользователю, что сейчас происходит на странице или какая ошибка прилетела.
Рубрикатор макетов
Добавьте рубрикатор на страницу, где храните макеты. Так разработчику будет удобнее ориентироваться.
Карточка дизайнера
Добавьте стикер/карточку дизайнера. Что там можно указать:
ФИО дизайнера;
контакты (ссылку на Telegram);
описание задачи;
версия макетов;
ссылка на задачу в Jira.
Когда макеты готовы, важно сопровождать процесс разработки до конца, оперативно взаимодействовать с разработчиком, давать правки при обнаружении ошибок и неточностей. С таким подходом будет легче реализовать проект таким, каким вы его задумали.
Расскажите о своём опыте сдачи проектов в комментариях. Буду рад обратной связи! ??
Связать со мной и задать вопросы можно так же в tg.
Наш телеграм-канал дизайнеров Домклик.