• Сентябрь 14, 2017

Что такое moqups и как с ним работать

Moqups: краткое руководство

Часть 1

Хочу рассказать Вам об инструменте, который мы используем для создания прототипов сайтов — об онлайн-редакторе moqups . В сегодняшней статье поговорим о том, зачем он вообще нужен и разберем базовые принципы работы с ним.

Зачем нужен moqups?

moqups

Для начала давайте разберемся: зачем вообще нужен moqups?

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

Но как донести эту информацию до исполнителей, например — до дизайнеров, которые должны воплотить Ваши замыслы в жизнь?

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

Но насколько удобно будет работать с таким макетом? Понятный ли у Вас почерк — легко ли будет дизайнеру разобраться в том, что Вы написали? Поймет ли он особенности функционала, заложенного Вами?

На своем опыте могу сказать, что недопониманий может возникнуть очень и очень много. И хорошо, если дизайнер не постесняется до бесконечности терзать Вас вопросами, чтобы все было сделано именно так, как Вы задумали. Обычно же несостыковки вылезают на поверхность уже после того, как дизайн-макет полностью готов. И все приходится переделывать заново…

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

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

moqups

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

Один проект Вы можете создать совершенно бесплатно, а вот если Вам нужно больше — то уже придется платить.

Но давайте перейдем к основным инструментам, которые используются при создании макета.

Основные принципы работы с moqups’ом

Инструменты, которые Вы будете чаще всего использовать при создании своих макетов, находятся в левом боковом углу (вкладка «Stencils», закладка «Common»):

moqups

Принцип работы со всеми инструментами одинаковый — выбираете нужный, зажимаете его левой кнопкой мыши и перетаскиваете в рабочую область экрана:

moqups

Затем можете изменять его основные параметры (обычно это внутреннее содержание и размер элемента) прямо там, в рабочей области. А все дополнительные инструменты, позволяющие проводить тонкую настройку элементов, расположены в правом боковом меню:

moqups

Итак, общий принцип работы очень простой: берете нужный инструмент, перетаскиваете его в рабочую область, размещаете его там так, как Вам удобно, меняете текст и форму. Если нужна дополнительная — более тонкая — настройка, то используете функции из правого меню.

Что еще Вам может пригодиться для начала работы? Возможность создавать новые страницы и копировать уже существующие. Сделать это позволяют инструменты вкладки «Pages»:

  • «New page» — создать новую страницу;
  • «Create a new folder» — создать новую папку;
  • «Move to Trash» — удалить папку или страницу;
  • «Duplicate selected items» — копировать выбранную папку или страницу.

moqups

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

Для работы с изображениями предназначена вкладка «Images» — открываете, нажимаете «Upload images», выбираете и загружаете нужное изображение — все довольно стандартно.

moqups

Но удобнее выбрать нужное изображение прямо в папке, в которой оно хранится, скопировать его (с помощью клавиш «Ctrl + C»), а затем щелкнуть мышью по рабочей области экрана и вставить изображение (с помощью контекстного меню или клавиш «Ctrl + V»).

Итак, Вы создали макет. Но как поделиться им с кем-то другим (особенно если Вы не хотите давать этому другому доступ к своему аккаунту)? Поможет главное меню и функцию Export:

moqups

Нажимаете, выбираете… И получаете Ваш макет в формате PDF или PNG — все очень просто и быстро.

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

Если у Вас остались вопросы по основным принципам работы с moqups’ом — задавайте их в комментариях, и я обязательно на них отвечу.


Федор Бондаренко,руководитель отдела маркетинга и копирайтинга

Статьи в тему