Что такое прототип сайта, зачем он нужен и как его создать
Полностью разберемся в терминологии, способах и видах создания прототипов сайтов. Зачем они нужны, кому полезны и как с ними работают на нашем рынке. Поехали!
Что такое прототип сайта
Прототип это ранний этап разработки чего угодно. С прототипов начинаются и космические корабли и простые сайты и промышленные станки и чат-боты. Если кто-то думает иначе, то значит он не имел дело с проектами сложнее чем провести одну прямую линию.
Прототипом принято называть, по сути, что угодно, от текстового описания, до подробной схемы. От каракулей на листочке, до сложного кликабельного макета. Прототип сайта — это схематичное и/или текстовое описание разрабатываемого сайта. Идеальный прототип сайта содержит в себе и текст и картинки и может быть даже стрелочки и комментарии.
Первый шаг в создании сайта — это создание прототипа сайта. Не покупка домена или оплата хостинга. В самом начале вы должны себе ответить на вопрос “что будет на моем сайте и зачем он мне нужен?”. На этот вопрос можно отвечать разными способами, но создание прототипа это наиболее верный из них.
Подробнее про отличие прототипа от мокапа, вайрфрейма, майндмапа вы можете почитать в этой статье. Мы все описали с примерами и картинками.
Кто делает прототипы сайтов
У нас на российском рынке нет единого мнения о том, как именно должен выглядеть прототип и кто его должен создавать. Ну или не было, пока не появился наш сервис.
В ходе разработки нашего конструктора прототипов сайтов, мы общались с большим количеством людей и часто слышали самые разные мнения о том, кто именно должен заниматься созданием прототипа сайта. Кто-то считает, что копирайтеры, кто-то уверен, что дизайнеры. Ну а кто-то говорит, что заказчик. Бизнес аналитик, менеджер проектов, разработчик, SEOшник…
На самом же деле, не так важно кто конкретно занимается формализацией требований. Важно, чтобы по итогу требования все-же формализовались и на свет появилась вменяемая схема или набросок или хоть что-то, чтобы другим участникам процесса было легче работать над проектом.
Если идея сайта пришла вам в голову, то у вас есть несколько вариантов:
- Самому сесть и каким-то образом достать из головы все свои мысли на этот счет
- Обратиться к исполнителю, чтобы в диалоге с ним получилось родить хоть какие-то требования
- Отдать задачу на откуп профессионалу со словами “мне надо чтобы на сайте продавались бензопилы, я готов заплатить, предложи мне варианты”.
Все способы рабочие и какой из них подойдет именно вам — этого мы не знаем. Разница между пунктами в том, сколько у вас денег и времени и в том, на сколько вы дотошный человек.
Зачем нужен прототип сайта
Если вы дочитали до сюда и этот вопрос по прежнему не закрыт, то давайте разбираться.
Прототип сайта:
- Помогает сократить издержки на создание сайта.
- Ускоряет процесс разработки сайта и сокращает количество правок
- Уберегает от непредвиденных ошибок
- Бережет нервы (это не шутка, мы специально вынесли это в отдельный пункт)
У нас есть замечательная статья, которая отлично отвечает на вопрос “Зачем?”. Почему стоит начать разработку с прототипа.
Создание прототипа сайта
Можно выделить условные 4 шага, при создании сайта:
Шаг 1: Определение функциональности сайта
Первым шагом является определение функциональности сайта. Для нашего гипотетического агрегатора ресторанов сайта мы хотим добавить следующие функции:
- Поиск ресторанов по кухням
- Просмотр меню каждого ресторана
- Чтение отзывов о ресторанах
- Бронирование мест в ресторане
Выписываем их себе на листочек или запоминаем. Это все пригодится позже.
Шаг 2: Определение контента сайта
Далее необходимо определить контент сайта. Для нашего сайта мы будем использовать следующий контент:
- Фотографии ресторанов
- Меню ресторанов
- Отзывы о ресторанах
- Информацию о том, как забронировать место в ресторане
Шаг 3: Создание прототипа сайта
Открываем WebMaster и поехали! Вооружаемся информацией из прошлых пунктов и начинаем наносить это на прототип. Сначала создаем несколько дочерних страниц, потом наполняем их блоками и комментариями.
Шаг 4: Тестирование прототипа
После создания прототипа сайта необходимо провести тестирование, чтобы выявить потенциальные проблемы и исправить их. Этот шаг мало кто делает, но все-же, для некоторых продуктов, он очень важен. Например, если брать наш пример с агрегатором ресторанов, то точно нужно идти к потенциальной аудитории и спрашивать все ли им понятно. Про эти вопросы поговорим в другой статье.
Примеры прототипов, шаблоны, заготовки
Прототипы можно разделить на две группы:
- С высокой детализацией
- С низкой детализацией
Прототип с низкой детализацией можно назвать еще каркасом. Такой каркас, на который потом “натягивается” все остальное. Вот пример такого каркаса.
Прототип с высокой детализацией это скорее некий мокап, который и двигается и переливается. Но не обязательно. Вот такой прототип тоже можно назвать высоко детализированным, потому что тут есть и текст и картинки.
К слову, инструментов для прототипирования существует много и их, конечно, можно было бы перечислить. Все знают Figma, кто-то пользуется Axure. Но для российского рынка мы специально сделали свой конструктор прототипов, чтобы вам было комфортно создавать прототипы на русском языке и с возможностью оплаты в рублях.
Инструкция по пользованию WebMaster доступна по этой ссылке.
Если вы дочитали до сюда — значит вы действительно заинтересованы в создании прототипов сайтов и в визуализации своих будущих проектов. Дарим вам промокод на скидку 15% в сервисе WebMaster: PROTOTYPE. Просто вставьте его в поле промокода при регистрации или оплате.
