Документ представляет информацию о проектировании сайтов и важных этапах этого процесса, включая описание целей, дизайн, верстку и продвижение. Автор делится практическими советами по исследованию потребностей целевой аудитории и созданию эффективных прототипов. Также обсуждается важность итеративного подхода к разработке сайтов и взаимодействия с командой.

1. Юрий Белканов, партнер
Проектирование
эффективных сайтов

2. Делаем качественные
маркетинговые исследования в
России и США
Изучаем поведение покупателей
Анализируем конкурентов
Оцениваем идеи
Тестируем интерфейсы
Описываем бизнес-процессы

3. Специализация — сложные продукты и услуги
Медицинские, юридические услуги
Оборудование
Автомобили

4. Цикл открытых лекций
Посмотреть прошлые на Youtube
Подписаться на будущие

5. О чем сегодня
Посмотрим в проблемы сайтостроения и некоторые способы их решения

6. Что нас к этому подтолкнуло
Мы делали сайты
Корпоративные
Посадочники
Сервисы

7. Что нас к этому подтолкнуло
Мы делали сайты
Много кто делает сайты
В России работают тысячи веб-студий

8. Что нас к этому подтолкнуло
Мы делали сайты
Много кто делает сайты
Вы сами можете сделать сайт
Блочные редакторы → Tilda.cc
Дилемма: дорого стоит то, что сделать
достаточно просто (как нам кажется)

9. Проблема
На деле выходит не всегда так, как хочется: не то, не так, дольше и дороже

10. О чем сегодня. Этапы разработки сайта
1. Описание целей и структуры
2. Проектирование и написание текстов
3. Дизайн
4. Верстка и программирование
5. Продвижение

11. О чем сегодня. Этапы разработки сайта
1. Описание целей и структуры
2. Проектирование и написание текстов
3. Дизайн
4. Верстка и программирование
5. Продвижение

12. О чем сегодня. Этапы разработки сайта
1. Описание целей и структуры
2. Проектирование и написание текстов
3. Дизайн
4. Верстка и программирование
5. Продвижение
Дизайн, разработка, аналитика пойдет как
по накатанной, если будет твердый
фундамент

13. Проблема

14. В начале проекта
С чего начать?

15. В начале проекта
С чего начать?
А что должно быть?

16. В начале проекта
С чего начать?
А что должно быть?
Что важно, что нет? Идей обычно больше, чем денег

17. В начале проекта
С чего начать?
А что должно быть?
Что важно, что нет? Идей обычно больше, чем денег
О чем писать?

18. В конце проекта (сайт готов)
О чем писать?
Когда начинают с программирования
Пример: сеть гипермаркетов

19. В конце проекта (сайт готов)
О чем писать?
Дизайн не тот, структура громоздкая

20. В конце проекта (сайт готов)
О чем писать?
Дизайн не тот, структура громоздкая
Не так работает
Особенно сервисы и приложения
Аэрофлот — ведь хотели как лучше

21. В конце проекта (сайт готов)
О чем писать?
Дизайн не тот, структура громоздкая
Не так работает
Никому не нужно
Люди не регистрируются, заявки не идут

22. В конце проекта (сайт готов)
О чем писать?
Дизайн не тот, структура громоздкая
Не так работает
Никому не нужно
А что дальше??
Из-за нужд SEO, аналитики, рекламных кампаний приходится переделывать
40–50% сайта. Переписывать тексты под ключевые слова, строить
посадочные страницы, настраивать целевые действия и кнопки

23. Как создать сайт, который
будет полезен бизнесу и клиентам,
и при этом не разориться?

24. Исследование — внятность
по содержанию и приоритетам
Решение

25. Исследование внутри: зачем компании сайт
Не всегда, «чтобы увеличивать продажи»
«Чтобы люди что..?» Какое полезное действие сайта?
Что он привносит в коммуникации, взаимодействие
с клиентами и не только?

26. Исследование внутри: целевые аудитории
Покупатели
Подобрать услугу или продукт
Скачать инструкцию

27. Исследование внутри: целевые аудитории
Покупатели
Партнеры
Скачать прайс или реквизиты
Проверить контрагента

28. Исследование внутри: целевые аудитории
Покупатели
Партнеры
Соискатели
Составить свое представление
о компании (HR-брендинг)

29. Исследование внутри: целевые аудитории
Покупатели
Партнеры
Соискатели
Сотрудники
Узнавать о новостях компании,
целях и направлении развития

30. Исследование внутри: целевые аудитории
Покупатели
Партнеры
Соискатели
Сотрудники
У каждого свои потребности в функционале и содержании

31. Исследование внутри: целевые аудитории
Вы не заставите людей пользоваться сайтом,
поэтому, он должен соответствовать их
потребностям
Привычкой «заставлять» часто грешат те, кто
много работает в прямых продажах, но здесь
совсем другой мир

32. Исследование снаружи: как понять потребности
аудитории
Поговорить с ними (в идеале, с открытым сайтом)
С каждым сегментом в отдельности

33. Исследование снаружи: вопросы
Зачем приходите на сайт?
Что именно интересует?
Почему это важно?

34. Исследование снаружи: вопросы
Зачем приходите на сайт?
Как ищете информацию на сайте?

35. Исследование снаружи: вопросы
Зачем приходите на сайт?
Как ищете информацию на сайте?
Какая информация нужна регулярно?

