- Рубрика Полезные инструменты.
- Время прочтения: 11 минут
О ЧЕМ СТАТЬЯ?
Наверняка вы уже где-то слышали про этот сервис. И даже собирались его изучить, но у вас никак не доходили руки. Я вас понимаю: сложно браться за задачу, которая кажется абсолютно новой. Но именно сейчас самое время 🙂 Давайте посмотрим, что это за сервис такой, и как им пользоваться. А заодно нарисуем прототип лендинга.
В этой статье я пошагово расскажу и покажу:
- как начинать работу в Moqups
- в каком порядке работать с прототипом лендинга
- как писать заметки дизайнерам и верстальщикам
- нужно ли работать с цветовыми схемами и картинками.
Но сначала все-таки отвечу на ваш невысказанный вопрос.
Почему именно Moqups?
Потому что это — один из самых удобных сервисов для создания прототипов:
- это онлайн-сервис. А значит, в нем удобно показывать готовую работу заказчику. Достаточно просто прислать ссылку на страницу с прототипом
- у Moqups несложный интерфейс, и в нем легко разобраться даже с первого раза
- прототипы получаются наглядные
- Moqups подходит и тем, кто рисует в цвете, и тем, кто работает схематично.
А еще этот сервис проверен личным опытом коллег-копирайтеров. Многие из них создают прототипы лендингов в «Мокапсе» и очень тепло о нем отзываются.
Так что давайте и мы познакомимся с ним поближе.
Кстати, у нас есть статья «Как написать хороший текст для лендинга. Пошаговое руководство». Изучите обязательно.
Moqups: первое знакомство
В Moqups можно попасть двумя способами — зайти по прямой ссылке или скачать расширение для Google Chrome.
В итоге, в обоих случаях вы увидите вот такую страничку:

Чтобы начать работу, вам нужно будет нажать кнопку «Log in» и зайти под своим профилем. Если профиля пока нет, то система предложит создать его с нуля или войти под своим аккаунтом Google.
Но прежде чем переходить к рисованию прототипа, давайте посмотрим повнимательнее на сам сервис.
Что тут есть такого, что нам нужно знать?
Во-первых, Moqups — это англоязычная программа. Официальной русской версии нет, но работать это совсем не мешает. Благодаря простому интерфейсу, все можно понять даже на интуитивном уровне.
Во-вторых, у сервиса есть платная и бесплатная версия.
В бесплатной нас ограничивают только одним активным проектом и дают 5 МБ места для хранения изображений. В платной версии можно хранить больше — как проектов, так и картинок.

Бонусом к платным тарифам идет целый ряд полезных «плюшек». Это возможность работать в команде, приватные настройки (чтобы проект не видели другие пользователи), экспорт в PDF- или PNG-формате и многое другое.
Но если вы делаете лендинги не каждый день, то без этого можно и обойтись — бесплатного «Мокапса» вполне хватает для комфортной работы.
Создаем прототип лендинга в Moqups
Теперь можно переходить непосредственно к рисованию.
В обычной работе прототип создается на основе структуры лендинга. Но я, для простоты, возьму готовую страницу по статейному марафону и отрисую один из ее фрагментов в виде прототипа.
Сложнее всего здесь первый экран. На нем много графических элементов, цветов, шрифтов, а значит, он лучше всего подходит для понимания общей логики рисования в «Мокапсе». Давайте его и изобразим.

Рисуем меню
В сервисе Moqups слева есть вертикальное меню, в котором прячутся все нужные графические элементы. С него мы и начнем свою работу.
Нажимаем Stencils и выбираем Text Area — текст в рамочке. Перетаскиваем этот прямоугольник на рабочий лист, вписываем туда свой текст и форматируем, как нам нужно.

А потом копируем несколько раз и выстраиваем новые прямоугольники в один ряд. У нас получилось меню будущего лендинга.

