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

16.08.2021

Ольга Коцофане

Разработка сайтов начинается с создания прототипов. Это схематичные планы, в которых отображается расположение блоков и основных элементов. С их помощью заказчикам проще составлять ТЗ и выражать свои мысли, а веб-мастерам — оценивать стоимость работы. 

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

Содержание:

1. Разновидности прототипов и задачи, которые они решают

2. Функции прототипов для заказчиков и разработчиков

3. Цели и способы создания макетов сайта

• От руки
• Программное обеспечение
• Онлайн-сервисы
• Использование готовых вариантов

4. Выводы

Разновидности прототипов и задачи, которые они решают

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

1. Low-fidelity. 

Простой вариант, оформляемый в виде черно-белых схем. Помечаются только элементы, на которых нужно акцентировать внимание.

Особенности:

• Создание прототипа сайта осуществляется вручную или с помощью графических редакторов. 
• Заказчик видит общий функционал сайта, без визуализации контента. 
• Плюс такого формата — в скорости создания: даже при большом количестве блоков на прототипирование сайта уходит несколько дней. Он нужен в первую очередь для оценки юзабилити будущих страниц.

Пример макета сайта в виде скетча:

2. High-fidelity. Более функциональные прототипы лендингов или многостраничных сайтов. Позволяют представить заказчику полную визуализацию всех страниц. Схематичные квадраты заменяются на полноценные блоки с изображениями и ориентировочным контентом. Особенности:

• Для создания используются онлайн-сервисы или специализированное ПО. Макет включает в себя полную иерархию страниц, благодаря этому можно реализовать подробный прототип интернет магазина или информационного блога. 
• Применение таких макетов позволяет оценить объём работы и определиться со структурой. Поэтому они в первую очередь нужны исполнителям.
• Разработка занимает больше времени, по сравнению с предыдущим вариантом. 

Пример прототипа сайта High-fidelity, созданного в Figma:

Несмотря на то, что создание макета сайта занимает время (в среднем от 1 до 10 дней), оно ускоряет процесс разработки. Предварительная визуализация будущего проекта позволяет избежать ошибок и постоянных правок со стороны заказчика. Это облегчает работу back-end программистов и дизайнеров.

Задачи, которые решают прототипы

• Ускоряют создание сайтов, т. к. у разработчиков появляется четкий план действий.
• Облегчают взаимодействие между заказчиком и исполнителем. Клиенту проще выражать свои пожелания, проект-менеджерам — формировать задачи.
• Позволяют реализовывать сложные и нетривиальные проекты.
• Заказчик сразу получает итоговую стоимость проекта (без последующих наценок) и сроки его реализации.

Функции прототипов для заказчиков и разработчиков

Большинство клиентов веб-студий не представляют, каким должен быть их сайт. Они руководствуются исключительно субъективным моментами (цветовая гамма, пример Landing Page конкурента и т. д.).

Функции создания макета сайта онлайн

• Визуализация идей заказчика. Позволяет посмотреть на конкретном примере, как сочетаются цвета, выглядят выбранные изображения вместе с логотипом и т. д.
• Оценка, как будет выглядеть сайт для целевой аудитории бизнеса. При наличии «теплой» клиентской базы заказчик может спросить мнение ЦА.
• Определение стоимости и сроков работ. Распространенная проблема, когда в процессе создания повышается цена проекта (добавляются новые элементы, функции, изменения front-end и т. д.). Создав прототип сайта, разработчики могут определиться с дедлайном и прайсом. Это предотвращает ситуацию, когда ожидания клиента не совпадают с его возможностями.

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

Функции прототипов для разработчиков

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

Прототипы страниц выполняют и другие функции:

• Возможность корректировки локальных задач. Например, дизайнер может менять расположение блоков без необходимости создавать новую задачу back-end программистам. Если используется макет сайта онлайн, к нему есть доступ у всех разработчиков.
• Упрощает работу с возражениями клиентов. Устные договоренности не имеют ценности. Бывают ситуации, когда на финальной стадии разработки заказчик требует внести корректировки, не соответствующие принятому ТЗ. Когда все пожелания занесены в макет, подобных ситуаций не случается.
• Повышение доверия со стороны заказчиков. Структурированный макет подтверждает профессионализм разработчиков.
• Возможность воплощать в жизнь нестандартные идеи. Так, онлайн прототипы позволяют дизайнерам и верстальщикам совместно корректировать юзабилити, отходя от шаблонных структур.

Для руководителей веб-студий и проект-менеджеров прототипирование сайтов — это инструмент, с помощью которого проще контролировать работу сотрудников. Следование макету — практически 100% гарантия отсутствия правок на финальных этапах разработки.

Цели и способы создания макетов сайта

Перед тем как сделать макет сайта, нужно определиться, для каких целей он создается.

• Определение расположения блоков на странице.
• Систематизация структуры всего сайта, составление иерархии страниц. 
• Визуализация, т. е. составление подробного плана, в котором указано расположение основных элементов.

Если задача состоит в определении структуры страниц, подойдут варианты категории Low-fidelity. Если же требуется визуализация, рациональнее создать подробный макет в приложении или через онлайн-сервисы. Рассмотрим все варианты.

От руки

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

Как сделать прототип сайта на бумаге? Четких требований нет, главное, чтобы схема была понятна всем сторонам (клиенту, менеджеру проекта и исполнителям). Если вам нужен базовый прототип сайта, пример можно сделать на листе формата А4 или ватмане (если речь идет о многостраничном сайте).

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

Программное обеспечение

