0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

11 бюджетных инструментов дизайнера для создания интерфейсов и макетов

Содержание

11 бюджетных инструментов дизайнера для создания интерфейсов и макетов

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

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

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

PowerMockup — плагин для PowerPoint

PowerMockup — это плагин, превращающий Microsoft PowerPoint в инструмент для прототипирования. Он добавляет в PowerPoint новую панель, содержащую сотни элементов и значков, которые можно с легкостью перетащить на слайд.

PowerMockup работает с Office 2007, 2010 и 2013. Однопользовательская лицензия на PowerMockup стоит $59,95; стоимость лицензии для рабочей группы зависит от количества человек в ней.

Moqups — онлайн-инструмент для создания макетов и прототипов

Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.

Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.

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

Fluid UI — средство разработки прототипов для iOS- , Android- и Windows приложений

Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.

Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.

Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования

Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки.

Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.

Axure RP

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

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

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

Axure — это десктопное ПО, доступное для Mac OS X и Windows.

Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash

Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.

Продуктом, выпущенным в 2008 году силами одного программиста, в настоящее время пользуются десятки тысяч клиентов. Команда сервиса выросла до 11 штатных сотрудников.

Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.

Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.

Pencil — инструмент для прототипирования с открытым кодом

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

Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.

UXToolbox — инструмент для прототипирования под Windows

С помощью UXToolbox вы сможете создавать макеты и интерактивные прототипы для мобильных приложений, веб-сайтов и десктопного ПО.

Что интересно, программа позволяет в один клик переключаться между скетчем и попиксельно-выверенным прототипом.

После того, как вы закончите работу над проектом, вы сможете экспортировать макет в формат HTML, PNG, XML и Word или распечатать материалы для рабочей группы.

UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.

Mockups.me — инструмент для создания пользовательских интерфейсов

Mockups.me очень похож на Balsamiq Mockups, но имеет ряд преимуществ. В частности у Mockups.me есть приложения для IOS и Android. Кроме того, Mockups.me включает в себя встроенные коммуникационные системы для сбора обратной связи через аннотации и комментарии.

Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.

Live Wires — приложение для создания прототипов под iPad

Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов приложений для iPhone и iPad.

Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.

Прототипы могут быть экспортированы по электронной почте а затем импортированны на другое утсройство.

Live Wires сейчас доступен по специальной начальной цене в $9,99.

HotGloo

Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.

Резюме

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

Использовали ли вы какой-то из них? Если да, пожалуйста, поделитесь своим опытом в комментариях.

Бесплатные программы для прототипирования интерфейсов

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

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

Marvel

Золотая середина в плане богатства функциональных возможностей и лёгкости освоения. Программа поможет вам сделать очень классный постраничный прототип мобильного приложения. В ней вы сможете закрепить навбар и таббар и листать контент внутри, а плагин Marvel для Sketch позволяет импортировать макет из Sketch в Marvel. Но при этом в программе можно накидать дизайн с помощью внутренней «дизайн-студии». Здесь даже есть функции послойного прототипирования, хотя полноценными их назвать трудно.

У инструмента есть своё мобильное приложение, где можно быстро накидать дизайн и запрототипировать его.

Marvel покорил наши сердца приветливым интерфейсом, возможностью добавлять гифки и комментировать прототип, и мы в Лайв Тайпинг чаще всего используем для прототипирования именно эту программу. И если вы решились на создание своего мобильного приложения с нами, то его прототип тоже будет создан на Marvel. Не решились? Давайте обсудим это на бесплатной консультации. Вам нужно лишь заполнить заявку.

Минусы: нет удобных символов (как, например, в InVision) и разных состояний экранов. На десктопе приложение работает только онлайн.

Как показать прототип заказчику или пользователю. Как и в случае с POP, чтобы посмотреть прототип, клиенту понадобится специальное приложение.

Цена: бесплатно — для двух проектов, больше — 14 $.

POP App

Это был первый сервис для прототипирования приложений, с которой я познакомился. Она позиционирует себя как простой инструмент для работы даже с очень сырым макетом. Вы прикидываете на бумаге, как будут выглядеть экраны в вашем приложении, фотографируете наброски и обрабатываете с помощью POP App. Объекты интерфейса, которые должны быть интерактивными, можно выделить и связать с другими объектами и экранами; например, кнопка login связывается с экраном регистрации. В итоге у вас получается быстрый прототип, экраны которого нарисованы на бумаге в буквальном смысле. Но вместо ручных эскизов вы можете использовать и макеты, созданные в графических редакторах.

