5 необходимых шагов при UX/UI-аудите14.05.2024 14:30

Перед передачей дизайна сайта или мобильного приложения в разработку необходимо провести ревизию и анализ дизайна и исправить все шероховатости. Причина в оптимизации времени и процессов: править в дизайне проще, чем просить это сделать разработчика на финальных стадиях. Задача дизайнера состоит в том, чтобы отдать готовые, причесанные и проверенные макеты.

О том, как сделать так, чтобы ваш дизайн выглядел безупречно и экономил время команды разработки, нам рассказал Кирилл Сидорец Senior Product Designer в компании The Open Platform (ex-VK, МТС).

1. Проверьте цвета и шрифты

Помню ситуацию, когда в компании было около 100 оттенков серого. Этого лучше избегать и использовать как можно меньше цветов. Я рекомендую всегда параллельно заниматься разработкой Style Guide. Это будет отдельная страничка в Figma, где будут описаны все ваши цвета и шрифты. Попытайтесь минимизировать количество используемых цветов и шрифтов.

2. Проведите Accessibility Test

Вы можете проверить доступность вашего интерфейса с помощью плагина Contrast в Figma или других сторонних инструментов. Представьте, как вашим интерфейсом будут пользоваться при ясной солнечной погоде на улице. А люди с нарушениями зрения? Насколько просто им будет разобраться в вашем интерфейсе? Я рекомендую держать это вопросы в голове, не доверять своим глазам и пытаться делать контрастные интерфейсы, которые смогут видеть пользователи в разном контексте.

3. Проверьте консистентность

Консистентность — одна из главных составляющих хорошего дизайна. Иногда вы можете использовать разные дизайнерские библиотеки, иконки и цвета. Но следите, чтобы все эти составляющие соотносились между собой, экранами и компонентами. Проверяйте, чтобы не было большого перепада в размерах компонентов, чтобы у иконок не было разных толщин и не было ощущения, как будто иконки в вашем дизайне рисовали разные дизайнеры. Тут важно научиться смотреть сверху комплексно на весь дизайн и понимать, что может выбиваться из общего стиля и нарушать гармонию.

4. Переименуйте слои

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

5. Создайте UI-кит

UI-кит используется для упрощения, стандартизации и системного подхода к разработке интерфейсов. Это что-то вроде шаблонов для ваших будущих дизайнов. Заносите все повторяющиеся компоненты (кнопки, иконки, ячейки и т. д.) в UI-кит. Таким образом у вас получится консистентный дизайн, который легко будет переиспользовать. Следующим шагом будет перенос UI-кита в код, тогда это можно будет назвать полноценной дизайн-системой.

Материал подготовлен при поддержке редакции ProductStar.

© Habrahabr.ru