Что такое прототип сайта и для чего он нужен?

Веб дизайн 1 комментарий

Одним из основных этапов планирования при создании сайтов является прототипирование. Этот этап определяет не только общую структуру сайта, но и, позже, во многом влияет на отношение потенциальных пользователей проекта к готовому продукту. Именно прототип, а не макет определяет структуру сайта, удобство пользования им (или как сейчас модно говорить «юзабилити»).

Поэтому не стоит легкомысленно относиться к этому этапу сайтостроительства. Вначале давайте определимся с терминами.prototip

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

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

prototip4

Почему этот этап необходим?

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

Конечно, на свете существует множество типовых проектов и некоторые могут подумать: «Ну что тут уточнять? Почти точно такую же страницу мы разрабатывали уже много раз!» Но как верно сказано, что, в общем, всё устроено просто, а в деталях всё гораздо сложнее. Поэтому одна неучтённая деталь может нивелировать многодневные усилия и заставить заново переделывать всю работу. А такая неучтённая деталь обязательно будет, потому что не только проекты не бывают абсолютно одинаковы, но и заказчики тоже совершенно не похожи по своему мышлению и видению грядущего результата.

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

Основные преимущества прототипирования:

Во-первых, позволяет легко учитывать все факторы и производить изменения в ходе разработки прототипа;

Во-вторых, существенно ускоряет работу над проектом и взаимопонимание с клиентом и между разработчиками;

В-третьих, клиент и все участники проекта могут наглядно видеть процесс разработки и участвовать в корректировке;

В-четвёртых, чаще всего гораздо проще предусмотреть все детали проекта.

Как же сделать прототип?

Существует очень много способов это сделать. Самый простой и далеко не последний по эффективности это:

- Набросок на бумаге.

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

prototip3

 

Среди недостатков можно назвать отсутствие интерактивности – сложно представить, как всё будет работать в готовом проекте. Кроме того, если клиенту хочется «солидности», то листок с множеством пометок может его не впечатлить.

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

- Создание прототипа при помощи специализированных программ.

Среди подобных программ хочется особо выделить Axure Pro. Программа очень гибка и удобна, имеет интуитивно понятный интерфейс. Древовидная структура показываемых страниц и изменяемые свойства объектов дают возможность делать прототипы эстетически привлекательными и динамичными. Более того, в интерфейсе предусмотрена возможность испытать некоторые возможности работы сайта.

Axure_prototip

 

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

Ещё один широко применяемый способ, это:

- работа с прототипом при помощи графических редакторов.

Понятное дело, что для кого-то ближе GIMP, а кто-то работает в CorelDRAW. Не будем устраивать споров, поскольку всё же большинство проголосует за всем знакомый Photoshop.

prototip2

 

Созданный в графическом редакторе прототип уже несёт в себе основной дизайн проекта, выглядит эстетично и понятно. Удобство проработки мельчайших деталей, лёгкая перерисовка вариантов делают прототип очень привлекательным эстетично. Однако по мере усложнения задач прототипирование в графическом редакторе может привести к путанице, потому что статичные объекты не вполне отображают возможное реальное поведение элементов проекта. Поэтому в случае объёмных сайтов правильнее будет всё же работать со специализированными программами.  Потому что графические редакторы имеют низкий уровень интерактивности, а то и полное её отсутствие, что, понятное дело, может привести к недоработкам в готовом продукте. Кроме того, если вы не вполне владеете этими программами, процесс создания прототипа может быть для вас чрезмерно усложнён.

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

Кроме того, мы рассмотрели варианты прототипирования с использованием различных средств отображения, и основные особенности каждого варианта с их плюсами и минусами. Естественно, что нет универсальных инструментов на все случаи жизни. Для одного проекта проще избрать вариант с бумажным прототипом, а для другого и в специализированной программе придётся затратить много времени и сил, чтобы соблюсти его логическую целостность и структуру. Однако применение программного обеспечения требует определённых навыков, которые есть не у всех и на приобретение их придётся затратить немало времени. Однако эти навыки в перспективе очень ускорят работу и поднимут её качество на новый, более высокий уровень.  Тогда создаваемые вами сайты будут намного более «юзабельными», привлекательными для целевой аудитории и отличаться продуманной структурой и функционалом.

Поделиться:

Читайте также:

Веб дизайн 11.01.2017

Некоторые советы по продающим сайтам

Sorry, this entry is only available in Russian

Александр Орехов 0 комментариев


Веб дизайн 09.04.2016

Захватывающие истории при помощи инфографики

Sorry, this entry is only available in Russian

Александр Орехов 0 комментариев


Веб дизайн 15.06.2015

Какие преимущества когда дизайнер и

Часто, особенно среди фрилансеров, разработчики и дизайнеры работают над созданием сайта  отдельно друг от друга. Дизайнер создает макет сайта, разработчик

Ольга Милюшенко 0 комментариев


Подпишись на рассылку

без спама, только самое интересное

Комментарии


Pavel Koshkarev

Сам удивлен, что Corel не так популярен при прототипировании сайтов, учитывая, что развивается направление на использование векторных изображений в дизайне и контенте сайта

Оставить комментарий