POP App работает по принципу постраничных программ для прототипирования пользовательского интерфейса. Вы загружаете в них кипу экранов (порядка 50–100) и соединяете их переходами. Редактор воспринимает каждый экран в макете как слитую картинку. На ней вы выделяете какую-то область и указываете, на какой экран человек попадёт, если нажмёт на эту область.

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

Как показать прототип заказчику или пользователю: попросить его поставить на свой девайс специальное приложение.

Цена: бесплатно для двух проектов и одного пользователя. Создать в POP App больше проектов можно, заплатив от 12 $ в месяц.

Читать еще:  Телефонное мошенничество: хитрости преступного мира. Как не стать жертвой обмана?

Эта программа для прототипирования интерфейса более продвинутая, чем Marvel, и позиционирует она себя как инструмент для профессионалов. У программы есть плагин для Sketch — Craft, который позволяет превращать дизайн-макет в прототип прямо в Sketch, без отрыва от производства. Среди других бонусов быстрый процесс подстановки шаблонов имён, заголовков, дат и текстов. Например, в макете вам нужно быстро представить кучу разных имён, тогда вы выделяете нужные слои и нажимаете соответствующую кнопку в плагине, и вуаля, плагин сам подставляет рандомный контент. Этот же плагин даёт возможность использовать фото с бесплатного стока Unsplash. Сделать дизайн прямо в InVision пока не получится, но, по слухам, скоро появится и такая возможность.

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

Плюсы: удобные комментарии к прототипам — можно прямо в чате обсуждать ту или иную функцию. Также недавно появилась возможность «инспектить» макет: разработчик может посмотреть размеры объектов в прототипе, расстояние между ними и так далее — прямо как в Zeplin. А ещё есть возможность совместной работы и менеджер задач, похожий на Trello.

Минусы: после Marvel интерфейс InVision не самый удобный. Чтобы выбрать нужный экран, нужно долго искать его в списке, то есть предварительно нужно запоминать название. А если экранов больше 50, это превращается в сущий ад.

Как показать прототип заказчику или пользователю. Показывать прототип пользователю можно также через мобильное приложение.

Цена: бесплатно навсегда.

Origami Studio от Facebook

На фоне вышеописанных программ для разработки прототипов приложений Origami Studio самый сложный. Работает инструмент только на Mac и только с аккаунтом разработчика Apple. К программе можно подключить очень много патчей, что расширяет её возможности, но разобраться в них без туториала сложно.

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

Как показать прототип заказчику или пользователю. Это ещё одно слабое место редактора. Чтобы пользователь смог посмотреть прототип, у него тоже должен быть установлен Origami, что требует наличия Mac и аккаунта разработчика.

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

Другие бесплатные программы для прототипирования

Atomic

Цена: бесплатно для одного проекта; 19 $ в месяц для неограниченного количества проектов; 99 $ в месяц, если программой пользуется команда до пяти человек, от 145 $ в месяц, если больше.

Adobe XD

RapidUI

Цена: бесплатно, и это тоже бета-версия .

Webflow

Цена: бесплатно для двух проектов. Для десяти — 16 $ в месяц, за 35 $ в месяц можно получить неограниченный доступ. Эти цены не включают стоимость поддержки хостинга и действуют, если вы платите за год использования.

MockFlow

бесплатно для одного проекта. Лимит в количестве проектов снимается за 14 $ в месяц. Для команд подписка стоит от 29 $ в месяц.

MOCKUP.IO

Заключение

Прототипирование — обязательный этап при создании дизайна в компании Лайв Тайпинг. После того как прототип утверждён, мы создаём макет, который идёт в разработку (подробнее о смысле этого этапа мы писали в нашей статье «Как мы делаем проекты: проектирование и прототипирование»). И это только начало работы над вашим проектом, но очень важное. Подробно о каждом этапе создания мобильного приложения вы можете на нашей бесплатной консультации. Расскажите о своём проекте в форме заявки, и мы вам позвоним.

Очерки о юзабилити. Часть 2: Макеты интерфейса

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

