Ищете крутые кейсы в digital? Посмотрите на номинантов Workspace Digital Awards 2026!
Назад
Дизайн

Этапы дизайн-процесса, или как дизайнеры «рисуют картинки»

2241 
 

Мы довольно часто транслируем в наших социальных сетях важность и обязательность всех этапов процесса создания продуктов от и до. Среди них аналитика, дизайн, разработка, тестирование и так далее. Каждый из этих этапов — неотъемлемая и незаменимая часть нашей работы. Гораздо реже мы говорим о том, что каждый из этих этапов также является составным. Любой из них делается поэтапно, и о каждой ступени можно рассказывать в отдельности. Далеко не всем может быть  интересно настолько вникать в процесс. Но для тех любознательных из вас, кто хочет знать все и вся, мы расскажем про дизайн-процессы. Их целых 10!

Этапы дизайн-процесса, или как дизайнеры «рисуют картинки»

1. Исследование

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

Результат работы: собранная база знаний по проекту.

2. ЦА и персонажи

Мы должны понять, кто именно наша целевая аудитория, кто из представителей ЦА является ядром, для кого мы делаем продукт. Тут могут быть важны социально-демографические характеристики (пол / возраст / образование / род занятий), географические (страна, город), психографические характеристики (стиль жизни, особенности личности, черты характера), поведенческие характеристики (образ жизни и потребительские предпочтения, их мотивация, готовность совершать те или иные действия).

Результат работы: подробно расписанные портреты потенциальных пользователей.

3. Анализ данных

Мы определились «зачем», теперь вопрос «как»? Когда задачи продукта ясны, дизайнер продумывает логику взаимодействия, продумывает, как пользователь будет решать свои задачи. На этом этапе создаются сценарии пользователя. На основе анализа целевой аудитории мы составляем портрет собирательного образа — типового пользователя, вживаемся в его роль, ставим себя на его место, формулируем конкретные задачи для нашего персонажа и продумываем его потенциальный сценарий поведения.

Результат работы: выжимка из всего UX-исследования материалов, которые пригодятся для формирования сценариев и составления прототипов.

4. CUSTOMER JOURNEY MAP (карта путешествия пользователя)

CJM фиксирует подробности взаимодействия с услугой. Главная задача CJM — создание непрерывного взаимодействия на протяжении всего потребления услуги, от точки входа до точки выхода. Что пользователь нажимает, как перемещается по интерфейсу, какие этапы проходит на пути к своим целям, где он сталкивается с барьерами, не позволяющими достигать целей. Иными словами, CJM карта представляет цепочку: «цель — шаги для ее достижения — возможные препятствия — способы их устранения», применимо к каждой точке соприкосновения пользователя с вашим продуктом.

Результат работы: собственно, CJM-карта.

5. User flows (сценарии пользователя)

User flows — это наглядные материалы, которые иллюстрируют весь путь пользователя в продукте целиком. User Flow помогает понять, все ли процессы в продукте имеют логическое завершение, нет ли висящих страниц или наоборот, может, какого-то сценария не хватает для полноты картины. Иными словами, User Flow — это схематичная навигация по вашему продукту.

Результат работы: User Flow в любом его воплощении.

6. Техническое задание

Обычно как раз где-то на этом этапе начинает составляться техническое задание. Дизайнеры могут принимать в этом участие, а могут нет. В любом случае, они делятся своими наблюдениями, исследованиями и опытом, чтобы на этапе описания продукта не возникло недоразумений, которые усложнят дальнейшую работу.

Результат работы: техническое задание во плоти.

7. Прототипы (Wireframing)

Все детали с заказчиком обсуждены, исследование проведено, ТЗ составлено, вы уже знаете «зачем» и «как» будет работать ваш продукт, значит наконец-то можно начать проектировать. На этапе проектирования вы визуализируете все собранные ранее данные, разрабатываете каркас продукта, его скелет, на который постепенно будет наслаиваться функционал.

Важно понимать, что проектирование — это не создание готового дизайна. Это наброски, цель которых — понять, решит ли продукт в таком виде задачу.


Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13230 тендеров
проведено за восемь лет работы нашего сайта.


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

Результат работы: каркасы (Wireframes), описывающие полный функционал проекта.

8. Тестирование

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

Результат работы: собранный и проанализированный фидбэк с дальнейшим планом правок и изменений.

9. Дизайн-макеты

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

Важная задача — не забывать в процессе дизайна постоянно возвращаться к UX-составляющей, следить за преображениями, наблюдать, чтобы при добавлении визуальных эффектов не потерялся основной смысл продукта.

Результат работы: макеты экранов с высокой точностью, детально иллюстрирующие все составляющие проекта.

10. Спецификации

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

Результат работы: UI guidelin'ы, дизайн-система проекта и адаптивы.

Заключение

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

А как устроены процессы в вашей компании? Поделитесь своими наработками.

Ну а если вы хотите так же подробно прочитать про каждую из наших услуг — вы знаете, как дать нам об этом знать!

Надеюсь, эта статья поможет чуть больше разобраться в теме. А если вы хотите так же подробно прочитать про каждую из наших услуг — вы знаете, как дать нам об этом знать!

Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.




2241

Лучшие статьи

Поделиться: 0 0 1
Лайки за кейсы:  80 Подписчики:  2