Лучшие UI UX дизайн инструменты для дизайнера интерфейсов.

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

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

Инструменты для макетирования (wireframing)

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

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

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

Balsamiq Mockups

Простой, но отличный онлайн wireframe инструмент, включающий в себя библиотеку drag-and-drop элементов, списки и кнопки, стилизованные под рисунок от руки. Основная фича этой программы в том, чтобы приблизить мокапы к степени "намеренно грубого вида и низкой точности", чтобы получить настолько много фидбэка, насколько это возможно. "Предназначен для совместной работы" — эти слова, описывающие продукт на официальном сайте, означают, что все члены команды и клиенты могут участвовать в процессе создания прототипа.

Платформа: Win, Mac, Linux и веб версия
Цена: $89 ($12 \ месяц за полнофункциональный триал)

Sketch

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

Платформа: Mac
Цена: $99 (доступен бесплатный триал)

Adobe Illustrator

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

Платформа: Win & Mac
Цена: $9-$49 в месяц

Adobe InDesign

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

Платформа: Win & Mac
Цена: $9-$49 в месяц

OmniGraffle

OmniGraffle — продукт для OS X и iOS, который плавно переходит к упрощению работы, перебираясь на iPad. Это эффективный инструмент для создания макетов экранов, который позволяет молниеносно объединять каркасы веб-сайтов, обрабатывать графики, диаграммы или контуры страницы. Вы выбираете тип проекта, и OmniGraffle строит связи и зависимости между различными элементами, автоматически соединяя линии в виде графиков и выравнивает фигуры и элементы в макетах или страницы.

Платформа: Mac & iOS
Цена: $50

UXPin

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

Платформа: веб версия
Цена: $15-$40 в месяц

Инструменты прототипирования

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

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

Pixate

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

Платформа: веб
Цена: $0-$50 за юзера в месяц

Axure

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

Платформа: Win & Mac
Цена: $289-$589

Origami

Origami — бесплатный инструмент, который позволяет создавать интерактивные прототипы. Которые можно запускать на айфоне или айпаде, взаимодействовать с ними, и экспортировать код, пригодный для использования разработчиками. так же позволяет создавать связи между слоями в прототипе и вашем графическом редакторе (Sketch или Photoshop), после чего любые изменения на уровне графических макетов обновляются и в самом прототипе.

Платформа: Mac
Цена: бесплатно

Form

Form — идеальна для создания нативных интерактивных прототипов мобильных приложений, точно имитирующих анимацию и взаимодействие для iOS приложений. Макеты создаются при помощи библиотек компонентов, разбитых по разным категориям, а за обновлениями возможно следить при помощи смартфона. Поддерживается функция drag-and-drop.

Платформа: Mac
Цена: бесплатно

InVision

Invision — это платформа, которая объединяет в себе множество полезных функций для современной работой над веб или мобильным интерфейсом. Система работает с внешними графическими файлами, которые можно подгружать в систему, или связывать с прототипом для автоматизированного обновления графических элементов без постоянной загрузки новых версий (т.е. Мнговенные обновления мобильной версии прямо на девайсе). Платформа имеет свою систему контроля версий, полезный функционал для командной работы и комментирования прототипа, многое другое.

Платформа: веб
Цена: $15-$99 (1 прототип бесплатно)

Marvel

Marvel является отличным веб-инструментом для прототипирования, выделяющийся своим потенциалом, который упрощает процесс создания прототипов. Инструмент позволяет работать с простейшим дизайном интерфейса, созданием интерактивных прототипов, а так же позволяет коментировать макеты в реальном времени всем участникам проекта. Платформа работает с большим количеством поддерживаемых типов файлов, а так же позволяет импортировать Sketch и Photoshop файлы.. Доступно 17 встроенных предварительных настроек мобильных устройств, именно поэтому вы можете быть уверены, что ваши прототипы будут оптимизированы для того устройства, которое вы выбрали. Самой выдающейся особенностью этого ПО является мобильное приложение-компаньон. Если вы хотите работать с эскизами на бумаге, мобильное приложение позволяет быстро перенести ваши наброски и работать с ними уже внутри платформы.

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

Flinto For Mac

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

Платформа: Mac
Цена: $99

Инструменты для визуального дизайна интерфейса

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

Adobe Photoshop

Хотя эта программа не нуждается в описании, несколько слов сказать, всё же стоит. Хотя ранее Photoshop не включал в себя какие-либо библиотеки компонентов интерфейса, но уже в версии CC появилась возможность работать с библиотеками элементов, были добавлены артборды и многое другое. Даже если вы не использовали продукты Adobe, набросать общие идеи, группируя несколько слоев и компонентов будет не долгим процессом. Вы можете создатвать не только UI и UX, но также раскадровки и любые эскизы, которые вы сможете придумать.

Платформа: Win & Mac
Цена: $9-$49 в месяц

Adobe InDesign

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

Платформа: Win & Mac
Цена: $9-$49 в месяц

Adobe Illustrator

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

Платформа: Win & Mac
Цена: $9-$49 в месяц

Adobe Fireworks

Adobe Fireworks позволяют разрабатывать макеты для мобильных и веб приложений. В программе есть поддержка стилей CSS, различных шрифтов, а фишки по типу “corner radius” могут быть экспортированы как отдельный стиль. Имеется так же набор предустановленных пресетов.

К сожалению, проект больше не поддерживается и вскоре будет заменен на Adobe Experience Design.

Adobe XD задумана как полное (комплексное) решение для проектирования интерфейса, и работы над этой программой были проведены совместно с сообществом профессиональных дизайнеров. Разработчики думали об оптимизации и улучшении взаимодействия пользователя с продуктом, путем расширения GUI приложений и сайтов. В настоящее время программа доступна на официальном сайте Adobe бесплатно (только для Mac OS X).

Platform: Win & Mac
Цена: нет\временно бесплатно

Sketch

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

Платформа: Mac
Цена: $99 (доступен бесплатный триал).