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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скетч 

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


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

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

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

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


Мокап (Mockup)

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

 

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Альфа Эксперт
Психолог о том, каким должно быть бизнес-мышление в кризисной ситуации
Альфа Эксперт
В Беларуси ожидается поляризация потребителей на сегменты с разными мотивами потребления
Альфа Эксперт
Как успешно продавать через Телеграмм