Прототипирование – это схематический «дизайн» сайта. Является первый шагом к созданию сайта

Прототипирование определяется как черновая реализация функциональности веб-портала.

Зачем нужен прототип сайта

Пример зачем нужен прототип сайта

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

На этапе прототипирования определяется путь клиента, создается воронка продаж, тестируется юзабилити (удобство) сайта, что в дальнейшем облегчает SEO-продвижение сайта.

Задачи прототипирования

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

  • Коммуникация. В данном случае прототип – это канал общения между разными группами людей, которые участвуют в создании интернет ресурса.
  • Доработка и проектирование. Улучшение или радикальная переработка существующего портала, разработка дополнительных модулей сайта.
  • Продвижение идеи своего проекта. Прототип позволяет представить и донести до целевой аудитории особенности концепции вашего проекта.
  • Тестирование удобства использования. Основное назначение прототипа– тестирование удобства системы. Это одна из основных целей создания прототипа.
  • Оценка технической осуществимости и стоимости. Прототип может помочь определить возможность создания нужной системы, сайта и затраты на его реализацию.

Важность прототипа при создании сайта

Прототип является фундаментом для дальнейшей разработки сайта. Этап создания прототипа важный во всем процессе разработки сайта:

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

Методы прототипирования

Выбираем метод прототипирования

В зависимости от выбранной модели и целей создания прототипа выбираются инструменты и методы прототипирования. Выделяют следующие методы создания прототипа:

  1. Бумажное прототипирование.
  2. Прототипирование при помощи специальных программ.
  3. Прототипирование при помощи графических программ.

У каждого метода свои особенности и области применения.

Прототипирование на бумаге

Прототипирование на бумаге

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

Существенными недостатками являются:

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

Данный метод эффективен при создании относительно простых сайтов с небольшой командой разработчиков.

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

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

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

Программы для персонального компьютера (офлайн вариант): Balsamiq Mockups, Axure RP и др.

Облачные сервисы: Figma, Wireframe.cc, Moqups.com

Преимущества использования специальных программ и сервисов:

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

Недостатки специальных программ и сервисов:

  • Необходимость освоения соответствующей программы
  • Высокая стоимость для версий на ПК и наличие ежемесячной абонентской платы для облачных сервисов.
  • Многие сервисы не имеют бесплатных тарифов для небольших проектов.

Прототипирование при помощи графических программ

Прототипирование при помощи графических программ

Графические редакторы, которые используются для создания прототипа: Photoshop, CorelDraw, PhotoPaint, Illustrator и др.

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

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

Метод подходит под несложные прототипы, где делается акцент на графическое представление.

Этапы прототипирования и виды прототипов

Предварительный анализ

Предварительный анализ разработки сайта

Анализ продукта и компании

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

Какая информация важна при разработке сайта:

  • Статистика компании по услугам, товарам, в том числе и по отказам
  • Статистика по отзывам и жалобам
  • Этапы оказания услуг, продажи товаров и доставки
  • Какие преимущества есть
  • Какие выгоды от сотрудничества предлагаете
  • Какие гарантии предоставляете
  • Цель создания сайта – от этого зависит вид будущего сайта.

Основная задача – найти «Уникальное торговое предложение». Т.е. ответить на вопросы: «Чем вы лучше конкурентов?», «Почему клиент доверит вам деньги?» и др.

Анализ целевой аудитории

Вторым шагом на данном этапе будет составление портрета покупателя.

Очень важно определить следующие параметры:

  • Возрастная группа
  • Уровень доходов целевой аудитории
  • Социальный статус
  • Преобладание женщин или мужчин среди покупателей
  • Семейное положение

При отсутствии собственных статистических данный стоит обратиться к общедоступным источникам:

  • Тематические форумы
  • Социальные сети конкурентов
  • Ключевые запросы в Яндекс Wordstat и подсказки Google
  • Отзывы на специализированных сайтах
  • Видеоролики на YouTube и других площадках

Полученные сведения лягут в основу разработки макета и дальнейшего дизайна сайта.

Анализ конкурентов

Выберите 12−20 конкурентов из поисковой выдачи по основным запросам. Половину возьмите из Яндекс, другую из Google.

Таким образом, в списке будут топовые конкуренты.

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

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

