Все что нужно знать про современный веб-дизайн
TRANSCRIPT
![Page 1: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/1.jpg)
Все что нужно знать о -современном веб-дизайне-
![Page 2: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/2.jpg)
Кто эти люди?-
Сергей Попков- Виталий Черемисинов-дизайн- аналитика-
![Page 3: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/3.jpg)
Кто эти люди?-
Проектирование и дизайн финансовых сервисов и сложных интернет проектов.-
финансы ит госсектор -телеком туризм стартапы-
![Page 4: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/4.jpg)
Кто эти люди?-
50+- 15- 200+-сотрудников- лет опыта- проектов-
Умный дизайн и точка.-
![Page 5: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/5.jpg)
Тинькофф-
![Page 6: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/6.jpg)
Битрикс24-
![Page 7: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/7.jpg)
Портал госуслуг-
![Page 8: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/8.jpg)
И еще -масса интересного-www.aic.ru-
![Page 9: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/9.jpg)
Тренды-
![Page 10: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/10.jpg)
1. Material design -
![Page 11: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/11.jpg)
2. Watch UI -
![Page 12: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/12.jpg)
3. Еще проще и больше-
![Page 13: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/13.jpg)
4. Карточки-
![Page 14: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/14.jpg)
5. Лонгриды и сторителлинг-
![Page 15: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/15.jpg)
6. Анимация-
![Page 16: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/16.jpg)
7. Диетический гамбургер-
![Page 17: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/17.jpg)
8. Отказ от фотографий-
![Page 18: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/18.jpg)
Вернемся в реальность-
![Page 19: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/19.jpg)
Закат эпохи -классического веб-дизайна-
Тени-Орнаменты-Коллажи- Фотобанки-
![Page 20: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/20.jpg)
Новые возможности-
Photoshop vs. Sketch-
Visual Frameworks-
Icons Sets-
Шаблоны и готовые решения-
![Page 21: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/21.jpg)
Как теперь думает дизайнер?-
• простая идея-
• логика-
• легкое восприятие-
• меньше вкусовщины, значит
быстрее-
КРАСОТА ЭТО — -
![Page 22: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/22.jpg)
Как теперь думает заказчик?-
• конверсия-
• конверсия-
• конверсия-
• меньше вкусовщины, значит
дешевле-
КРАСОТА ЭТО — -
![Page 23: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/23.jpg)
Реальность-• Простая идея-
• Правки, правки,
правки-
• Низкая конверсия-
• Долго, дорого …-
![Page 24: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/24.jpg)
Реальность-
ЗАКАЗЧИКИ- ДИЗАЙНЕР-
أنـا ال أفـهـمـك
我不懂你
أنـا ال أفـهـمـكأنـا ال أفـهـمـك
![Page 25: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/25.jpg)
Современный-процесс -по созданию-дизайна-
![Page 26: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/26.jpg)
Аудит- Аналитика- Проектирование-
Дизайн- Тестирование- Петля улучшений-
Формируем новый процесс-
![Page 27: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/27.jpg)
Учимся понимать-
Потребность- Дизайн-
Аудит-
Аналитика-
Проектирование-
Косметика-
Тестирование-
Улучшение-
ЗАКАЗЧИК-
![Page 28: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/28.jpg)
Больше смысла-
• Больше этапов-
• Корректировка целей и задач заказчика -
• Вовлечение заказчика с правильной стороны -
• Снижение рисков-
![Page 29: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/29.jpg)
Эволюция ролей-
ДИЗАЙНЕР- СУПЕРМЕН-
?-
![Page 30: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/30.jpg)
Эволюция ролей-
ДИЗАЙНЕР-
ДИЗАЙНЕР-
ПРОЕКТИРОВЩИК-
АНАЛИТИК-
=
![Page 31: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/31.jpg)
Эволюция ролей-
ДИЗАЙНЕР-
=
КРАСИВАЯ КАРТИНКА-
БЫЛО-
![Page 32: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/32.jpg)
Эволюция ролей-
ДИЗАЙНЕР-
=КОНВЕРСИЯ-
СНИЖЕНИЕ ИЗДЕРЖЕК-
МНОГОКАНАЛЬНОСТЬ-
CRO, ROI, LTV -
ПЕРСОНАЛИЗАЦИЯ-
И Т. Д. -
СТАЛО-
![Page 33: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/33.jpg)
LTV-
О чем все это?-
UI/UX Strategy-GUI-
CJM-IA- WA-
CTA-
![Page 34: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/34.jpg)
• Особенности целевой аудитории-
• Какие основные косты терпит компания при работе-с пользователями-
• Структура работы компании-
• Как проходит цикл обработки клиента-
• Какие есть технические и иные ограничения-
ЧТО НЕОБХОДИМО УЗНАТЬ? -Аудит-
![Page 35: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/35.jpg)
Аудит
![Page 36: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/36.jpg)
ЧЕРЕЗ СИСТЕМЫ АНАЛИТИКИ-Аналитика-
• Конверсионные/навигационные воронки-
• IN page данные-
• Места и причины ухода-
• CRO,ROI и т. п.-
• Ошибки, которые возникают у пользователей-в момент взаимодействия-
![Page 37: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/37.jpg)
ЧЕРЕЗ ОЧНЫЕ/ДИСТАНЦИОННЫЕ ИССЛЕДОВАНИЯ-Аналитика-
• Интервью с пользователями-
• Аудит особенностей работы с проектом-
• Основные ошибки и барьеры-
• Точки и причина ухода-
• Отзывы и пожелания-
![Page 38: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/38.jpg)
ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-
![Page 39: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/39.jpg)
ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-
![Page 40: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/40.jpg)
ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-
![Page 41: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/41.jpg)
ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-
![Page 42: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/42.jpg)
ПОРТРЕТЫ ЦЕЛЕВЫХ ПОЛЬЗОВАТЕЛЕЙ-Аналитика-
![Page 43: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/43.jpg)
КЕЙС «ИНТЕРНЕТ-ПРОВАЙДЕР» -Аналитика-
• Использование количественных данных-
• Использование качественных данных-
![Page 44: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/44.jpg)
Акценты на главной странице-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-
![Page 45: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/45.jpg)
Аналитика этапа подключения услуги-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-
![Page 46: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/46.jpg)
Аналитика этапа подключения услуги-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-
![Page 47: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/47.jpg)
Ошибки на этапе-подключения-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-
![Page 48: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/48.jpg)
Визуальные-акценты-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-
![Page 49: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/49.jpg)
Пример карточек и скриннера-
ИСПОЛЬЗОВАНИЕ КАЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-
![Page 50: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/50.jpg)
ИТОГИ-
Аналитика-
![Page 51: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/51.jpg)
НЕ ТОЛЬКО РАБОТА В AXURE -Проектирование-
• Разработка информационной архитектуры-
• Разработка сценариев поведения-
• Разработка навигационных диаграмм и CJM-
• Разработка интерактивных прототипов-
• Тестирование прототипов-
![Page 52: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/52.jpg)
КЕЙС «ИНТЕРНЕТ-БАНК» -Проектирование-
• Прорабатываем гипотезы, которые хотим проверить-
• Предлагаем пользователям выполнить основные действия и пройти основные навигационные сценарии на прототипе.-
• Каждыи клик или движение мышки мы контролируем через аналитические инструмент-
![Page 53: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/53.jpg)
ПРОГРЕСС ВЫПОЛНЕНИЯ ЗАДАНИЯ И БАРЬЕРЫ -
Проектирование-
![Page 54: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/54.jpg)
НАВИГАЦИОННЫЕ ЦЕПОЧКИ -
Проектирование-
![Page 55: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/55.jpg)
ВЗАИМОДЕИСТВИЕ -
Проектирование-
![Page 56: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/56.jpg)
ЕЩЕ ЧУТЬ-ЧУТЬ … -Дизайн-
• Подготовка референс-листов (и вот они тренды)*
• Разработка «дизайн-концепции»-
• Разработка файлов стилей (GUI)-
• Технический дизайн или выбор готового framework-
• Front-end-
![Page 57: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/57.jpg)
Дизайн-
![Page 58: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/58.jpg)
Дизайн-
![Page 59: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/59.jpg)
Тестирование-
• A/B тестирования-
• MVT тестрования-
• Очные и удаленные юзабилити-тестирования-
![Page 60: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/60.jpg)
Тестирование-
+50%
![Page 61: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/61.jpg)
Тестирование-
+17%
![Page 62: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/62.jpg)
Тестирование-
+52%
![Page 63: Все что нужно знать про современный веб-дизайн](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a865d11a28ab04408b4691/html5/thumbnails/63.jpg)
Спасибо!-www.facebook.com/aic.ru-