Изучая спецификацию проекта по созданию сайта, зачастую можно увидеть пункт с разработкой прототипа. Данный вид работ, как правило, относится к блоку дизайна, но может включать в себя и элементы верстки. Прототип помогает пользователю понять схему страницы ресурса и заранее увидеть, где какой контент блок будет расположен. Для интернет магазинов создание прототипа определяет расположение основных элементов каталога и карточки товара, а для посадочных страниц и лендингов с помощью прототипа выделяются ключевые блоки УТП (уникального торгового предложения) и главные кликабельные зоны. Поможет прототип и для оценки проекта, особенно когда у клиента есть четкое понимание визуала, но он не знает технических особенностей. Как видно плюсов у прототипирования очень много, но нужны ли эскизы страниц для всех проектов, или данные работы необходимы только для сложных задач и больших сайтов?
Какие бывают прототипы?
В тематике сайтостроения можно встретить самые разные прототипные решения страниц и каждое из них будет являться рабочим эскизом. Для сложных проектов подготовка прототипов осуществляется в специальных программах, нередко на стороне клиента вносятся изменения в сам файл, а на выходе получается анимированная версия сайта с возможностью клика и простейшей анимацией. Для субподряда характерна подготовка html-прототипа, и такой вид эскиза может сразу идти в основу верстки. Анимации и глубокого детализирование он обычно не имеет, но так же кликабелен. У корпоративных сайтов прототипы так же встречаются часто, особенно когда у клиента нет понимания какая структура будет на странице, или что значат экраны в макете. В основном, для решения подобных задач подходит отрисованный на бумаге эскиз. Давайте подробнее рассмотрим основные виды прототипов:
-
Динамическая детализированная схема – именно так можно назвать самый сложный из прототипов. Для создания подробной кликабельной концепции потребуется детальная проработка всех макетов страниц и установка взаимосвязи блоков между собой. Фактически, перед клиентом разворачивается полноценная верстка веб-сайта без элементов дизайна и модулей, что позволяет кликать по кнопкам, переходить на страницы, вызывать поп-апы. Данные прототипы можно создать в специальных программах или онлайн сервисах, например в Фигме или Draftium’е.
-
Технический дизайн или мокап. В основу этих видов прототипа ложится отрисовка основных страниц в Фотошопе или Axure. Подобные решения можно также использовать в верстке, но их основная задача показать и функциональные и контентные блоки разделов. Очевидным плюсом подобного мокапа является возможность клиентов вносить корректировки в файл, а в некоторых случаях даже самому делать концепцию.
-
Сетка сайта от руки. Лист бумаги, много прямоугольников и квадратов, подписи ручкой и через 30-40 минут времени перед вами эскиз веб-ресурса на листе бумаги. Максимально простое и понятное графическое решение поможет клиенту понять суть разбивки страницы и ориентировочный функционал. Но самое главное, бумажный эскиз не требует установки программ, доступен каждому и отлично синхронизирует идеи заказчика и аккаунт менеджера.
Прототип это дополнительная работа для агентства?
Бытует несколько стереотипных мнений о прототипах, одно из которых гласит – «прототипирование было придумано специально как дополнительная статья расходов в спецификации». Так же приходится слышать, что ввязываясь в разработку мокапа сайта, особенно у несложных корпоративных проектов, студия делают пустую (ненужную) работу, без которой можно было сэкономить много времени. Оба мнения можно смело отнести к ошибочным, ибо звучат они, как правило, от людей поверхностным пониманием смысла прототипов. Работы по прототипированию действительно добавляют трудочасы в смету, но при этом они сократят количество макетов, необходимых для отрисовки, тем самым экономя время дизайнера и верстальщика. У простых проектов создание эскиза убережет клиента от перебирания концепций дизайна (частая проблема с заказчиками, которые не знаю что хотят). По своему опыту можем сказать, что если в спецификации есть пункт с прототипом, то для проекта это будет точно необходимо.
