Что такое прототипирование сайта

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

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

• Создание прототипа должно выполняться в короткие по времени сроки;
• Должна быть предусмотрена возможность быстрого внесения правок в исходный код сайта;
• Прототип должен быть полностью интерактивным;
• Макет должен быть размещен на площадке, которая даст возможность посмотреть его тем, кто работает над проектом, включая заказчика, из разных устройств и мест, без необходимости посещения веб-студии;
• В некоторых случая необходимо выполнить детализацию создаваемого проекта.

Само же прототипирование сайтов происходит следующим образом:

1. Исходя из ТЗ, определяются основные требования, которым должен соответствовать сайт.
2. Изучается весь контент, который будет расположен на сайте (включая все текстовые медийные и графические элементы).
3. Создается первичный вариант прототипа, содержащий пользовательский интерфейс.
4. Созданный макет передается заказчику на оценку и внесение правок.
5. После чего происходит доработка макета, повторное согласование и верстка готового веб-продукта.

Виды прототипирования сайтов

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

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

Программа для создания макета сайта. На сегодняшний день предложение подобных программ давно превысило спрос. Это могут быть как онлайн сервисы, так и устанавливаемые программы на компьютер. Из минусов тут можно отметить только время, которое вы потратите на первоначальное изучение работы программ, дальше все пойдет намного легче. Вы начнете создавать макеты с более высокой скоростью, которые дадут вам возможность более оперативно внести в него изменения. Также с помощью этих программ можно создать сразу резиновый дизайн. Кстати, многие из таких ресурсов подходят для дальнейшей верстки сайтов. Необходимо отметить и то, что при помощи таких программ можно представлять макеты в виде изображений или кода HTML. В этом случае нельзя не упомянуть об их основном достоинстве: валидная верстка на самом начальном этапе создания проекта!

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

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

Из плюсов:

• Сжатые сроки создания макета;
• Возможность добиться более-менее приемлемой детализации прототипа;
• Возможность оставить комментарии на проекте.

Из минусов:

• Более длительное время на исправление замечаний (нужна будет еще одна отрисовка макета);
• Полное отсутствие интерактива;
• Полное отсутствие доступа к проекту удаленно;
• Также стоит учитывать время доставки проекта заказчику (не всегда есть возможность отправить макет каким-либо электронным способом).

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

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

Подведем итоги

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

• Прежде всего верстальщик будет иметь внятное понимание о расположении и масштабе всех элементов сайта на каждом разрешении экрана. Здесь не лишним будет упоминание того, что в последнее время приобрели популярность различные мобильные устройства, и основное внимание при создании сайтов уделяется именно им. Ведь расположение блоков на десктопной и мобильной версии кардинально отличается друг от друга.
• Мы сможем на начальной стадии создания сайта выявить и предупредить все возможные ошибки как визуальной, так и программной части сайта. Но рекомендуем все же основной упор на этой стадии сделать на визуальное расположение блоков и юзабилити проекта в целом. Успешность проекта в дальнейшем зависит, в основном, именно от этих факторов. Насколько быстро пользователь найдет искомое, и насколько удобно будут расположены элементы для визуального восприятия определят посещаемость и популярность вашего ресурса.
• Кроме того, прототип сайта поможет определить его точную стоимость, и предполагаемый план его развития.
• Также макет закрепляется за техническим заданием и является одним из его дополнений.

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