Я встречала аналитиков, которые никогда не создавали макеты по разным причинам: кто-то думал, что это удел других специалистов, кто-то – что и без них все понятно, кто-то просто не знал о том, что такое бывает (да-да, я тоже удивилась). Так уж получилось, что я знаю об этом инструменте аналитика с самого начала своей профессиональной деятельности и активно использую в работе. Надо сказать, инструмент зарекомендовал себя отлично. Более того, как показывает практика, иногда можно ограничиться только макетами графического интерфейса пользователя. В этой статье я остановлюсь на классификации макетов интерфейса, областях их применения и советах по их созданию.

Виды макетов пользовательского интерфейса

Макет – это статическое визуальное более-менее реалистичное представление концепции пользовательского интерфейса.

Условно можно разделить все макеты на две группы: wireframes и mockups. К сожалению, и те, и другие в русском языке называются одинаково, что приводит к путанице. Следует, однако, отметить, что иногда и английские названия используют в качестве синонимов, что также ясности не добавляет.

Рассмотрим подробнее каждый из видов.

Wireframes (они же наброски, макеты низкой точности, вайеры)

Wireframes создают для того, чтобы обозначить структуру страницы. Это на них можно встретить «рыбу» и разметку вроде «Header», «Footer», «Место для лого». Цель таких макетов – отразить порядок, структуру, расположение элементов. Таким аспектам дизайна как цвет и типографика вайеры не уделяют внимания, часто они выполняются в черно-белом виде. Как правило, такие макеты предшествуют mockup-ам.

Mockups (они же макеты высокой степени точности, мокапы)
Mockup-ы представляют более приближенный к реальности вариант внешнего вида графического интерфейса пользователя. Внутри этой группы можно выделить макеты разной степени достоверности. Самые достоверные соответствуют до пиксела финальному виду интерфейса и, как правило, разрабатываются профессиональными дизайнерами.

Пример mockup:

Для чего можно использовать макеты

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

2) Оценка юзабилити. Макеты – это фактически первый артефакт в проекте, юзабилити которого уже можно и нужно оценивать. На этом этапе проще и дешевле всего устранить проблемы, если они обнаружатся.

3) Постановка задачи разработчикам. Попробуйте меня переубедить, но я все же считаю, что очень маленький процент разработчиков вчитывается в спецификации. Наличие наглядной иллюстрации того, что должно быть сделано, гораздо полезнее, чем длинное текстовое описание (хотя, разумеется, оно также должно присутствовать, ибо не все можно отобразить на макете).

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

5) Тестирование. С этим, я думаю, все понятно: сверяя макеты и созданный интерфейс, можно будет обнаружить дефекты довольно быстро.

Советы по созданию макетов

Ниже я поделюсь нескольким практическими советами по созданию макетов.

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

2) Выравнивайте все элементы управления относительно друг друга. На первый взгляд может показаться, что для наброска интерфейса это неважно и несущественно. Однако это не совсем так. Выравнивание у вас не отнимет много времени (в большинстве графических редакторов есть возможность использования временных линий, относительно которых можно выровнять все объекты), а результат будет выглядеть более аккуратным и профессиональным. В принципе то же касается и оформления спецификаций: использование адекватного форматирования текста всегда остается на совести аналитика, но его наличие упрощает чтение документа и создает впечатление более профессиональной работы.

3) Используйте цвет с умом. Если вы не занимаетесь визуальным дизайном профессионально, не стоит особо заморачиваться на цвете в макетах. Все равно эту работу будет делать после вас дизайнер. Исключения:

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

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

— выделение ключевых элементов. Если у вас в системе будет использоваться визуальная семантика, на макетах вы можете обозначить ее в упрощенном виде. К примеру, если в системе есть процесс перехода объекта из одного статуса в другой и пользователю важно знать, в каком из статусов находится каждый из объектов, можно обозначить активные или доступные объекты зеленым, а неактивные – красным цветом. Это не составит труда для вас, а для многих людей ускорит понимание того, что вы имеете в виду.

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

