Прототип сайта: что это такое и зачем он нужен

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

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

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

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

Зачем и кому нужен прототип сайта?

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

1. Еще до разработки структурирует свое представление о web-ресурсе.
2. Формирует внешний вид и его наполнение.
3. Высказывает свои пожелания, например, какие-то интерактивные элементы.
4. Уменьшает количество правок в процессе работы.

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

1. Черновик сайта закрепляет пожелания. Значит команда понимает требования к интерфейсу, функционалу.
2. Все требования записываются в техническое задание, которому будут следовать программисты, дизайнеры, копирайтеры, SEO-маркетологи.
3. Определяют сложность, объем работы и считают сроки выполнения.
4. Легко вносить изменения в структуру, оформление, если что-то не понравилось заказчику.
5. Можно еще на начальном этапе тестировать элементы управления, расположение блоков.

Этапы прототипирования

Создать прототип полноценного web-ресурса — это не просто быстренько нарисовать или начертить макет на бумаге. В идеале процесс состоит из нескольких этапов:

1. Ставим цели. Заказчики часто не могут их сформулировать. Много мыслей, а выделить одну сложно.
2. Формулируем гипотезы. Или подбираем средства, инструменты, методы, чтобы реализовать цели.
3. Исследуем бизнес. Нельзя сделать качественный сайт для клиентов, если нет представления об особенностях работы заказчика. Кто будет посещать сайт, какие сильные и слабые стороны бизнеса. Так же необходимо провести анализ конкурентов.
4. Составить черновик. Собрать всю информацию в кучу и нарисовать пробную версию сайта: где и какие будут располагаться блоки, цветовая схема. Первый вариант ресурса может быть даже на бумаге.
5. Детализируем черновик. Или «оживляем» его. На этом этапе добавляют функциональные блоки, подбирают контент, картинки, шрифты. Чем точнее будет детализация, тем качественнее пройдет тестирование.
6. Тестирование и отработка замечаний. Заказчик проверяет, как работают элементы, совпадает ли результат с техническим заданием. Все возражения, замечания оформляет документально и отправляет разработчикам.

Виды прототипов

Вид прототипа напрямую зависит от web-портала. Чем масштабнее проект, тем детальнее должен быть макет и пройти все этапы разработки. Какие они бывают?

Макет на бумаге

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

Подходит, как начальный этап разработки прототипа, абсолютно для всех видов сайтов.

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

Преимущества макета на бумаге:

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

Недостатки:

• если правки масштабные, то нужно руками перерисовывать весь макет;
• сложно рисовать в команде;
• низкая детализация;
• нельзя протестировать и проверить функциональность.

Цифровой макет

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

Что делают на этом этапе:

• выстраивают структуру;
• выставляют разметку для разделов;
• подбирают размеры блоков .

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

Преимущества цифрового макета:

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

Недостатки:

• нужно программное обеспечение;
• сложно организовать совместный доступ.

Прототип с высокой детализацией

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

Преимущества прототипа с высокой детализацией:

• четкая визуальная картинка;
• легко оценить дружелюбность интерфейса, соответствие стилистике и качество контента.

Недостатки:

• требуются знания и работа в сервисах-конструкторах;
• корректировки еще можно вносить, но на исправление нужно время.

Интерактивный прототип

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

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

Преимущества интерактивного прототипа:

• лучшая детализация;
• совместная работа;
• проработка всех ошибок, легко исключить или минимизировать ошибки.

Недостатки:

• требуется специальное программное обеспечение и знание, как им пользоваться;
• нужны человеко-машинные ресурсы, чтобы реализовать проект.

Инструменты для прототипирования

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

WireFrame

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

Figma

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

Axure

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

Draftium

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

Подведем итоги:

1. Прототип нужен разработчикам и заказчикам, как черновой вариант сайта. Наглядно показывает структуру, элементы дизайна, контент, кнопки и так далее.
2. Для разработчика макет web-ресурса служит гарантией, что в процессе работы заказчик не будет вносить кардинальных изменений. Прототип согласуется, и только потом приступают к созданию портала.
3. Макеты бывают разной степени детализации. Четкость прорисовки зависит от задач будущего портала, а также бюджета проекта.
4. Создавать прототипы можно на бумаге. Но подходит для черновых схем. А также цифровым или интерактивным. Тогда используют специальные сервисы: Figma, WireFrame, Axure и другие.