Главная » Блог » CRO | Юзабилити и повышение конверсии сайта » Как создать прототип сайта на бумаге, в программе или онлайн. Для чего он вам нужен?

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

16.08.2021

Оксана Харьковчук, редактор блога Webpromo


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

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

Содержание:

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

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

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

4. Выводы

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



 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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



 

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

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

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

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

От руки

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

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

Пример прототипа лендинга, созданного ручкой

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

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

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

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

Плюсы:

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

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

Минусы:

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

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

Плюсы:

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

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

Минусы:

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

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

Плюсы:

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

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

Минусы:

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

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



 

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

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

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

Плюсы:

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

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

Минусы:

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

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

Плюсы:

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

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

Минусы:

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

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

Плюсы:

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

Минусы:

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

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

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

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

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

 

Выводы

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

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



 

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

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

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

Основные преимущества “real-time” маркетинга для руководителей отдела

Исследование Capgemini доказало основные преимущества...

Основные преимущества “real-time” маркетинга для руководителей отдела

Сезонная реклама: 7 советов для успешного запуска

Сезонная реклама: 7 советов для успешного запуска

Основные инструменты сезонной рекламы. 7 действенных советов для успешного запуска осенней кампании.

Конверсия продаж онлайн и офлайн: простая формула + пример расчета

Конверсия продаж онлайн и офлайн: простая формула + пример...

Определение понятия конверсии продаж. Как правильно делать расчет и повысить эффективность маркетинговой стратегии?

Как оптимизировать изображения на сайте: практические рекомендации от названия до микроразметки

Как оптимизировать изображения на сайте: практические...

Уверены, что знаете как оптимизировать картинки на сайте? Какие основные требования поисковых систем к изображениям на сайте? Как...

Остались вопросы?
Наши эксперты готовы ответить на них

Свяжитесь по указанному ниже телефону с нашим менеджером или воспользуйтесь услугой «Перезвонить мне». Мы свяжемся с вами в ближайшее время.

Каждый участник — мастер своего дела
Ценю Webpromo за гибкость
Команда Webpromo, как продолжение нашего отдела маркетинга
Спокоен за продвижение своих проектов в интернете