36. Исследование снаружи: вопросы
Зачем приходите на сайт?
Как ищете информацию на сайте?
Какая информация нужна регулярно?
Чего не хватает?

37. Исследование снаружи: вопросы
Зачем приходите на сайт?
Как ищете информацию на сайте?
Какая информация нужна регулярно?
Чего не хватает?
Примеры сайтов, где эта задача решена?

38. Проектирование — единое понимание
Решение

39. Важно добиться единого понимания
Что и как делаем
Бюджет и сроки

40. Важно добиться единого понимания
Что и как делаем
Бюджет и сроки
Чем сложнее сайт (сервис), тем детальнее

41. Три вида проектирования
Mindmap
Статический прототип
Динамический прототип

42. Mindmap

43. Mindmap
Видно структуру
Разделы и подразделы
Вложенность и взаимосвязь
Пути пользователя

44. Mindmap
Видно структуру
Видно блоки на страницах
О чем не забыть
Что выделить
О чем больше, о чем меньше
Еще не текст, но уже тезисы

45. Mindmap-сервисы
MindMeister
XMind
Freemind

46. Статический прототип

47. Статический прототип
Когда подойдет: страницы сложные,
элементов много, они не линейные →
Нужно нарисовать схематично
страницу, чтобы примерно прикинуть,
что где будет

48. Статический прототип
Когда подойдет: страницы сложные,
элементов много, они не линейные →
Нужно нарисовать схематично
страницу, чтобы примерно прикинуть,
что где будет
Но для этого уже нужна некоторая
насмотренность, чтобы определиться,
где какой блок использовать

49. Статический прототип
Когда подойдет: страницы сложные,
элементов много, они не линейные →
Нужно нарисовать схематично
страницу, чтобы примерно прикинуть,
что где будет
Но для этого уже нужна некоторая
насмотренность, чтобы определиться,
где какой блок использовать
Поможет дизайнеру — точно получите
то, что хотите. Дизайнер только
«добавит красок»

50. Интерактивный прототип
Пример: сервис авиа-билетов

51. Интерактивный прототип
Это история для сервисов и
нетиповых решений
Когда полезен. Надо очень
четко донести до команды, что
вы хотите и у них нет
референций, примеров — это
что-то совсем новое
Все понимают, какие примерно
бывают этажи на посадочных
страницах, как выглядит меню и
подвал

52. Интерактивный прототип
По сути, это визуализация не
сколько путей пользователя, а
бизнес-процессов
И здесь с большой вероятностью
потребуется проектировщик
интерфейса (либо это ваша
сильная компетенция)

53. Интерактивный прототип
Поможет разработчикам —
анимация, интерактив
Разработчики мыслят еще и
back-end структурами — так они
смогут прикинуть технические
решения, о которых вы и знать не
знаете

54. Итерационность — как следствие
исследования и проектирования
Решение

55. Когда вы четко понимаете, что важно,
а что нет, вы можете «нарезать» проект
на итерации — выпускать продукт по частям.
Сначала самое важное, потом менее

56. Пример: разработка сервиса для дилеров
Большой бизнес-процесс

57. Пример: разработка сервиса для дилеров
Большой бизнес-процесс
Проводим исследование — общаемся с пользователями

58. Пример: разработка сервиса для дилеров
Большой бизнес-процесс
Проводим исследование
Определяемся идти 2-месячными итерациями

59. Пример: разработка сервиса
для дилеров
Большой бизнес-процесс
Проводим исследование
Определяемся идти 2-месячными итерациями
Берем только кусочек

60. Смотреть на шаг вперед

61. Смотреть на шаг вперед
Самый главный вопрос — что мы сделаем, когда получим результат?

62. Смотреть на шаг вперед
Самый главный вопрос — что мы сделаем, когда получим результат?
Продвижение
Сразу поговорить с SEO-шниками
и специалистами по контексту

63. Смотреть на шаг вперед
Самый главный вопрос — что мы сделаем, когда получим результат?
Продвижение
Сразу поговорить с SEO-шниками
и специалистами по контексту
Определить страницы приземления,
ключевые слова, метрики и элементы конверсии

64. Смотреть на шаг вперед
Самый главный вопрос — что мы сделаем, когда получим результат?
Продвижение
Развитие
Дополнительные разделы и функционал

65. Смотреть на шаг вперед
Самый главный вопрос — что мы сделаем, когда получим результат?
Продвижение
Развитие
Дополнительные разделы и функционал
Изменения в содержании (статические и динамические страницы)

66. Смотреть на шаг вперед
Самый главный вопрос — что мы сделаем, когда получим результат?
Продвижение
Развитие
Дополнительные разделы и функционал
Изменения в содержании (статические и динамические страницы)
Не факт, что случится, но лучше команде об этом знать —
особенно технической. Сформулируйте хотя бы просто свои хотелки
и видение в отдельный документ

67. Резюмируем

68. Резюме
Проводите исследования
Зачем вам сайт?
Как мыслят ваши клиенты и какая информация им нужна?

69. Резюме
Проводите исследования
Делайте прототипы
Чем сложнее проект, тем точнее прототип
Важно добиться общего понимания и оценки
Прототип не должен занимать больше трети проекта

70. Резюме
Проводите исследования
Делайте прототипы
Запускайте сайт итерационно
Часть функционала доедет позже,
но уже можно будет пользоваться тем, что есть

71. Спасибо!
Приходите, проведем исследование
для вашего сайта или сервиса
Юрий Белканов, партнер