User Experience Design (UX design) “Проектирование взаимодействий с пользователем”.
При создании сайта, перед постановкой ТЗ для дизайнера, очень важно четко спроектировать — что Вы хотите получить в итоге. Попросту говоря нужно создать эскиз сайта.
Таким образом, Вы упростите задачу дизайнеру — дадите ему понять, что Вам необходимо, и существенно уменьшите количество правок и доработок на дальнейших этапах разработки.
Для примера прилагаю скрин одного из макетов.
Программ для проектирования очень много, мы используем Axure RP Pro — там все просто!
Примеры проекта:
Макет главной страницы:
Пример реализации макета главной страницы:
Макет страницы каталога:
Пример реализации макета страницы каталога:
Макет карточки товара:
Пример реализации макета карточки товара:
Зачем тратить время зря.. или не зря?
Преимущества проектного подхода:
- Сильно повышает гарантию достижения результата.
- Экономит время и деньги.
- Позволяет эффективно разделять работу.
“UX дизайн — это научное обоснование здравого смысла”
Основные этапы проектирования:
- Определение целей проекта и клиента
- Исследование сферы деятельности
- Создание смысловой концепции сайта
- Моделирование интерфейсов и поведения пользователей
Рассмотрим каждый из этапов немного подробнее:
Определение целей проекта и клиента
- Цели инициатора проекта?
- Подробное интервью
- Целевая аудитория
- Конкуренты
- Определение компетентности и ответственности инициатора проекта
Исследование сферы деятельности
- Составление ядра ЦА
- Интервью представителей ЦА
- Выявление задач ЦА, проблем и их решений
- Исследование конкурентов
- Сценарии поведения
Создание концепции
- Составление “оглавления сайта”
- Описание разделов на перспективу
- Описание дополнительного функционала
- Письменное описание проекта
Этапы моделирования
- Определяются цели и задачи продукта.
- Определяются пользователи и сценарии их поведения.
- Строятся сценарии взаимодействия пользователей с продуктом.
- Описание функционала, который реализует взаимодействие пользователей с продуктом.
- Моделируем диаграммы взаимодействия.
- Проектирование схем страниц – непосредственно функциональных эскизов.
- На их основе делается юзабилити и дизайн проекта.
Терминология
Sketch (набросок, эскиз)
Wireframe (блок-схема)
Prototype (прототип)
Simulation (симулякр, полнофункцональный прототип)
Mockup или mock-up (макет)
Больше полезных статей смотрите в нашем блоге: blog.webolution.ru