Инструменты

Moqups – легкий способ создать прототип сайта или приложения

Те из вас, кто имел дело с разработкой сайтов, знают, что перед тем как приступать к финальной верстке, нужно сделать макет будущего дизайна, обычно в PSD-формате (Photoshop). Затем, на его основе, верстальщик и программист, начинают разработку действующего сайта.

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

  • денег у вас нет или их недостаточно для оплаты дорого специалиста;
  • вы вроде и знаете что вам нужно, но объяснить не можете;
  • времени и желания составлять ТЗ тоже нет;
  • вам нужны только небольшие правки, а не редизайн в целом.

Особенно опасен пункт два, так как в результате, все может вылиться в кучу потраченного времени, вагон правок и результат, который соответствует желаемому, пожалуй, процентов на 80.

А что если взять и сделать макет самостоятельно? Спасибо Кэп, скажете вы, но я и с Paint то особо управляться не умею, не говоря уж о Photoshop.

Я вас утешу – технологии не стоят на месте. И те задачи, для решения которых раньше требовались знания и навыки на уровне обученного специалиста, теперь доступны для решения и полному новичку.

С помощью специализированных инструментов можно без проблем создать крутой прототип сайта или мобильного приложения, не будучи профессиональным дизайнером. Один из таких инструментов – сервис Moqups.com.

До того как начать работать с Moqups, я перелопатил кучу похожих сервисов и десктопных инструментов, но этот оказался самым удобным. Практически идеальным по соотношению цена/удобство использования/функционал. И юзабилити стоит поставить на первое место в списке – чтобы разобраться во всем, вам хватит минут 15-20 активного использования.

Вот пример макета, созданного мной лично – это фрагмент будущего редизайна сайта Webexpert.com.ua, раздела блога:

А вот еще несколько примеров прототипов по самым разным тематикам, которые создавались другими пользователями:

Система работы в Moqups выстроена по очень простой логике, и суть можно объяснить в двух словах – у вас есть холст и набор различных готовых элементов (Stencils), которые можно располагать на холсте в любом виде, создавая все, на что хватит фантазии. Делается это путем простого перетаскивания по алгоритму drag-n-drop.

Очень удобная фича – возможность импортировать изображения, если вдруг вы захотите добавить в свой макет элемент, которого нет в библиотеке сервиса. Например, можно сделать скриншот чужого сайта и просто добавить его к своему творению в режиме Copy/Paste.

К примеру, мы часто используем эту возможность при формировании рекомендаций для клиентов:

В Moqups можно создавать проекты, а затем, отдельные страницы внутри них:

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

Свойства каждого элемента можно настраивать, к примеру, его внешний вид. Для этого достаточно нажать на него левой кнопкой мыши, и справа появится панель форматирования:

При желании, можно нажать кнопку «Preview», в верхнем правом углу, а затем – «Full Screen» и посмотреть, как все выглядит на чистом листе, без элементов интерфейса:

Есть возможность экспортировать результаты своей работы в PDF/PNG, в том числе, с поддержкой Retina-экранов. Но, эта опция доступна только для платных тарифов.

Одна из моих любимых возможностей – комментарии. Ставить их можно где угодно, и в работе эта фича очень полезна. Пример как выглядит работа с комментариями, можно увидеть на анимации ниже:

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

Вот несколько наиболее очевидных способов использования Moqups:

  • создание макета сайта для будущей отрисовки в PSD-формате;
  • быстрые «зарисовки» для формирования концепции дизайна;
  • проектирование структуры сайта для разработчиков/SEO;
  • наброски рекомендаций по внедрению на сайте;
  • проектирование отдельных элементов интерфейса;
  • создание прототипов приложений для любых типов устройств.

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

В Moqups.com, кроме бесплатного аккаунта, доступно несколько тарифных планов, начиная с $19 в месяц. Ограничения бесплатного тарифа – 2 проекта в работе (до 300 объектов) и 5 Мб места на диске.

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

Поделитесь своим опытом работы с данным сервисом в комментариях! Или, может быть, подскажете какие-нибудь еще интересные сценарии его использования?