О том, что представляет собой прототип сайта, какие типы прототипов существуют и как его создать с нуля, рассказывает эксперт Convert Monster Ася Волошина.
Создание продающего сайта начинается с конструирования его прототипа. Для чего нужен прототип? Прототипирование – это обязательный этап в создании сайтов, который сбережет время, деньги и нервы как разработчика сайтов, так и его клиентов. Если компания согласовывает прототип до этапа дизайна, то количество правок на этапе дизайна и верстки сокращается минимум в 2 раза (а иногда и полностью исключается), что позволяет компании получить качественные сайты и лендинги в несколько раз быстрее.
Что такое прототип?
Прототип - это детальный план веб-страницы, который используют, чтобы продумать структуру страницы и логику работы интерфейса до отрисовки графических элементов. Прототип можно представить в виде скелета, основы, на которую позже наращиваются красивые дизайнерские решения.
Обычно к прототипированию приступают после обсуждения брифа с компанией-исполнителем и агрегации требований к проекту (цели и задачи проекта, исследование рынка, конкурентов, целевой аудитории и план лендинга) и отводят на разработку от 3 до 7 рабочих дней в зависимости от сложности проекта.
Общая последовательность при создании сайта такая:
- разработка брифа;
- агрегация требований и их согласование;
- создание прототипа (структура блоков и тексты) и его согласование;
- дизайн сайта и его согласование;
- верстка сайта и ее согласование;
- тестирование сайта;
В разработке лендинга или лендосайта прототип, утвержденный клиентом, и небольшие текстовые пояснения по технической части – это и есть готовое ТЗ для работы веб-дизайнера.
Если в работе находится многостраничный сайт, то редко когда нужно прототипировать все страницы, достаточно спланировать ключевые: главную, каталог, карточку товара, страницу чек-аута.
Виды прототипов сайта
Прототип страницы сайта – достаточно широкое понятие, он может выглядеть как простой эскиз, как блок-схема с картинками или как живой интерактивный прототип с кликабельными элементами. Таким образом, прототипы можно условно классифицировать по способу изготовления (аналоговый, т.е. на бумаге, или цифровой), по степени проработки деталей, по пользовательскому опыту (традиционный, т.е. в виде изображения, или интерактивный, с которым можно взаимодействовать).
Лайфхак по прототипам.
Термин «прототип» неоднозначный, и путаница возникает из-за того, что на английском слово prototype означает «живой прототип», который можно прокликать. А то, что мы называем «прототип» (по сути простая схема страницы), по-английски называется wireframe (вайрфрейм). Помимо этого, есть еще несколько понятий, которые используются как синонимы прототипа, это скетч и мокап.
Скетч
Скетч (от англ. набросок) – это простой эскиз от руки, чаще всего сделанный от руки на бумаге, экране или на маркерной доске. Он используется, чтобы быстро отрисовать задумку и наглядно показать коллегам, например, во время мозгового штурма. Скетчу не нужны детали, только общие мазки либо конкретные фишки.
Это самый дешевый и быстрый способ визуализировать идею без необходимости долго объяснять ее «на пальцах». Этот способ прототипирования подходит для быстрой коммуникации внутри команды, меньше – для презентации идеи перед заказчиком. Причина проста – компании-заказчику трудно представить, как это будет выглядеть в результате, и создатель скетча получит дополнительный цикл вопросов, ответов и уточнений.
Бывает и обратная ситуация: на переговорах клиент не может донести свои пожелания словами и просит дать ему бумагу или сам встает к доске и начинает набрасывать скетч. Эта ситуация нормальная, в этом случае рекомендуется дать клиенту эту возможность, затем посмотреть результат и прокомментировать.
Вайрфрейм (Wireframe)
Под вайрфреймом дизайнеры подразумевают черно-белую блок-схему посадочной страницы или сайта. В нем отражена последовательность смысловых блоков и их внутренние элементы: заголовки, тексты, слайдеры, формы захвата, кнопки и др. Используется для того, чтобы показать расположение элементов и их последовательность, даже текстами для этого формата можно пренебречь. Хотя есть рекомендация всегда рекомендую вставлять в прототип финальные версии текстов, а не «рыбу», так как объем текстов напрямую влияет на дизайн.
Мокап (Mockup)
Мокап – это расширенная версия вайрфрейма, в нем допустимы цветовые решения, изображения, шрифты, иконки. Он нужен, чтобы утвердить последовательность блоков, общую стилистику, а также продумать некоторые визуальные фишки. Здесь точно пригодятся финальные версии текстов.
В мокапе должны быть отражены:
- план страницы;
- готовый копирайтинг;
- расположение элементов;
- состояния элементов (пометки, что и как работает);
- референсы для изображений и типографики;
Прототип (живой прототип)
Prototype – это интерактивный вариант вайрфрейма. Он четко показывает, как работают элементы будущего сайта без дополнительных пометок, комментариев или ТЗ. С ним можно взаимодействовать практически так же, как с готовым сайтом.
Какой прототип выбрать?
Не существует каких-то строгих ограничений, которые диктуют, какой формат нужно использовать именно вам. Выбирайте тот, который нравится, не требует серьезных временных затрат. Можно ориентироваться по ситуации и закладывать больший срок и бюджет на создание живого прототипа для сложного многостраничного сайта или сделать экспресс скетч.
Основные выгоды от внедрения прототипа – экономичная разработка и взаимопонимание между заказчиком и командой разработчиков.
Что дает использование прототипа:
- визуализированные требования заказчика к интерфейсу и функционалу сайта;
- внесение правок быстро и без перерисовки дизайна и «переверстки»;
- правки на этапе прототипа стоят дешевле и позволяют либо вообще обойтись без правок на других этапах и минимизировать их количество;
- оценка реальных сроков разработки и стоимости;
- заказчик видит промежуточный результат и четко понимает следующие шаги;
- на этапе прототипа закладывается эффективность будущего сайта;
- утвержденный прототип - гарантия того, что работа будет выполнена качественно и в срок.
Как создать прототип сайта
Фундамент будущего сайта закладывается еще на этапе маркетинговых исследований. После того, как собрана информация о нише, конкурентной среде и проведен анализ целевой аудитории, начинает вырисовываться главное, то, что должно быть отражено в прототипе. Сюда относятся оффер (предложение клиенту компании), ключевые и дополнительные выгоды, возражения заказчика, отличительные особенности компании и продукта/услуги.
Специалисты топовых диджитал агентств работают в довольно простых и интуитивно понятных (а зачастую и бесплатных или условно-бесплатных) веб-сервисах. Они не требуют особой подготовки и знаний дизайна и верстки. Многие из них работают по принципу конструктора и drag-and-drop элементов, а также имеют встроенные шаблоны под разные тематики.
Наиболее часто для создания прототипа сайтов используются сервисы Balsamiq, Figma, Wireframe.cc, Draftium, Axure.
Тщательно продуманный прототип - это обязательный этап в разработке сайтов и лендингов. Он позволяет экономить время, бюджеты и нервы как разработчиков, так и их клиентов, исключая либо минимизируя лишние и дорогие коррективы на этапе дизайна и верстки.
Вариантов прототипов достаточно много, выбирайте не самый сложный, а тот, с которым вы и ваши сотрудники могут работать быстро и эффективно, а клиенты видят результат работы. Для плодотворной коммуникации по проекту чаще всего достаточно схематичного вайрфрейма.
Веб-сервисов по созданию прототипов масса, многие из них предлагают либо тестовый период либо бесплатный тариф, протестируйте несколько, выберите самый удобный.