5) Сопровождайте макеты пояснениями. Изображение – это, конечно, хорошо, но этого не всегда может быть достаточно. Один взгляд на поле не даст информации о допустимых форматах или его значениях. То же самое с кнопками: лучше обозначить, какое поведение от них требуется, чем потом пускаться в дискуссии на тему «а я имел в виду не это». Также лучше позаботиться о том, чтобы было 2 варианта макетов: «чистые» и с пояснениями. Пояснения могут помешать оценить всю картину целиком, поэтому пусть у заинтересованных в этом людей будет возможность посмотреть макет без них. Касательно пояснений также можно посоветовать соблюдать следующие принципы:

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

— нумеруйте свои пояснения

— располагайте пояснения в блоке справа. Люди читают слева направо, поэтому такое расположение естественно и логично.

6) Учитесь у лучших. Обращайте внимания на удачные решения задач, похожих на вашу. Подмечайте интересные идеи в любых информационных системах, как это делают пользователи http://littlebigdetails.com/. Я не призываю копировать один в один, всего лишь не изобретать велосипедов. Или, по крайней мере, если без нового велосипеда не обойтись, быть готовым аргументировать, чем не подходит старый. Также советую отслеживать последние веяния в области веб-дизайна: даже беглое пролистывание время от времени таких ресурсов как http://www.smashingmagazine.com/ и http://www.webappers.com/ расширит ваш инструментарий.

Читать еще:  Как управлять дистанционно вашим потерянным Android-телефоном с помощью Android Device Manager

7) Не бойтесь просить совета. После того, как ваша работа, на ваш взгляд, завершена, обязательно попросите кого-нибудь высказать свое мнение. Идеально будет выслушать тестировщика (они часто подмечают детали, о которых легко забыть), разработчика (они могут спустить вас с небес на землю, если ваши идеи невозможно/сложно реализуемы) и другого аналитика (особенно, если в этом деле вы начинающий). Разумеется, угодить всем на 100% едва ли возможно. Список замечаний, которые вы услышите, надо обдумать и оценить их правомерность. Однако так снизится вероятность того, что вы что-то забыли или допустили ошибки. Если же в вашей команде отсутствует подходящий советчик, можно воспользоваться сервисом http://www.conceptfeedback.com/, где вашу работу оценят и обсудят другие специалисты.

8) При обсуждении макетов имейте их под рукой в распечатанном виде. В наш век информационных технологий мы порой отвыкаем держать в руках карандаш. Однако при обсуждении макетов интерфейса он намного удобнее, чем все остальное. Во-первых, далеко не все [заказчики] умеют пользоваться инструментами для добавления комментариев. Во-вторых, «бумага все стерпит»: как показывает практика, людям гораздо проще набросать свои идеи на бумаге, особенно карандашом, который позволяет, если что, стереть написанное.

9) Заведите себе собственные библиотеки элементов управления, шаблоны и наборы иконок. Потратьте на это время один раз, а потом просто дополняйте свою коллекцию по мере нахождения полезных элементов.

10) Старайтесь по возможности делать макеты высокой степени детализации. На эту тему советую почитать статью, если же говорить вкратце, вот по каким причинам:

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

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

— Макеты высокой степени достоверности лучше передают и форму, и содержание. Они также вызывают меньше вопросов «что это за элемент».

— Макеты высокой степени достоверности более эффективны в убеждении заинтересованных лиц.

11) Везде, где это возможно, используйте реальную информацию. Речь не о фамилиях и паспортных данных, а о том, чтобы избегать таких вещей как «Ссылка 1», «Ссылка 2», «Новость 1» и так далее. Если реальные ссылки окажутся слишком длинными, проще решить проблему на стадии макета.

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

Дальнейшее чтение и полезные ссылки:

1. Робин Вильямс «Дизайн для недизайнеров» (The Non-Designer`s Design Book)

2. http://littlebigdetails.com/ – сайт, на котором собраны всякие, на первый взгляд, мелочи из самых разных систем, которые не могут не радовать пользователей.

4. http://www.webappers.com/ – сборник полезных ресурсов для дизайнеров

5. http://wireframes.linowski.ca/ – один из лучших блогов о макетах пользовательского интерфейса

6. http://www.conceptfeedback.com/ – сервис для оценки и обсуждения дизайна

Предыдущие статьи по теме:

Обзор 21 инструмента для создания прототипов

Время чтения: 6 минут Нет времени читать? Нет времени?

Необходимость использования прототипов при создании сайта начала активно обсуждаться несколько лет назад. Постепенно наметился отход от схемы «дизайнер рисует макет – программист прикручивает к нему код».

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

Для удобства мы свели всю информацию в отдельную таблицу, в которой сравнили сервисы по следующим параметрам:

  • Язык – язык интерфейса;
  • Бесплатный тариф – наличие бесплатного тарифа или пробной версии;
  • Самый дешевый тариф – стоимость самого дешевого тарифа или лицензии;
  • Особенности – отличительные «фишки» инструмента;
  • Интеграции – возможные интеграции с другими сервисами;
  • Скачиваемое приложение / веб-версия – некоторые из сервисов представляют из себя скачиваемые программы, некоторые работают прямо в браузере, а некоторые доступны в двух вариантах. В таблице указано наличие онлайн-версии / скачиваемого приложения и поддерживаемые ОС для каждого инструмента;
  • Мобильное приложение – наличие мобильного приложения для предпросмотра прототипов;
  • Техподдержка – возможные способы связи с технической поддержкой сервиса;
  • Клиенты – список самых известных клиентов.

Чтобы скачать таблицу, кликните на скриншот ниже.

1. Axure

Axure – крупнейшее и наиболее известное приложение для прототипирования, позволяет создавать высококачественные прототипы сайтов и мобильных приложений. Обладает широким функционалом с большим набором инструментов. Требует установки софта на ПК, онлайн-версия недоступна. Работает с Windows и macOS.

2. Origami Studio

Origami Studio – полностью бесплатное удобное приложение от Facebook. Работает с macOS. Синхронизуется с Sketch. У приложения есть сообщество на Facebook, где пользователи могут делиться своими прототипами, обсуждать их создание и помогать друг другу.

3. Proto.io

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

4. Vectr

С Vectr можно работать как онлайн, так и установив приложение на ПК. При этом обе версии синхронизируются друг с другом, давая возможность работать над одним прототипом как онлайн, так и с компьютера. Каждому создаваемому проекту присваивается URL, который можно отправить коллегам или клиенту для внесения комментариев и правок.

5. InVision

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

6. Adobe Experience Design

Adobe Experience Design входит в пакет Creative Suite от Adobe и синхронизируется со многими сервисами из этого пакета. Главные особенности: быстрый переход из прототипа в приложение, возможность моментально посмотреть изменения в прототипе на мобильных устройствах. Главный минус – десктопное приложение доступно только для Windows 10.

7. Principle

Principle отлично подходит для создания анимированных прототипов. Приложение доступно только для Mac.

8. Just in mind

Главное преимущество Just in mind состоит в том, что в сервисе доступно множество элементов и жестов, а также готовые шаблоны прототипов.

9. Moqups

Moqups – еще один достаточно популярный сервис для создания прототипов. Главная особенность – неограниченное количество пользователей на платных тарифах.

10. Marvel

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

11. Mockplus

Основная «фишка» Mockplus – возможность просматривать прототипы на мобильных устройствах, сканируя QR-код, 3000 иконок в платных тарифах.

12. UXPin

Как и в Marvel, в UXPin можно создавать прототипы приложений для умных часов. Правда, только для часов, работающих на Android.

13. Flinto

Flinto – сервис прототипированния, в котором есть готовые шаблоны для самых распространенных разрешений мобильных устройств, а также встроенные анимации переходов в приложениях на Android и iOS.

14. Sketch

Sketch – знаменитый инструмент создан эксклюзивно для Mac, так что он лучше всего подойдет для создания прототипов для приложений на iOS.

15. OmniGraffle

OmniGraffle доступен только для Mac и iOS, причем лицензии приобретаются отдельно. Сам сервис является мультиинструментом, и создание прототипов – не самая главная его функция.

16. Pidoco

Главная особенность Pidoco – интуитивный drag’n’drop интерфейс, совместная работа над проектом.

17. Mockingbird

Mockingbird – простой сервис для создания несложных прототипов. Если вам нужно быстро создать базовый прототип, то, вполне возможно, Mockingbird вам подойдет.

18. iPlotz

iPlotz – очень простой сервис для создания несложных прототипов. Возможно, кому-то именно это и нужно.

19. Proto Share

В платных тарифах Proto Share можно создавать бесконечное количество проектов. Кроме того, у сервиса очень долгий триал-период – целых 30 дней.

20. MockFlow

Самый дешевый тариф Mockflow стоит всего $14 / месяц, при этом в лицензию входит множество инструментов, в том числе для создания сайтов и баннеров, а также сервис совместной работы над дизайн-проектами.

21. Mockup Builder

Mockup Builder – простой инструмент со стандартным набором функций. Ничего необычного. Однако среди клиентов можно встретить известные компании, так что не стоит обходить Mockup Builder стороной.

Прототип – незаменимый инструмент при разработке сайта

Для создания прототипов существует множество приложений: как для iOS, так и для Android. Все они решают по сути одну задачу – представление вашего проекта в наиболее понятном клиенту виде с возможностью быстро внести правки. Возможно, мы что-то упустили, так что поделитесь в комментариях, какими инструментами для создания прототипов пользуетесь вы.

Что должен уметь дизайнер интерфейсов

Мы живем в эпоху postdigital, когда аналоговые системы давно в прошлом, а пришедшие им на смену digital-технологии очень быстро эволюционируют.

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

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

UI/UX дизайнер мобильных приложений

  • создаёт и дорабатывает интерфейсы мобильных приложений (Front, Back);
  • проектирует пользовательские сценарии взаимодействия с продуктом;
  • генерирует дизайн-решения и гипотезы, поднимающие конверсию и повышающие юзабилити;
  • разрабатывает и воплощает дизайн макеты, графические элементы, интерактивные прототипы для создания приложений различной направленности;
  • взаимодействует с разработчиками продукта на этапе интеграции интерфейсных решений.

Навыки

Думать: Теоретические навыки

  • Современные тенденции в digital-дизайне
  • Основы мобильного дизайна
  • Принципы взаимодействия при помощи интерфейса (GUI/UX)
  • Понимание итераций, метрик, конверсии, воронок, KPI, Roadmap, MVP и т.д.
  • Композиция, колористика
  • Понимание usability
  • Гайдлайны мобильных платформ (iOS, Android, Windows Phone)
  • Процесс сопровождения и поддержки цифровых продуктов
  • Техническая сторона мобильной разработки
  • Функционирование медийных каналов распространения коммуникации

Делать: Профессиональные навыки

  • Создание логики приложения
  • Владение ПО для разработки дизайна цифровых продуктов (Adobe СС, Axure, SketchApp, InVision)
  • Работа с основными составляющими дизайна интерфейса (типографика, макет, цвет, иконки, анимация)
  • Интерактивный дизайн
  • Создание целостного продукта (прототипирование, wireframe, проектирование, тестирование, отрисовка, сопровождение)
  • Продвижение продуктов (промо, лендинги, видео)
  • Технические задания
  • Тестирование продукта

Действовать: Личностные качества

  • Клиентоориентированность, работа с заказчиком
  • Профессиональная коммуникация
  • Тайм-менеджмент, рациональная организация рабочего процесса
  • Независимая работа
  • Работа в команде
  • Многозадачность, умение вести несколько проектов параллельно
  • Внимание к деталям
  • Ответственность за результат
  • Саморазвитие, повышение своего профессионального уровня

Кто такой дизайнер интерфейсов

Михаил Розов (Pinkman) считает, что дизайнер интерфейсов должен уметь:

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

Так как это сейчас одно из самых популярных направлений на рынке, в Москве такой профессионал может рассчитывать на зарплату от 50 до 170 тысяч рублей, в регионах – от 30 до 90 тысяч.

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

Читать еще:  Как отключить запрос PIN-кода – Онлайн-поддержка

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

Действительно, благодаря современным технологиям любого человека можно за час научить создавать интерфейсы. Figma, к примеру, в пять раз проще, чем тот же Word, а сложный Photoshop уже многие подзабыли, поэтому и получается, что практикующих дизайнеров много, а нормальных продуктов – крайне мало.

Что нужно уметь

Дело в том, что, помимо навыка работы с софтом, хороший дизайнер должен обладать тем, что мы называем skill set. Сюда входит целый набор умений и знаний:

  • базовые навыки графического дизайна: работа с редакторами (Illustrator, Photoshop, InDesign), типографика (язык искусства оформления текста),
  • понимание того, как вообще проектируются интерфейсы,
  • основы юзабилити (ориентация пользователя на сайте при минимуме ошибок),
  • производство объектов.

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

Такой подход подразумевает работу с самым разным софтом – помимо Figma или Sketch, нужно уметь работать в 3D.

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

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

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

Куда пойти учиться

Дизайн-образование в России сегодня отвечает требованиям индустрии, помимо Школы дизайна НИУ ВШЭ и Британской высшей школы дизайна, существует масса различных курсов, предназначенных для людей, начинающих с нуля. Все они могут сделать из человека перспективного junior-дизайнера.

Но если компания нанимает сотрудника, она не видит смысла в разделении труда. Когда один человек делает 3D, другой – проектирует интерфейс, а третий – занимается коррекцией, – это всегда плохая и дорогая история. Гораздо выгоднее нанять одного, способного делать все сразу, именно поэтому мне интереснее нанимать middle-дизайнеров, работающих и с графическим дизайном, и с анимацией, и с проектированием.

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

БВШД предлагает следующую программу

UX/UI дизайн: Передовые методики для создания фундаментального и конструктивного пользовательского опыта

  • дизайн опыта взаимодействия (англ. User eXperience, UX)
  • дизайн интерфейса (англ. User Interface, UI)

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

Обучение на программе UX/UI дизайн позволит освоить набор инструментов, приёмов, методик и концепций для создания фундаментального и конструктивного пользовательского опыта. Студенты изучат такие образовательные блоки, как генерация идей, исследования, стратегии UX/UI, прототипирование, аналитика и др.

Базовый фреймворк (Human Centered Design)

  • Введение в предметную область
  • Уровни UX дизайна
  • Основные элементы UI
  • Гайдлайны платформы iOS, типографика, макет, цвет, иконки, UI-kit
  • Сторителлинг

Design Sprint — взгляд из Mail.ru

  • UX-стратегия / DesignOps
  • Эмоциональная коммуникация в интерфейсах
  • Качественные исследования
  • CJM
  • Дизайн-системы
  • Кодинг
  • Прототипирование
  • Анимация и дизайн интерфейсов
  • Презентация проектов

IBM Design Thinking и навыки работы с AR/VR

  • Введение в IBM Design Thinking
  • Проведение качественных исследований
  • Карты эмпатии и Scenario maps
  • Lego Serious Play
  • Индустрии применения VR
  • Сторителлинг в VR
  • VR/AR прототипирование и основа программ
  • Основы разработки

Jobs to be done

  • Взгляд на потребности людей
  • Jobs as progress
  • Переключение
  • Взгляд на конкурентов через призму работ
  • Стратегия развития продуктов
  • JTBD Framework в качественном исследовании
  • Интерпретация интервью и синтез артефактов

Для обучения на курсе вам необходимо иметь собственные устройства, которые потребуется приносить с собой на занятия: ноутбук (желательно MAC, но возможно и РС) и смартфон на iOS или Android выпуска не ранее 2015 года.

Курсы UX дизайна включают работу в разных программах. Вам может понадобиться дополнительное программное обеспечение, покупку и установку которого необходимо произвести самостоятельно. Перечень, степень обязательности зависит от специфики учебных заданий и того, какими средствами вы решите реализовывать ваши проекты. Одними из самых популярных и основных инструментов для работы с UI на сегодня являются Sketch и Figma. Инструментами анимации могут быть Principle или Flinto. Для работы с VR мы будем использовать Unity.

Дизайнеру интерфейсов нельзя быть интровертом

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

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

Именно поэтому, помимо hard skills, о которых рассказывали выше, нужно учиться правильно презентовать свой субъективный продукт клиенту и общаться с заказчиком. Нужно уметь убеждать, что твоя работа уникальна, поскольку не каждый менеджер сможет сделать это за тебя.

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

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

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

Время чтения | 5 min read

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

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

Это полезные инструменты как для профессионалов, так и для новичков. Они интуитивно понятны, легки в использовании, и помогают решить сразу несколько задач:

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

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

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

Wireframe.cc

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

Для создание наброска потребовалась одна минута:

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

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

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

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

InVision App

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

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

Прайс довольно демократичный. Возможность создания трех и более проектов от $15. Если вы собираетесь работать только над одним проектом, можно пользоваться сервисом неограниченное время.

NinjaMock

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

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

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

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

Moqups.com

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

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

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

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

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

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

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

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

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

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

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

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector