Простое создание прототипа сайта с программой Balsamiq Mockups

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

03 Март, 13:57
Леонид Родинский
Копирайтер
1373
0

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

Прототипы статические и динамические

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

  • Статический прототип. Вариант уже упомянутой «почеркушки», сделанный с помощью буквально любой подходящей программы – от MS Word до Adobe Photoshop. Главное требование к программному обеспечению – возможность создавать фигуры и делать надписи. На листе размещаются все элементы будущей страницы, формируется статичный макет.
  • Динамический прототип. Здесь уже придется воспользоваться специальной программой, в которой предусмотрено внедрение ссылок и переходы по ним. В остальном – это несложные редакторы, оснащенные необходимым инструментарием для размещения обозначений разметки веб-страницы.

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

Рассмотрим динамическое прототипирование с использованием программы Balsamiq Mockups – инструмента несложного, но обладающего внушительным функционалом.

Описание программы Balsamiq (v. 3.5)

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

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

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

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

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

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

Создание прототипа веб-страницы

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

  • Разместите на рабочем поле элемент «Браузер» (Browser). Обратите внимание, при масштабировании (изменении с помощью перетягивания боковых маркеров), появляются цифровые обозначения размера. Это свойство используется для всех масштабируемых объектов. Двойной клик на элементе вызывает окно надписи, в котором можно ввести собственные названия и поясняющие тексты.
  • Воспользуйтесь инструментом A big title и создайте название страницы. Ниже расположите подзаголовок. Ориентируйтесь на направляющие линии, с помощью которых легко определить пространственное взаиморасположение объектов. Это помогает создать визуальную логику элементов.
  • Для обозначения логотипа примените Image, разместите его в нужном месте. Двойным кликом по элементу вызывается окно выбора изображения – в макет можно загрузить нужную картинку. Для изменения надписи применяется Ctrl+двойной клик.
  • Завершите создание шапки сайта размещением блока контактной информации.

Сформировав блок, выделите все его элементы (Ctrl+клик) и сгруппируйте их. Воспользуйтесь режимом Full Screen (Ctrl+F) и посмотрите, как ваша страница выглядит на дисплее монитора. Дальнейшее создание прототипа уже не составит для пользователя технической трудности. Все нужные для этого инструменты он найдет на верхней панели.

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

САМОЕ ИНТЕРЕСНОЕ НА СТРАНИЦЕ
“ЗЕКСЛЕР” В Facebook и ВКОНТАКТЕ

Комментарии (0)

Добавление комментария:

4 + 6 =

Подписаться на новые статьи

Подпишитесь на новые статьи и вы будете получать самые свежие новости прямо к вам на почту