Прототипирование. Обзор основных программ.

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

Само понятие прототипирование происходит от древне-греческого πρῶτος — первый и τύπος — первообраз; оттиск, отпечаток. То есть это как бы «черновик» будущей страницы или же целого сайта. Основным преимуществом данного этапа является то, что, не применяя существенных усилий и не тратя много времени, можно увидеть работающую систему создаваемого интернет-ресурса. Это дает возможность детально рассмотреть логику структуры сайта, и избежать многих ошибок в дальнейшей работе.

Для чего нужно прототипирование?

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

Как происходит процесс прототипирования?

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

Какие основные требования к прототипам сайта?

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

Исходя из этого, можно выделить следующие требования к прототипам интернет-ресурса:

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

Специальные программы для создания прототипов

• Balsamiq Mockups

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

Также специалистам интернет-маркетингового агентства «МедМаркетинг» нравится, что в этой программе достаточно много готовых элементов, причем все они разбиты на тематические категории. Найти то, что нужно – также несложно, надо ввести хотя бы несколько первых букв во встроенную строку поиска.

Элементы, которые есть в Balsamiq Mockups:

• текстовые блоки,
• окна приложений,
• таблицы,
• простые фигуры,
• кнопки,
• картинки,
• стрелки и др.

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

После окончания работы над макетом вы можете сохранить его в форматах PNG или PDF, что может вам пригодиться для печати или при необходимости демонстрации своего проекта на устройствах, не имеющих доступа к сети. Кроме этого, есть возможность экспортировать проект в виде XML-файла. Это даст вам возможность открыть его позднее в Balsamiq Mockups и продолжить редактирование, а также переслать макет по почте коллегам для внесения правок.

• Axure Pro

Не менее популярная программа для создания прототипов. Она простая, и также весьма удобна. Есть возможность быстро создать прототип, изменять расположение и свойства элементов. Кроме того, в этой программе можно частично протестировать юзабилити будущего сайта или странницы. А благодаря тому, что результат затем выгружается изображением или html-документом, прототип можно показывать всем участникам проекта.

Из особенностей хотелось бы отметить:

• Можно подключать к проекту клиента;
• Эффективная обратная связь;
• Возможность управления дискуссией;
• Удобство в работе с командой.

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

• Mockingbird

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

• Notism

Это онлайн-программа, в которой можно создавать прототипы не только для компьютеров, но также и для мобильных телефонов. Это также платная программа, есть несколько пакетов, которые отличаются функциональностью. Особенностью ее являются так называемые «горячие точки», которые ставятся на изображении, и создают связи с другими страницами. Кроме того, дополнительно команда, которая работает над проектом, имеет возможность общаться при помощи примечаний и Sketeches. Экспорт в таких форматах, как JPG, PNG и GIF.

• Froont 

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