Услуга

bogdn.com
Макет дизайна
Макет дизайна

Дизайн макет, разработанный по всем трендам в Sketch App

Входит в стоимость ✓

Описание

Подробности услуги

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

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

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

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

image001

Какие бывают прототипы

По возможности взаимодействия можно разделить их на следующие виды:

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

Пример статического прототипа корпоративного сайта можно увидеть по ссылке слева карта сайта со ссылками на страницы.

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

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

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

Что нужно для того чтобы сделать качественный прототип

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

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

Выводы

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

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


Заметка

База знаний

ДЛЯ КАКИХ ПРОЕКТОВ НУЖНО СОЗДАВАТЬ ПРОТОТИП? КАК ПРОТОТИП ПОМОГАЕТ ОЦЕНИТЬ САЙТ?

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

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

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

Создание прототипа позволяет проводить достаточно точную оценку разработки. Ее точность будет примерно 60-70%, чтобы увеличить процент точности до 85-90%, нужно оценивать уже по готовому дизайну.

Здесь разница формируется за счет того что на этапе дизайна возможны новые требования и некоторые отклонения от прототипа сайта. Можно, конечно, делать дизайн просто «раскрашивая» прототип, но дизайн международного уровня, который получит награду, таким путем не сделаешь. Поэтому на этапе дизайна часто появляются требования, которые могут серьезно изменить оценку верстки и всего front-end а иногда и повлиять на серверную часть.

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

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

Оптимальный уровень детализации прототипа САЙТА

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

создавая прототип корпоративных сайтов и небольших интернет магазинов можно рисовать детальный прототип только 3-5 ключевых страниц, другие выполнить на уровне простых мокап;
порталы, онлайн сервисы, SaaS и веб стартапы нужно моделировать на детальном прототипе и полностью все страницы. Читайте об этом подробнее в статье о нашем опыте проектирования стартапов (coming soon)
Создавать и мокап и прототип сайта лучше сразу в профессиональных инструментах типа Axure PR. Да, этот инструмент платный и требует специального изучения, но зато в нем можно гибко управлять уровнем детализации и при необходимости реализовать даже очень сложную динамику, чего более простые инструменты типа Balsamiq Mockups не позволяют.

Разница между прототипом и мокап в разных источниках трактуется по-разному, мы же считаем, что мокап, это простой структурной эскиз в статике, по сути картинка, которую можно нарисовать как в специальной программе, так и просто от руки: