Что такое Moqups
Moqups — это онлайн-сервис для создания макетов, диаграмм, прототипов сайтов и мобильных приложений. Разработчики рекомендуют его использовать также для изображения схем бизнес-процессов и даже для рисования интеллект-карт.
Из этой статьи вы узнаете:
- как пользоваться Moqups: основные пункты меню и инструменты
- как создать прототип интерфейса онлайн: сделаем это на примере готового лендинга
Начало работы
Использование онлайн программы дает несколько бонусов. Первый — скачивать ничего не нужно, т.к. вся работа происходит в браузере. Internet Explorer не подойдет, но все остальные популярные браузеры поддерживаются: Chrome 16+, Firefox 10+, Safari 5+, Opera 15+ (после названия браузера указана версия, начиная с которой в нем доступна работа с «Мокапс»). Можно перейти по ссылке https://moqups.com/ или скачать и установить расширение:
Важно: официального русского сайта нет, интерфейс англоязычный. Тем не менее, освоить приложение несложно: большая часть надписей сопровождается изображениями, так что интуитивно понятно, для чего нужен тот или иной инструмент.
Второе преимущество онлайн-приложения — специально сохранять тоже ничего не нужно. Это делается автоматически через небольшие промежутки времени.
Регистрация
Для начала работы придется зарегистрироваться. Можно использовать для входа пару: «электронный адрес + пароль» или же просто воспользоваться учетной записью Google (конечно, если она у вас есть):
Тарифные планы
Moqups — условно-бесплатное приложение. В бесплатной версии доступно создание только одного проекта размером не более 5 Мб. При этом в нем может быть максимум 200 объектов (текстовых блоков, картинок и т.п.). В этой версии невозможен экспорт результата, а также совместная работа над эскизом.
Все эти «плюшки» появляются только после покупки подписки. Текущие тарифные планы на скриншоте ниже:
Для наших целей вполне достаточно бесплатной версии, так что войдем в приложение и начнем рисовать прототип лендинга. В реальной жизни перед прототипированием нужно спроектировать, что, собственно, изображать. А перед проектированием придется провести серьезную аналитическую работу. Мы же поступим проще: возьмем готовую страницу сайта Школы Сергея Трубадура и сделаем ее макет в Moqups.
Как создать прототип лендинга в «Мокапс»
Выберем в качестве образца главную страницу сайта Школы. Уже на первых 3 ее частях расположено много различных элементов, которые мы потренируемся рисовать:
Нарисуем каждую часть отдельно, но сначала настроим проект в Moqups.
Шаг первый — создаем и настраиваем проект
После входа в приложение можно выбрать ранее созданный проект, создать новый пустой проект или воспользоваться готовыми шаблонами:
Выберем вариант Blank Project — в переводе на русский это значит «пустой проект» и увидим такую картину:
Зададим названия для проекта и страницы слева вверху:
Изменим размеры страницы так, чтобы на ней поместилось все необходимое. Для этого воспользуемся меню в разделе Workspace, выберем пункт Page Settings:
Размер задается в пикселях (условная точка, в них же измеряется, например, разрешение экрана). Здесь W — сокращенно от Width (ширина), H — сокращение от слова Height, высота.
Ширина и высота макета зависят от разрешения экрана, на котором будет просматриваться ваш лендинг. Обычно делают несколько вариантов для разных типов устройств: десктоп, планшет, смартфон. Стандарт ширины для десктопного варианта — 1920 пикселей. Если сделать меньше и установить фоновую заливку (фоновое изображение), то на экране с разрешением 1920х1280 по бокам будут видны белые полосы.
Высота зависит от наполнения страницы.
У нас же выбрана ширина 1300 пикселей — исключительно для того, чтобы изображения на скриншотах не были слишком мелкими.
Вернемся в меню Page Settings и поставим галочку у пункта Show paper grid. После этого на рабочем поле появится сетка. Это поможет в будущем располагать разные элементы на одном уровне по горизонтали и вертикали:
Если вы не доверяете автосохранению, то можете сохранить макет в любой момент времени самостоятельно, нажав комбинацию Ctrl+S или выбрать соответствующий пункт (Save) основного меню:
Шаг второй — загружаем картинки
Для прототипа заказчику часто бывает вполне достаточно черно-белой схемы, где вместо картинок используются так называемые заполнители, а рядом с ними — пояснения для дизайнера. Вот так это выглядит:
«Заполнитель картинки» перетянут мышкой из меню инструментов Stencils, расположенного в левой части страницы. Выбран инструмент Image placeholder. Комментарий добавлен с помощью пункта Add a comment раздела Comments.
Может быть, для ваших проектов такой схемы будет достаточно, но представляете, насколько более выигрышно будет смотреться прототип, в котором уже есть картинки и фоновые изображения? Это уже будет не просто проект, а «вау-проект»!
Нам же скачать картинки с готового сайта и вовсе не представляет труда. Сохраним фоновые изображения, логотип и рисунок из 3-й части на компьютер, а затем загрузим их в проект в разделе Images. Нажмем на иконку Upload:
И приступим, наконец, к основной работе.
Шаг третий — рисуем верхнюю часть лендинга
Перетащим мышкой картинку с логотипом в рабочую область и растянем ее так, чтобы она занимала примерно треть страницы по ширине:
- перейдем в раздел основных инструментов Stencils
- выберем там Paragraph (Параграф) — точно так же перетянем мышью на основное поле
- поменяем текст (двойное нажатие на прямоугольник)
- в правом меню изменим параметры шрифта
- там же выровняем наш текст по центру:
Адрес электронной почты для следующего элемента страницы можно разместить с помощью инструмента Label. Так же, как для текстовой области, поменяем текст и зададим параметры шрифта.
Иконку возьмем в меню Icons. Воспользуемся поиском по названию:
Кнопку изобразим с помощью инструмента Button. В меню форматирования справа поменяем параметры шрифта и зададим цвет границы. Вот так это будет выглядеть:
Теперь подумаем о красоте: хотелось бы, чтобы элементы не были разбросаны кое-как на странице, а были выровнены по верхней и нижней границе. Можно, конечно, долго и усердно двигать каждый из них вручную, но мы пойдем другим путем.
Группировка и выравнивание элементов в Moqups
Сгруппируем отдельно правую часть: мышкой выделим все элементы и в верхнем меню нажмем иконку Group:
Теперь выделим все элементы: это можно сделать либо мышью (зажать левую клавишу и обвести прямоугольную область) или же держать клавишу Shift и мышкой по очереди кликать на элементы.
После этого в верхнем меню выбираем Arrange и пункт Distribute vertically — все элементы равномерно распределятся по вертикали:
Теперь можно сгруппировать их, что позволит нам при необходимости двигать всю «шапку» целиком.
Обязательно пользуйтесь возможностями раздела Arrange. После выравнивания ваш макет будет выглядеть гораздо аккуратнее.
Все созданные группы можно увидеть в разделе Outline левого меню. Там же можно при необходимости присвоить им имена (двойное нажатие мышью на заголовок группы):
При выборе группы в верхнем меню становится доступной кнопка Ungroup, позволяющая разгруппировать элементы.
Шаг четвертый — рисуем меню
Можно нарисовать его с помощью нескольких прямоугольников, но лучше я расскажу, как правильно это сделать. Для меню существует специальный инструмент — Horizontal menu:
После редактирования пунктов меню приблизим его вид к оригиналу с сайта, для этого снова воспользуемся инструментами форматирования справа:
Обратите внимание, что можно отдельно настраивать цвета заливки и шрифта для активного и неактивного элементов меню. В результате получаем:
Шаг пятый — располагаем элементы на фоновой картинке
Начнем с простого: текстовых блоков. Снова воспользуемся инструментом Paragraph. В меню справа зададим параметры шрифта, выровняем все надписи по левому краю, а 3 последних — еще и по вертикали. Получим следующий результат:
Теперь самое интересное: перетащим фоновую картинку из раздела Images в рабочую область и растянем по ширине. Красивая картинка:
Вот только куда делись только что созданные надписи? Не пугайтесь — все поправимо. Выделим фоновое изображение и нажмем правую клавишу мыши. Появится контекстное меню, в котором выберем пункт Arrange и подпункт Send to back:
Теперь совсем другое дело:
Элементы можно наслаивать друг на друга. Для управления порядком расположения слоев воспользуйтесь подпунктами меню Arrange из верхней панели управления.
Вы точно так же можете скачать бесплатно фоны для лендингов, чтобы создавать свои вау-проекты.
По правде говоря, можно было начать с фонового изображения и на него перетаскивать другие элементы. Но тогда вы не научились бы управлять слоями, а это полезный навык.
Шаг шестой — рисуем вторую часть лендинга
В этом разделе главной страницы есть не только фоновое изображение, но и фоновая заливка темно-синим. Выше мы уже научились делать несколько слоев, поэтому проблем с реализацией не возникнет. Не будем подробно разбирать эту часть. Отметим лишь, что для фоновой цветной заливки можно применить инструмент Rectangle, а компонент для ввода текста изображается с помощью инструмента Text input.
Размещаем элементы, правим текст, меняем параметры в меню форматирования. После чего выравниваем и группируем элементы и получаем на выходе готовый блок:
Шаг седьмой — рисуем третью часть лендинга
Заголовок в этом блоке простой — отцентрированный текст. Вы без труда изобразите его на макете с помощью инструмента Heading.
Обратите внимание на то, что у первых двух надписей похожие параметры форматирования: одинаковое семейство шрифтов, размер кегля тоже совпадает. Различие только в цвете. Поэтому мы можем упростить себе задачу с помощью копирования блоков.
Для этого нужно выделить первый текстовый блок, затем либо вызвать контекстное меню нажатием правой клавиши мыши, либо нажать комбинацию клавиш Ctrl+C — стандартную для копирования.
Чтобы добавить на страницу копию выделенного блока нажмите комбинацию клавиш Ctrl+V, либо снова воспользуйтесь мышью: наведите курсор на свободную область, нажмите правую клавишу и выберите пункт меню Paste:
Этим действием мы «клонируем» первый блок. Осталось только переместить копию на нужное место, изменить текст и цвет шрифта.
Похожие элементы можно создавать с помощью копирования: используйте комбинации Ctrl+C\Ctrl+V или контекстное меню (открывается нажатием правой клавиши мыши).
Третью часть заголовка из 2 строк создадим с помощью инструмента Paragraph:
Приступим к изображению левого блока под заголовком. Он комбинированный: картинка + белая рамка. Казалось бы, ничего сложного: перетаскиваем заранее скачанное изображение, а сверху рисуем квадрат без заливки. Но уже на первом этапе нас ждет сюрприз: картинка прямоугольная! А в оригинале она почти квадратная. Но как мы ни растягиваем ее влево или вниз, пропорции не меняются. Так не пойдет — давайте разбираться, как поменять это поведение.
Поверхностное изучение меню форматирования изображения (справа от рабочей области) дает нам ответ. На скриншоте ниже вы видите «виновника» — это иконка Unlock aspect ratio (она выделена желтым маркером):
Нажмем на эту иконку. При этом изменится ее вид: она станет перечеркнутой, а надпись при наведении курсора поменяется на Lock aspect ratio. Теперь мы можем варьировать пропорции рисунка, как хотим. Сделаем это и перейдем к изображению белого квадрата.
Чтобы свободно растягивать изображение, необходимо отключить опцию Lock aspect ratio в меню форматирования выделенной картинки.
Нужный нам элемент управления называется Rectangle (прямоугольник). Перетянем его на изображение и растянем. Теперь нужно изменить параметры прямоугольника так, чтобы он стал прозрачным, а границы его должны стать белыми. Вот так должна выглядеть панель настроек для достижения нужного эффекта:
И сам результат на скриншоте ниже:
Левая часть последнего блока готова, осталось самое интересное: в правой части страницы есть уникальные элементы, которые мы еще не рисовали — уголки и разноцветные перечеркнутые квадраты. Начнем с уголков.
Готового элемента «угол» в панели инструментов нет, но мы можем сделать его, используя горизонтальную и вертикальную линии Horizontal line и Vertical line). Совместим начальные точки линий, зададим им одинаковую ширину, толщину и цвет:
После форматирования сгруппируем линии в единый элемент, этот уголок нам еще пригодится.
В нижней правой части блока тоже уголок, но иначе развернутый. Конечно, для его изображения тоже можно было отдельно нарисовать 2 линии. Но это делать необязательно: вспомним геометрию. Сравним 2 уголка (верхний и нижний) и увидим, что второй может быть получен из первого поворотом на 180 градусов.
Так что скопируем верхний уголок (сгруппированный элемент) и в панели форматирования зададим ему угол поворота:
Теперь осталось только передвинуть полученный элемент правее и ниже.
Все элементы можно поворачивать. Градус поворота задается в меню форматирования справа.
Между уголками расположены несколько текстовых блоков, объединенных общим заголовком. Они без особых сложностей моделируются инструментами Heading и Paragraph.
Слева от блоков — перечеркнутые квадраты. Т.к. цвет рамки не совпадает с цветом «крестика», использовать для их изображения иконки в Moqups не получится. Дело в том, что для иконок можно отдельно задать только цвета заливки и контурных линий, т.е. мы могли бы нарисовать так:
Не совсем то, что нам нужно. Поэтому поступим иначе: используем иконку с «крестиком» (найдем ее в разделе Icons), зададим для нее оранжевый цвет рамки и заливки. Синий квадрат нарисуем отдельно с помощью знакомого уже элемента Rectangle.
Комбинацию этих двух элементов сгруппируем и дважды воспользуемся сервисом копирования. После выравнивания получим готовый блок:
Оценим общий результат работы — нажмем на кнопку Preview в правой верхней части рабочей области:
Получилось очень близко к оригиналу. При этом мы потратили совсем немного времени и узнали столько, что вы сами уже способны давать уроки по использованию сервиса. А это значит, что помощью «Мокапс» можно быстро создавать прототипы лендингов с высокой степенью детализации.
P.S. Если хотите научиться писать продающие тексты и создавать прототипы лендингов, ждем вас в «Цехе копимаркетологов»
Или выбирайте «Кузницу бизнес-авторов», чтобы освоить 6 основных статейных форматов.
А бесплатный «Свободный курс» поможет войти в курс дела полным новичкам.
Екатерина Степанова
