Прототипирование сайтов

26 июня 2015

в разделе Технологии

Прототипирование — это составление макета всего сайта или его отдельной страницы. По факту, это набросок, черновик, в котором нет места красивым…

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

По факту, сам прототип — это набросок, черновик, в котором нет места красивым картинкам. Его создают до дизайна и кода, а один макет съедает 20-60 минут в зависимости от его сложности, технического задания и ваших умений.

Прототип экономит время и деньги. Чтобы показать клиенту ориентировочный вариант сайта, провести A/B-тестирование и внести правки, не надо программировать и рисовать — схематического изображения достаточно.

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

Техническое задание + прототипирование = <3

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

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

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

По собственному опыту знаем: минимальный объем нормального ТЗ — 50 страниц. Примерно на таком уровне можно уже обстоятельно работать. Чем подробнее, тем лучше. Хоть и краткость — сестра таланта, это не в нашем слуае. Все нюансы должны быть прописаны до мелочей. Например, техническое задание PumpYT занимает 144 страницы, а ТЗ нашей новой системы администрирования — 172.

Прототип системы планирования

Бумажный макет

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

Мы не жадины и не состоим из говядины, поэтому делимся ими с вами. Внутри архива вы найдете горизонтальные и вертикальные варианты разметки окон.

Отдаем шаблоны окон браузера в добрые и хорошие руки с бархатной кожей. Прямо как у вас.

Сначала — футер и хедер

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

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

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

Для прототипирования мы используем и вам советуем:

Balsamiq mockups logo

Axure — профессиональный инструмент прототипирования. Сложнее и функциональнее, нежели Balsamiq. Поддерживает многостраничные макеты, переходы, кнопки, ссылки и прочие радости. Подходит для полноценной работы и тестирования на фокус-группах благодаря возможности создания цельных мокапов всего сайта.

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

Узнайте, почему клиентам так нравится работать с нами