Более подробно анализ конкурентов мы рассмотрим в статье Анализ конкурентов и семантическое ядро (статья в разработке)

Предварительное прототипирование

Предварительное прототипирование

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

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

Прототип с низкой детализацией помогает перенести идею в цифровой вариант и согласовать начальный объем работ.

Он не содержит контента — это макет с примерным представлением блоков в виде геометрических фигур.

Особенности разработки прототипа или что и куда поместить.

  • Не размещайте блоки на несколько экранов – посетитель может забыть, что он читает.
  • На каждой странице должны быть контакты – вверху и внизу. Причем, предоставьте клиенту несколько способов связи.
  • Если есть офис или магазин, то должна быть карта с возможностью проложить маршрут.
  • Укажите режим работы – дни недели, обед.
  • Обязательно должны быть реквизиты компании — ИНН, ОГРН, юридический адрес, наименование, расчетный счет. Это публичная информация, но размещая ее на сайте вы увеличиваете доверие посетителей.
  • Размещайте блоки в порядке важности и ценности, сначала важные. У вас есть несколько секунд, чтоб заинтересовать посетителя, иначе он закроет сайт.
  • Первым блоком, обычно, помещают «Наши преимущества». Но заголовок должен быть другим, «Наши преимущества» — это слишком банально, проявите креатив.
  • При выборе порядка размещения блоков ориентируйтесь на путь клиента – сначала он выбирает качественный сервис, потом услуги или товар, затем стоимость и, в случае успеха, оставляет заявку, либо ищет как добраться до магазина.
  • На каждой коммерческой странице должен быть блок «Оставить заявку». Если страница содержит много блоков, то добавьте дополнительный блок «Написать нам» или «Заказать услугу».
  • Пользователи ожидают, что меню находится сверху на каждой странице. Не проявляйте креатив, иначе пользователи не смогут найти нужное и уйдут разочарованными.
  • Главная страница должна раскрывать 80% информации о компании и услугах. Но не нужно выкладывать все, иначе клиент потеряется в изобилии сведений. Практичнее, когда каждый блок имеет ссылку на основную страницу для уточнения деталей или заказа услуги/товара.
  • Более детальная информация, характеристики товара, спецификация услуг и т.п. располагается на остальных страницах 2-го уровня.
  • Не усложняйте поиск информации для клиента, помните о правиле «3-х кликов». Абсолютно любая информация на сайте должна находится на расстоянии 3-х кликов. Не более 5% пользователей совершают глубокий поиск по сайту.
  • Важная информации размещается слева. Например, для товара, это его изображение. Для вакансии – требование к соискателю. В данном вопросе, также не стоит проявлять креатив.
  • Оставьте место под тэги или дополнительные ссылки на внутренние страницы.
  • Регулируйте размер кнопок и блоков, не делайте слишком мелкие и слишком крупные.
  • Выделяйте конверсионные кнопки цветом и размером. «Купить», «Заказать», «Забронировать» и т.п. должны привлечь внимание посетителя, но на одном экране должна быть одна кнопка призывающая к действию.
  • Адаптивная верстка. Прототипов должно быть два – для десктопной версии и для мобильной.
  • Если возникают проблемы с размещением блоков на мобильной версии, удаляйте маловажные элементы. Обычно мобильная версия упрощается ради удобства.

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

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

Детализация прототипа

Детализация прототипа

После утверждения низко детализированного прототипа переходят к проработке деталей.

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

Некоторые моменты детализации:

  • Все надписи должны иметь окончательное значение. Переименование меню, кнопок и других элементов не допускается на следующем этапе – разработке дизайна.
  • Каждый заголовок должен нести ясность. Не откладывайте придумывание заголовков на этап написания контента. Слишком длинные заголовки могут испортить верстку, а короткие создадут лишние пустоты.
  • При проработке блоков, помните, сплошной текст люди не читают. Абзацы должны быть из 2-3 предложений. Между блоками добавляйте пропуски.
  • Если абзац сложный – разбейте его. Когда текста много, добавьте картинки.
  • Интерфейс должен быть одинаков на всем сайте. Если решили добавить кнопкам тень и объем, то на сайте добавьте тени и объем всем кнопкам.
  • Каждый законченный блок должен содержать заголовок h2.
  • Если блок сложный и содержит много дополнительной структурированной информации – разбейте ее на части, и озаглавьте каждую тегом h3.
  • Используйте высокую детализацию каждого блока. Например, для иконок используйте реальные иконки из библиотеки программы. Окончательный вариант подготовит дизайнер.

