BalsamiqMockups: как создать макет будущего продающего сайта

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

image001

Точно также получается и с сайтами. Автор блога об интернет-маркетинге Context-UP, Ринас Коробейников, расскажет, что нужно сделать в первую очередь, чтобы создать качественный конечный продукт. Для начала необходимо создать набросок – скетч, где все элементы будут на своих местах. Только после этого создается дизайн, а затем и сам веб-ресурс.

image003

Именно для этой задачи были созданы специальные инструменты. BalsamiqMockups – один из них. Именно с ним мы сегодня и поработаем.

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

В Бальзамик можно делать различные вещи:

  1. Создавать макеты сайтов;
  2. Создавать макеты мобильных приложений;
  3. Создавать макеты программ на ПК (PC).

Конечно, никаких излишеств нет – все достаточно просто.

Так выглядит BalsamiqMockups внутри:

image005

Работа с Бальзамик на первый взгляд может показаться сложной из-за большого количества различных кнопок, но пугаться не стоит – достаточно присмотреться, как сразу становится понятно, как с ней работать.

Разберемся с интерфейсом

image007

  1. Группы элементов (контролов). Все элементы разбиты по соответствующим группам: допустим, заголовки, текстовые области находятся в группе “Text”, а прямоугольники и окружности – в группе “Containers”;
  2. Элементы. Здесь выбираем нужный элемент и перетаскиваем его на рабочую область(3), затем делаем с ним все, что нужно;
  3. Рабочая область. Тут ведется абсолютно вся работа с элементами мокапа (скетча): можем натягивать-перетягивать, составлять тексты и тому подобное;
  4. Свойства выделенного элемента: шрифт, цвет, размер и другие;
  5. Другие скетчи.

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

Создадим макет

На самом деле, создание скетчей в BalsamiqMockups заключается в перетаскивании элементов на рабочую область и последующей работе с их свойствами. Больше ничего сложного тут нет.

Итак, приступим к практике:

1. Открываем программу. Перед вами чистый лист:

image009

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

image011

3. Создаем хедер – шапку сайта. В шапке обычно находится логотип, номер телефона, дескрипт, может еще и триггер, быстрое меню:

image013

4. Далее оформим первый экран – добавим заголовок, оффер (торговое предложение, форму захвата контактных данных:

image015Ну и добавляем другие информационные блоки.

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

Если вы хотите создать макет LandingPage, то вам наверняка будет интересно почитать статью на тему “Структура продающего LandingPage“.

Прокомментируйте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>