Какие скиллы прокачиваем и зачем это нужно:
1. Анализ стилистики дизайн-макетов из уровня нормы — даст понимание какие приёмы использованы и зачем.
2. Реверсивное прототипирование — чтобы выявить ошибки дизайн-макета, полезно перевести его в простой прототип. Это поможет убрать визуальный шум и сконцентрироваться на элементах и удобстве пользования.
3. Применение UI-кита на прототип — в больших приложениях умение применять UI-элементы к прототипам — полезный навык. Помогает развить скорость работы и компоновку элементов.
В работе дизайнера бывают моменты, когда сделанный макет похож на полдюжины предыдущих, а новых идей нет. Это застревание в одной стилистике - выбор каждый раз падает на старые, проверенные решения вместо поиска новых. Как это изменить? Самый действенный способ - разбор и копирование работ уровня нормы, к которому вы стремитесь. Анализ их композиции, цвета, типографики пополнит коллекцию свежими решениями и структурирует знания.
В примере я взял макет сервиса по покупке билетов в кино и применил к нему стилистику приложения, найденного на Behance.
Анализ
При анализе обращайте внимание на каждую мелочь - отступы, подписи, размеры шрифтов, устройство кнопок и иконок. Посмотрите как расставлены акценты и организована работа с якорными объектами. Выпишите основные эмоции и ассоциации.
При разборе старайтесь не пользоваться такими инструментами как пипетка или рулетка. Лучше отрисовать элементы заново - это тренирует зрительную память и повышает уровень владения программой.
Вот UI-кит, который у меня получился.
Упрощение
В этот раз я работал с готовым приложением, имеющим оформление. Чтобы оно не отвлекало можно упростить макет до уровня прототипа.
Дизайн-макет превращается в простой прототип:
Воспроизведение
Оформляем прототип в соответствии с новой стилистикой. Если в нашей задаче есть элементы, которых нет в разобранном стиле, создаем их по аналогии с имеющимися.
Степень копирования выбираем сами. Не обязательно делать "под копирку". Например, в этой работе я скопировал цвета, шрифт для заголовков, форму круга в качестве доминанты и стиль кнопок. Но отступы, выпадающие списки, оформление изображения оставил свои.
Где грань?
В учебных макетах вы можете максимально точно копировать чужие стили - так вы быстрее научитесь. В коммерческих работах это нужно делать осторожно, переосмысливая и сохраняя оригинальность своего макета. Исключение — официально распространяемые стандарты, вроде Material Design или IOS Guidelines. Некоторые заказчики специально указывают соответствие им в требованиях к макетам.
Присоединяйся к нам ВКонтакте WDI Design School
