Как создать прототип сайта? Типы и методы разработки. 8 инструментов прототипирования (онлайн и оффлайн)

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

Что такое прототип и прототипирование?

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

Как прототипирование помогает экономить деньги?

Хорошо проработанный прототип — это своеобразный чертеж, который сокращает время на дальнейших этапах разработки. Он позволяет представить проект в конечном виде и внести корректировки еще до старта работ. После остается только технически реализовать задуманное, не изобретая ничего на ходу. Время вложенное в прототип хорошо окупится в будущем, так как сократит количество доработок, которые появятся в конце разработки. Они в любом случае будут, но так их будет минимум. Совсем без прототипа, может оказаться, что после запуска нужно переделывать добрую половину сайта. И снова в работу вступят программист, верстальщик, дизайнер… И каждому нужно будет опять платить деньги. Приведу простой пример. То что на этапе исправление прототипа займет 30 минут, на этапе разработки превратится в 300 минут рабочего времени. Создание прототипа сайта — это часть работы, за которую отвечает интернет-маркетолог и от того, как она будет выполнена зависит дальнейший успех веб-сайта (какая будет конверсия, как будут вести себя пользователи, удобно ли им будет взаимодействовать с сайтом и т. д.). Надеюсь, теперь понятно, почему нельзя недооценивать важность создания прототипов страниц сайта.

Когда нужно делать прототипы страниц сайта?

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

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

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

Эскиз страницы

Эскиз страницы сайта на бумаге При разработки большинства одностраничных сайтов (лендингов) достаточно нарисовать эскиз на бумаге или в электронном виде. Его мы называем графический прототип с низкой детализацией. Для разработки цифровой версии подойдет любой онлайн-сервис (программа для ПК) для создания схем или рисования. Для тех, кто предпочитает зарисовки от руки: листы бумаги, карандаши, ручки и вперёд! Только в некоторых индивидуальных ситуациях (для сложных лендингов) требуется разработать графический или даже интерактивный прототип с высокой детализацией.

Прототип сайта с низкой детализацией

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

Интерактивный

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

Какой тип выбрать?

Подведем итог и выделим типы прототипов:
  • Эскиз на бумаге или статичный прототип с низкой детализацией;
  • Статичный прототип с высокой детализацией;
  • Интерактивный прототип с высокой детализацией.
Разница между вариантами в скорости разработке и глубине проработки. Чем сложнее проект, тем дольше его разрабатывать. Важно выдержать баланс между затраченным временем на разработку и эффектом от него. Если создается одноэкранный сайт, то достаточно будет наброска на бумаге, потому что цена ошибки очень низкая и тратить много времени на прототип неэффективно. Напротив, при разработке крупного проекта нужно всё делать максимально тщательно, так как в итоге усилия окупятся и позволять избежать дополнительных затрат ресурсов на следующих этапах.

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

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

Перед стартом разработки необходимо провести большую подготовительную работу, по итогам которой появятся ответы на такие вопросы, как:
  • Для кого разрабатывается данный сайт или конкретная страница?
  • Какие возражения, относительно конкретного товара или услуги наиболее популярный среди этих людей? Какие наименее?
  • Главные факторы принятия решения о заказе?
  • Какие каналы коммуникации будут наиболее удобны для данной аудитории?
  • И многие другие.
При разработке каждого типа страниц сайта есть определенные маркетинговые принципы и правила. На лендинге, например, формы обратной связи должны быть равномерно распределены на странице, первый экран должен содержать оффер и преимущества, которые являются ключевыми для данной целевой аудитории и т. д.. Мы не будем разбирать этот момент в рамках данной статьи, но основная идея в том, что тонкостей много и чтобы разработать толковый прототип нужны определенные знания и опыт в разработке сайтов, трафике и интернет-маркетинге в целом. Поэтому если у Вас нет понимания, как сделать продающий, удобный сайт, то лучше обратиться за помощью к специалистам. Прототипирование сайта — ответственный этап работы, на котором закладывается:
  • весь маркетинговый фундамент будущего сайта;
  • создается понятный интерфейс взаимодействия с пользователем.
