Как создать прототип лендинга в Google Docs

Продолжаю серию статей о простых сервисах для создания прототипов посадочных и главных страниц сайтов. В прошлый раз я рассказывала, как создать прототип в Wireframe.cc онлайн, а в этот раз речь пойдет о Документах Гугл.

Копирайтеры часто пишут информационные тексты в Google Docs, но не всегда знают, в чем сделать прототип лендинга. Разберемся, как Гугл Документы помогут нам в прототипировании.

Предварительные настройки страницы

Первым делом я захожу в настройки документа, делаю альбомную ориентацию страниц и убираю поля. Для этого выберите в строке меню пункт «Файл», «Настройки страницы».

Настраиваем внешний вид страницы

В окне с настройками поставьте указатель напротив горизонтальной ориентации страницы и заполните нулями все ячейки, предназначенные для полей.

Убирать поля не обязательно, но без них мне удобнее группировать элементы на странице.

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

Убираем поля и делаем страницу горизонтальной

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

Убираем разрывы страниц

Подготовка закончена. Теперь займемся непосредственно созданием прототипа лендинга. В качестве примера для этой статьи я буду использовать другой формат текста — главную страницу сайта в формате лендинга, но сути это не меняет. Поехали!

Формируем каркас прототипа для лендинга

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

Чтобы создать таблицу в документах Гугл, в главном меню выберите пункт «Вставка», «Таблица». Клавишей мыши укажите необходимое количество строк и столбцов.

Формируем каркас лендинга с помощью таблиц

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

Каркас первого экрана

А это он же, но уже с текстом.

Заполняем таблицу текстом

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

Слишком много места перед таблицей

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

Убираем пустое пространство

После этих манипуляций пустое место перед и после таблицы сокращается раза в три-четыре.

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

Убираем видимость у границ в таблицах

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

А теперь разберемся, как создать отдельные элементы для прототипа лендинга — формы захвата, кнопки, макеты изображений и т. д.

Для создания простого прототипа для посадочной страницы не нужно изучать все возможности сервиса Google Docs.

Какие функции нам понадобятся:

• рисование средствами Гугл документов;
• вставка сторонних картинок;
• работа с текстом;
• работа с таблицами.

Этого достаточно, чтобы создать хороший прототип для лендинга.

Работаем с панелью рисования

Чтобы вызвать панель рисования, в главном меню найдите пункт «Вставка» и выберите элемент «Рисунок». Откроется окно с инструментами для рисования. Здесь вы можете создавать кнопки с призывом к действию на лендинге, формы для сбора контактных данных и простенькие декоративные элементы, если в них есть необходимость.

Работаем с панелью рисования

Чтобы создать кнопку с призывом к действию, в окне рисования выберите фигуру — прямоугольник с закругленными краями. Мышкой нарисуйте ее. Автоматически получится светло-голубая кнопка, но вы можете изменить цвет по своему вкусу.

С помощью кнопки с буквой «Т» в окне для рисования добавьте текст. Можно установить его цвет, размер шрифта, интервалы и пр. Чтобы открыть панель редактирования текста, кликните на три точки в правой части экрана. Откроется скрытая панель с инструментами для форматирования надписей.

Создаем кнопки с призывом к действию

С помощью панели рисования я рисую разделители между экранами на макете лендинга. Это обычная горизонтальная черта через всю ширину документа, которая условно разделяет функциональные блоки на посадочной странице. Чтобы ее начертить, нажмите на соответствующий значок в окне для рисования, затем зажмите клавишу Shift (так вы зафиксируете линию строго в горизонтальном положении во время рисования) и нарисуйте линию.

Разделяем экраны лендинга горизонтальной чертой

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

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

Добавляем картинки из сторонних источников

Эта часть прототипа состоит из таблицы из двух столбцов. В первый я добавила картинку с макетом карты, а во втором нарисовала форму для сбора контактных данных через панель рисования в Гугл Докс.

Элемент посадочной страницы

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

Вы можете сэкономить время для работы с будущими проектами, если создадите папку с макетами мелких элементов лендинга из Интернета (прототипы изображений, слайдеров и т. д.). Повторяющиеся детали не обязательно создавать заново каждый раз, когда вы пишете текст для лендинга. Можно копировать любые таблицы, линии, рисунки из одного прототипа в другой.

О плохом и хорошем

Функций Гугл Документов хватает для создания простых статических прототипов. В качестве примеров приведу несколько работ в своем портфолио копирайтера, сделанных средствами Google Docs. Здесь находится свежая работа по созданию лендинг пейдж по услуге видеонаблюдения в детских садах, а по этой ссылке вы найдете прототип главной страницы для строительного сайта.

В Google Docs удобно работать над правками — комментарии заказчика привязаны к той части текста, которую нужно править.

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

Хотите заказать прототип лендинга? Загляните на страницу «Контакты» и напишите на почту или в социальные сети.

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