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

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

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

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

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

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

prototip4

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

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

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

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

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

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

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

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

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

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

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

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

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

prototip3

 

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

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

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

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

Axure_prototip

 

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

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

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

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

prototip2

 

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

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

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

Поделиться:

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

Веб дизайн 09.04.2016

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

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

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


Веб дизайн 11.01.2017

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

Достаточно типичную ошибку допускают многие предприниматели, решившие начать свой бизнес во всемирной сети. Они сначала создают себе предлагающий услуги сайт

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


Веб дизайн 15.06.2015

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

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

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


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

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

Комментарии


Pavel Koshkarev

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

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