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


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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда есть первичная информация и понимание каким должен быть проект нужно ещё создать схему иерархии в программе 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

Комментарии

Добавить комментарий

ОСТАВЬТЕ ЗАЯВКУ НА БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ
БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ

Мы свяжемся с Вами в ближайшее время!

Мы свяжемся с Вами в ближайшее время!

Мы свяжемся с Вами в ближайшее время!