Добавление интерактивности

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

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

На нем сложно проработать путь клиента, протестировать динамичные элементы.

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

Интерактивность позволяет:

  • Нажимать на кнопки, отследить отображение наведенных и нажатых элементов
  • Переходить по внутренним ссылкам
  • Вызывает всплывающие окна
  • Раскрывает меню

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

Это финальный этап прототипирования. После согласования интерактивный макет передается дизайнеру.

Когда к работе приступает дизайнер, внесение изменений в прототип не допускается.

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

Инструменты для создания прототипа

Инструменты для создания прототипа

Количество программ для создания прототипа на 2022 насчитывается более 50, часть из них приложения для компьютера, другая – облачные сервисы.

Что выбрать – приложение или сервис? Для этого, сначала надо посмотреть на отличительные особенности:

Десктопные версии.

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

Облачные сервисы.

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

Balsamiq Mockups как пример десктопного приложения

Balsamiq Mockups

Какие преимущества на наш взгляд:

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

Из недостатков отметили бы следующее:

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

Figma — лучшая альтернатива облачному сервису

Логотип Figma

Порядка 80% фрилансеров и 50% веб-студий используют Figma. И при заказе разработки сайта, на согласования будет предоставлен макет на Figma. Поэтому, данный сервис стоит хотя бы поверхностно изучить всем, кто каким-либо образом связан с разработкой сайтов.

Плюсы

  • Есть бесплатный тариф с доступом ко всему функционалу. Ограничение – не более 3-х проектов на аккаунт и для одного пользователя. Идеально подходит для самостоятельного проектирования и для начинающих дизайнеров, когда заказов мало.
  • Не требуется дополнительное программное обеспечение для дизайна. Он создается в Figma, причем на основе разработанного прототипа. Только не забудьте сделать копию оригинала.
  • Огромное количество плагинов и виджетов. Библиотека постоянно пополняется энтузиастами.
  • Служебные плагины, настраивающий интерфейс и увеличивающие функционал Figma, облегчают работу дизайнер и проектировщика.
  • Возможность точной настройки интерактивности, вплоть до дизайна элементов по наведению курсора.
  • Точная настройка размеров, позиционирования и сеток.
  • Точная визуализация страниц.
  • Возможность предоставлять удаленный доступ клиентам к проекту для ознакомления. В том числе и на бесплатном тарифе.
  • Возможность создавать «классы» для цвета, настройки шрифтов.

Минусы

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

Некоторые советы:

  • Прежде чем приступить к прототипированию, создайте bootstrap-скую сетку, состоящую из 12 колонок с зазором между ними.
  • Если не хватило 3 бесплатных проектов, зарегистрируйтесь под новым аккаунтом google.
  • При прототипировании используйте компоненты при создании элементов. На следующем этапе дизайнер будет работать только с ними, а копии, расположенные на страницах, автоматически поменяют внешний вид.
  • Обязательно ознакомьтесь с уроками по Figma. Много полезного контента на YouTube.
  • Figma не подходит для создания схемы сайта. В этом случае советуем воспользоваться бесплатной программой XMind.

Прототип Mobile Platform — как пример авторитетного сайта с тщательной проработкой.

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

Список литературы:

  1. Варфел Т. «Прототипирование. Практическое руководство» / ТоддЗакиВалфел; пер. с англ. И. Лейко. – М.: Мани, Иванов и Фербер, 2013. – 240 с
  2. «Ководство» Артемий Лебедев
  3. Алан Купер, Роберт Рейман, Дэвид Кронин «Алан Купер об интерфейсе. Основы проектирования взаимодействия»

Авторитетные ресурсы

  1. Википедия. Что такое прототип
  2. Журнал MDPI — https://www.mdpi.com/2073-4441/7/2/780
  3. Независимое издание для дизайнеров — https://uxdesign.cc/

Автор материала: Моисеенко Роман Александрович

Дата публикации: 07.09.2022

Авторское право. Полное или частичное копирование материала запрещено.