Что такое прототип сайта, как создать макет?

Что нужно знать о прототипе сайта

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

Что такое прототип сайта

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

Для чего нужен прототип страниц сайта заказчику

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

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

К примеру, если изменение на стадии прототипа занимает 1 час, то на стадии дизайна — 5 -6 часов, на стадии верстки — 10 — 15, на стадии программирования — 15 — 25 часов.

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

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

Цели, которые решает прототип для команды разработчиков

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

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

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

Прототипирование – объемное понятие. Оно может быть обычным эскизом, схематичными блоками или интерактивным изображением с кликабельными частями.

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

Скетч

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

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

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

Мокап (Mockup)

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

Живой прототип

Используется для демонстрации сложных интерфейсов. В таком варианте прототипа сайта проводится тестирование пользовательского опыта клиента перемещения по веб-страницам. Это позволяет определить:    

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

Преимущества, которые дает использование прототипа

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

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

1.     Наглядно показывает объем работ.
2.     Позволяет планировать этапы достижения цели.
3.     Экономит время.
4.     Создает прочный фундамент для проекта.
5.     Сокращает вероятность иного трактования пунктов технического задания. 

Как сделать прототип сайта?

Подготовительный этап 

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

1. Сбор вводных данных
2. Анализ конкурентов
3. Формирование портретов ЦА
4. Разработка первичного контента
5. Разработка прототипа.

Методы создания 

Эскиз на бумаге

Самый простой способ создания прототипа – сделать рисунок от руки на листке бумаги. Это быстро и бесплатно. Однако многие технические моменты в этом случае будут недоступны. Например, плохая масштабируемость, отсутствие командной работы удаленно, отсутствие интерактивности, нет объективности к реальным параметрам. Такой метод подойдет для макета лендинга или как начальный этап большого проекта. 

Цифровой эскиз

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

Разработка с помощью специальных инструментов

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

Основные программы для создания прототипа

1.     Figma 
2.     Axure RP
3.     InVision 
4.     Sketch
5.     Balsamiq

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

Заключение

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