Как создать статический прототип лендинга копирайтеру — простой способ

Неудачное визуальное представление способно испортить даже первоклассный текст для лендинга. Длинное полотно из цифр и букв тяжело оценить по достоинству, даже если оно разделено на абзацы и содержит списки. Совсем другое дело прототип. Аккуратные блоки текста находятся на своих местах. Они облегчают работу дизайнера и формируют совсем другое восприятие текста у заказчика.

Как создать прототип лендинга копирайтеру без установки и изучения сложных программ? В статье я познакомлю вас с функционалом одного из самых простых онлайн-сервисов для создания прототипов — wireframe.cc. Подробного обзора этого продукта в российском сегменте Интернета я не нашла.

Почему wireframe.cc — преимущества сервиса

Сразу скажу пару слов для тех, кто не знает, что такое прототип Landing Page. Под прототипом подразумевают схематическое отображение текстовых блоков, изображений, кнопок в том виде, в котором эта информация располагается на сверстанном лендинге, каким мы его видим в Интернете. Выглядит он вот так.

Макеты посадочных страниц делают в Axure, Photoshop, Balsamiq и т.д. Большинство из известных мне программ сложны, требуют установки на стационарный компьютер или просят регистрацию. Сервис wireframe.cc мне понравился из-за его простоты. Для создания прототипа лендинг пейдж не нужно регистрироваться или скачивать какие-либо программы на компьютер. Достаточно просто перейти по ссылке и начать работать.

Я выделила 4 главных преимущества инструмента:

• работает в онлайне;
• не нужна регистрация;
• минималистичный интерфейс;
• гораздо проще аналогичных программ.

Создание прототипа лендинга — обзор программы

Для примера я взяла один из своих недавних проектов — текст для лендинга по продаже франшизы в сфере видеонаблюдения. На его основе я покажу вам, как сделать макет, который после помещу в свое портфолио копирайтера. Поехали!

Начало работы

Скопируйте адрес сайта wireframe.cc и вставьте в адресную строку браузера. Откроется страница следующего вида.

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

Нажимаем на кнопку с настройками в правом верхнем углу страницы. В списке убираем галочку напротив строки Show grid («Показать сетку»), спускаемся ниже и задаем размер полотна в Canvas Size. За высоту листа отвечает второе число. Первое обозначает ширину экрана. Его я оставила без изменений, а высоту задала 5000 пикселей.

После проделанных действий нажмите кнопку Save. Сервис присвоит странице индивидуальную ссылку, которую вы потом можете переслать заказчику.

Теперь можно приступать к работе и превращать текст для лендинга в прототип.

Работа с информацией в wireframe.cc

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

Выделим объемный прямоугольник левой клавишей мыши. После выделения появится строка с выбором элементов. Так это выглядит в программе.

Сервис нам предлагает нарисовать (слева направо по порядку):

• прямоугольник;
• прямоугольник с закругленными краями;
• круг/овал;
• имитацию изображения;
• имитацию абзаца текста;
• имитацию списка;
• имитацию заголовков;
• текстовый блок с «рыбным» текстом внутри;
• поле для ввода данных;
• аннотацию.

Фигура выбирается нажатием левой клавишей мыши по соответствующей иконке.

На рисунке изображены все эти фигуры в том же порядке, что и в списке выше.

Теперь выделяем длинную узкую горизонтальную область. Посмотрим, какие объекты сервис прототипирования предлагает нам разместить в этом случае.

Из нового мы видим горизонтальную линию (иконка №3), слайдер (иконка №4), поле с раскрывающимся списком (иконка №5), горизонтальную полосу прокрутки (иконка №6). Вот так эти фигуры будут выглядеть на практике.

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

Верстка прототипа

Для создания прототипа я буду использовать текстовые блоки, горизонтальные линии (для разделения экранов), прямоугольники с закругленными краями (для кнопок CTA), имитацию изображений, списки, ползунок и конкретно в этом примере текста для лендинга будет полоса прокрутки. Рассмотрим нюансы создания некоторых элементов.

Форматирование текста

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

Для графических фигур задается толщина линий и цветовая гамма границ и тела фигуры.

