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

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

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

Особенности создания прототипа лендинга или другого сайта

Термин «прототип» при разработке сайта – это подробный план будущего веб-ресурса. Он создается для тщательного продумывания структуры, логики работы над созданием интерфейса еще до прорисовки графики. Это «скелет» будущего сайта. На этой основе позже будут созданы красивые элементы дизайна.

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

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

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

Разновидности прототипов

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

По степени работы над деталями бывают прототипы традиционные или интерактивные (с изображениями, элементами страницы можно взаимодействовать). В английском языке под термином «прототип» подразумевают именно эту интерактивную модель. По ее элементам можно кликать.

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

Скетч

Особенности создания прототипа лендинга или другого сайта

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

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

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

Менеджер проекта должен дать свои комментарии к предложенному заказчиком скетчу. Если предложение  не очень удачное, нужно обосновать свои рекомендации для клиента. Возможно, придется вносить коррективы.

Вайрфрейм

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

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

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

Мокап

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

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

Прототип – работающая модель

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

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

Какой макет выбрать?

Особенности создания прототипа лендинга или другого сайта

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

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

Преимущества прототипа

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

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

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

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

Процесс создания прототипа

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

Последовательность действий при закладывании основы будущего сайта следующая:

  • проработка карты персонажей;
  • создание карты продукта;
  • оценка выгод;
  • аргументы;
  • план блоков при необходимости с интерактивными элементами;
  • перенос макета в прототип;
  • подготовка текстов.

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

Онлайн-инструменты

Небольшие и крупные агентства по созданию сайтов используют в работе простые онлайн-сервисы, которые упрощают и ускоряют работу. Это интуитивно понятные программы, в которых быстро разберется даже стажер. Такие инструменты имеют готовые шаблоны, позволяют команде одновременно работать над созданием страницы. Самыми известными онлайн-сервисами являются:

  • Figma
  • Draftium
  • Axure
  • cc

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

Wireframe.cc проще предыдущего онлайн-инструмента. Базовые компоненты страницы просто рисовать мышкой, можно добавлять текст. Предусмотрена возможность командной работы.

Draftium имеет встроенные шаблоны. Они устроены так, что разработчик может воспользоваться ими как конструктором.

Axure представляет собой профессиональную программу, простую в использовании.

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