Как теперь живется современному веб-дизайнеру? Какие тренды, перемены и прочие неожиданости стоит принять во внимание? Обо всем этом в нашей презентации.

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

2. Кто эти люди?-
Сергей Попков- Виталий Черемисинов-
дизайн- аналитика-

3. Кто эти люди?-
Проектирование и дизайн финансовых сервисов и
сложных интернет проектов.-
финансы ит госсектор -
телеком туризм стартапы-

4. Кто эти люди?-
50+- 15- 200+-
сотрудников- лет опыта- проектов-
Умный дизайн и точка.-

5. Тинькофф-

6. Битрикс24-

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

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

9. Тренды-

10. 1. Material design-

11. 2. Watch UI-

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

13. 4. Карточки-

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

15. 6. Анимация-

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

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

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

19. Закат эпохи -
классического веб-дизайна-
Тени-Орнаменты-Коллажи- Фотобанки-

20. Новые возможности-
Photoshop vs. Sketch-
Visual Frameworks-
Icons Sets-
Шаблоны и готовые решения-

21. Как теперь думает дизайнер?-
• простая идея-
• логика-
• легкое восприятие-
• меньше вкусовщины, значит
быстрее-
КРАСОТА ЭТО —-

22. Как теперь думает заказчик?-
• конверсия-
• конверсия-
• конверсия-
• меньше вкусовщины, значит
дешевле-
КРАСОТА ЭТО —-

23. Реальность-
• Простая идея-
• Правки, правки,
правки-
• Низкая конверсия-
• Долго, дорого …-

24. Реальность-
ЗАКАЗЧИКИ- ДИЗАЙНЕР-
‫أف"ه"م"ك‬ ‫ال‬ ‫أن"ا‬
我不懂你
‫أف"ه"م"ك‬ ‫ال‬ ‫أن"ا‬
‫أف"ه"م"ك‬ ‫ال‬ ‫أن"ا‬

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

26. Аудит- Аналитика- Проектирование-
Дизайн- Тестирование- Петля улучшений-
Формируем новый процесс-

27. Учимся понимать-
Потребность- Дизайн-
Аудит-
Аналитика-
Проектирование-
Косметика-
Тестирование-
Улучшение-
ЗАКАЗЧИК-

28. Больше смысла-
• Больше этапов-
• Корректировка целей и задач заказчика -
• Вовлечение заказчика с правильной стороны -
• Снижение рисков-

29. Эволюция ролей-
ДИЗАЙНЕР- СУПЕРМЕН-
?-

30. Эволюция ролей-
ДИЗАЙНЕР-
ДИЗАЙНЕР-
ПРОЕКТИРОВЩИК-
АНАЛИТИК-
=

31. Эволюция ролей-
ДИЗАЙНЕР-
=
КРАСИВАЯ КАРТИНКА-
БЫЛО-

32. Эволюция ролей-
ДИЗАЙНЕР-
=
КОНВЕРСИЯ-
СНИЖЕНИЕ ИЗДЕРЖЕК-
МНОГОКАНАЛЬНОСТЬ-
CRO, ROI, LTV-
ПЕРСОНАЛИЗАЦИЯ-
И Т. Д.-
СТАЛО-

33. LTV-
О чем все это?-
UI/UX Strategy-
GUI-
CJM-IA- WA-
CTA-

34. • Особенности целевой аудитории-
• Какие основные косты терпит компания при работе-
с пользователями-
• Структура работы компании-
• Как проходит цикл обработки клиента-
• Какие есть технические и иные ограничения-
ЧТО НЕОБХОДИМО УЗНАТЬ?-
Аудит-

35. Аудит

36. ЧЕРЕЗ СИСТЕМЫ АНАЛИТИКИ-
Аналитика-
• Конверсионные/навигационные воронки-
• IN page данные-
• Места и причины ухода-
• CRO,ROI и т. п.-
• Ошибки, которые возникают у пользователей-
в момент взаимодействия-

37. ЧЕРЕЗ ОЧНЫЕ/ДИСТАНЦИОННЫЕ ИССЛЕДОВАНИЯ-
Аналитика-
• Интервью с пользователями-
• Аудит особенностей работы с проектом-
• Основные ошибки и барьеры-
• Точки и причина ухода-
• Отзывы и пожелания-

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

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

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

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

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

43. КЕЙС «ИНТЕРНЕТ-ПРОВАЙДЕР»-
Аналитика-
• Использование количественных данных-
• Использование качественных данных-

44. Акценты на главной странице-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-

45. Аналитика этапа подключения услуги-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-

46. Аналитика этапа подключения услуги-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-

47. Ошибки на этапе-
подключения-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-

48. Визуальные-
акценты-
ИСПОЛЬЗОВАНИЕ КОЛИЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-

49. Пример карточек и скриннера-
ИСПОЛЬЗОВАНИЕ КАЧЕСТВЕННЫХ ДАННЫХ-
Аналитика-

50. ИТОГИ-
Аналитика-

51. НЕ ТОЛЬКО РАБОТА В AXURE-
Проектирование-
• Разработка информационной архитектуры-
• Разработка сценариев поведения-
• Разработка навигационных диаграмм и CJM-
• Разработка интерактивных прототипов-
• Тестирование прототипов-

52. КЕЙС «ИНТЕРНЕТ-БАНК»-
Проектирование-
• Прорабатываем гипотезы, которые хотим проверить-
• Предлагаем пользователям выполнить основные
действия и пройти основные навигационные сценарии на
прототипе.-
• Каждый клик или движение мышки мы контролируем
через аналитические инструмент-

53. ПРОГРЕСС ВЫПОЛНЕНИЯ ЗАДАНИЯ И БАРЬЕРЫ -
Проектирование-

54. НАВИГАЦИОННЫЕ ЦЕПОЧКИ -
Проектирование-

55. ВЗАИМОДЕЙСТВИЕ -
Проектирование-

56. ЕЩЕ ЧУТЬ-ЧУТЬ … -
Дизайн-
• Подготовка референс-листов (и вот они тренды)*
• Разработка «дизайн-концепции»-
• Разработка файлов стилей (GUI)-
• Технический дизайн или выбор готового framework-
• Front-end-

57. Дизайн-

58. Дизайн-

59. Тестирование-
• A/B тестирования-
• MVT тестрования-
• Очные и удаленные юзабилити-тестирования-

60. Тестирование-
+50%

61. Тестирование-
+17%

62. Тестирование-
+52%

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