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

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

03 March, 13:57
Леонид Родинский
Копирайтер
7442
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.

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

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

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