Как создать прототип лендинга в 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.

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

Как думаете, получилось похоже на наш исходник? На мой взгляд, очень даже.

А вот стоит ли рисовать именно так, в цвете и с картинками, ведь для этого есть дизайнер? Давайте посмотрим.

Цвета и картинки: стоит ли их подбирать

Да, в этом примере я сделала все по максимуму. Примерно так же работает и Юлия Третья — копирайтер, журналист, тренер и куратор нашей Академии:

Когда сдаешь клиенту прототип в «Мокапсе», а он ожидал просто текст, — это производит вау-эффект.

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

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

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

Вот как это выглядит на практике:

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

Теперь вы знаете, как нарисовать прототип лендинга в этом сервисе и как его можно оформить.

А вы создаете прототипы для своих клиентов? Расскажите, как вы это делаете. В каких программах рисуете, в каком виде показываете клиенту? Пишите — жду вас в комментариях 🙂

Наталия Дёмина
Об авторе:
Наталия Дёмина
Копирайтер-художник. Редактор Академии
Сайт автора: shinytext.ru

Если вам понравился данный пост - вы можете
подписаться на получение новых материалов Академии ПРАВИЛЬНЫХ копирайтеров.