Содержание
Что такое прототип и прототипирование?
Прототип — это схематическое изображение отдельной страницы или сайта в целом. Прототипирование — это процесс создания таких схем, один из первых шагов в разработке и первый этап визуализации будущего проекта.Как прототипирование помогает экономить деньги?
Хорошо проработанный прототип — это своеобразный чертеж, который сокращает время на дальнейших этапах разработки. Он позволяет представить проект в конечном виде и внести корректировки еще до старта работ. После остается только технически реализовать задуманное, не изобретая ничего на ходу. Время вложенное в прототип хорошо окупится в будущем, так как сократит количество доработок, которые появятся в конце разработки. Они в любом случае будут, но так их будет минимум. Совсем без прототипа, может оказаться, что после запуска нужно переделывать добрую половину сайта. И снова в работу вступят программист, верстальщик, дизайнер… И каждому нужно будет опять платить деньги. Приведу простой пример. То что на этапе исправление прототипа займет 30 минут, на этапе разработки превратится в 300 минут рабочего времени. Создание прототипа сайта — это часть работы, за которую отвечает интернет-маркетолог и от того, как она будет выполнена зависит дальнейший успех веб-сайта (какая будет конверсия, как будут вести себя пользователи, удобно ли им будет взаимодействовать с сайтом и т. д.). Надеюсь, теперь понятно, почему нельзя недооценивать важность создания прототипов страниц сайта.Когда нужно делать прототипы страниц сайта?
Прототип нужен для проекта любого масштаба. Вопрос только в том, какой тип выбрать.Типы прототипов
Прототип страницы сайта понятие достаточно широкое, так как это может быть просто эскиз от руки на бумаге, схема в формате картинки, либо детальный, интерактивный прототип. Классифицируем их по основным характеристиками. По глубине проработки деталей:- с низкой детализацией;
- с высокой детализацией.
- графический (статичный) — в виде графического изображения;
- интерактивный — с элементами взаимодействия, например, с кликабельными ссылками, рабочим слайдером, всплывающими формами или другими активными элементами.
- аналоговый — в виде рисунка;
- цифровой — созданный в программе (доступ к редактированию только у разработчика);
- облачный — находящийся в облаке (доступ к редактированию возможен для нескольких участников).
Эскиз страницы
При разработки большинства одностраничных сайтов (лендингов) достаточно нарисовать эскиз на бумаге или в электронном виде. Его мы называем графический прототип с низкой детализацией. Для разработки цифровой версии подойдет любой онлайн-сервис (программа для ПК) для создания схем или рисования. Для тех, кто предпочитает зарисовки от руки: листы бумаги, карандаши, ручки и вперёд! Только в некоторых индивидуальных ситуациях (для сложных лендингов) требуется разработать графический или даже интерактивный прототип с высокой детализацией.Прототип сайта с низкой детализацией
Небольшой многостраничный сайт потребует дополнительно проработать связь между страницами и создать шаблоны для каждого раздела, подраздела и отдельных страниц. Для такой работы удобно использовать специальные сервисы (о них ниже), предназначенные для разработки прототипов сайтов. Если сайт простой (без обилия сложных деталей на страницах), то будет достаточно интерактивного прототипа сайта с низкой детализацией. Единственным атрибутом интерактивности тут будет перелинковка. Важно её сделать между страницами прототипа, чтобы прототип удобно было тестировать и презентовать заказчику.Интерактивный
Прототип сайта, где будет большое количество разнообразных страниц и непростая структура разделов лучше создавать в виде интерактивного прототипа с высокой детализацией. Такой прототип будет похож на полноценный сайт, но в упрощенном виде (без дизайна и наполнения). В нем будут работать ссылки, слайдеры, меню и другие элементы. Такой прототип можно даже адаптировать под разные размеры экрана, в том числе под мобильное разрешение. Получится мощный каркас, который с одной стороны упрстит ход дальнейшей разработки, а с другой — определит четкие стандарты разрабатываемого проекта (размеры элементов и текста, отступы и так далее). Для разработки интерактивного прототипа используются инструменты, в которых есть функции создания активных элементов: выпадающих списков, работающих ссылок, анимированных объектов и так далее. Идея такого прототипа в том, что он дает возможность посмотреть на будущий сайт, протестировать каждый элемент, сразу исправить все слабые места. Но при этом к разработке не нужно привлекать программиста и верстальщика.Какой тип выбрать?
Подведем итог и выделим типы прототипов:- Эскиз на бумаге или статичный прототип с низкой детализацией;
- Статичный прототип с высокой детализацией;
- Интерактивный прототип с высокой детализацией.
Как сделать прототип?
Подготовительный этап
Перед стартом разработки необходимо провести большую подготовительную работу, по итогам которой появятся ответы на такие вопросы, как:- Для кого разрабатывается данный сайт или конкретная страница?
- Какие возражения, относительно конкретного товара или услуги наиболее популярный среди этих людей? Какие наименее?
- Главные факторы принятия решения о заказе?
- Какие каналы коммуникации будут наиболее удобны для данной аудитории?
- И многие другие.
- весь маркетинговый фундамент будущего сайта;
- создается понятный интерфейс взаимодействия с пользователем.
Какие есть методы разработки?
Эскиз на бумаге
Самый простой метод разработки — нарисовать прототип от руки. Берем листы бумаги, карандаши, ручки, краски и рисуем схему будущей страницы. Преимущества:- очень быстрая разработка
- бесплатно
- плохо масштабируется
- нет возможности совместной работы команды удаленно
- неудобство проведения доработок
- нет привязки к реальным размерам сайта
- нет возможности создать интерактивные элементы
Цифровой эскиз
Цифровая версия предыдущего метода — работа в каком-нибудь онлайн-сервисе для создания схем или в графическом редакторе. Мы используем для прототипирование сайтов онлайн-сервис Miro.com. Для разработки используются простые геометрические формы разных цветов (круг, квадрат, прямоугольник), текст, изображения. Из простых элементов практически так же быстро, как на бумаге, создается прототип. Преимущества:- быстрая разработка
- доступно в облаке
- легкость доработок
- бесплатно
- нет привязки к реальным размерам сайта
- нет возможности создать интерактивные элементы
Разработка с помощью специальных инструментов
Для глубокой проработки прототипов используются специализированные сервисы/программы для прототипирования сайтов. Преимущества:- легкость доработок
- доступно в облаке
- есть пробный бесплатный период
- возможности создавать ссылки и делать перелинковку между страницами прототипа (в некоторых программах есть функции разработки более сложных элементы: анимаций, всплывающих форм и т.д.)
- есть привязка к реальным размерам сайта
- требуется время на изучение программы/сервиса
- средняя скорость разработка
- для постоянной работы потребуется полная платная версия
- онлайн-сервиса в браузере;
- программы для ПК.
Пошаговая разработка
При разработке сложных проектов удобно использовать пошаговую схему:- Вначале создается эскиз, где утверждается общая концепция сайта.
- Затем создаются прототипы всех страниц с перелинковка, но пока с низкой детализацией. Определяется набор блоков, их расположение, основные элементы страницы.
- В финале разрабатывается интерактивный прототип с высокой детализацией. Определяются формы, размеры элементов, шрифты, отступы и т. д. Прототип приобретает вид будущего сайта, но в однотонных цветах, без картинок, иконок и т. д.
Инструменты для прототипирования
- Axure RP (программа для ПК)
- InVision (программа для ПК)
- Sketch (эксклюзивно для Mac)
- Balsamiq (программа для ПК или онлайн-сервис)
- Figma (онлайн-сервис)
- Ninjamock (онлайн-сервис)
- Moqups (онлайн-сервис)
- Mockflow (онлайн-сервис)
Резюме
- Прототипирование — обязательный этап разработки любого сайта;
- Создание прототипов — второй шаг разработки сайта, первый — подготовительный;
- На этапе прототипа закладывается весь маркетинг и удобство интерфейса будущего сайта;
- Прототипы бывают разных типов. Основное их отличие между собой — в скорости создания и глубине проработки (детализации). Тут необходимо выдержать баланс: чем сложнее проект, тем более детализирован он должен быть. Такой подход поможет сэкономить время на следующих этапах создания сайта. Правило работает и в обратную сторону. Для очень простых проектов будет достаточно прототипа в виде эскиза на бумаге;
- С технической точки зрения прототипы бывают разных типов и нужно выбирать оптимальный вариант под конкретный проект;
- Для разработки прототипов существуют специальные программы и приложения.