Кнопки

Для создания кнопки выделите место, где она будет располагаться. Среди предложенных объектов кликните по иконке «Прямоугольник с закругленными краями». Откройте панель редактирования фигуры двойным щелчком мыши и залейте ее оранжевым цветом.

Напишем на кнопке текст. Аналогичным образом выделяем место расположения текста, то есть область самой фигуры. Кликаем по иконке текста и изменяем шаблонный вариант на свой. При желании меняем цвет и стиль.

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

Вот такой первый экран лендинга у меня получился. Макет логотипа делала точно так же, как и кнопки.

Создание и наложение слоев друг на друга

После первого экрана лендинга у меня идет блок подстройки. Выглядит он следующим образом.

Разберем, как сделать такие блоки.

Квадрат, расположенный в верхней строке, — это макет изображения. Выделите квадратную область на экране и в списке объектов выберите «Изображение». Затем кликните дважды по нему и залейте серым цветом.

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

Выделим место для длинного прямоугольника, выберем объект «Прямоугольник» и разукрасим его в темно-серый цвет. Рядом нарисуем светло-серую фигуру. Возле нее создадим текстовый блок с необходимой информацией.

Теперь остается собрать блок. Для этого перетащите светло-серый прямоугольник на темный, а затем поместите текстовую область внутрь получившейся фигуры. Полученный результат изображен на рисунке выше.

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

Описывать дальнейшие шаги по созданию прототипа лендинга в примере не имеет смысла, поскольку они идентичны. Здесь вы можете посмотреть конечный результат.

Заказчику можно отправить непосредственно прямую ссылку на проект в сервисе, но есть один нюанс. Любой человек, у которого есть доступ к прототипу, может внести в него изменения. Я предварительно группирую все блоки и блокирую возможность их изменения. Конечно, это все легко «отыграть» назад, но вряд ли заказчик станет разбираться в работе программы, чтобы самостоятельно внести правки.

Группировка, объединение элементов и блокирование информации от редактирования

В верхней панели инструментов есть несколько полезных функций. Например, вот такая форма состоит из фигур, кнопки, линий, текстовых полей. Логично объединить эти элементы в единое целое. Для этого нужно выделить их и нажать на кнопку Group Elements.

Функции других кнопок в верхней панели инструментов смотрите ниже.

Кнопка с замком предназначена для блокировки информации от редактирования. После нажатия на нее вы не сможете изменить выделенные элементы. Повторное нажатие отменяет ее действие.

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

Если вы хотите добавить комментарии для заказчика или дизайнера, или получить обратную связь от заказчика, сделать это можно прямо внутри проекта. Способ добавления аннотаций такой же, как и для других элементов, — выделяете область и выбираете в панели инструментов значок Add Annotation. В поле пишете текст комментария и нажимаете ОК. Блоки с комментариями выделяются оранжевой сеткой. Текст комментария виден при подведении курсора.

Добавлять комментарии можно и к заблокированным от редактирования элементам.

Недостатки сервиса

Недостатков у сервиса несколько:

• Мало графических объектов.Для создания сложного прототипа сервис не подойдет. Нет стрелок. Нет таблиц, хотя при желании их можно создать с помощью горизонтальных и вертикальных линий, но это займет много времени.
• Нельзя запретить редактирование для третьих лиц.Прототип в бесплатной версии программы может изменить каждый, у кого есть ссылка.
• Нельзя напрямую экспортировать в Jpg или Png.Эта проблема решается с помощью программ для создания скринов экрана с прокруткой.
• Ограниченная цветовая палитра.Не самый серьезный недостаток, но цветов хотелось бы побольше.
• Проблемы со скроллингом страницы.При скроллинге курсор хаотично перескакивает в разные места страницы.
• Нельзя вставить свои изображения.
• Прототипы получаются простые.В том же Mockup или Balsamiq возможностей для прототипирования гораздо больше.

В остальном инструмент справляется с поставленной задачей. Особенно полезен копирайтерам, которые сдают тексты для Landing Page в Ворде или делают в нем прототипы.

Понравилась статья? Поделитесь с друзьями