На этапе разработки прототипа лендинга прорабатывается и весь копирайтинг. После того, как подготовительный этап выполнен начинается непосредственно создание прототипа. Мы уже говорили о том, что прототипы могут быть разных типов и они сильно отличаются по техническому процессу разработки.

Какие есть методы разработки?

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

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

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

Цифровая версия предыдущего метода — работа в каком-нибудь онлайн-сервисе для создания схем или в графическом редакторе. Мы используем для прототипирование сайтов онлайн-сервис Miro.com. Для разработки используются простые геометрические формы разных цветов (круг, квадрат, прямоугольник), текст, изображения. Из простых элементов практически так же быстро, как на бумаге, создается прототип. Преимущества:
  • быстрая разработка
  • доступно в облаке
  • легкость доработок
  • бесплатно
Недостатки:
  • нет привязки к реальным размерам сайта
  • нет возможности создать интерактивные элементы

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

Для глубокой проработки прототипов используются специализированные сервисы/программы для прототипирования сайтов. Преимущества:
  • легкость доработок
  • доступно в облаке
  • есть пробный бесплатный период
  • возможности создавать ссылки и делать перелинковку между страницами прототипа (в некоторых программах есть функции разработки более сложных элементы: анимаций, всплывающих форм и т.д.)
  • есть привязка к реальным размерам сайта
Недостатки:
  • требуется время на изучение программы/сервиса
  • средняя скорость разработка
  • для постоянной работы потребуется полная платная версия
Сегодня существует большое количество инструментов для разработки. Они могут быть выполнены в виде:
  • онлайн-сервиса в браузере;
  • программы для ПК.

Пошаговая разработка

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

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

  1. Axure RP (программа для ПК)
  2. InVision (программа для ПК)
  3. Sketch (эксклюзивно для Mac)
  4. Balsamiq (программа для ПК или онлайн-сервис)
  5. Figma (онлайн-сервис)
  6. Ninjamock (онлайн-сервис)
  7. Moqups (онлайн-сервис)
  8. Mockflow (онлайн-сервис)
Программ для создания прототипа сайта на русском нет, все инструменты имеют только английскую версию, но это не должно пугать, так как интерфейс в большинстве из них прост и интуитивно понятен. Если все-такие возникнут трудности, то в интернете легко найти видео или текстовый обучающий материал. Axure RP — самая популярная программа для разработки прототипов. Очень мощная по функционалу, однако чтобы использовать ее на максимум потребуется какое-то время на обучение. Является одним из лучших решений для разработки сложных, интерактивных прототипов. Интерфейс программы Axure RP 9 Balsamiq — подойдет для разработки прототипов с низкой детализацией. Есть возможность связать страницы между собой с помощью ссылок. Инструмент прост в освоении и удобен в работе. К особенностям можно отнести своеобразный, рисованный стиль, в котором выполнены элементы и текст. Сервис популярен и имеет большое количество положительных отзывов. Прототип, созданный в программе Balsamiq

Резюме

  • Прототипирование — обязательный этап разработки любого сайта;
  • Создание прототипов — второй шаг разработки сайта, первый — подготовительный;
  • На этапе прототипа закладывается весь маркетинг и удобство интерфейса будущего сайта;
  • Прототипы бывают разных типов. Основное их отличие между собой — в скорости создания и глубине проработки (детализации). Тут необходимо выдержать баланс: чем сложнее проект, тем более детализирован он должен быть. Такой подход поможет сэкономить время на следующих этапах создания сайта. Правило работает и в обратную сторону. Для очень простых проектов будет достаточно прототипа в виде эскиза на бумаге;
  • С технической точки зрения прототипы бывают разных типов и нужно выбирать оптимальный вариант под конкретный проект;
  • Для разработки прототипов существуют специальные программы и приложения.
Максим Остропольский
Интернет-маркетолог, основатель блога SeoForge.ru
Оцените автора
( 4 оценки, среднее 5 из 5 )
Добавить комментарий