Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Перед передачей дизайна сайта или мобильного приложения в разработку необходимо провести ревизию и анализ дизайна и исправить все шероховатости. Причина в оптимизации времени и процессов: править в дизайне проще, чем просить это сделать разработчика на финальных стадиях. Задача дизайнера состоит в том, чтобы отдать готовые, причесанные и проверенные макеты.
О том, как сделать так, чтобы ваш дизайн выглядел безупречно и экономил время команды разработки, нам рассказал Кирилл Сидорец 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.
ProductStar — онлайн-школа IT-профессий, часть холдинга РБК с 2023 года. Спасибо, что остаетесь с нами! Мы можете подписаться на наш Telegram-канал по дизайну и познакомиться с нашими курсами по этому направлению.
