1. ЗАЧЕМ НУЖЕН
ПРОТОТИП САЙТА
Виды прототипов, кому выгодно работать
по прототипу, на что обратить внимание
Сергей Кондауров
facebook.com/SergeyDesigner
Активный участник
SPECIA

2. ПЛЮСЫ
Прототип повышает качество, скорость
и предсказуемость работы исполнителей
на следующих этапах

3. МИНУСЫ
Неправильный подход к созданию
прототипа рождает трататип —
бессмысленно выброшенные деньги
и время

4. Запомните,
Любой прототип отправится
в ведро

5. Прототип
ЭТО АНАЛИТИКА
Чтобы каждый элемент имел свое место,
не был забыт

6. Понять важность каждого
объекта на странице
1

7. 1 Понять важность каждого объекта на странице
В обсуждении
То, что на словах выглядит хорошо, в реализации
может оказаться не жизнеспособным, так как в уме
сложно представить все нюансы.

8. 1 Понять важность каждого объекта на странице
По описанию Упростили

9. 1 Понять важность каждого объекта на странице
При составлении ТЗ,
В ситуации, когда сначала рождается ТЗ,
проектировщиком становится менеджер проекта.

10. 1 Понять важность каждого объекта на странице
В составлении ТЗ
Проектировщиком должен быть проектировщик или
дизайнер.

11. 1 Понять важность каждого объекта на странице
В составлении ТЗ
Менеджер описывает в ТЗ то, что придумал
проектировщик.

12. Для обсуждения идей
с заказчиком
2

13. Для обсуждения 2 идей с заказчиком
Макеты обсуждать проще,
чем абстрактные описания

14. Для обсуждения 2 идей с заказчиком
ТЗ Прототип

15. Для обсуждения 2 идей с заказчиком
Клиенту понятнее что влечет
добавление каждой функции
Например, добавление функции
«Купить» — это не просто одна
кнопка «Купить» на сайте.

16. Для обсуждения 2 идей с заказчиком
Дешевле правки
Исключать и добавлять экраны после обсуждения с
клиентом прототипа дешевле, чем после обсуждения
отрисованных или уже рабочих страниц.

17. Проведение
тестирования
3

18. 3 Проведение тестирования
Прототипа достаточно
для первых исследований

19. 3 Понять необходимость наличия элементов

20. 3 Проведение тестирования
Дешевле внедрение
результатов тестирования
Исключать и добавлять экраны после обсуждения с
клиентом прототипа дешевле, чем после обсуждения
отрисованных или уже рабочих страниц.

21. Прототип
ЭТО ВАША ЗАЩИТА
от срыва сроков и нерентабельности

22. Дизайнерам легче
определиться с оценкой
1

23. Технологам легче
определиться с оценкой
2

24. Программистам легче
определиться с оценкой
3

25. Менеджеры получают
защиту рентабельности
4
Два договора: первый на прототип, второй
на разработку сайта

26. 5 Меньше правок
Клиент начинает управлять дизайнером,
когда не ясна ценность проделанной работы

27. Прототип
ЭТО УПРОЩЕНИЕ РАБОТЫ
дизайнеру, технологу, программисту, заказчику

28. Визуализация ТЗ
для дизайнера
1

29. 1 Визуализация ТЗ для дизайнера
Мозг дизайнера легче
считывает образы, а не буквы

30. 1 Визуализация ТЗ для дизайнера
Можно посмотреть
все страницы будущего сайта
и прикинуть стиль

31. 1 Визуализация ТЗ для дизайнера
Это шпаргалка — отрисовка
макета прямо поверх
прототипа

32. Визуализация ТЗ
для технолога
2

33. 2 Визуализация ТЗ для дизайнера
Возможность спрогнозировать,
где будут сложные места
и договориться с дизайнером,
чтобы избежать их

34. Визуализация ТЗ
для программиста
3

35. 3 Визуализация ТЗ для дизайнера
Возможность спрогнозировать,
где будут сложные места,
договориться с дизайнером и
технологом избежать их

36. Для обсуждения идей
с заказчиком
4

37. Для обсуждения 4 идей с заказчиком
Визуализация ТЗ
или его существенная часть
Клиент часто читает ТЗ поверхностно, некоторые
моменты для него становятся открытием
(ожидаемый результат)

38. Для обсуждения 4 идей с заказчиком
Визуализация ТЗ
или его существенная часть
Большее понимание текущего этапа работ
и демонстрируемого макета (понимает задачи каждого
блока, обсуждает работу инструментов, а не цвета)

39. КАКИЕ БЫВАЮТ
ПРОТОТИПЫ
Степени детализации и назначение

40. Идеальный прототип имеет
минимальную детализацию
достаточную для решения поставленных задач

41. 1 Набросок

42. 1 Набросок
Для обсуждения идей
внутри команды
Чаще всего используется для обсуждения идей
внутри команды.

43. 1 Набросок
Для обсуждения идей
внутри команды
Для обсуждения внутри команды важна скорость
создания, делается на листе бумаги или на доске

44. 1 Набросок

45. 1 Набросок

46. 1 Набросок

47. 1 Набросок
Для обсуждения идей
с клиентом
Чтобы визуализировать абстрактные пожелания
клиента и вести разговор на конкретных примерах.

48. 1 Набросок
Для обсуждения идей
с клиентом
Для обсуждения с клиентом делается в программе,
которая ближе к сердцу — Photoshop, Illustrator,
InDesign, Axure и т. д…

49. 1 Набросок

50. 1 Набросок

51. Средний
уровень детализации
2
для тестирования и составления
детального ТЗ

52. 2 Средний уровень детализации
Это наилучшее соотношение
цены и качества
Есть минимальный уровень интерактивности,
прорисованы самые важные страницы

53. 2 Средний уровень детализации

54. 2 Средний уровень детализации

55. 2 Средний уровень детализации

56. 2 Средний уровень детализации
Экономия времени на ТЗ
Экономия времени на написании подробного ТЗ,
которое все равно мало кто умеет читать

57. 2 Понять необходимость наличия элементов
ТЗ Прототип

58. 2 Средний уровень детализации
Возможность проведения
тестирований
Это тот минимальный уровень детализации, на
котором можно проводить тестирования

59. 3 «Почти готовый» продукт
Для сложных заказчиков
и исключительных ситуаций

60. 3 «Почти готовый» продукт
Прекрасное представление
каким будет финальный сайт
Когда клиент может воспринимать только примеры

61. 3 «Почти готовый» продукт

62. 3 «Почти готовый» продукт
Когда надо
продемонстрировать работу
сложного механизма
Когда описание вариантов занимает несколько
страниц А4

63. 3 «Почти готовый» продукт
Это дорогой подход
На его создание уходит много времени, но прототип
все равно отправляется в корзину

64. ЧТО ПЕРВЕЕ: ПРОТОТИП
ИЛИ ДИЗАЙН-КОНЦЕПЦИЯ

65. Прототип
если создатель прототипа — дизайнер сайта

66. Прототип
если поджимают сроки, а информацию по проекту
должен добыть проектировщик

67. Прототип
если дизайн разрабатывает другая компания

68. Дизайн
если проектировщик и дизайнер — разные люди

69. Дизайн
если есть время на согласование дизайн-концепции
и контроль прототипа дизайнером

70. Дизайн
если видения данного проектировщика
и арт-директора сильно отличаются

71. ВЫВОДЫ

72. Прототип — важный этап
в аналитике
Понять важность каждого 1 объекта на странице
2 Обсудить идеи с заказчиком
3 Провести юзабилити–тестирование

73. Прототип — ваша защита
1
Дизайнерам, технологам и программистам легче
определиться со сроками
Менеджерам — защита 2 от срыва сроков
3 Меньше правок

74. Прототип упрощает работу
Дизайнерам, технологам 1 и программистам
2 Легче обсуждать идеи с клиентом

75. Прототип бывает трех
уровней детализации
1 Набросок для обсуждения идей
2 Средний уровень детализации
3
Максимальный уровень детализации
для исключительных ситуаций

76. Что первее: прототип
или дизайн
Прототип — если сроки сжатые, за дизайн
отвечает тот же специалист или дизайн будет
разработан в другой компании
1
Дизайн — если позволяют сроки, за дизайн
и проектирование отвеют разные люди или
видение дизайна арт-директором отличается
2

77. СЕРГЕЙ КОНДАУРОВ
facebook.com/SergeyDesigner
Активный участник
SPECIA