Создать сайт - задача не из легких, которая требует повышенного внимания к каждой детали. Сделать сразу красивый, структурированный веб-ресурс не представляется возможным. Вспомните, чтобы нарисовать какой-то объект, например цветочную вазу, на холсте, художник сначала делает небольшой набросок, состоящий из прямых линий, затем придает очертания и только после этого начинает делать мазки кистью. В итоге получается красивая цветочная ваза правильной формы.
Точно также получается и с сайтами. Автор блога об интернет-маркетинге Context-UP, Ринас Коробейников, расскажет, что нужно сделать в первую очередь, чтобы создать качественный конечный продукт. Для начала необходимо создать набросок - скетч, где все элементы будут на своих местах. Только после этого создается дизайн, а затем и сам веб-ресурс.
Именно для этой задачи были созданы специальные инструменты. BalsamiqMockups - один из них. Именно с ним мы сегодня и поработаем.
BalsamiqMockups - программа платная, есть бесплатный тестовый период в 7 дней. Однако по истечении срока ею можно продолжать пользоваться, правда, сохранить макет не получится. Найти выход из этой ситуации можно. В крайнем случае можно провести манипуляции со временем и бесконечно долго продлевать тестовый период.
В Бальзамик можно делать различные вещи:
- Создавать макеты сайтов;
- Создавать макеты мобильных приложений;
- Создавать макеты программ на ПК (PC).
Конечно, никаких излишеств нет - все достаточно просто.
Так выглядит BalsamiqMockups внутри:
Работа с Бальзамик на первый взгляд может показаться сложной из-за большого количества различных кнопок, но пугаться не стоит - достаточно присмотреться, как сразу становится понятно, как с ней работать.
Разберемся с интерфейсом
- Группы элементов (контролов). Все элементы разбиты по соответствующим группам: допустим, заголовки, текстовые области находятся в группе "Text", а прямоугольники и окружности - в группе "Containers";
- Элементы. Здесь выбираем нужный элемент и перетаскиваем его на рабочую область(3), затем делаем с ним все, что нужно;
- Рабочая область. Тут ведется абсолютно вся работа с элементами мокапа (скетча): можем натягивать-перетягивать, составлять тексты и тому подобное;
- Свойства выделенного элемента: шрифт, цвет, размер и другие;
- Другие скетчи.
Над группами находится быстрое меню, где можно отменить действие или наоборот вернуть его, скопировать, вставить.
Создадим макет
На самом деле, создание скетчей в BalsamiqMockups заключается в перетаскивании элементов на рабочую область и последующей работе с их свойствами. Больше ничего сложного тут нет.
Итак, приступим к практике:
1. Открываем программу. Перед вами чистый лист:
2. В контролах находим либо прямоугольник, либо окно браузера или еще что-то в зависимости от задачи. Перетаскиваем его на рабочую область мышкой, либо делаем двойной щелчок ЛКМ по нужному элементу:
3. Создаем хедер - шапку сайта. В шапке обычно находится логотип, номер телефона, дескрипт, может еще и триггер, быстрое меню:
4. Далее оформим первый экран - добавим заголовок, оффер (торговое предложение, форму захвата контактных данных:
Как видите, фишка этой программы заключается в максимальной простоте создания скетча сайта. Конечно, здесь нельзя создать интерактивный макет, нельзя наделить его какими-то функциями. Зато можно быстро - буквально за один вечер создать хороший мокап и отправить его дизайнеру.
Если вы хотите создать макет LandingPage, то вам наверняка будет интересно почитать статью на тему "Структура продающего LandingPage".