Прототип сайта: зачем он нужен и конечно пример

Давайте попробуем разобраться с прототипами сайта/сервиса и ответить на самые частые вопросы.

Что такое прототип сайта

Прототип сайта - это схематичное изображение основных блоков и элементов сайта для визуализации требований и ограничений технического задания на разработку сайта.

Хорошим тоном считается создание интерактивного прототипа, на которому эмулируются переходы по страницам будущего сайта, клики на кнопки и ссылки.

Кому нужен

Прототип нужен практически каждому участнику проекта: как представителям заказчика, так и сотрудникам исполнителя.

Ниже, приводим краткую таблицу самых частых специалистов и зачем именно им нужен прототип:

Кто Зачем нужен прототип именно ему

Заказчик

Получает осмысленное и нескучное (в отличии от текстового описания в ТЗ) представление о будущем внешнем виде сайта.

Осознает взаимосвязи между отдельными разделами и страницами сайта, элементами интерфейса.

Позволяет вынести на обсуждение новую идею или фичу без доработки технического задания (но если идея принимается, то ТЗ всё-таки расширяется).

Менеджер проекта

Сокращает время на согласование технического задания с заказчиком.

Экономит время команды проекта, а значит сокращаются расходы на разработку.

Дизайнер

Экономит время разработки дизайн-макетов: интерфейсные решения уже проработаны, остаётся поиграть с формой и цветом красного квадрата.

Позволяет точнее попасть в ожидания заказчика.

Верстальщик

Помогает отстоять то или иное интерфейсное решение “на бумаге”: изменять прототип проще, чем отрисовывать под каждую гипотезу новый дизайн-макет.

Программист

Помогает точнее оценить собственные трудозатраты на реализацию проекта.

Кто делает прототип

Разработку прототипа ведёт исполнитель, при этом в процесс очень желательно привлечь костяк будущей команды проекта и обязательно заказчика.

Непосредственно “руками” работает как правило менеджер проекта, но сейчас уже складывается хорошая практика передачи этой работы дизайнеру интерфейсов.

Какую программу использовать для разработки прототипа

Для создание прототипа подходит огромное количество инструментов, хоть MS Paint. По сути весь прототип - это набор картинок.

Частые гости на столе разработчика прототипа:

Кто/Что Плюсы Минусы

Adobe Photoshop

Много кто умеет работать в фотошопе

Большое сообщество

Не предназначен для разработки прототипов

Платный

Axure

Крепкий проверенный инструмент

Предназначен для создания прототипов

Умеет создавать интерактивные прототипы

Умеет хранить прототипы “в облаке”

Большое сообщество

Платный, но есть триал-версия

Средний порог входа

Figma

Умеет создавать интерактивные прототипы

Умеет хранить данные “в облаке”

Огромная библиотека расширений и плагинов

Возможна и крайне рекомендована совместная работа

Большое сообщество

Относительно новый инструмент

Базово не предназначен для создания прототипов

Пример прототипа

Как обещали выше - ниже вы можете ознакомиться с прототипом, созданном в Figma.

Обратите внимание на детализацию: при работе над прототипом желательно использовать максимально реальный контент, но при этом не скатиться в создание дизайн-макета.

Пример прототипа корзины

Последние работы

Сделано с любовью