Создаем крутые прототипы лендингов в Adobe Illustrator (+ бонус)

Правильное расположение элементов на продающей странице так же важно, чем сам текст. И я уверен, что продумывать его должен копирайтер, а не дизайнер. Кто из нас занимается маркетингом, в конце-концов?

Для создания макетов (прототипов) Landing Page я использую крутую программу Adobe Illustrator. О ней и расскажу и этом руководстве.

Идею для этого гайда мне подал Алексей Офицеров своим гостевым постом про Photoshop.

Также я подготовил для вас небольшой бонус — проект с уже готовыми элементами лендинга. С его помощью вы создадите макет очень быстро.

• Зачем мне создавать макеты?
• Почему именно Adobe Illustrator?
• Создание проекта
• Работа с текстом
• Работа с объектами
• Практические советы по созданию макетов
  • Разделители экранов
  • Группирование объектов
  • Комментарии
  • Дополнительные монтажные области
  • Сетка
• Сохранение прототипа
• Бонус: готовые объекты для создания Landing Page
• Заключение

Зачем мне создавать макеты?

Хотите брать за свои тексты больше денег? Прототипирование — прямая дорога к повышению цен. Ничего сверхсложного в этом нет, а требовать за работу вы сможете на 1-2 тысячи больше.

Преимущества прототипа перед обычным текстом:

• Выглядит в разы презентабельней — это важно для многих клиентов.
• Наглядный.
• Готовое т\з для дизайнера.
• Если вы все делаете правильно, больше вероятность получить хорошую конверсию.

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

Почему именно Adobe Illustrator?

Да, есть специальные программы для рисования макетов, вроде или . Почему я не использую их?

• В Иллюстраторе можно рисовать не только макеты. Вы можете создать в нем полноценное коммерческое предложение или оформить рекламный пост для Вконтакте.
• Здесь можно настроить интерфейс под себя. Любые меню и инструменты убираются, перемещаются и выносятся на панель быстрого доступа.
• Вы можете отправить клиенту не только PDF-макет, но и сам проект. Это облегчит последующую работу дизайнера над лендингом.
• Более отзывчивое управление и «умное» выравнивание. Moqups даже рядом не стоит.

Недостаток только один: Иллюстратор требователен к ресурсам компьютера. Но если у вас нормально работает Фотошоп — можете не беспокоиться на этот счет.

Недавно в моем блоге вышел пост про создание макетов в Photoshop. При всем уважении к этой программе, у нее есть один большой минус — высокий порог вхождения. Все эти слои — очень непонятная штука для новичков.

В Illustrator никаких слоев нет. Вы создаете объект и перемещаете его мышкой в нужное место. Как в обычном графическом редакторе. Второе преимущество — в одном проекте можно сохранить сразу несколько макетов. Например, сам лендинг и всплывающее окно заказа. Мелочь, а удобно.

Ну, хватит рассуждений, пора верстать прототип!

Создание проекта

У меня установлена последняя версия Adobe Illustrator CC. Если вы пользуетесь более ранней — интерфейс может немного отличаться.

Для начала нужно создать новый проект. Откройте меню «Файл» и выберите пункт «Новый».

Никакие настройки, кроме размеров, вам не нужны. Для для лендинга выберите ширину — 800 px. Высоту можете не трогать — поменяете в процессе.

Вот что у вас получится.

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

Чтобы изменить высоту страницы, нажмите Shift+O или кликните по иконке «Монтажная область» на панели слева.

Теперь просто кликните по нижнему (или верхнему) краю страницы и растяните ее.

Когда закончите, нажмите Esc, или просто выберите любой другой инструмент.

Работа с текстом

Теперь нужно добавить на лендинг ваш текст. Начнем с заголовка. Нажмите T или кликните по инструменту «Текст» на панели слева.

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

Чтобы перенести заголовок (или сделать что-нибудь еще), кликните по значку «Выделение». Помните, что пока вы редактируете текст, горячие клавиши не работают.

Теперь щелкните по объекту и перетащите его в нужное место. Чтобы отредактировать текст — кликните по нему дважды или выделите и нажмите T (инструмент «Текст»).

На панели сверху можно выбрать шрифт и размер кеглей.

Чтобы открыть еще больше настроек — нажмите на «Символ» или «Абзац».

Если нужно применить настройки ко всему тексту — просто выделите его с помощью инструмента «Выделение» (V). Если к какой-то его части — перейдите в режим редактирования (T) и выделите нужную фразу (как в Word).

Давайте сделаем наш заголовок жирным и выровняем его по центру.

Теперь добавим подзаголовок и немного текста.

Собственно, это все, что вам стоит знать про работу с текстом для создания качественных макетов.

Работа с объектами

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

Единственный инструмент, который вы будете использовать при создании макета — «Фигура». Для прототипа вам нужны прямоугольники и, может быть, круги. Остальное лишнее.

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

Удерживайте клавишу Shift при растягивании объекта — и его пропорции сохранятся. Так можно нарисовать ровный квадрат или круг.

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

Чтобы перестать рисовать фигуры, выберите инструмент «Выделение» (клавиша V). Теперь вы можете перетащить свой прямоугольник в нужное место и изменить его размеры.

Вы также можете закруглять углы у прямоугольников. Для этого наведите курсор на белую точку возле угла и переместите ее к центру или от центра фигуры.

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

Теперь поменяем цвет прямоугольника. Выделите его и дважды щелкните по значку «Заливка» на панели слева.

Выберите цвет или скопируйте его код в поле #.

Если фигура должна быть прозрачной (рамка), кликните по значку «Без цвета».

