100+ классных инструментов для дизайнеров и не только

0
4153
Добавить в избранное

Хотите не только кодить, но и работать над дизайном продуктов? Вот большая подборка инструментов для дизайнеров, которые помогут вам.

Анимация

100+ классных инструментов для дизайнеров и не только

Анимация делает продукты более плавными и user-friendly. Интерактивный интерфейс заставляет пользователей чувствовать связь с тем, что происходит на экране. 13 инструментов для дизайнеров в этом списке предназначены для упрощения создания анимации. Анимированные переходы, микровзаимодействие, прокрутка и многое другое:

  • After Effects − приложение для создания цифровых визуальных эффектов, графики и композитинга.
  • BeatFlyer − веб-инструмент, который позволяет очень быстро создавать яркие анимации из ваших композиций. Выглядеть всё будет так, будто сделано профессионалами.
  • Flare − ещё один мощный инструмент для дизайна и анимации, который помогает дизайнерам и разработчикам создавать анимацию для игр и приложений.
  • Flow − профессиональный инструмент анимации Sketch-эскизов, который умеет экспортировать готовый код для файлов iOS или SVG.
  • Haiku Animator − анимация на основе ключевых кадров, соединяющая инструменты пользовательского интерфейса с кодом.
  • Keyshape − инструмент 2D-анимации, позволяющий экспортировать анимированные SVG.
  • Kite Compositor − мощное приложение для анимации и создания прототипов для Mac и iOS.
  • LightBox − пакет инструментов для 2D-анимации рисунков от руки.
  • Mantra − веб-инструмент для анимации временной шкалы.
  • Spirit − инструмент для анимации, который поможет вам создавать и управлять анимацией в реальном времени в браузере.
  • Stylie − графический веб-инструмент CSS3 для анимации.
  • Tumult Hype − приложение для создания анимации и интерактивных HTML5-файлов для macOS.

Дополненная реальность (AR)

100+ классных инструментов для дизайнеров и не только

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

  • Lens Studio − создавайте, публикуйте и делитесь своими AR-шаблонами для Snapchat с кодом или без него.
  • Lightform − инструмент для проектирования AR.
  • Spark AR Studio − AR-маски для Instagram без кода.
  • Torch − облачное приложение для 3D-дизайна и создания прототипов, ориентированное на мобильную AR.
  • Vectary − 3D и AR для веб-сайтов.

Инструменты для совместной работы

100+ классных инструментов для дизайнеров и не только
Источник картинки

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

Повышение производительности, улучшение планирования, бесперебойная работа на удалёнке − всё это помогает снизить нагрузку на продуктовые команды:
  • Airtable − таблица и база данных в одном сервисе, позволяет командам полностью координировать рабочий процесс внутри одного сервиса.
  • appear.in − простой инструмент для совместной работы с видео.
  • Asana − платформа для управления совместными целями, проектами, повседневными задачами бизнеса.
  • Basecamp − пакет управления проектами, предназначенный для организации сотрудников, делегирования задач и мониторинга прогресса из одного сервиса.
  • Filestage − agile-based программное обеспечение для обсуждения контента с коллегами и клиентами.
  • Gallery.io − совместный инструмент для загрузки проектных работ, получения отзывов и отслеживания изменений.
  • GoToMeeting − простой, но чрезвычайно мощный сервис веб-конференций.
  • HiveDesk − инструмент для мониторинга производительности удаленных сотрудников и управления проектами.
  • Jira − инструмент разработки программного обеспечения, используемый гибкими командами.
  • Milanote − простой в использовании инструмент для совместной работы, позволяющий организовать ваши идеи и проекты в виде визуальных досок.
  • MURAL − для создания совместных майнд-карт.
  • Notion − быстрорастущий стартап для управления проектами.
  • ProofHub − управление проектами, командами и коммуникацией в одном месте.
  • RealtimeBoard (Miro) − канбан-платформа для совместной работы.
  • Slack − один из наиболее популярных корпоративных сервисов. Позволяет держать чаты разных команд и проектов.
  • Trello − приложение для управления проектами, которое позволяет вам организовывать и расставлять приоритеты ваших проектов.
  • Visual Inspector − инструмент совместной работы для обратной связи с сайтом и исправления ошибок в дизайне.
  • Witeboard − простая доска для совместной работы в режиме реального времени.
  • Workzone − мощное программное обеспечение для управления проектами.
  • Wrike − онлайн-программа для управления проектами, которая дает полный контроль над вашими задачами. Это инструмент, позволяющий редактировать, назначать, планировать и отмечать задачи цветами, указывающими их статус, составлять отчеты о деятельности, создавать группы пользователей.
  • Zenkit − инструмент для планирования встреч, отслеживания успехов проекта и мозговых штурмов.

Ещё одним из популярных инструментов для дизайнеров и других членов команд является сервис InVision Freehand.

CSS Grid Layout

100+ классных инструментов для дизайнеров и не только

  • CSS Grid Builder − этот инструмент помогает настроить сетку без HTML.
  • Layoutit − конструктор интерфейса для CSS Grid и Bootstrap.
  • 1200px − помогает построить грид-систему для широкоформатных веб-сайтов.

Инструменты обратной связи

100+ классных инструментов для дизайнеров и не только

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

  • Flawless Feedback − изучайте iOS-приложения, а затем делитесь своими отзывами в Jira или Trello.

Инструменты для непрерывной работы над дизайном

100+ классных инструментов для дизайнеров и не только

Нужны тогда, когда дизайнер заканчивает свою работу и передаёт её разработчику:

  • Avocode − инструмент позволяет использовать макеты Photoshop, Illustrator, Experience Design, Sketch, Figma, экспортировать отдельные компоненты, облегчая работу верстальщиков.
  • Inspect − ещё один проект для изучения элементов и работы с кодом от Invision.
  • Sketch Measure − Sketch-плагин для объявления размеров и расстояния между элементами.
  • Sympli − автоматический экспорт объектов из Sketch, Photoshop и Adobe XD в Jira, Xcode и Android Studio.
  • Zeplin − экспортирует макеты дизайна и гайдлайны с информацией, необходимой разработчикам.

Шаблоны дизайна и инструменты вдохновения

100+ классных инструментов для дизайнеров и не только

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

  • Collect UI − платформа для ежедневного вдохновения, основанная на Dribbble-шотах.
  • Creative Portfolios − набор креативных портфолио, созданных дизайнерами и разработчиками.
  • Dribbble − интернет-сообщество для демонстрации работ, созданных пользователями.
  • Hover States − популярный блог, в котором собраны альтернативные примеры диджитал-дизайна.
  • Httpster − вдохновляющий ресурс, где собраны потрясающие веб-сайты, созданные дизайнерами со всего мира.
  • Mobile Patterns − библиотека мобильных паттернов дизайна.
  • Mobbin − шаблоны мобильного дизайна популярных приложений, где можно изучить отдельные пользовательские процессы.
  • Page Flows − снимки экранов популярных сервисов.
  • pttrns − шаблоны проектирования популярных мобильных приложений.
  • Really Good Emails − коллекция удачных email-писем.
  • ReallyGoodUX − скриншоты и примеры отличного UX на базе реальных мобильных и веб-продуктов.
  • The Design Team − комикс о команде разработчиков для технологического стартапа в Силиконовой долине.
  • Typewolf − помогает дизайнерам выбрать идеальную комбинацию шрифтов для своего следующего дизайн-проекта.
  • UI Sources − коллекция действительно классных примеров взаимодействия существующих приложений в App Store.
  • UI Recipes − 15-минутные уроки по дизайну пользовательского интерфейса из самых популярных приложений на базе существующих сервисов.
  • UX Archive − коллекция пользовательских потоков.
  • Web Design Museum − более 1200 тщательно отобранных веб-сайтов, показывающих тенденции веб-дизайна в период с 1994 по 2006 год.

Инструменты для управления дизайн-системой

100+ классных инструментов для дизайнеров и не только

Здесь вы можете найти инструменты, которые помогут вам создать и поддерживать собственную систему проектирования:

  • Brand.ai − руководство по стилю компонентов пользовательского интерфейса.
  • Frontify − создание гайдлайнов, библиотек шаблонов, систем проектирования.
  • Lucid − инструмент для создания, управления и совместного использования системы проектирования: от простой библиотеки компонентов до подробных описаний стилей.
  • Symbol Design System − система дизайна для Sketch на основе атомных элементов.
  • Zeroheight − руководства по стилю, созданные дизайнерами, расширенные разработчиками и редактируемые пользователями.

Кроме того, стоит обратить внимание на Sketch, Figma, UXPin и Framer X.

Прототипирование

100+ классных инструментов для дизайнеров и не только

Инструменты для создания прототипов, которые позволяют разрабатывать продукты с продуманным UX:

  • Alva − создавайте живые прототипы с компонентами кода.
  • Axure RP − один из наиболее популярных инструментов прототипирования интерфейсов.
  • Creo − создание прототипов, экспорт кода и встроенный конструктор мобильных приложений.
  • Flinto − Mac-приложение для создания интерактивных и анимированных прототипов дизайнов приложений.
  • Framer X − инструмент для визуального проектирования реалистичных интерактивных прототипов.
  • Keynote − встроенное Mac-приложение для создания презентаций, которое также можно использовать для быстрого создания прототипов (посмотрите, как дизайнеры Apple используют его для проверки концепций дизайна).
  • Marvel App − платформа для совместной работы, активно использующаяся в стартапах.
  • Principle − позволяет легко создавать анимированные и интерактивные пользовательские интерфейсы.
  • Proto.io − инструмент для создания полностью интерактивных высококачественных прототипов, которые выглядят и работают точно так же, как и ваше приложение.
  • UXPin − создавайте реалистичные прототипы. Подходит для работы с кодом, логикой, состояниями, системой проектирования.

Иллюстрации

100+ классных инструментов для дизайнеров и не только

Постоянно обновляемая коллекция красивых SVG-изображений, которые вы можете использовать совершенно бесплатно и без указания авторства:

  • Absurd Design − бесплатные сюрреалистические иллюстрации для ваших проектов.
  • DrawKit − коллекция полностью настраиваемых иллюстраций SVG в двух стилях.
  • LUKASZADAM − бесплатные векторные иллюстрации и иконки.
  • OUCH − ещё одна коллекция иллюстраций с иконками.
  • unDraw − просто коллекция красивых изображений SVG.

Инструменты для управления информационной архитектурой

100+ классных инструментов для дизайнеров и не только

  • OptimalSort − инструмент для сортировки карт, который позволяет понять, как люди классифицируют контент в вашем пользовательском интерфейсе.
  • Treejack − отслеживание действий пользователей на сайте.
  • Mouseflow − отслеживание движения курсора мышки.

Контроль версий для дизайнеров

100+ классных инструментов для дизайнеров и не только

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

  • Abstract − платформа для команд разработчиков, позволяющая создавать версии и совместно работать над Sketch-файлами.
  • Folio − простая система контроля версий для команд разработчиков на основе Git.
  • Kactus − управляйте изменениями, документируйте работу и синхронизируйте работу команды.
  • Plant − приложение для Mac и плагин Sketch, предлагающие полный контроль версий для дизайнеров и команд.
  • Relay for Figma − сервис на стадии запуска, автоматически передаёт Figma-фреймы в GitHub-репозиторий.
  • Versions − инструмент контроля версий для дизайнеров, работающий с GitHub, Bitbucket, GitLab и Azure Devops.

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

100+ классных инструментов для дизайнеров и не только

  • LogRocket − инструмент для записи действий пользователей на вашем сайте. С ним можно быстрее воспроизводить ошибки и исправлять проблемы.
  • VisBug − на любой веб-странице: визуальная отладка, быстрая проверка стиля и a11y, визуальное изменение CSS, перетаскивание элементов и многое другое.

Понравилась подборка инструментов для дизайнеров? Вас заинтересует следующее:

Источник: Подборка классных инструментов для дизайнеров в блоге на GitHub

А какие инструменты используете вы?

Интересуетесь фронтендом?

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

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




Добавить комментарий