В предыдущей статье я рассказывал о том, как создать более-менее приличное техническое задание на создание сайта. Там я говорил, что одного только текста в ТЗ не достаточно, вместе с ним, в большинстве случаев, разрабатываются и размещаются прототипы страниц сайта. Без которых очень сложно будет понять расположение элементов на странице и навигацию по сайту, которую заказчик хотел бы получить. Но в предыдущей статье тема создания прототипа была затронута вскользь. Давайте устраним этот пробел.
Конечно, нарисовать прототип можно на листочке, но эскиз не будет таким подробным и точным, как хотелось бы. Его можно создать в Photoshop, но вряд ли каждый хорошо владеет этой программой (если хотите научиться — вот уроки фотошопа). Так как же быть? Как создать макет достаточно подробный, потратив на работу минимум сил?
К счастью, сегодня существует очень много сервисов с интуитивно понятным интерфейсом, позволяющих создать прототип в полуавтоматическом режиме, максимально быстро и без специальных навыков.
Какой именно сервис выбрать — дело вкуса, поэтому расскажу сразу о нескольких, а затем рассмотрю один из них более подробно.
MockFlow
Сервисом MockFlow, интерфейс которого полностью англоязычен, с некоторыми ограничениями можно пользоваться бесплатно. Он позволяет создать не только прототип, но также карту сайта или анимированный баннер. Вы можете создать прототип под определённую популярную CMS (Drupal, Joomla, WordPress) или прототип приложения под любую мобильную платформу: iOS (интерфейс хоть iPhone, хоть iPad), Android или Windows Phone.
При работе вам не нужно ничего программировать — вы просто «конструируете», добавляя и правильно размещая блоки. Если веб-версией пользоваться неудобно, можно скачать приложение для ПК.
inVISION
Этот англоязычный сервис позволяет работать бесплатно только над одним прототипом, чего вполне хватит, чтобы оценить его и принять решение, пользоваться ли им дальше.
Moqups
Комбинируя фигуры, стрелки, кнопки, флажки, переключатели, иконки и прочие элементы, вы можете с невероятной лёгкостью создать довольно подробный, не имеющий излишеств, прототип, причём начать работать c Moqups можно даже без регистрации.
WireFrame
Работа над прототипом начинается, как только вы заходите на сайт. Почти всю страницу занимает рабочая область, сверху располагаются кнопки редактирования — всё предельно просто. Чтобы добавить элемент, щёлкните на рабочей области кнопкой мыши и, не отпуская её, проведите, как будто рисуете прямоугольник или линию. Отпустите кнопку мыши, выберите объект на появившейся панели и продолжайте рисовать.
POP
Этот конструктор реализован в виде приложения. Вы можете установить его на Android, iOS, Windows Mobile или компьютерную Windows 10.
Axure
Платный англоязычный сервис предназначен для создания прототипов, диаграмм и спецификаций. Большую популярность среди пользователей он завоевал возможностью создания интерактивных прототипов. Работать предлагается через приложение под Mac или Windows. Есть два варианта покупки: вы либо приобретаете бесконечную лицензию на использование, либо оформляете подписку на некоторое время. Приличная стоимость ПО компенсируется богатым функционалом.
Пример проектирования интерфейса на Balsamiq
Сервис прототипирования, который позволяет создавать макеты с низкой степенью детализации (для нужд ТЗ большего и не требуется). Остановимся на нём подробнее.
Работать предлагается через веб-интерфейс или приложение. Программу можно установить на компьютер с Windows. Сама инсталляция предельно проста. Для запуска требуется Adobe AIR, который устанавливается вместе с программой.
Сразу после запуска Balsamiq Mockups на экране появляется окно редактирования нового прототипа.
Интерфейс, хоть и английский, понятен и прост. В верхней части окна размещено, как и положено, главное меню, ниже — кнопки отображения/скрытия панелей, смены режимов работы и редактирования прототипа — своего рода панель быстрого доступа, дублирующая некоторые команды главного меню. Под ними находятся блоки, из которых и создаётся макет. Основную же часть окна занимает рабочая область, в которой и редактируется прототип.
Чтобы добавить элемент в прототип, просто переместите его с панели на рабочую область при помощи мыши или дважды на нём щелкните. Обратите внимание на вкладки — блоки распределены по группам, и чтобы увидеть их все, откройте вкладку All.
Свойства каждого элемента прототипа можно изменить в окне, которое открывается командой Propeties контекстного меню объекта. Особенно на первых порах пригодится смена цвета фона и границ, с помощью которых можно сделать так, чтобы блоки были не похожи друг на друга.
Если нужной команды на панелях вы не нашли, обратите внимание на главное меню программы. В нём есть следующие, открывающие подменю, пункты.
- Project. Содержит команды работы с документом: создание, переименование открытие, закрытие, сохранение, импорт, экспорт и т. п.
- Edit. Команды редактирования объекта: копирование, вставка, удаление и создание дубликата, выделение, включение режима трансформации, группировка и многое другое.
- View. Команды позволяют сменить внешний вид окна программы: отобразить или убрать различные панели инструментов. Здесь вы можете настроить окно так, чтобы вам было максимально удобно работать в программе. Если же вы «потеряли» одну из панелей, здесь она обязательно найдётся.
- Windows. Balsamiq позволяет одновременно работать сразу над несколькими прототипами, и это меню даёт возможность между ними легко переключаться.
- Help. Подменю помощи и справки. В этой программе оно не такое бесполезное, как во многих других. Здесь можно не только узнать информацию о программе или открыть англоязычную справку, но также перейти в сообщество пользователей или на страницу загрузки дополнительных блоков, которые потом можно использовать в прототипе (пункт Download More Controls (Mockups To Go)). Отсюда же можно обновить либо зарегистрировать программу (на бесплатное тестирование возможностей вам даётся месяц).
После редактирования прототипа не забудьте сохранить проект в файл для дальнейшей обработки (Project à Save project или Project à Save project as). Приложение использует файлы формата .bmpr.
Полностью готовый проект можно экспортировать в PNG-файл, чтобы прикрепить его к техническому заданию (этот и другие варианты находятся в подменю Project à Export).
Заключение
Сервисов для быстрого создания прототипов сайта существует масса, в этой статье я упомянул только небольшую их часть. Если вы часто строите прототипы, то можете протестировать все представленные варианты и выбрать для себя оптимальный. Если же работа с макетами в круг ваших постоянных обязанностей не входит, подойдёт любой вариант с простым интерфейсом, например, Balsamiq.
Сообщить об ошибке