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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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