О ЧЕМ СТАТЬЯ?
Наверняка вы уже где-то слышали про этот сервис. И даже собирались его изучить, но у вас никак не доходили руки. Я вас понимаю: сложно браться за задачу, которая кажется абсолютно новой. Но именно сейчас самое время 🙂 Давайте посмотрим, что это за сервис такой, и как им пользоваться. А заодно нарисуем прототип лендинга.
В этой статье я пошагово расскажу и покажу:
- как начинать работу в 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.
Так как я сейчас рисую только фрагмент лендинга, то у меня все элементы поместились на лист. Но в работе над реальным проектом этого листа чаще всего не хватает — его приходится растягивать. Для этого просто берем мышкой нижний край листа и тянем его вниз.
Как думаете, получилось похоже на наш исходник? На мой взгляд, очень даже.
А вот стоит ли рисовать именно так, в цвете и с картинками, ведь для этого есть дизайнер? Давайте посмотрим.
Цвета и картинки: стоит ли их подбирать
Да, в этом примере я сделала все по максимуму. Примерно так же работает и Юлия Третья — копирайтер, журналист и тренер:
Когда сдаешь клиенту прототип в «Мокапсе», а он ожидал просто текст, — это производит вау-эффект.
Там же все рекомендации прописаны, видно, как сделать блок, как оформить, есть примечания для дизайнеров или верстальщиков.
Если есть идеи по поводу картинок, то я их ставлю для примера, и вид у лендинга становится совсем другой. Да, поиск картинок — это чуть более затратно по времени, но зато у клиента нет ощущения «Ой, да что там писать, я бы и сам смог», и он не жалеет о затраченных суммах.
Но на самом деле можно работать и более схематично — прототип рисовать в черно-белой гамме, а визуальные эффекты описывать словами в комментариях.
Вот как это выглядит на практике:
Впрочем, если вам очень нравится оформлять работы, вы можете самостоятельно создать целый комплект иконок для лендинга и еще больше удивить вашего заказчика. Не бойтесь учиться и развиваться.
Мы сделали только один пример лендинга и не стали утомлять вас огромным количеством скриншотов на каждый шаг. Но чтобы в дальнейшем вам было легче работать, мы перевели интерфейс «Мокапса» на русский язык →
Теперь вы знаете, как нарисовать прототип лендинга в этом сервисе и как его можно оформить.
А вы создаете прототипы для своих клиентов? Расскажите, как вы это делаете. В каких программах рисуете, в каком виде показываете клиенту? Пишите — жду вас в комментариях.
Благодарю за отличную инструкцию! Творческих успехов)
Спасибо, пригодится!
На русском языке, вообще класс!!!
Спасибо, материал поможет сделать мне тестовое задание для потенциального работодателя.
Получилось взять заказ в итоге?