Как создать прототип сайта: пошаговая инструкция

Типы прототипов

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

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

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

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

Скетч 

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

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

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

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

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

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

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

Мокап (Mockup) 

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

Я рекомендую воспользоваться простым чек-листом того, что должно быть отражено в мокапе: 

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

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

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

Живые прототипы используются для утверждения заказчиком сложных интерфейсов, а также для проведения UX-тестирования командой или фокус-группой.  

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

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

Смотрим или клик-клац

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

Камень, ножницы или ПК

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

Посредством профессиональных программ

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

• Adobe Photoshop и InDesign;
• Microsoft Visio;
• Sketch;
• Axure Pro, а также иные приложения для комплексной работы над проектом дизайна ресурса.

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

Посредством online-инструментов прототипирования

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

Этапы создания

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

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

Такая ситуация может возникнуть в работе над более сложными проектами.

Основные элементы макета

Рассмотрим основные элементы дизайн-макета сайта. 

Стиль

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

Логотип

От логотипа во многом зависит успех компании. Логотип должен выглядеть заметно, но не отпугивать.

Структура

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

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

Элементы призыва к действию

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

Разновидности прототипов и задачи, которые они решают

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

Low-fidelity

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

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

Пример макета сайта в виде скетча:

1. High-fidelity. Более функциональные прототипы лендингов или многостраничных сайтов. Позволяют представить заказчику полную визуализацию всех страниц. Схематичные квадраты заменяются на полноценные блоки с изображениями и ориентировочным контентом. Особенности:

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

Пример прототипа сайта High-fidelity, созданного в Figma:

Несмотря на то, что создание макетов сайтов занимает время (в среднем от 1 до 10 дней), оно ускоряет процесс разработки. Предварительная визуализация будущего проекта позволяет избежать ошибок и постоянных правок со стороны заказчика. Это облегчает работу back-end программистов и дизайнеров.

Задачи, которые решают прототипы:

• Ускоряют создание сайтов, т.к. у разработчиков появляется четкий план действий.
•  Облегчают взаимодействие между заказчиком и исполнителе. Клиенту проще выражать свои пожелания, проект-менеджерам формировать задачи сотрудникам.
• Позволяют реализовывать сложные и нетривиальные проекты.
• Заказчик сразу получает итоговую стоимость проекта (без последующих наценок) и сроки его реализации.

Разновидности макетов

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

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

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

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

Прототип против дизайнера / Habr

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

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

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

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

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

Что же такое, черт побери, прототип?

Для тех же кто пока ни о чем не подозревает отвечу словами из википедии:

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

Стоп! Сценариев использования?

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

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

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

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

А как же бизнес, детка?

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

По этой причине также стоит относится с осторожностью и к готовым ТЗ

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

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

Конечно, часть процесса проектирования я опустил, не суть важна.

Что же будет дальше?

И тут хороший проектировщик покажет себя молодцом и проверит работу первых и вторых, а при необходимости настоит на правильном решении.

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

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

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

1. заголовки;
2. слайдеры;
3. текст;
4. клавиши;
5. формы захвата, а также иные элементы.

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

Как должен выглядеть прототип?

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

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

Именно на основании таких данных строится качественный прототип, который не учитывает визуальное оформление (дизайн) сайта.

Какие бывают прототипы

Готовые прототипы сайтов делят на:

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

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

Важно, что вы тратите время на визуализацию вашей идеи в целом, а не на проработку деталей. 

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

 Чтобы создать прототип сайта, продвигайтесь от статической модели к динамической. 

Эскиз от руки 

Эскиз — это набросок структуры сайта на бумаге или на маркерной доске. Это быстрое прототипирование сайта, при котором вы прорабатываете только крупные блоки и можете легко менять структуру. На этом этапе проще всего зарисовывать новые идеи, стирать элементы, менять их местами. Если обсуждаете прототип в офисе, удобно пользоваться маркерной доской. Создать макет сайта с командой онлайн можно в программе Balsamiq либо аналогичной ей. Онлайн скетч сайта удобно комментировать, править и обсуждать с заказчиком.

Статичный недетализированный макет

Когда структура сайта готова, приступайте к основным элементам. Определите:

1. где будет располагаться каждый объект страницы;
2. какого размера он будет;
3. как элементы будут сочетаться между собой. 

На этом этапе недостаточно нарисовать структуру сайта — ее нужно дополнить разметкой блоков, создать каркас сайта. С таким уровнем детализации будет проще оценить объем работ и количество людей на проекте.

Статичный детализированный прототип

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

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

Интерактивная детализированная модель сайта

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

Прототип сайта на конструкторе

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

Используйте 190 готовых шаблонов нашего конструктора для вашего сайта!

Тестировать 30 дней бесплатно

Онлайн-сервисы по созданию прототипов

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

Еще одно преимущество веб-сервисов по созданию прототипов – возможность совместной онлайн-работы над проектом (по аналогии с редактированием файла на Google Диске). 

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

Figma  

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

У Figma есть 2 крутые опции: доступ к макету из окна браузера и совместная редактура макетов и прототипов командой. Есть бесплатная версия с урезанным функционалом.  

Wireframe.cc 

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

Draftium 

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

Еще одна фишка сервиса – готовый прототип оттуда можно выгрузить в конструктор сайтов Weblium (и там тоже есть бесплатный тариф). Этих сервисов достаточно, например, чтобы сделать лендинг под ключ.  

Axure  

Профессиональное ПО для прототипирования, с которым легко разберется и новичок. Есть облачная версия. Про работу в Axure мы писали отдельную статью «Прототип landing page в Axure», рекомендуем ознакомиться.  

Создание дизайна левого меню сайта

Честно говоря это меню сделано в том же стиле и мало отличается от предыдущего по методу его создания поэтому весь процесс описывать не буду

Однако хочу заострить внимание на следующих моментах:

1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне “Символ”

Я использовал 14 размер и стандартный для Windows шрифт “Verdana”

Получилось вот такое меню:

Обзор популярных инструментов — Axure, Sketch, Figma, Adobe XD

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

Приложение для Mac. Долгое время до появления Figma оставался флагманским инструментом. Отличный редактор с большими возможностями по детализации. Простое и интуитивное прототипирование. Позволяет работать над прототипом всей командой в онлайн-режиме.

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

Пролинковка макетов во вкладке Prototype в Figma

Программа от Adobe, разработанная специально для UX/UI дизайнеров. Часть экосистемы Creative Cloud, ориентирован на быстрое наполнение прототипов контентом. Есть русская версия. Файлы Sketch можно открывать в Adobe XD. Как и Figma, помогает как создавать прототипы, так и готовить полноценные дизайн-макеты для отправки на вёрстку. Помимо огромной библиотеки элементов для прототипирования, Adobe XD способна поддерживать сложный функционал в макетах, например, якорные ссылки, выпадающие меню и  анимацию.