- Октябрь 24, 2017
Moqups.com: основные инструменты
Moqups: краткое руководство
Часть 2
В прошлый раз мы говорили о том, что представляет из себя moqups.com, зачем он нужен и как им вообще пользоваться. В этой же статье мы разберем основные инструменты, которые Вам придется чаще всего использовать при работе с мокапсом.
Moqups.com: основные инструменты
Инструменты, которые Вам придется использовать чаще всего, находятся в разделе «Common» меню «Stencils»:
С их помощью Вы сможете изобразить все основные элементы сайта, а также добавить в него тексты. Но самый, на мой взгляд, полезный из этих инструментов напрямую в создании сайта не участвует, зато помогает Вам донести свои идеи до тех, кто будет работать с макетом после Вас. Это записка, или «Note»:
Пришла в голову идея? Запишите ее в заметки! Нужно донести до дизайнера какие-то особенности блока — туда же! Описать функционал для разработчика? Снова на помощь приходят заметки!
И, конечно, с их помощью можно комментировать чужие макеты или просить кого-то прокомментировать Ваше творение. Впрочем, для комментариев в moqups’е есть и специальный инструмент, но никто не мешает использовать для этого разноцветные заметки.
Следующий инструмент — «Rectangle» — прямоугольник или попросту рамка:
С ее помощью удобно оформлять отдельные элементы, например, всплывающие окна. Или просто какие-то блоки, которые нужно отделить от остальных материалов на странице.
При этом Вам пригодятся две комбинации «горячих» клавиш: Ctrl + Shift + Up помогут поставить выделенный элемент на передний план, а Ctrl + Shift + Down, напротив, отправят его на задний.
Например, набрали Вы текст, а потом решили выделить его в отдельное окно. Перетаскиваете рамочку… А она закрывает текст собой. Достаточно просто нажать Ctrl + Shift + Down — и рамка оказывается на заднем плане, то есть под текстом.
«Heading» (заголовок) и «Label» (ярлык) — инструменты для ленивых.
Или для тех, кто пытается заложить в макет элементы верстки… Хотя мне и не очень понятно, зачем это нужно:
Почему для ленивых? Потому, что те же возможности (и даже больше) предоставляет нам следующий элемент, о котором мы поговорим.
В чем особенности этих двух элементов? В том, что в них по умолчанию используются стандартные для заголовков и текстов размеры шрифта. А еще в том, что текст в них можно набирать только в одну строку.
В общем, если Вам нужно набрать короткое пояснение или заголовок — они приходят на помощь (а еще я использую заголовки при предварительном макетировании, чтобы оперативно набросать структура будущего сайта). Если текст занимает больше одной строки — то лучше использовать «Paragraph» (он же абзац):
Это, пожалуй, один из самых полезных и универсальных инструментов. Хотите писать большие тексты — пожалуйста! Увеличить шрифт и написать заголовок — без проблем. Списки, различные выделения текста — все, что угодно.
А еще — тени, переносы, большие массивы текстов… В общем, все, что угодно. При оформлении большей части текстовых блоков используется именно «Paragraph».
Далее у нас идут узкоспециализированные инструменты.
Например, «Button» (она же — кнопка):
Как видите, кнопки могут быть самыми разными — круглыми, квадратными, прямоугольными, с углами любой формы и с любыми текстами. Все зависит только от Вашей фантазии и от функций, которые Вы на эту кнопку возлагаете.
«Link» (ссылка) — тоже инструмент «для ленивых»:
Обычный подчеркнутый текст синего цвета, который можно писать только в одну строку. Впрочем, он идеально подходит для того, чтобы добавить в макет эту самую ссылку.
Два вида чекбоксов (собственно «Checkbox» и «Radio»):
Различаются они только формой окошка чекбокса, во всем остальном — полностью одинаковы. Если Вам нужно дать пользователям Вашего сайта возможность выбрать что либо самостоятельно — теперь Вы знаете, как изобразить это в макете.
Если Вы еще не успели оформить свои блоки с помощью рамки, то можете использовать для того же «Text area»:
Это та же самая рамка, но только ввод текста в нее добавлен по умолчанию. Правда, располагаться он всегда будет в одном и том же месте выделенной площади. Но вдруг именно такой вариант Вам нужен?
Второй инструмент, показанный на иллюстрации выше, — это «Text input». Все отличие от «Text area» — только в цвете текста. Но это, пожалуй, один из самых часто используемых мною инструментов, так как с его помощью можно легко и просто оформлять различные формы для сбора контактов.
Три различных способа показать выпадающие меню и прочие похожие способы ввода информации на сайте:
- «Combo box» — стандартное выпадающее меню. Нажал кнопку — получил список пунктов, выбрал нужный;
- «Date picker» — календарь. Дату выставляет не автоматически, это я ее вручную выставил на дату публикации статьи. По умолчанию у него еще и американский формат написания (месяц перед числом). Не забудьте исправить, а то Вам так и сверстают!
- «Stepper input» — меню, которое подразумевает возможность пошагового изменения значений в сторону как увеличения, так и уменьшения. И это, само собой, вовсе не обязательно должны быть пиксели!
Следующие «близнецы» — это «Progress bar» и «Slider»:
Функционал у них практически одинаков, вся разница — только в оформлении. Традиционно можно настраивать как внешний вид, так и прогресс заполнения полоски.
Если Вам нужно отметить место, на котором будет размещена иллюстрация, то на помощь придет «Image placeholder». А если нужно просто обозначить, что какое-то место должно быть свободным (временно или постоянно — это зависит от Ваших задач), то пригодится «Placeholder»:
Зачем обозначать, что место будет занято? Например, Вам нужно отправить макет на согласование, а какой-то . А какой-то информации Вам пока что не хватает. Можно, конечно, просто оставить в макете пустое место… Но смотреться это будет как-то странно.
И тут на помощь приходит «Placeholder» — прикрыли им свободное пока что место, написали сверху заметку с информацией о том, что именно будет в этом месте — и спокойно отправили клиенту.
Кроме изображений, на сайтах приходится также размещать аудио и видео. Для их обозначения есть специальные инструменты — «Audio player» и «Video player»:
В работе с ними никаких особых хитростей нет. Размещаем их там, где нам нужны аудио- или видеоролик.
А вот «Calendar» (календарь) — инструмент более хитрый:
Достаточно указать в нем дату (все в том же американском формате, сначала месяц, потом — число). И он автоматически подгрузит правильный календарь на этот день.
Правда, выглядеть он будет не очень привычно — в самой левой колонке не понедельник, как мы привыкли, а воскресенье. Так что пишите дизайнерам и разработчикам пометку о том, как именно должен выглядеть календарь на Вашем сайте.
«Grid» (таблица) — вещь полезная, но непростая в обращении:
На иллюстрации выше Вы видите таблицу в том виде, в котором она будет представлена в макете. А вот как она редактируется:
Нужно добавить еще столбцы или строки — ставьте запятые, разделенные пробелами.
Есть у таблицы и дополнительные возможности для редактирования:
- «Header» — затемнение строки с названиями колонок;
- «Zebra» — затемнение строк таблицы через одну;
- «Sortable» — стрелки вниз рядом с названиями колонок (если не хотите запутать дизайнера — обязательно их отключите!);
- «Vertical» и «Horizontal» — соответственно, вертикальная и горизонтальная разлиновка Вашей таблицы.
По оставшимся инструментам пробежимся короткой строкой:
«Scrollbar» позволяет показать, как именно будет выглядеть окно прокрутки.
«Browser» — изобразить окно браузера. Отдельно можно прописать Title и адрес сайта.
«Search input» — поисковая строка. Текст в ней можно менять.
«Map» — простой способ обозначить, где на Вашем сайте будет размещена карта.
«Tabs» — закладки. Чтобы отметить одну (или несколько) из них затемнением — поставьте перед текстом на закладке звездочку (*).
«Banner» — баннер. Помните, я рассказывал про варианты использования инструмента «Placeholder»? Это очень схожий инструмент.
Вот Вам ситуация из практики: клиент хочет разместить на сайте какой-то банер, который для него готовит сторонний дизайнер. Отметили место для этого банера плейсхолдером, написали точный размер — и отправили клиенту на согласование, чтобы он мог отправить макет своему дизайнеру.
И последний оставшийся инструмент в разделе «Common» — рейтинги:
«Heart ratings» — это сердечки, а «Star ratings» — соответственно, звездочки. Изменить их цвета можно, а вот выбрать значения — нельзя. Никакой подтасовки результатов!
Вот и разобрали мы все основные инструменты — их уже достаточно для того, чтобы создать макет сайта. Но moqups.com предоставляет Вам гораздо больше возможностей — и о них мы поговорим в следующий раз!
Надеюсь, что эта статья была Вам полезна. Если у Вас остались вопросы — задавайте их в комментариях, и я на них обязательно отвечу!
Статьи в тему
- Что такое moqups и как с ним работать
- Что такое веб-аналитика и какая от нее польза?
- Браться ли за продвижение цветочного магазина?
- "Яндекс Метрика" - "Отчеты": кладезь полезной информации
- А Вы уже разработали свой план маркетинга-2017?