Введение в UX и UI дизайн

1.

Введение в
UX/UI дизайн
Дизайнер пользовательского
опыта и интерфейса
упрощает жизнь людей
В
в
е
д
е
н
и
е

2.

Примеры
Интерфейс
Интерфейс — это
набор инструментов
для взаимодействия
двух систем
В
в
е
д
е
н
и
е

3.

Определения
UX
UI
Процесс создания продукта, который
улучшает качество взаимодействия
пользователя
с ним, делает его удобным,
эффективным и приятным
Процесс проектирования интерфейса,
который отвечает
за визуальную часть, включающую
кнопки, иконки, цвета и стили
User Experience
User Interface
В
в
е
д
е
н
и
е

4.

Команда разработки
Project
manager
Клиент
SEO
UX/UI
дизайнер
Тестировщик
Front-end
разработчик
Back-end
разработчик
В
в
е
д
е
н
и
е

5.

Этапы разработки сайта по принципам UX/UI
1
Сбор информации
Брифинг
Какова задача сайта?
UX
Сколько должно быть страниц?
Какие стили или примеры дизайна
нравятся клиенту?
Что нужно показать обязательно на
сайте?
Интервью с клиентом
В
в
е
д
е
н
и
е

6.

Этапы разработки сайта по принципам UX/UI
Аналитика
2
UX
Целевая аудитория
Целевое действие ― это ключевое
действие пользователя на сайте или
в приложении, ради которого
создавался ресурс
Персона
Цели
1
Сбор
информации
Анализ сайтов
конкурентов
В
в
е
д
е
н
и
е

7.

Этапы разработки сайта по принципам UX/UI
3
Карта сайта
UX
Схема, включающая в себя
страницы сайта и логику
переходов между ними
1
2
Сбор
информации
Аналитика
В
в
е
д
е
н
и
е

8.

Этапы разработки сайта по принципам UX/UI
4
Референсы
UX
Идеи UX дизайна сайта
Идеи UI дизайна сайта
Moodboard
1
2
3
Сбор
информации
Аналитика
Карта
сайта
В
в
е
д
е
н
и
е

9.

Этапы разработки сайта по принципам UX/UI
UX
5
User flow
Схема движения пользователя, наглядный
разветвлённый сценарий его взаимодействия
с конкретным сайтом. Визуализация решения
определённой задачи или цели пользователя
1
2
3
4
Сбор
информации
Аналитика
Карта
сайта
Референсы
В
в
е
д
е
н
и
е

10.

Этапы разработки сайта по принципам UX/UI
Wireframes
6
UX
Схема с низким уровнем детализации,
которая визуализирует структуру
и содержание сайта
5
User flow
1
2
3
4
Сбор
информации
Аналитика
Карта
сайта
Референсы
В
в
е
д
е
н
и
е

11.

Этапы разработки сайта по принципам UX/UI
7
Прототип
UX
«Cкелет» сайта, в котором отмечают, какой
контент будет находиться на каждом экране,
а также продумывают логику взаимодействия
между элементами
5
6
User flow
Wireframes
1
2
3
4
Сбор
информации
Аналитика
Карта
сайта
Референсы
В
в
е
д
е
н
и
е

12.

Этапы разработки сайта по принципам UX/UI
8
UI дизайн
UI
Переход к разработке визуальной оболочки
сайта
Подбор фирменных шрифтов
и цветов
Разработка набора базовых
элементов сайта
5
6
7
User flow
Wireframes
Прототип
1
2
3
4
Сбор
информации
Аналитика
Карта
сайта
Референсы
Визуализация механики
взаимодействия
пользователя с интерфейсом
В
в
е
д
е
н
и
е

13.

UX UI
Этапы разработки сайта по принципам UX/UI
5
6
7
8
User flow
Wireframes
Прототип
UI дизайн
1
2
3
4
Сбор
информации
Аналитика
Карта
сайта
Референсы
В
в
е
д
е
н
и
е