Следующим шагом создаем фон
В готовом лендинге это — картинка, но в «Мокапсе» мы в точности так сделать не можем. Поэтому обозначим только форму картинки и ее цвет. Саму идею оформления опишем в примечании для дизайнера или верстальщика.
Для этого вытягиваем на наш лист прямоугольник (Rectangle) и треугольник (Triangle) и раскрашиваем их в серый цвет.
А вот логотип Академии обозначим картинкой. Я это сделала так: нашла в интернете логотип, загрузила его через меню Images — Upload images и перетащила мышкой туда, где он и должен быть.
Теперь все-таки напишем комментарий для дизайнера. Открываем меню Comments и нажимаем Add comment. На рабочем листе появляется синяя цифра, которая обозначает номер комментария. Кликаем по ней дважды и в открывшемся окошке пишем. Чтобы отправить комментарий, нажимаем Send.
В итоге получается вот такая картина:

По умолчанию на рабочем листе комментарии скрываются за цифрами, но их всегда можно развернуть или посмотреть в меню Comments.
Переходим к следующему этапу — делаем надписи
Заголовок и подзаголовок добавляем с помощью элемента Heading. Галочки находим в меню Icons и раскрашиваем в желтый цвет. Остальные надписи создаем с помощью элемента Paragraph в меню Stencils. Кнопку находим там же — она называется Button.

И наконец →
Рисуем нижнюю часть нашего фрагмента
Действуем по тому же принципу: иконки находим в меню Icons, а надписи делаем с помощью элементов Heading и Paragraph.
Так как я сейчас рисую только фрагмент лендинга, то у меня все элементы поместились на лист. Но в работе над реальным проектом этого листа чаще всего не хватает — его приходится растягивать. Для этого просто берем мышкой нижний край листа и тянем его вниз.

Как думаете, получилось похоже на наш исходник? На мой взгляд, очень даже.
А вот стоит ли рисовать именно так, в цвете и с картинками, ведь для этого есть дизайнер? Давайте посмотрим.
Цвета и картинки: стоит ли их подбирать
Да, в этом примере я сделала все по максимуму. Примерно так же работает и Юлия Третья — копирайтер, журналист и тренер:
Когда сдаешь клиенту прототип в «Мокапсе», а он ожидал просто текст, — это производит вау-эффект.
Там же все рекомендации прописаны, видно, как сделать блок, как оформить, есть примечания для дизайнеров или верстальщиков.
Если есть идеи по поводу картинок, то я их ставлю для примера, и вид у лендинга становится совсем другой. Да, поиск картинок — это чуть более затратно по времени, но зато у клиента нет ощущения «Ой, да что там писать, я бы и сам смог», и он не жалеет о затраченных суммах.
Но на самом деле можно работать и более схематично — прототип рисовать в черно-белой гамме, а визуальные эффекты описывать словами в комментариях.
Вот как это выглядит на практике:

Впрочем, если вам очень нравится оформлять работы, вы можете самостоятельно создать целый комплект иконок для лендинга и еще больше удивить вашего заказчика. Не бойтесь учиться и развиваться.
Мы сделали только один пример лендинга и не стали утомлять вас огромным количеством скриншотов на каждый шаг. Но чтобы в дальнейшем вам было легче работать, мы перевели интерфейс «Мокапса» на русский язык →
Теперь вы знаете, как нарисовать прототип лендинга в этом сервисе и как его можно оформить.
А вы создаете прототипы для своих клиентов? Расскажите, как вы это делаете. В каких программах рисуете, в каком виде показываете клиенту? Пишите — жду вас в комментариях.

Если вам понравился данный пост - вы можете
подписаться на получение новых материалов Академии ПРАВИЛЬНЫХ копирайтеров.
Благодарю за отличную инструкцию! Творческих успехов)
Спасибо, пригодится!
На русском языке, вообще класс!!!
Спасибо, материал поможет сделать мне тестовое задание для потенциального работодателя.
Получилось взять заказ в итоге?