Как создать прототип сайта или лендинга и для чего он нужен

Альфа Эксперт
21 Сентября 2020
Поделиться с коллегами

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

Создание продающего сайта начинается с конструирования его прототипа. Для чего нужен прототип? Прототипирование – это обязательный этап в создании сайтов, который сбережет время, деньги и нервы как разработчика сайтов, так и его клиентов. Если компания согласовывает прототип до этапа дизайна, то количество правок на этапе дизайна и верстки сокращается минимум в 2 раза (а иногда и полностью исключается), что позволяет компании получить качественные сайты и лендинги в несколько раз быстрее.

Что такое прототип?

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

Обычно к прототипированию приступают после обсуждения брифа с компанией-исполнителем и агрегации требований к проекту (цели и задачи проекта, исследование рынка, конкурентов, целевой аудитории и план лендинга) и отводят на разработку от 3 до 7 рабочих дней в зависимости от сложности проекта.

Общая последовательность при создании сайта такая:

- разработка брифа;

- агрегация требований и их согласование;

- создание прототипа (структура блоков и тексты) и его согласование;

- дизайн сайта и его согласование;

- верстка сайта и ее согласование;

- тестирование сайта;

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

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

Виды прототипов сайта

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

Лайфхак по прототипам.

Термин «прототип» неоднозначный, и путаница возникает из-за того, что на английском слово prototype означает «живой прототип», который можно прокликать. А то, что мы называем «прототип» (по сути простая схема страницы), по-английски называется wireframe (вайрфрейм). Помимо этого, есть еще несколько понятий, которые используются как синонимы прототипа, это скетч и мокап. 

Скетч 

Скетч (от англ. набросок) – это простой эскиз от руки, чаще всего сделанный от руки на бумаге, экране или на маркерной доске. Он используется, чтобы быстро отрисовать задумку и наглядно показать коллегам, например, во время мозгового штурма. Скетчу не нужны детали, только общие мазки либо конкретные фишки.


Это самый дешевый и быстрый способ визуализировать идею без необходимости долго объяснять ее «на пальцах». Этот способ прототипирования подходит для быстрой коммуникации внутри команды, меньше – для презентации идеи перед заказчиком. Причина проста – компании-заказчику трудно представить, как это будет выглядеть в результате, и создатель скетча получит дополнительный цикл вопросов, ответов и уточнений.

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

Вайрфрейм (Wireframe)

Под вайрфреймом дизайнеры подразумевают черно-белую блок-схему посадочной страницы или сайта. В нем отражена последовательность смысловых блоков и их внутренние элементы: заголовки, тексты, слайдеры, формы захвата, кнопки и др. Используется для того, чтобы показать расположение элементов и их последовательность, даже текстами для этого формата можно пренебречь. Хотя есть рекомендация всегда рекомендую вставлять в прототип финальные версии текстов, а не «рыбу», так как объем текстов напрямую влияет на дизайн.


Мокап (Mockup)

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

 

В мокапе должны быть отражены:

- план страницы;

- готовый копирайтинг;

- расположение элементов;

- состояния элементов (пометки, что и как работает);

- референсы для изображений и типографики;

Прототип (живой прототип)

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


Какой прототип выбрать? 

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

Основные выгоды от внедрения прототипа – экономичная разработка и взаимопонимание между заказчиком и командой разработчиков. 

Что дает использование прототипа:

- визуализированные требования заказчика к интерфейсу и функционалу сайта;

- внесение правок быстро и без перерисовки дизайна и «переверстки»;

- правки на этапе прототипа стоят дешевле и позволяют либо вообще обойтись без правок на других этапах и минимизировать их количество;

- оценка реальных сроков разработки и стоимости;

- заказчик видит промежуточный результат и четко понимает следующие шаги;

- на этапе прототипа закладывается эффективность будущего сайта;

- утвержденный прототип - гарантия того, что работа будет выполнена качественно и в срок.

Как создать прототип сайта

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

Специалисты топовых диджитал агентств работают в довольно простых и интуитивно понятных (а зачастую и бесплатных или условно-бесплатных) веб-сервисах. Они не требуют особой подготовки и знаний дизайна и верстки. Многие из них работают по принципу конструктора и drag-and-drop элементов, а также имеют встроенные шаблоны под разные тематики.

Наиболее часто для создания прототипа сайтов используются сервисы Balsamiq, Figma, Wireframe.cc, Draftium, Axure.

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

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

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


Альфа Эксперт
Как создавать будущее, или ведущие тренды маркетинга
Альфа Эксперт
Главные правила продающих сайтов
Альфа Эксперт
Доверие пользователя и проверенные креативы. Google поделился секретами работы с медийной рекламой