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

2cf503667f30196caf089009d105fee6.png

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

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

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

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

1f82144c254d0a013bb695ea20977dd1.png

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

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

b0c23a613e5d978ddc69b34a84baa625.png

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

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

496240f704ad0e129f4845bb452677b9.png

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

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

844c691f14349fa76961d38628d85dd2.png

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

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

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

ProductStar — онлайн-школа IT-профессий, часть холдинга РБК с 2023 года. Спасибо, что остаетесь с нами! Мы можете подписаться на наш Telegram-канал по дизайну и познакомиться с нашими курсами по этому направлению.

© Habrahabr.ru