![](https://habrastorage.org/getpro/habr/upload_files/2cf/503/667/2cf503667f30196caf089009d105fee6.png)
Перед передачей дизайна сайта или мобильного приложения в разработку необходимо провести ревизию и анализ дизайна и исправить все шероховатости. Причина в оптимизации времени и процессов: править в дизайне проще, чем просить это сделать разработчика на финальных стадиях. Задача дизайнера состоит в том, чтобы отдать готовые, причесанные и проверенные макеты.
О том, как сделать так, чтобы ваш дизайн выглядел безупречно и экономил время команды разработки, нам рассказал Кирилл Сидорец Senior Product Designer в компании The Open Platform (ex-VK, МТС).
1. Проверьте цвета и шрифты
Помню ситуацию, когда в компании было около 100 оттенков серого. Этого лучше избегать и использовать как можно меньше цветов. Я рекомендую всегда параллельно заниматься разработкой Style Guide. Это будет отдельная страничка в Figma, где будут описаны все ваши цвета и шрифты. Попытайтесь минимизировать количество используемых цветов и шрифтов.
![](https://habrastorage.org/getpro/habr/upload_files/1f8/214/4c2/1f82144c254d0a013bb695ea20977dd1.png)
2. Проведите Accessibility Test
Вы можете проверить доступность вашего интерфейса с помощью плагина Contrast в Figma или других сторонних инструментов. Представьте, как вашим интерфейсом будут пользоваться при ясной солнечной погоде на улице. А люди с нарушениями зрения? Насколько просто им будет разобраться в вашем интерфейсе? Я рекомендую держать это вопросы в голове, не доверять своим глазам и пытаться делать контрастные интерфейсы, которые смогут видеть пользователи в разном контексте.
![](https://habrastorage.org/getpro/habr/upload_files/b0c/23a/613/b0c23a613e5d978ddc69b34a84baa625.png)
3. Проверьте консистентность
Консистентность — одна из главных составляющих хорошего дизайна. Иногда вы можете использовать разные дизайнерские библиотеки, иконки и цвета. Но следите, чтобы все эти составляющие соотносились между собой, экранами и компонентами. Проверяйте, чтобы не было большого перепада в размерах компонентов, чтобы у иконок не было разных толщин и не было ощущения, как будто иконки в вашем дизайне рисовали разные дизайнеры. Тут важно научиться смотреть сверху комплексно на весь дизайн и понимать, что может выбиваться из общего стиля и нарушать гармонию.
![](https://habrastorage.org/getpro/habr/upload_files/496/240/f70/496240f704ad0e129f4845bb452677b9.png)
4. Переименуйте слои
Я могу с уверенностью сказать, что разработчики будут вас любить за правильные и красивые нейминги в ваших макетах. Правильный нейминг экономит время разработчиков, а также тех дизайнеров, которые будут использовать ваши макеты в будущем. Такое распространено в больших продуктовых командах, когда над одной задачей могут работать несколько дизайнеров.
![](https://habrastorage.org/getpro/habr/upload_files/844/c69/1f1/844c691f14349fa76961d38628d85dd2.png)
5. Создайте UI-кит
UI-кит используется для упрощения, стандартизации и системного подхода к разработке интерфейсов. Это что-то вроде шаблонов для ваших будущих дизайнов. Заносите все повторяющиеся компоненты (кнопки, иконки, ячейки и т. д.) в UI-кит. Таким образом у вас получится консистентный дизайн, который легко будет переиспользовать. Следующим шагом будет перенос UI-кита в код, тогда это можно будет назвать полноценной дизайн-системой.
![](https://habrastorage.org/getpro/habr/upload_files/d37/593/090/d37593090c188bf9982cf3ce7ba4b68a.png)
Материал подготовлен при поддержке редакции ProductStar.
ProductStar — онлайн-школа IT-профессий, часть холдинга РБК с 2023 года. Спасибо, что остаетесь с нами! Мы можете подписаться на наш Telegram-канал по дизайну и познакомиться с нашими курсами по этому направлению.