Получи клиентов из интернета!



5 отличных сервисов для создания прототипов сайтов

Дата: 16.03.2017
Рубрика: Сервисы
Просмотров: 4583

UI/UX дизайн – очень важный аспект, с которым необходимо работать как на этапе создания сайта, так и в процессе его дальнейшего развития. Для этого существуют специальные инструменты, позволяющие создавать макеты, концепты, прототипы (интерактивные и не очень) и прочие подобные вещи.

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

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

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

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

Я сделал подборку полезных сервисов для прототипирования, которые можно использовать для проектирования макетов не только сайтов, но и мобильных приложений. Для работы с ними не нужны навыки дизайнера, а так как все базируется онлайн, работать можно в любом месте.

Wireframe.cc

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

Теперь, во всплывающем меню выбираете в какой тип объектов его преобразовать:

wf2

Такой вот набросок получилось сделать буквально за минуту (и то я еще цвет выбирал):

wf3

А если посидеть чуть дольше:

wf4

Двойной клик левой кнопкой мыши на любом из элементов, позволяет изменить опции конкретных объектов, например, задать цвет для блока. UI сервиса реализовано в контекстном формате, то есть, большинство элементов пользовательского интерфейса появляются тогда, когда в этом есть необходимость.

Разница между бесплатной и платной версиями в том, что в free-режиме нет поддержки учетных записей пользователей и работать можно только с одной страницей.

Премиум-тариф позволяет работать в личном аккаунте, с многостраничными проектами, поддержкой ревизий действий, кликабельными элементами и возможность экспорта в PDF и PNG. Стоить такое удовольствие будет от $15 в месяц.

Wires

Wires от QuirqTools
Данный сервис реализован в качестве отдельного раздела на сайте Quirktools.com, и позволяет работать с прототипами как без регистрации, так и в качестве авторизованного юзера. Если вам требуется кое-что посерьезнее, чем простой набросок, рекомендую все же зарегистрироваться.

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

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

wf6

Добавление нового объекта осуществляется через нажатие кнопки «New widget»:

wf7

При выделении объекта, в зависимости от его типа, справа появляется меню с опциями для редактирования. Например, вот как оно выглядит для блока с текстом:

wf8

Также, можно добавлять комментарии, протестировать, как все будет выглядеть в новом окне (меню убирается), а также, совершенно бесплатно сохранить результаты своей работы в PDF или отправить на печать.

Возможности у сервиса только базовые, библиотека элементов минимальна, однако, количество проектов на бесплатном аккаунте вполне позволяет использовать его для рабочих целей без необходимости покупки платного тарифа ($10 в месяц).

InVision App

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

Тот же макет сайта, с помощью InVisionn App, можно сделать настолько качественно, что останется только отправить созданный проект на верстку. Есть встроенные инструменты для проектного менеджмента, контроль версий, совместная работа в реальном времени и много всего другого:

wf10

wf11

Казалось бы, стоить такое удовольствие будет точно немало. Но, в целом, прайс довольно демократичный – от $15 (3 активных проекта) и выше. А если вы собираетесь работать только над одним проектом, тогда и вовсе, можно пользоваться сервисом неограниченное время.

NinjaMock

NinjaMock прототипирование
Данный сервис прототипирования интересен в первую очередь тем, что намеренно использует исключительно «бумажный» стиль в отрисовке элементов макета. Его разработчики считают, что создавать прототипы с реалистичными элементами высокого качества – попросту неэффективно.

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

Пример макета страницы Toster.ru, из официального блога NinjaMock на Хабре:

Пример макета страницы

Окно работы с проектом вмещает все необходимые функциональные элементы, и при этом рабочее пространство остается очень удобным и не перегруженным. Стоит проф.аккаунт от $12 в месяц за три проекта, или $4 за проект.

Moqups.com

Сервис Moqups.com
Если бы этот пост публиковался в каком-нибудь онлайновом журнале, данному сервису заслуженно можно было бы присвоить отметку «Выбор редакции». Для создания прототипов здесь есть все, чего душа пожелает. Причем, работать с редактором действительно очень удобно.

Библиотека Moqups содержит сотни элементов, которые можно использовать для «конструирования» сайтов, сервисов, настольных и мобильных приложений. Создаете страницу (можно сортировать по папкам), и просто перетаскиваете на холст нужный объект из вкладки «Stensils»:

wf14

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

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

wf15

Ну и еще много всего интересного и полезного. Бесплатный тариф позволяет работать с одним проектом, и использовать до 300 элементов, что для небольших задач вполне достаточно.

Прототип мобильного приложения

Ложка дегтя в Moqups – стоимость платного аккаунта. Все же $19 в месяц (до 10 проектов) за базовый тариф, это как-то многовато будет для жителей тех стран, чьей национальной валютой является не доллар США.

Стоит ли использовать такие сервисы?

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

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

Время диктует свои правила, и теперь во главе всего стоит эффективность. А сделав быстрый скетч макета в том же Moqups, можно «разгрузить» память и при этом всегда иметь возможность вернутся к нему в будущем. И это вполне вписывается в стремление современного специалиста к повышению личной продуктивности.

Так что обратите на них внимание, возможно, вам подобные инструменты тоже пригодятся.

А вы используете сервисы для создания прототипов в своей работе? Как часто и для чего?

Заявка на бесплатный аудит вашего сайта

Оставляйте адрес вашего сайта – мы найдем все ошибки, мешающие его продвижению и предложим дальнейшее его развитие!

x

Заявка на бесплатный аудит

Лайкаем!
Хочешь получать свежие статьи о продвижении, smm и заработке в интернете самым первым? Не забудь подписаться на рассылку!
Мнения:
  • Maxim
    17 марта 2017 в 16:57

    Adobe Expireence Design — хорош тем что функциями не перегружен. Да и бесплатно

Теперь ваше мнение:

x

Заявка на продвижение сайта

x

Заявка на бесплатный аудит