Прототип или Прототипирование сайта. Прототип сайта пример!

Что такое прототип сайта и для чего он нужен?

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

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

Прототипы необходимы для таких видов работ:

• Построение логики вложенности (иерархии) страниц и объектов
• Прорисовка дизайна согласно прототипу
• Написание технической документации
• Для создания мобильной версии сайта
• Определения размеров блоков и расстояний между ними
• Возможно, при создании интерактивного прототипа для тестирования фокус группой и предварительного анализа потребительской ценности проекта
• Проработки UX дизайна, создание максимально удобной структуры для пользователей сайта или приложения
• Построение приоритета реализации функций сайта или приложения

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

 

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

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

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

Паспорт проекта

В паспорте проекта должны быть такие разделы:

1. План работ – список разделов и страниц сайта с их реализацией (заполняется не сразу, а в процессе создания прототипа и утверждения структуры сайта)
2. Основный вводные данные – цели проекта, ценности, требования к проекту, описание проекта, замечания, уникальные особенности и т.д.
3. Опросник – тут собираются все вопросы касательно сайта и ответы на них. Опросник обычно нужен для сбора информации от заказчика. Но также можете его заполнить и для себя что бы не потерять нужную информацию.
4. Целевая аудитория – описание главных пользователей сайта, для которых будет создаваться данный проект. ЦА – это собирательный образ пользователя для лучшего понимания и представления как он будет использовать ваш сайт, что для него понятно, а что нет.
5. Конкуренты – список подобных сайтов конкурентов, косвенных или прямых.
6. Референсы — список любых сайтов что вам нравятся с указанием что именно нравится в этих сайта и что бы хотелось видеть у себя на сайте. Это поиск интересных решений для проекта.
7. Техническая информация – список технических характеристик сайта. В нем должны содержатся такие характеристики:

• Контактное имя клиента и телефон (если проект делается для заказчика)
• Доступы к хостингу и домену
• Движок сайта (CMS) – какой будет использоваться для управления сайтом
• Количество языков на сайте
• Ширина сайта
• Виды валют на сайте
• Технологические требования
• Список внешних сервисов, которые нужно подключать к сайту
• Доступы к разным аккаунтам внешних сервисов

8. Оплаты по проекту (если делаете для заказчика)

Сбор основной информации для макета

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

Необходима такие данные для прототипа:

1. Цели проекта – нужно определить для чего вообще создается данный проект, какие его основные цели. Таких целей обычно может быть 3-5.
2. Анализ конкурентов – собрать примеры сайтов конкурентов и попытаться выявить у них сильные и слабые стороны. Сильные стороны скопировать для своего проекта, взяв идеи, а слабые стороны на оборот нужно обойти и сделать лучше, чем у конкурентов на своем проекте.
3. Создание образов целевой аудитории – необходимо определить свою целевую аудиторию. Попытается понять кто будет покупать товары или заказывать услуги на вашем будущем сайте. Нужно собрать основные сведенья о целевой аудитории, возраст, пол, финансовый достаток, потребности, основные цели и «боли» целевой аудитории. Данные портреты помогут в будущем создать проект именно под них.
4. Сбор ответов на вопросы – необходимо создать опросник или найти готовый в интернете. Такие опросники используют маркетологи для более детального понимания что нужно отобразить на проекте, а что нужно не показывать.

В таком опросники могут быть такие вопросы:

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

Вы можете так же сами создать список необходимых вопросов и собрать на них ответы.

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

Создание иерархической структуры проекта

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

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

Например, могут быть такие разделы вашего проекта:

• Главная – описание структуры блоков главной страницы
• Каталог – каталог товаров или услуг
• Карточка — товара или услуги
• О компании – раздел с информацией о компании
• Контакты – раздел с основными контактными данными
• Корзина – описание корзины интернет-магазина
• Личный кабинет – раздел личного кабинета пользователей с описанием какие есть в нем подразделы
• Оформление заказа – структура раздела, где клиенты будут оформлять свои заказы
• Галерея – раздел с фотографиями
• Новости – раздел с новостями компании

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

После того как вы создали иерархию проекта можно приступать к созданию самого прототипа.

Разработка прототипа сайта или приложения

Создавать прототип можно в двух программах: Axure RP или Figma. Автор этой стать предпочитает использовать Axure RP и следовательно речь пойдет дальше о создании макета в данной программе, но вообще основные подходи при создании макета можно использовать на любой программе.

Figma – подходит больше для проектировщиков – дизайнеров, в ней сразу можно делать не только макет но и дизайн. Это вообще дизайнерская программа.

Мы начинаем создание макета с запуска программы и создания чистого файла. Далее нужно перенести все страницы/разделы с нашей иерархической схемы. Мы не будем в данной статье разбирать саму программу Axure RP (к тому же их много версий, и они разные), а только расскажем об основных принципах создания макета.

 

Начало работы над прототипом

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

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

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

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

Создание разметки

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

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

Сама разметка выглядит так:

Далее мы будем создавать блоки макета согласно разметки, используя эти 12 колонок и отступы между ними.

Работа над макетом

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

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

Примеры:

Детализированный макет

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

Примеры прототипов сайтов

Для лучшего понимания логики работы с прототипами мы собрали для вас некоторые примеры уже готовых прототипов. Надеемся, что наглядные примеры помогут вам больше понять что такое прототип.

Интернет-магазин Prof1Group

Пример прототипа сайта крупной компании что торгует военной одеждой и снаряжением — https://szxez4.axshare.com

Пример макета для гастрономического кафе

Небольшой, но хорошо продуманный макет сайта кафе http://q25hoi.axshare.com

Макет сайта компании по ремонтам квартиры

Детальный макет структуры сайта тематики ремонта  http://udxnr4.axshare.com

Макет сайта ателье пошива одежды

Компания занимается пошивом качественной одежды  http://ujs48s.axshare.com

Почему заказать прототип лучше у нас?

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

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

Вы можете обратится к нам за консультацией и при желании детально презентации наших услуг. Контактный телефон +38 (050) 074-33-29 Павел, или пишите свои вопросы нам на почту: markweb112@gmail.com