63
Все что нужно знать о современном веб - дизайне

Все что нужно знать про современный веб-дизайн

  • Upload
    aic

  • View
    240

  • Download
    2

Embed Size (px)

Citation preview

Page 1: Все что нужно знать про современный веб-дизайн

Все что нужно знать о -современном веб-дизайне-

Page 2: Все что нужно знать про современный веб-дизайн

Кто эти люди?-

Сергей Попков- Виталий Черемисинов-дизайн- аналитика-

Page 3: Все что нужно знать про современный веб-дизайн

Кто эти люди?-

Проектирование и дизайн финансовых сервисов и сложных интернет проектов.-

финансы ит госсектор -телеком туризм стартапы-

Page 4: Все что нужно знать про современный веб-дизайн

Кто эти люди?-

50+- 15- 200+-сотрудников- лет опыта- проектов-

Умный дизайн и точка.-

Page 5: Все что нужно знать про современный веб-дизайн

Тинькофф-

Page 6: Все что нужно знать про современный веб-дизайн

Битрикс24-

Page 7: Все что нужно знать про современный веб-дизайн

Портал госуслуг-

Page 8: Все что нужно знать про современный веб-дизайн

И еще -масса интересного-www.aic.ru-

Page 9: Все что нужно знать про современный веб-дизайн

Тренды-

Page 10: Все что нужно знать про современный веб-дизайн

1. Material design -

Page 11: Все что нужно знать про современный веб-дизайн

2. Watch UI -

Page 12: Все что нужно знать про современный веб-дизайн

3. Еще проще и больше-

Page 13: Все что нужно знать про современный веб-дизайн

4. Карточки-

Page 14: Все что нужно знать про современный веб-дизайн

5. Лонгриды и сторителлинг-

Page 15: Все что нужно знать про современный веб-дизайн

6. Анимация-

Page 16: Все что нужно знать про современный веб-дизайн

7. Диетический гамбургер-

Page 17: Все что нужно знать про современный веб-дизайн

8. Отказ от фотографий-

Page 18: Все что нужно знать про современный веб-дизайн

Вернемся в реальность-

Page 19: Все что нужно знать про современный веб-дизайн

Закат эпохи -классического веб-дизайна-

Тени-Орнаменты-Коллажи- Фотобанки-

Page 20: Все что нужно знать про современный веб-дизайн

Новые возможности-

Photoshop vs. Sketch-

Visual Frameworks-

Icons Sets-

Шаблоны и готовые решения-

Page 21: Все что нужно знать про современный веб-дизайн

Как теперь думает дизайнер?-

•  простая идея-

•  логика-

•  легкое восприятие-

•  меньше вкусовщины, значит

быстрее-

КРАСОТА ЭТО — -

Page 22: Все что нужно знать про современный веб-дизайн

Как теперь думает заказчик?-

•  конверсия-

•  конверсия-

•  конверсия-

•  меньше вкусовщины, значит

дешевле-

КРАСОТА ЭТО — -

Page 23: Все что нужно знать про современный веб-дизайн

Реальность-•  Простая идея-

•  Правки, правки,

правки-

•  Низкая конверсия-

•  Долго, дорого …-

Page 24: Все что нужно знать про современный веб-дизайн

Реальность-

ЗАКАЗЧИКИ- ДИЗАЙНЕР-

أنـا ال أفـهـمـك

我不懂你

أنـا ال أفـهـمـكأنـا ال أفـهـمـك

Page 25: Все что нужно знать про современный веб-дизайн

Современный-процесс -по созданию-дизайна-

Page 26: Все что нужно знать про современный веб-дизайн

Аудит- Аналитика- Проектирование-

Дизайн- Тестирование- Петля улучшений-

Формируем новый процесс-

Page 27: Все что нужно знать про современный веб-дизайн

Учимся понимать-

Потребность- Дизайн-

Аудит-

Аналитика-

Проектирование-

Косметика-

Тестирование-

Улучшение-

ЗАКАЗЧИК-

Page 28: Все что нужно знать про современный веб-дизайн

Больше смысла-

•  Больше этапов-

•  Корректировка целей и задач заказчика -

•  Вовлечение заказчика с правильной стороны -

•  Снижение рисков-

Page 29: Все что нужно знать про современный веб-дизайн

Эволюция ролей-

ДИЗАЙНЕР- СУПЕРМЕН-

?-

Page 30: Все что нужно знать про современный веб-дизайн

Эволюция ролей-

ДИЗАЙНЕР-

ДИЗАЙНЕР-

ПРОЕКТИРОВЩИК-

АНАЛИТИК-

=

Page 31: Все что нужно знать про современный веб-дизайн

Эволюция ролей-

ДИЗАЙНЕР-

=

КРАСИВАЯ КАРТИНКА-

БЫЛО-

Page 32: Все что нужно знать про современный веб-дизайн

Эволюция ролей-

ДИЗАЙНЕР-

=КОНВЕРСИЯ-

СНИЖЕНИЕ ИЗДЕРЖЕК-

МНОГОКАНАЛЬНОСТЬ-

CRO, ROI, LTV -

