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 Мб места на диске.
Если не планируете делать что-то масштабное, вам этого будет вполне достаточно. Хотя, это один из тех инструментов, за которые действительно не жаль и заплатить.
Поделитесь своим опытом работы с данным сервисом в комментариях! Или, может быть, подскажете какие-нибудь еще интересные сценарии его использования?