UX-UI дизайн
Или как мы создаём удобные и понятные интерфейсы
Что за зверь этот дизайн?
Процесс дизайна кажется незамысловатым и простым, но это гораздо более обширный и трудоемкий процесс, чем показалось бы на первый взгляд. Грамотные UX (реакции и впечатления, которые возникают у пользователя в процессе взаимодействия с продуктом) и UI (визуальное оформление) включают в себя множество исследований и тестирований, которые снижают количество ошибок на этапе запуска продукта и риск того,что вам придется вносить изменения на более позднем этапе разработки сайта, или что еще дороже - когда продукт уже вышел на рынок.
Процесс
1
Работа дизайнера начинается с ознакомления с ТЗ. Все раскладывается по полочкам, чтобы учесть все пожелания заказчика и нюансы разработки, которые могут отразиться на дизайне.
2
Чтобы определить, какое настроение несет продукт, составляются ассоциативные поля и мудборд. Это делается, чтобы понять, каким будет визуальное решение: серьёзным или весёлым, элитарным или демократичным, какие образы возьмут за основу, как будут сочетаться цвета и какой будет типографика.
3
Собирается информация по ЦА. Необходимо понять, кто будет пользоваться продуктом, какие у этих людей особенные черты и потребности. Определяются User и Job stories, основные фичи продукта.
4
Проводится подбор референсов, опирающийся на анализ конкурентов и аналогов продукта.
5
После сбора и упорядочивания информации, начинается этап проектирования.
Составляется сценарий - наглядное схематическое представление того, как пользователь решает свою задачу с помощью сайта, что ему помогает и что мешает в достижении цели;
Отрисовываются вайрфреймы;
Создается и тестируется прототип, корректируется после тестов при необходимости. Это необходимо для того, чтобы сфокусироваться на смысле и продумать интерфейс на концептуальном уровне;
Прототип презентуется заказчику, вносятся правки.
6
После одобрения прототипа начинается самая красочная часть - визуальный дизайн, и вот серый прототип становится яркой, максимально приближенной к конечному варианту, картинкой.
7
Последним этапом становится составление UI-кита. UI KIT — это упорядоченная библиотека элементов дизайна. Такая библиотека помогает разработчикам быстрее освоиться в проекте и сильно экономит время на понимании и поиске элементов.
8
