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

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

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

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

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

Минимальный набор инструментов для создания прототипа – ручка и бумага. Обычно этот метод используется при первоначальном обсуждении структуры макета сайта. Затем в ход вступают специальные инструменты. В работе мы используем Axure.

Существует два типа прототипов: динамические и статические. Статический тип – обыкновенная картинка с возможностью добавления пояснений. Динамический тип позволит представить, как будет работать Ваш ресурс. Есть возможность нажимать кнопки, переходить по определенным ссылкам и так далее.

Атомный путь – динамические прототипы. На их создание уходит на 15-20% больше времени, но результат понятен клиенту, и он уже видит логику работы своего будущего сайта практически полностью.

Интересная история про прототипирование

К нам обратился клиент из сферы образования (ссылка на портфолио). У него было свое видение сайта, техническое задание и вариант прототипа, который его не устраивал. Нам нужно было разработать прототип будущего сайта.

«Ерунда!» – подумали мы. Рассчитывали справиться за 10-15 часов, но в итоге потратили 33!

Что мы сделали и почему проект настолько затянулся

В первую очередь, мы учли главное пожелание клиента: «Сайт должен продавать!» - поэтому пришлось зайти со стороны качественного представления информации, чтобы посетителю было понятно предназначение каждой страницы, что можно посмотреть еще, что ему предлагают, какие наилучшие предложения есть. Мы сделали специальный фильтр по образовательным программам.

Во вторую очередь, важно было сделать акцент на реализуемость проекта. У нас большой опыт разработки сайтов, и при создании прототипа мы думали и за дизайнеров, и за верстальщиков, и за разработчиков.

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

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

В четвертую очередь, очень много времени ушло на согласование различных элементов прототипа и объяснение клиенту, что не нужно отрисовывать каждую страницу, особенно если они текстовые и имеют один шаблон (шапка, сайдбар, подвал и контент). Мы все-таки создаем концепцию будущего дизайна, а не занимаемся его наполнением.