ПЕРСОНАЛИЗАЦИЯ-

И Т. Д. -

СТАЛО-

Page 33: Все что нужно знать про современный веб-дизайн

LTV-

О чем все это?-

UI/UX Strategy-GUI-

CJM-IA- WA-

CTA-

Page 34: Все что нужно знать про современный веб-дизайн

•  Особенности целевой аудитории-

•  Какие основные косты терпит компания при работе-с пользователями-

•  Структура работы компании-

•  Как проходит цикл обработки клиента-

•  Какие есть технические и иные ограничения-

ЧТО НЕОБХОДИМО УЗНАТЬ? -Аудит-

Page 35: Все что нужно знать про современный веб-дизайн

Аудит

Page 36: Все что нужно знать про современный веб-дизайн

ЧЕРЕЗ СИСТЕМЫ АНАЛИТИКИ-Аналитика-

•  Конверсионные/навигационные воронки-

•  IN page данные-

•  Места и причины ухода-

•  CRO,ROI и т. п.-

•  Ошибки, которые возникают у пользователей-в момент взаимодействия-

Page 37: Все что нужно знать про современный веб-дизайн

ЧЕРЕЗ ОЧНЫЕ/ДИСТАНЦИОННЫЕ ИССЛЕДОВАНИЯ-Аналитика-

•  Интервью с пользователями-

•  Аудит особенностей работы с проектом-

•  Основные ошибки и барьеры-

•  Точки и причина ухода-

•  Отзывы и пожелания-

Page 38: Все что нужно знать про современный веб-дизайн

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

Page 39: Все что нужно знать про современный веб-дизайн

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

Page 40: Все что нужно знать про современный веб-дизайн

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

Page 41: Все что нужно знать про современный веб-дизайн

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

Page 42: Все что нужно знать про современный веб-дизайн

ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-

Page 43: Все что нужно знать про современный веб-дизайн

КЕЙС «ИНТЕРНЕТ-ПРОВАЙДЕР» -Аналитика-

•  Использование количественных данных-

•  Использование качественных данных-

Page 44: Все что нужно знать про современный веб-дизайн

Акценты на главной странице-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Page 45: Все что нужно знать про современный веб-дизайн

Аналитика этапа подключения услуги-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Page 46: Все что нужно знать про современный веб-дизайн

Аналитика этапа подключения услуги-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Page 47: Все что нужно знать про современный веб-дизайн

Ошибки на этапе-подключения-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Page 48: Все что нужно знать про современный веб-дизайн

Визуальные-акценты-

ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Page 49: Все что нужно знать про современный веб-дизайн

Пример карточек и скриннера-

ИСПОЛЬЗОВАНИЕ КАЧЕСТВЕННЫХ ДАННЫХ-

Аналитика-

Page 50: Все что нужно знать про современный веб-дизайн

ИТОГИ-

Аналитика-

Page 51: Все что нужно знать про современный веб-дизайн

НЕ ТОЛЬКО РАБОТА В AXURE -Проектирование-

•  Разработка информационной архитектуры-

•  Разработка сценариев поведения-

•  Разработка навигационных диаграмм и CJM-

•  Разработка интерактивных прототипов-

•  Тестирование прототипов-

Page 52: Все что нужно знать про современный веб-дизайн

КЕЙС «ИНТЕРНЕТ-БАНК» -Проектирование-

•  Прорабатываем гипотезы, которые хотим проверить-

•  Предлагаем пользователям выполнить основные действия и пройти основные навигационные сценарии на прототипе.-

•  Каждыи клик или движение мышки мы контролируем через аналитические инструмент-

Page 53: Все что нужно знать про современный веб-дизайн

ПРОГРЕСС ВЫПОЛНЕНИЯ ЗАДАНИЯ И БАРЬЕРЫ -

Проектирование-

Page 54: Все что нужно знать про современный веб-дизайн

НАВИГАЦИОННЫЕ ЦЕПОЧКИ -

Проектирование-

Page 55: Все что нужно знать про современный веб-дизайн

ВЗАИМОДЕИСТВИЕ -

Проектирование-

Page 56: Все что нужно знать про современный веб-дизайн

ЕЩЕ ЧУТЬ-ЧУТЬ … -Дизайн-

•  Подготовка референс-листов (и вот они тренды)*

•  Разработка «дизайн-концепции»-

•  Разработка файлов стилей (GUI)-

•  Технический дизайн или выбор готового framework-

•  Front-end-

Page 57: Все что нужно знать про современный веб-дизайн

Дизайн-

Page 58: Все что нужно знать про современный веб-дизайн

Дизайн-

Page 59: Все что нужно знать про современный веб-дизайн

Тестирование-

•  A/B тестирования-

•  MVT тестрования-

•  Очные и удаленные юзабилити-тестирования-

Page 60: Все что нужно знать про современный веб-дизайн

Тестирование-

+50%

Page 61: Все что нужно знать про современный веб-дизайн

Тестирование-

+17%

Page 62: Все что нужно знать про современный веб-дизайн

Тестирование-

+52%

Page 63: Все что нужно знать про современный веб-дизайн

Спасибо!-www.facebook.com/aic.ru-