Теперь настроим обводку. Дважды кликните по значку «Обводка», чтобы задать ее цвет.

Толщина и тип линии (сплошная, пунктир и т.д.) задаются на верхней панели.

Чтобы повернуть объект, выделите его и поставьте курсор возле любого голубого квадрата на контуре (но не на самом квадрате).

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

Если вы размещаете несколько объектов в одном месте, они могу закрывать друг друга. Чтобы выбрать, какой должен быть позади, а какой — впереди, используйте инструмент «Монтаж».

Выделите объект, кликните по нему правой кнопкой мыши и откройте раздел «Монтаж». Фон поместите на задний план, а текст — на передний.

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

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

Разделители экранов

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

Чтобы нарисовать линию, нажмите \ (не путать с /) или выберите инструмент «Отрезок» на панели слева.

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

Толщина линии задается с помощью инструмента «Обводка», как и в случае с фигурами.

Я советую выделить разделитель экранов каким-нибудь цветом, чтобы его не спутали с частью лендинга. А еще укажите номер экрана, чтобы ни у кого не возникало вопросов.

Группирование объектов

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

Для начала выделите несколько объектов. Зажмите Shift и нажимайте на каждый по очереди. Либо «захватите» рядом стоящие элементы с помощью рамки.

Теперь кликните по одному из выделенных элементов правой кнопкой мыши и нажмите «Сгруппировать».

Больше вам не нужно выделять все объекты сразу — достаточно выбрать один из них. Вы можете перемещать группу и менять ее размер. При этом возможность редактирования текста никуда не исчезает.

Если нужно поменять расположение объектов внутри группы, нажмите правую кнопку мыши и выберите пункт «Разгруппировать».

Вы можете делать несколько уровней групп. Например, объединить заголовок и подзаголовок, потом добавить к ним изображение, котом сгруппировать целый экран.

Я советую группировать все элементы, которые должны стоять рядом, и целые экраны. Так вы избавитесь от геморроя при перемещении. Захотели поменять 3 и 5 экраны местами — не надо выделять десятки элементов.

Комментарии

Комментарии позволяют наглядно объяснить что-то важное клиенту или дизайнеру. Например: «Здесь нужно использовать фото улыбающейся девушки» или «Эти 2 элемента можно поменять местами. Я бы провел A/B тестирование.»

В принципе, вам не надо изобретать ничего сверхъестественного. Просто создайте блок текста и выделите его другим цветом. Мне нравится красный. Чтобы указать на что-то — используйте красные линии.

Мне нравится рисовать указатели для комментариев с помощью инструмента «Перо». Нажмите P или выберите его на панели слева.

Пером вы создаете точки, которые соединяются линиями. Чтобы закончить отмечать вершины, нажмите Enter или Ecs. Так можно нарисовать многоугольник или какую-то сложную фигуру.

Сделаем простую выноску и напишем комментарий.

Если вам нужно перенести одну из вершин фигуры, выделите ее и нажмите A. Если кликните по иконке «Прямое выделение». А затем выделите вершину и перетащите ее в нужное место.

Дополнительные монтажные области

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

Выберите инструмент «Монтажная область» (Shift+O) и кликните в любом месте экрана за пределами уже существующей страницы. Растяните новую область, как будто создаете обычный прямоугольник.

Сетка

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

Выравнивать объекты по клеточкам гораздо удобнее. Теперь нужно настроить сетку, чтобы работать с ней было еще комфортнее. Откройте меню «Редактирование», «Установки» и выберите пункт «Направляющие и сетка».

Задайте следующие параметры:

• Цвет: светло-синий;
• Линия через каждые: 100 px;
• Внутренее деление на: 5.

Теперь сетку хорошо видно, и она отлично вписывается в нашу страницу шириной 800 px.

Если вы хотите, чтобы объекты автоматически выравнивались по сетке, нажмите Ctrl+Shift+» или выберите пункт «Выравнивать по сетке» в меню «Просмотр». Отключается функция аналогичным образом.

Теперь при перемещении элементы будут «прыгать» по ячейкам сетки.

Сохранение прототипа

Чтобы сохранить проект макета, нажмите Ctrl+S или откройте меню «Файл» и выберите пункт «Сохранить». Укажите название, а тип файла оставьте по умолчанию (.ai).

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

Клиенту вы отправляете изображение. Чтобы его получить, нажмите Ctrl+Shift+Alt+S или выберите пункт «Сохранить для Интернета» в меню «Файл».

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

В графе «Имя» выберите PNG или JPEG.

Теперь нажмите «Сохранить» и укажите месторасположение и имя файла.

Вы также можете отправить макет в формате PDF вместо изображения, чтобы он мог выделять и копировать текст. Нажмите Ctrl+S и укажите тип файла — Adobe PDF.

Чуть ниже можно указать, хотите ли вы создать PDF-файлы для всех монтажных областей или выбрать несколько из них.

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

Бонус: готовые объекты для создания Landing Page

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

Загрузите файл и откройте его в Adobe Illustrator
Скачать

Этих элементов мне обычно хватает, чтобы создать полноценный макет Landing Page.

Переключаться между открытыми проектами можно с помощью закладок вверху.

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

Я создаю прототипы именно с помощью этой заготовки. Правда, раньше она выглядела не так опрятно.

Заключение

Я считаю, что Illustrator — лучшая программа для создания прототипов. Возможно, с непривычки интерфейс покажется вам слишком громоздким. Но я уверяю, что вы быстро привыкнете.

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

Оцените статью:

Понравилась статья? Поделитесь в социальных сетях!