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

Когда студия получила всю необходимую информацию по проекту, она переходит к 1-му этапу разработки — прототипированию сайта. Это процесс создания прототипов, где закладываются основные смыслы, визуал и кнопки. Проще говоря чёрно-белый вариант будущей страницы сайта без дизайна, но с основными функциональными возможностями и текстом.

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

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

Прототипы сайтов помогают команде разработчиков:

• структурировать и визуализировать информацию и запросы клиента
• показать заказчику, какой путь будет проходить пользователь
• сократить количество правок
• заложить визуальную составляющую
• показать элементы интерфейса: кнопки, корзина, триггеры или онлайн-оплата

Макеты могут быть разные в зависимости от задачи сайта, внутренних порядков студии или условий фрилансера. Это может быть как и просто лист А4 с основными блоками и кнопками, так и детализированный прототип с текстом, формами и интернет-магазином.

Его обычно используют для того, чтобы задать основное направление страницы и построить пользовательский путь. На листе можно отобразить блоки, расположение визуала и кнопки. Для того, чтобы разработать такой макет достаточно просто взять ручки или карандаш и лист А4.

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

Для того чтобы завернуть задумки и гипотезы в цифровой формат, достаточно создать LoFi Wireframe или макет с низкой детализацией.

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

Когда важно показать заказчику не только смыслы, структуру и кнопки исполнитель детально прорабатывает каркас сайта. Здесь уже в работе используют и текст, и визуал. Над таким макетом, как правило, работают и копирайтер, и дизайнер.

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

Макет, который больше похож на скриншот, с ним нельзя взаимодействовать, и на нём отсутствуют кликабельные элементы.

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

Вид макета, где проработано практически всё: текст, элементы дизайна, кнопки, формы и иногда адаптив на все устройства.

На этом прототипе заказчик уже может увидеть готовый сайт, где работают основные элементы дизайна: анимация или другие визуальные эффекты. А ещё посмотреть, как работают интерактивные составляющие, например, слайдер или карточки товара, попадают ли они в корзину при нажатии на кнопку «Оформить заказ».

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

Когда заказчик только заходит к исполнителю, он рассказывает, каких целей хочет достигнуть с помощью сайта.

Какие бывают задачи:

• продажа продукта или е-commerce, для этого команда должна продумать каталог и онлайн-оплату
• лидогенерация, когда пользователи должны оставлять данные для получения услуги
• презентация или промо продукта или услуги, тут исполнителям нужно продумать, как последовательно расположить блоки
• сайт-визитка, где студия должна презентовать компанию
• информирование или повышение спроса на продукт компании, где важно создать условия, при которых пользователь находит решение своих задач

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

Этот шаг нужен для того, чтобы превратить идею и задачу в готовое решение, а после разработки прототипа, копирайтинга и дизайна, его опробовать на деле.

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

Исполнитель думает, что этот элемент должен повысить продаваемость продукта, потому что клиент будет получать итоговую стоимость торта при общении с менеджером, а не отвечать на вводные вопросы.

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

Исследование может выглядеть следующим образом: заказчик приходит к студии с текущим сайтом юридических услуг и предоставляет команде доступы к метрикам. Исполнитель анализирует страницу и изучает данные метрик.

Во время этого шага создания сайта исполнитель рассказывает заказчику, почему текущая страница не закрывает задачи бизнеса. Это может быть потому, что на текущей странице стоят шаблонные кнопки по типу «Свяжитесь со мной», которые не дают конкретики пользователю и он не понимает, что произойдёт после того, как он оставит заявку.

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

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

После того, как команда получает всю необходимую информацию, она уходит на этап прототипирования.

Когда исполнитель проработал нужную последовательность блоков, предусмотрел визуал и кнопки, макет обрастает остальными деталями сайта.

Первое, что добавляется на макет — текст. Копирайтер наполняет блоки текстом, прописывает формы захвата и кнопки.

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

Конечно, можно предоставить заказчику прототип на листочке, но это может показать непрофессиональность и отпугнуть клиента. Поэтому стоит обратить внимание на инструменты, которые помогут в прототипировании.

Удобный сервис, в котором можно наглядно показать, как будет выглядеть структура будущего сайта. Его можно использовать как онлайн-сервис или же скачать и работать над проектом внутри приложения. В Figme обычно работают более продвинутые специалисты. Для того, чтобы освоить этот сервис потребуется время.

Этот инструмент более простой в использовании, но и позволяет разрабатывать однообразные прототипы. Для того, чтобы разобраться в сервисе достаточно 10 минут, это обеспечивается благодаря нативному интерфейсу. С помощью этого решения можно проработать даже самый сложный по функциональным возможностям сайт.

Решение для прототипирования, которое подойдёт только обладателям MacOS. С ним можно детально прорабатывать макеты в векторной графике.

Сервис из семейства Adobe поможет собрать качественный интерактивный прототип. Единственный нюанс работы над сайтом в этом инструменте состоит в том, что он платный.

Такая связка выступает, как своего рода чемодан с инструментами. Использовать его стоит хотя бы с минимальными знаниями в дизайне, а если таких нет, лучше выбрать более простой в использовании сервис.

Поможет разработать прототипы даже для объёмных многостраничников. Этот сервис может предоставить больше 600 шаблонов и больше 1 000 готовых блоков для сайта.

Этот инструмент позволит разработать как большой портал, так и небольшой сайт-визитку без углублённых знаний в дизайне.

Тяжёловесный сервис для прототипирования. На котором можно разрабатывать интерактивные макеты любой сложности от 1-страничной посадочной страницы до интернет-порталов.

Минималистичный интерфейс, добавление комментариев к интерфейсу, использование горячих клавиш и шаблоны окна браузера — это всё объединяет в себе этот сервис. Его выбирают многие разработчики с опытом.

Инструмент, который предлагает воспользоваться небольшим набором шаблонных блоков или разрабатывать прототипы с 0.

Здесь есть встроенные подсказки, с которыми может разобраться даже непрофессионал. У этой платформы есть как платные и бесплатные тарифы.

Платная платформа, где разработчики могут выбирать 2 пути прототипирования: использовать шаблон или делать структуру с нуля.

У него есть немного инструментов взаимодействия и нестандартные элементы интерфейса.

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

1 этап разработки — детальное изучение брифа, анализ конкурентов и ниши.

2 этап — выстраивание примерной структуры с основными смыслами и визуалом.

3 этап — доработка костяка сайта, прописывание основных смыслов в блоках.

4 этап — копирайтинг по структуре, создание форм захвата и кнопок.

5 этап — презентация прототипа заказчику.

Макет — инструмент, который помогает исполнителю и заказчику отсеять основные правки ещё на берегу и не возвращаться к комментариям по структуре или тексту на этапе дизайна.

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