На этапах первичной разработки используют программы для прототипирования сайта. Они обладают обширным функционалом, позволяют прорабатывать структуру будущего проекта. Создаваемые макеты легко верстать и переносить во фреймворк.  Приведем 3 популярных в странах СНГ приложения, которыми пользуются разработчики.

Adobe Photoshop – функциональный графический редактор. Несмотря на появление других программ, остается незаменимым инструментом для дизайнеров. Если вы составляете прототипы сайтов, примеры в Фотошопе будут достаточно подробными и иллюстративными.

Плюсы:

• Для использования не требуется наличие интернета.
• Есть бесплатные версии (в т. ч. пиратские).
• Поддержка всех графических форматов

Минусы:

• Приложение потребляет много оперативной памяти (ОЗУ), на офисных ПК или ноутбуках работает с перебоями.
• Чтобы разобраться в функционале, потребуются десятки часов.

Axure RP — профессиональная программа для прототипов приложений и сайтов. Возможностей для визуализации минимум, поэтому ее применяют при создании Low-fidelity макетов.

Плюсы:

• Расположение элементов меняется путем перетаскивания, что экономит время.
• Можно сделать кликабельный макет (так заказчику будет проще оценить юзабилити).
• Создание интерактивных макетов.

Минусы:

• Минимальный тариф — 25 долларов в месяц. Trial-версия предоставляется всего на 30 дней.
• Отсутствует встроенный графический редактор, для создания визуализации (баннеры, логотипы) приходится использовать другое ПО.

Figma — профессиональная программа для прототипирования веб-сайтов, которые легко переносятся во фреймворк. Векторный редактор позволяет экспортировать созданные файлы практически в любые форматы. Количество графических инструментов сопоставимо с Adobe Photoshop.

Плюсы:

• Есть бесплатная версия, ее достаточно для небольших веб-студий. Платные тарифы дешевле по сравнению со многими аналогами.
• Доступны сотни плагинов.

Есть онлайн-версия, то есть прототип сайта может быть интерактивным.

Минусы:

•  В интерфейсе отсутствует русский язык.

Онлайн-сервисы

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

Draftium — сервис для создания прототипов сайтов онлайн. Пользователям доступна база из сотен готовых шаблонов, которые можно редактировать с помощью встроенного конструктора. Доступ к полной версии обойдется в 99 долларов за год.

Плюсы:

• Простой интерфейс.
• Готовые шаблоны адаптированы под все устройства.
• Высокая скорость работы (при интернете 100 Мб).

Минусы:

• В бесплатной версии всего 50 шаблонов.
• На сайте нет русского языка.

Wireframe — онлайн-конструктор для создания Low-fidelity проектов. Интерфейс сервиса предельно прост — пользователь рисует блоки посредством стандартных инструментов (как в Paint).

Плюсы:

• Чтобы разобраться с интерфейсом хватит 10–15 минут.
• Сервис не требователен к «железу», работает даже при небольшом (2–3 Гб) размере оперативной памяти.

Минусы:

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

Marvel — функциональный онлайн-сервис с десятками инструментов визуализации. С его помощью можно создавать масштабные проекты, готовые для переноса во фреймворк.

Плюсы:

• Пользователям платных тарифов доступны сотни готовых шаблонов.
• Функциональный графический редактор.
• Наличие бесплатной версии с базовым функционалом.

Минусы:

• Относительно сложный интерфейс.
• Нет поддержки русского языка.

Использование готовых вариантов

В условиях дефицита времени можно использовать готовые прототипы сайтов. Они бывают двух типов:

• Личные — разработанные для конкретного проекта. На них содержится контактная информация и другие сведения. Шаблоны подвергаются минимальной редактуре, в ходе которой корректируются только контент и коммерческая информация (контакты, цены, продукты, КП). Структура и стиль визуализации остаются неизменными. Этот прототип сайта подходит, если нужно быстро и с минимальными правками реализовать проект. 
• Готовые – шаблоны, на которых минимум информации. Их можно назвать основой прототипа, т. к. для использования требуется редактура. Подходят для небольших веб-студий или начинающих дизайнеров, которым приходится создавать много однотипных Landing Page.

Выводы

1. Прототипирование в дизайне – одно из важнейших направлений, от которого зависит успех проекта. Создание макетов можно сравнить с возведением фундамента при строительстве дома.
2. Прототипы решают ряд задач — от повышения скорости разработки до возможности реализации сложных проектов.
3. Наличие макета позволяет заказчику оперативно вносить правки по ходу разработки проекта. Для этого создаются интерактивные прототипы. Клиент может открыть макет и внести комментарии.
4. Для команды разработчиков наличие макета облегчает процесс ведения проекта. Создав макет сайта, проще делегировать и распределять задачи. Дизайнеры, программисты и верстальщики четко видят конечный результат, могут взаимодействовать между собой.
5. Среди целей создания сайта выделяют расположения блоков на странице, систематизацию структуры всего сайта, визуализацию, т. е. составление подробного плана. Существует 4 способа создания макета сайта: от руки, с помощью программ, онлайн-сервисов или готовых шаблонов.

Также читайте другие статьи в блоге Webpromo:

• 7 рекомендаций по составлению UTM-меток. Виды, способы использования, полезные UTM-генераторы;
• Как создать и использовать воронки продаж в маркетинге? Отслеживаем в Google Analytics;
• Как делать YouTube-рекламу: 5 рекомендаций по улучшению стратегии от Бена Джонса.

И подписывайтесь на наш Telegram-канал про маркетинг.