<div class="hidden-in-page">

# Awesome Design Tools

- [Awesome Design Plugins](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Plugins.md)
- [Awesome Design Conferences](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Conferences.md)
- [Awesome Design UI Kits](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-UI-Kits.md)

<p align="center">
    <a href="https://flawlessapp.io/designtools">
        <img src="https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/Awesome-design-tools-cover.png" alt="Awesome-Design-Tools"/>
    </a>
</p>

<p align="center">
    <img alt="awesome" src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" />
</p>

## Как использовать

- Сейчас вы находитесь в разделе **Awesome Design Tools**, если вам нужны плагины — перейдите к [Awesome Design Plugins](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Plugins.md).
- Чтобы найти инструмент, воспользуйтесь оглавлением или поиском по ключевому слову (например, "анимация", "градиент").

</div>

<header class='header header-top -blue'></header>
<div class="nav">

## Оглавление

- [Доступность](#accessibility-tools)  
- [Анимация](#animation-tools)  
- [Дополненная реальность](#augmented-reality)  
- [Совместная работа](#collaboration-tools)  
- [Выбор цвета](#color-picker-tools)  
- [Обратная связь по дизайну](#design-feedback-tools)  
- [Передача дизайна](#design-handoff-tools)  
- [Вдохновение](#design-inspiration)  
- [Системы дизайна](#design-system-tools)  
- ["Дизайн в код"](#design-to-code-tools)  
- [Контроль версий](#design-version-control)  
- [Инструменты разработки](#development-tools)  
- [Мониторинг пользовательского опыта](#experience-monitoring)  
- [Работа со шрифтами](#font-tools)  
- [Создание градиентов](#gradient-tools)  
- [Работа с иконками](#icons-tools)  
- [Иллюстрации](#illustrations)  
- [Информационная архитектура](#information-architecture)  
- [Дизайн логотипов](#logo-design)  
- [Mockup макеты](#mockup-tools)  
- [No-code](#no-code-tools)  
- [Пиксель Арт](#pixel-art-tools)  
- [Прототипирование](#prototyping-tools)  
- [Создание скриншотов](#screenshot-software)  
- [Наброски](#sketching-tools)  
- [Дизайн для SMM](#smm-design-tools)  
- [Звуковой дизайн](#sound-design)  
- [Cтоковые фотогафии](#stock-photos-tools)  
- [Стоковые видео](#stock-videos)  
- [Изучение дизайна](#tools-for-learning-design)  
- [UI-дизайн](#ui-design-tools)  
- [Построение пользовательских потоков](#user-flow-tools)  
- [Пользовательские исследования](#user-research-tools)  
- [Визуальная отладка](#visual-debugging-tools)  
- [Создание вайрфреймов](#wireframing-tools)  
- [3D-моделирование](#three-d-modeling-software)  

</div>

<main>

<article id="accessibility-tools">

---

### Инструменты доступности

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

- [A11ygator](https://a11ygator.chialab.io) — Веб-инструмент для анализа сайтов на соответствие правилам WCAG. Также доступен в виде расширения для браузера Google Chrome и Twitter-бота. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/chialab/a11ygator-app)
- [Accessibility Insights](https://accessibilityinsights.io/) — помогает разработчикам быстро находить и устранять проблемы доступности. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Accessible Palette Builder](https://toolness.github.io/accessible-color-matrix/) — прототип на основе Elm, помогающий дизайнерам создавать доступные цветовые палитры. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/toolness/accessible-color-matrix)
- [AChecker](https://achecker.ca) — веб-приложение для тестирования доступности, используемое для оценки HTML-контента на наличие проблем с доступностью. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ANDI](https://www.ssa.gov/accessibility/andi/help/install.html) — инструмент тестирования доступности веб-контента (букмарклет). Автоматически обнаруживает проблемы с доступностью, предлагает улучшения и проверяет соответствие стандарту 508. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/SSAgov/ANDI)
- [Axe](https://www.deque.com/axe/) — движок доступности, предназначенный для работы во всех современных браузерах и с любыми инструментами, фреймворками, библиотеками и средами. Это инструмент автоматического тестирования доступности для разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/dequelabs/axe-core)
- [ColorBox](http://www.colorbox.io/) — веб-приложение, которое алгоритмически создает доступные цветовые системы. Разработано командой Lyft Design. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Colorable](https://colorable.jxnblk.com/) — бесплатный веб-инструмент для проверки контраста. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Color Oracle](https://colororacle.org/) — бесплатный симулятор дальтонизма. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Contrast](https://usecontrast.com/) — приложение для macOS для дизайнеров и разработчиков, предоставляющее быстрый доступ к коэффициентам контраста цветов по стандартам WCAG. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Contrast Checker](https://contrast-checker.glitch.me/) — помогает проверить контраст между фоном элемента и самой страницей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Contraste](https://contrasteapp.com/) — приложение для проверки доступности текста в соответствии с Руководством по доступности веб-контента (WCAG). ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Inclusive Design](https://www.microsoft.com/design/inclusive/) — методология и набор инструментов, предоставленных командой Microsoft.
- [Hex Naw](https://hexnaw.com/) — помогает протестировать целые цветовые системы на контрастность и доступность. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Leonardo](https://leonardocolor.io) — генератор цветовых палитр по заданному коэффициенту контраста WCAG. Открытый веб-инструмент и npm-модуль для дизайнеров и инженеров. Разработан Adobe. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![Web](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/web.svg)
- [PA11Y](http://pa11y.org/) — инструмент тестирования доступности для выявления проблем с веб-страницами. Запускает HTML CodeSniffer из командной строки для программных отчетов о доступности. Это инструмент для разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Sim Daltonism](https://michelf.ca/projects/sim-daltonism/) — симулятор дальтонизма для macOS и iOS, позволяющий визуализировать цвета так, как они воспринимаются при различных типах дальтонизма. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://www.github.com/michelf/sim-daltonism/)
- [Stark](https://getstark.co/) — платный плагин для Sketch, позволяющий моделировать различные типы дальтонизма. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Toptal’s Color Filter](https://www.toptal.com/designers/colorfilter) — позволяет протестировать ваш сайт и показывает, как люди с различными видами дальтонизма увидят ваши страницы. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media//free.svg)
- [tota11y](http://khan.github.io/tota11y/) — инструмент визуализации доступности. Интересный факт: в названии инструмента вы видите "a11y". Это сокращение от accessibility, где "a" сопровождается 11 буквами, а затем "y". ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [WAVE](https://wave.webaim.org/) — позволяет оценить веб-контент на наличие проблем с доступностью прямо в Chrome и Firefox. Это проверяющий доступность веб-контента. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [90 Examples](http://clrs.cc/a11y/) — бесплатная коллекция доступных цветовых тем. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

<div class="banner banner--yellow">

Функции проверки доступности также доступны в VisBug из категории [Визуальная отладка](#visual-debugging-tools).

</div>

</article>

<article id="animation-tools">

---

### Инструменты анимации

<br>

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

- [After Effects](https://www.adobe.com/products/aftereffects.html) — цифровые визуальные эффекты, анимация и приложение для композитинга, разработанное Adobe.
- [BeatFlyer](https://beatflyer.com/) — веб-инструмент, который позволяет быстро создавать зацикленные и яркие анимации из многослойных композиций.
- [Dokyu Motion](https://3dmybusiness.com) — упрощает дизайн анимации в After Effects, чтобы любой редактор мог рассказывать истории, которые не останутся незамеченными.
- [Flare](https://www.2dimensions.com/about-flare) — мощный инструмент для дизайна и анимации, позволяющий дизайнерам и разработчикам создавать анимации для приложений или игр. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Flow](https://createwithflow.com/) — профессиональный инструмент анимации для Sketch-дизайнов, который также экспортирует готовый код для iOS, веба или SVG-файлов. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [GSAP](https://greensock.com/) — набор инструментов для сценарных HTML5-анимаций с высокой производительностью во всех основных браузерах. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Haiku Animator](https://www.haikuforteams.com/) — анимация на основе ключевых кадров, соединяющая инструменты пользовательского интерфейса с кодом, который легко использовать разработчикам.
- [Keyshape](https://www.keyshapeapp.com/) — инструмент 2D-анимации, позволяющий экспортировать анимации в формате SVG. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Kite Compositor](https://kiteapp.co/) — мощное приложение для анимации и прототипирования для Mac и iOS. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [LightBox](https://uselightbox.com/) — пакет для создания 2D-анимации с рисованными кадрами. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Lottie](https://airbnb.io/lottie/) — мобильная библиотека для Android и iOS, которая парсит анимации из Adobe After Effects, экспортированные как JSON с помощью Bodymovin, и рендерит их нативно на мобильных устройствах и в вебе. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Mantra](https://jeremyckahn.github.io/mantra/) — инструмент для анимации на основе временной шкалы в браузере. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Meteoritic](https://meteoritic.io/) — библиотека анимационных эффектов для iOS и Android. Выберите из множества анимаций, подходящих для различных стилей приложений. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Naker.Back](https://app.naker.io/back) — интегрируйте интерактивный фон бесплатно, чтобы привлечь больше внимания к вашему сайту. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Naker.Story](https://naker.io/naker-story.html) — сделайте ваш веб-контент интерактивным, чтобы увлечь посетителей как никогда ранее благодаря 3D. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [OFFEO](https://offeo.com/) — онлайн-инструмент для создания видеороликов для малого бизнеса, чтобы создавать рекламные ролики на уровне крупных брендов без большого бюджета. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [StorySwag](https://storyswag.co) — создавайте стильные анимированные посты для Instagram и Facebook всего в несколько нажатий прямо с вашего телефона. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Spirit](https://spiritapp.io/) — инструмент анимации, который помогает создавать и управлять анимациями в реальном времени в браузере. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Stylie](https://jeremyckahn.github.io/stylie/) — графический инструмент для создания CSS3-анимаций в браузере. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Tumult Hype](https://tumult.com/hype/) — приложение для создания анимаций и интерактивного HTML5-контента для macOS. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)

<div class="banner banner--yellow">

Доступные приложения и инструменты для анимации UI и UX также включают Drama, Principle, Framer, Invision Studio и Flinto.

</div>

</article>

<article id="augmented-reality">

---

### Дополненная реальность

Дополненная реальность (AR) — это технология, которая улучшает наш реальный мир, добавляя к нему слой цифровой информации. Использование AR растет с каждым днем, с появлением десятков новых AR-приложений, инструментов разработки и фреймворков. В этом разделе собраны различные инструменты дополненной реальности для создания, проецирования и прототипирования приложений, ориентированных на AR:

- [Daqri](https://daqri.com/) — предоставляет профессиональный уровень дополненной реальности для рабочих процессов, накладывая цифровую информацию на физическую среду.
- [EasyAR](https://www.easyar.com/) — мобильное приложение и движок дополненной реальности, упрощающий работу с AR.
- [HP Reveal](https://www.hpreveal.com/) — добавляет ценность к печатному контенту с помощью визуальной интерактивности.
- [Layar](https://www.layar.com/) — помогает находить различные элементы на основе технологий дополненной реальности.
- [Lens Studio](https://lensstudio.snapchat.com/) — создавайте, публикуйте и делитесь своими AR-эффектами для Snapchat с кодом или без него. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Lightform](https://lightform.com/) — инструмент для проектирования дополненной реальности через проекцию.
- [Spark AR Studio](https://www.sparkar.com) — создавайте AR-эффекты для Instagram без написания кода. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Torch](https://www.torch.app/) — облачное приложение для 3D-дизайна и прототипирования, ориентированное на мобильную AR. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Unity](https://unity.com/) — создавайте качественные 3D и 2D игры, а также проекты для VR/AR, и разворачивайте их на мобильных и настольных устройствах.
- [Vectary](https://www.vectary.com/) — создавайте 3D и AR для вашего веб-сайта.
- [Vuforia](https://www.vuforia.com/) — SDK для мобильных устройств, позволяющий создавать приложения дополненной реальности.
- [Wikitude](https://www.wikitude.com/) — расширяет возможности приложений для iOS, Android и умных очков с помощью отслеживания изображений и объектов, мгновенного отслеживания (SLAM), Geo AR и других функций.

</article>

<article id="collaboration-tools">

---

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

Ищете инструменты для гибкой совместной работы в области дизайна и разработки? Отличная идея, ведь такие инструменты упрощают жизнь дизайнеров и разработчиков, экономят время и повышают производительность. Ну, в эпоху Slack вы и так всё это знаете. Здесь вы найдете лучшие инструменты для совместной работы продуктовых команд:

- [Airtable](https://airtable.com/) — часть таблицы, часть базы данных, и полностью гибкий инструмент, который команды используют для организации своей работы так, как им удобно.
- [Asana](https://asana.com/) — платформа управления работой, которую команды используют, чтобы сосредоточиться на целях, проектах и ежедневных задачах для развития бизнеса.
- [Basecamp](https://basecamp.com/) — набор инструментов для управления проектами, предназначенный для организации сотрудников, распределения задач и отслеживания прогресса в одном месте.
- [Freedcamp](https://freedcamp.com/) — самый инновационный способ управления проектами, полностью бесплатный... навсегда.
- [Droplr](https://droplr.com/) — создание скриншотов, обмен файлами и записи экрана для объяснения идей.
- [Excalidraw](https://excalidraw.com/) — инструмент для рисования диаграмм с эффектом ручного наброска. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Filestage](https://filestage.io/) — программное обеспечение для гибкого утверждения контента, помогающее рецензировать видео, дизайн и документы с клиентами и коллегами.
- [Float](https://www.float.com/) — инструмент для планирования проектов и распределения времени команды в одном месте.
- [Gallery](https://material.io/tools/gallery/) — инструмент для совместной работы, позволяющий загружать дизайнерские работы, получать отзывы и отслеживать изменения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [HiveDesk](https://www.hivedesk.com/) — автоматическое отслеживание времени для удаленных сотрудников со скриншотами. Упрощает мониторинг производительности удаленных сотрудников и управление проектами.
- [Jira](https://www.atlassian.com/software/jira) — инструмент разработки программного обеспечения, используемый гибкими командами.
- [Jitsi](https://jitsi.org/) — мультиплатформенная система видеоконференций с открытым исходным кодом, которую можно установить или использовать на их серверах. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Keybase](https://keybase.io) — бесплатное приложение для совместной работы с встроенным сквозным шифрованием чатов, обменом файлами, git-репозиториями и другими функциями. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Lumeer](https://www.lumeer.io/) — простой визуальный инструмент для планирования, организации и отслеживания чего угодно, где угодно и когда угодно. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Mattermost](https://mattermost.com/) — гибкая платформа обмена сообщениями с открытым исходным кодом, соответствующая строгим стандартам конфиденциальности и безопасности. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Milanote](https://milanote.com/) — простой в использовании инструмент для организации идей и проектов в виде визуальных досок.
- [Mixed](https://mixed.io) — инструмент для совместной работы и рисования в режиме реального времени для распределенных команд. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Moqhub](https://moqhub.com) — быстрый онлайн-инструмент для проверки креативных проектов. Получайте отзывы по изображениям и PDF.
- [MURAL](https://mural.co/) — визуально мыслите и сотрудничайте где угодно и когда угодно.
- [Nextcloud](https://nextcloud.com) — платформа для совместной работы с открытым исходным кодом, включающая файлы, канбан-доски, чаты и звонки, календарь и многое другое. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Notion](https://www.notion.so) — пишите, планируйте, сотрудничайте и организуйте свою работу. Notion — всё, что вам нужно, в одном инструменте.
- [ProofHub](https://www.proofhub.com/) — единое место для всех ваших проектов, команд и коммуникаций.
- [RealtimeBoard (Miro)](https://www.realtimeboard.com/) — платформа для совместной работы кросс-функциональных команд, ранее известная как Miro.
- [Slack](https://slack.com/) — хаб для совместной работы, независимо от типа вашей работы. Это место, где происходят разговоры, принимаются решения и всегда доступна информация.
- [Sunsama](https://sunsama.com/) — красиво оформленный менеджер задач для команд, объединяющий задачи из Trello/Jira/Asana в единую календарную систему.
- [Taskade](https://taskade.com/) — простая, увлекательная и предназначенная для удаленных команд платформа для повышения производительности. Taskade синхронизируется в реальном времени на вебе, мобильных устройствах и настольных компьютерах.
- [Trello](https://trello.com/) — веб-приложение для управления проектами, которое позволяет организовывать и расставлять приоритеты для ваших проектов весело, гибко и эффективно.
- [Witeboard](https://www.witeboard.com/) — простой в использовании онлайн-доска для совместной работы в реальном времени. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Workzone](https://www.workzone.com/) — простое и мощное программное обеспечение для управления проектами.
- [Wrike](https://www.wrike.com/) — онлайн-программное обеспечение для управления проектами, предоставляющее полный контроль над задачами.
- [Zenkit](https://zenkit.com/) — инструмент для планирования встреч, отслеживания прогресса проектов и мозгового штурма новых идей.
- [zipBoard](https://zipboard.co) — онлайн-инструмент для визуального отслеживания ошибок и аннотирования веб-сайтов.
- [Zulip](https://zulipchat.com/) — сочетает оперативность чатов в реальном времени с моделью тредов электронной почты, помогая сосредоточиться на важных обсуждениях и игнорировать несущественные. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)

<div class="banner banner--yellow">

You can also have design collaboration into [InVision Freehand](https://www.invisionapp.com/feature/freehand) tool.

</div>

</article>

<article id="color-picker-tools">

---

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

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

- [BrandColors](https://brandcolors.net/) — крупнейшая коллекция официальных цветовых кодов брендов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Calcolor](https://calcolor.co) — веб-инструмент для управления цветовыми палитрами, предлагающий новый способ взаимодействия с цифровыми цветами. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Chroma](https://chroma.spencerhamm.com/) — бесплатное веб-приложение, которое позволяет определить цвет. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Color](https://color.adobe.com/explore/?filter=most-popular&time=month) — создавайте цветовые схемы с помощью цветового круга или просматривайте тысячи цветовых комбинаций от сообщества Color. Разработано Adobe. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Color by Cloudflare](https://cloudflare.design/color/) — инструмент для предварительного просмотра палитр с элементами пользовательского интерфейса, циклического просмотра доступных цветовых комбинаций и создания палитр вручную, через URL-импорт или генеративно.
- [Color Deck](https://color.obscuredetour.com/) — коллекция палитр цветов, основанная на HSL. Инструмент также является open-source. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/obscuredetour/color-deck)
- [Color Hexa](https://www.colorhexa.com/) — бесплатный инструмент для получения информации о любом цвете и генерации соответствующих цветовых палитр для дизайнов.
- [Color Hex Picker](http://colorhexpicker.com/) — инструмент для определения названия любого цвета из изображения. Также предоставляет HEX-код и RGB-значение цвета. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Color Hunt](https://colorhunt.co/) — бесплатная и открытая платформа для вдохновения цветами с тысячами модных цветовых палитр, отобранных вручную. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ColorKit](https://colorkit.io) — инструмент для смешивания цветов и генерации оттенков и полуоттенков цветов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Color Leap](https://colorleap.app) — перенеситесь во времени и посмотрите цвета истории. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Colorpicker](https://colorpicker.crea-th.at/) — полноценный инструмент для манипуляции цветами с открытым исходным кодом и функцией выбора цвета. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [ColorSlurp](http://colorslurp.com/) — универсальный инструмент для работы с цветами, который повышает продуктивность дизайнеров и разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [ColorsWall](https://colorswall.com/) — место для хранения или генерации цветовых палитр. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Colorwise](https://www.colorwise.io/) — поиск цветовых палитр самых популярных продуктов на Product Hunt. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Colour Cafe](https://www.instagram.com/colours.cafe/) — вдохновение цветами на Instagram с подбором современной цветовой палитры. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Colourcode](https://colourco.de/) — онлайн-инструмент для дизайнеров, который позволяет легко и интуитивно комбинировать цвета. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Coolors](https://coolors.co/) — супербыстрый генератор цветовых схем. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Culrs](https://culrs.com/#/) — продуманно созданные и удобные цветовые палитры. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Geenes](https://geenes.app) — инструмент для создания гармоничных цветовых тем с экспортом кода и файлов Sketch. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Image Color Picker](https://image-color.com) — инструмент выбора цвета из изображения и генератор цветовых схем. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Instant Eyedropper](http://instant-eyedropper.com/) — минималистичный инструмент пипетки для Windows, поддерживающий несколько цветовых форматов для дизайнеров и разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Just Color Picker](http://annystudio.com/software/colorpicker/) — бесплатный портативный автономный инструмент для выбора и редактирования цветов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Khroma](http://khroma.co/) — инструмент на базе ИИ для генерации цветовых палитр на основе ваших предпочтений.
- [Material Colors Native](https://github.com/BafS/Material-Colors-native) — цветовая палитра дизайна Material от Google в формате приложения для macOS. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Material Design Palette Generator](https://materialpalettes.com/) — получение идеальных цветовых палитр дизайна Material из любого HEX-кода. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Paletton](https://paletton.com) — дизайнерский инструмент для создания цветовых комбинаций, которые хорошо работают вместе. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Picular](https://picular.co/) — сверхбыстрый генератор основных цветов, использующий поиск изображений Google. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pigment](https://pigment.shapefactory.co/) — генератор цветовых палитр с бесчисленными цветовыми конфигурациями, предлагаемыми приложением. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pikka](https://itunes.apple.com/us/app/pikka-color-picker/id1195076754) — инструмент для выбора цвета и генерации цветовых схем для macOS. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [React Color](http://casesandberg.github.io/react-color/) — коллекция инструментов для выбора цвета из Sketch, Photoshop и Chrome. Бесплатный и с открытым исходным кодом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/casesandberg/react-color/)
- [Sip](https://sipapp.io/) — лучший способ собирать, организовывать и делиться цветами. Глобальный инструмент пипетки для macOS. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Skala Color](https://bjango.com/mac/skalacolor/) — поддерживает множество форматов, охватывающих всё, что может понадобиться для разработки веба, iOS, Android и macOS. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Swatches](https://swatchesapp.io/) — приложение для iOS, которое позволяет собирать, исследовать и делиться цветами, которые вдохновляют вас в повседневной жизни. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Tint & Shade Generator](https://maketintsandshades.com/) — отображает оттенки и полутона заданного цвета HEX с шагом в 10%. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Viz Palette](https://projects.susielu.com/viz-palette) — инструмент выбора цвета для визуализации данных. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

<div class="banner banner--yellow">

Вы также можете создавать цветовые палитры с помощью Leonardo, который упоминается в разделе [Инструменты доступности](#accessibility-tools).

</div>

</article>

<article id="design-feedback-tools">

---

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

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

- [Flawless Feedback](https://flawlessapp.io/feedback) — просматривайте и аннотируйте приложения для iOS, затем делитесь отзывами в Jira или Trello. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [GoVisually](https://govisually.com) — программное обеспечение для онлайн-проверки, рецензирования и утверждения дизайна.
  <div class="banner banner--yellow">

</article>

<article id="design-handoff-tools">

---

### Инструменты передачи дизайна

<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="https://adobe.ly/33HVSdf">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD.png" alt="Abobe XD"/>
        </a>
    </p>
</div> -->

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

- [Avocode](https://avocode.com) — открывайте дизайны без использования инструментов для проектирования. Экспортируйте изображения без подготовки слоев. Кликайте на слои, чтобы получить код.
- [Flawless App](https://flawlessapp.io/) — инструмент для сравнения ожидаемого дизайна с реальным приложением прямо в iOS Simulator (полезен для дизайнеров, работающих с Xcode, или мобильных разработчиков). ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Inspect](https://www.invisionapp.com/feature/inspect/) — подготовка дизайнов для разработки. Создан Invision.
- [Sketch Measure](https://github.com/utom/sketch-measure) — плагин для Sketch, который добавляет аннотации расстояний и размеров элементов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Specctr](https://specctr.com) — в случае, если вы разрабатываете пользовательский интерфейс в Photoshop, Illustrator или InDesign, этот инструмент создаёт аннотации с размерами элементов.
- [Sympli](https://sympli.io) — автоматическая передача спецификаций и ресурсов из Sketch, Photoshop и Adobe XD. Интегрируется с Jira, Xcode и Android Studio.
- [Zeplin](https://zeplin.io/) — передавайте дизайны и гайды по стилям с точными спецификациями, ресурсами и сниппетами кода автоматически.

<div class="banner banner--yellow">

Вы также можете осуществить передачу дизайна с помощью Relay, который упоминается в разделе [Контроль версий](#design-version-control).

</div>

</article>

<article id="design-inspiration">

---

### Вдохновение для дизайна

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

- [Behance](https://www.behance.net/) — онлайн-платформа для демонстрации и поиска креативных работ. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [CodeMyUI](https://codemyui.com/) — тщательно подобранная коллекция вдохновения для веб-дизайна и пользовательского интерфейса с фрагментами кода. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Collect UI](http://collectui.com/) — платформа для ежедневного вдохновения, собранного из Daily UI и других источников. Основана на работах Dribbble, включает 14419 отобранных дизайнов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Creative Portfolios](http://www.creative-portfolios.com/) — подборка самых креативных портфолио, созданных дизайнерами и разработчиками.
- [Design Hunt](https://itunes.apple.com/us/app/design-hunt/id968588816?mt=8) — ежедневная коллекция лучших продуктов, приложений и вдохновения для всех творческих людей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Dribbble](https://dribbble.com/) — онлайн-сообщество для демонстрации работ пользователей. Отличный ресурс для вдохновения.
- [Ficture](https://ficture.design/) — архив использования шрифтов, который вдохновляет. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Inspiration UI](http://inspirationui.com/) — сообщество, предоставляющее лучшие дизайнерские ресурсы для создателей веб-контента. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Hover States](https://hoverstat.es/) — демонстрация выдающихся работ на переднем крае цифровой культуры для творческого сообщества.
- [Httpster](https://httpster.net/) — источник вдохновения, демонстрирующий крутые сайты, созданные людьми со всего мира. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [H69.Design](https://www.h69.design/) — коллекции лендингов и бесплатные ресурсы для дизайнеров.
- [Lapa Ninja](https://www.lapa.ninja/) — вдохновение дизайном лендингов со всего интернета. 1800+ примеров лендингов, ежедневно обновляемых.
- [Mobile Patterns](https://www.mobile-patterns.com/) — библиотека вдохновения для дизайна, включающая лучшие UI/UX паттерны (iOS и Android).
- [Mobbin](https://mobbin.design/) — изучение мобильных паттернов дизайна популярных приложений. Исследуйте распространенные пользовательские потоки, такие как онбординг, регистрация и вход в систему, основные функции и многое другое. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [One Page Love](https://onepagelove.com/gallery) — коллекция красивых и уникальных одностраничных сайтов для вдохновения в веб-дизайне. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Owwly](https://owwly.com/feed/inspirations) — дом для цифровых продуктов, созданных с любовью к дизайну.
- [Page Flows](https://pageflows.com/) — видео и скриншоты пользовательских потоков для вдохновения. Откройте для себя паттерны дизайна для более чем 160 различных задач. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [pttrns](https://pttrns.com/) — паттерны дизайна для популярных мобильных приложений.
- [Really Good Emails](https://reallygoodemails.com/) — более 4,150 отобранных дизайнов электронных писем. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ReallyGoodUX](https://www.reallygoodux.io/) — скриншоты и примеры отличного UX из реальных мобильных и веб-продуктов. Исследуйте лучшие примеры UX, включая онбординги и пошаговые инструкции. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Saas Landing Page](https://saaslandingpage.com/) — откройте лучшие примеры лендингов, созданных ведущими SaaS-компаниями, и получите идеи и вдохновение для вашего следующего проекта. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Saas Pages](https://saaspages.xyz/) — коллекция лучших лендингов с акцентом на копирайтинг и дизайн. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [The Design Team](https://thedesignteam.io/) — комиксы о команде дизайнеров стартапа из Силиконовой долины.
- [Typewolf](https://www.typewolf.com/) — помогает дизайнерам выбрать идеальные сочетания шрифтов для их следующих проектов.
- [UI Garage](https://uigarage.net/) — универсальный ресурс для дизайнеров, разработчиков и маркетологов, чтобы найти вдохновение, инструменты и лучшие ресурсы.
- [UI Sources](https://www.uisources.com/) — более 500+ взаимодействий из лучших дизайнерских и высокодоходных приложений в App Store. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [UI Recipes](https://uirecipes.com/) — еженедельные 15-минутные уроки по дизайну пользовательского интерфейса из лучших приложений.
- [UX Archive](http://uxarchive.com/) — исследуйте более 400 пользовательских потоков в 120 мобильных приложениях. Изучайте задачи, такие как бронирование, вход в систему, онбординг, покупки, поиск и многое другое. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Waveguide](https://www.waveguide.io/) — банк знаний о дизайне с тысячами примеров мобильных приложений, лендингов, eCommerce, CX/UX паттернов.
- [Web Design Museum](https://www.webdesignmuseum.org/) — более 1,200 тщательно отобранных веб-сайтов, демонстрирующих тренды веб-дизайна с 1994 по 2006 годы.

</article>

<article id="design-system-tools">

---

### Дизайн-системы

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

- [Cabana](https://cabanadesignsystem.com/) — премиальная дизайн-система для Sketch, которая помогает создавать удивительные продукты быстрее, чем когда-либо.
- [Catalog](https://www.catalog.style/) — живой гайд по стилю для цифровых продуктов, объединяющий документацию по дизайну с реальными работающими компонентами. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Design System Manager](https://www.invisionapp.com/design-system-manager/) — менеджер дизайн-систем от Invision.
- [DSK](https://rundsk.com) — сокращение от "Design System Kit" — рабочее пространство для совместного создания дизайн-систем. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [EOS Design System](https://www.eosdesignsystem.com) — система с открытым исходным кодом, настраиваемая, построенная на Bootstrap, следуя концепции Atomic Design. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Eva Design System](https://eva.design/) — настраиваемая дизайн-система, доступная для Sketch с библиотеками компонентов для мобильных и веб-платформ. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Frontify](https://frontify.com/) — создавайте графические руководства, библиотеки паттернов и дизайн-системы.
- [Interplay](https://interplayapp.com/) — объедините дизайн и разработку вокруг единого источника истины. Инструмент пока недоступен для широкой публики (бета).
- [Lingo](https://www.lingoapp.com/) — создавайте общую библиотеку ресурсов с вашей командой. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Lucid](https://lucid.style/) — инструмент для создания, управления и обмена дизайн-системами. От простой библиотеки компонентов до детального описания стилей.
- [Modulz](https://www.modulz.app/) — проектируйте, создавайте, документируйте и публикуйте свою дизайн-систему без написания кода.
- [Prime Design System Kit](https://www.primedesignsystem.com) — включает шаблоны устройств, диаграммы, UI-набор и даже набор иллюстраций. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Specify](https://www.specifyapp.com/) — инструмент для создания, масштабирования и поддержки дизайн-системы.
- [Storybook](https://storybook.js.org/) — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Symbol Design System](https://symboldesign.co/) — дизайн-система для Sketch на основе атомарных элементов.
- [Toolabs](https://www.toolabs.com/) — инструмент для проектирования, прототипирования и разработки дизайн-систем и компонентов. Пока недоступен для широкой публики, но вы можете подать заявку на ранний доступ.
- [Zeroheight](https://www.zeroheight.com/) — гайды по стилю, создаваемые дизайнерами, расширяемые разработчиками и редактируемые всеми.

</article>

<article id="design-to-code-tools">

---

### Дизайн в код

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

- [Anima](https://www.animaapp.com/) — веб-приложение с плагином для Sketch, которое конвертирует Sketch в HTML. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Blocs](https://blocsapp.com/) — быстрый, простой в использовании и мощный визуальный инструмент веб-дизайна, позволяющий создавать адаптивные сайты без написания кода. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Bootstrap Studio](https://bootstrapstudio.io/) — мощный инструмент веб-дизайна для создания адаптивных сайтов с использованием фреймворка Bootstrap.
- [Draftbit](https://draftbit.com/) — визуально проектируйте и создавайте мобильные приложения прямо из вашего браузера.
- [EasyLogic Studio](https://www.easylogic.studio/) — фантастический инструмент дизайна css+svg, который также конвертируется в код. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Grapedrop](https://grapedrop.com/) — создавайте компоненты, веб-проекты и публикуйте их мгновенно в интернете с помощью простого редактора.
- [Mobirise](https://mobirise.com/) — автономное программное обеспечение для создания сайтов с функцией drag-and-drop, основанное на Bootstrap 3/4 и AMP. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [PageCloud](https://www.pagecloud.com/) — самый быстрый и настраиваемый конструктор сайтов, позволяющий любому создать идеальный сайт.
- [PaintCode](https://www.paintcodeapp.com) — приложение для векторной графики, которое мгновенно конвертирует рисунки в код Swift, Objective-C, JavaScript или Java. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Pinegrow](https://pinegrow.com/) — профессиональный визуальный редактор для CSS Grid, Bootstrap 4 и 3, Foundation, адаптивного дизайна, HTML и CSS.
- [px.div](https://www.pxdiv.com) — качественный инструмент создания сайтов для разработчиков и дизайнеров.
- [Readymag](https://readymag.com/) — визуально приятный инструмент для веб-дизайна, от лендингов до мультимедийных лонгридов, презентаций и портфолио.
- [Sparkle](https://sparkleapp.com/) — самый простой способ создать настоящий сайт: без кода и сложных терминов. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [STUDIO](https://studio.design/) — создавайте с нуля, сотрудничайте в реальном времени и публикуйте сайты.
- [Supernova Studio](https://supernova.io/) — импортируйте дизайны из Sketch и конвертируйте их в код для Android, iOS или React Native.
- [Tilda](https://tilda.cc/) — создавайте сайт, лендинг или интернет-магазин бесплатно с помощью модулей Tilda и публикуйте в тот же день.
- [Wix](https://www.wix.com/) — самый простой и многофункциональный конструктор сайтов, позволяющий создать уникальный сайт.
- [Webflow](https://webflow.com/) — создавайте адаптивные сайты прямо в браузере, затем хостите у нас или экспортируйте код для размещения где угодно.

</article>

<article id="design-version-control">

---

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

Разработчики уже давно активно используют инструменты контроля версий, вероятно, начиная с 2005 года (первый релиз Git). Использование системы контроля версий — очевидный выбор для команд разработчиков, в то время как системы контроля версий для дизайнеров появились совсем недавно. Этот рынок быстро развивается, и мы ожидаем увидеть еще больше возможностей в области контроля версий для дизайнеров:

- [Abstract](https://www.abstract.com/) — платформа для команд дизайнеров, позволяющая версионировать, управлять и совместно работать с файлами Sketch.
- [Folio](http://folioformac.com/) — простая система контроля версий для дизайнерских команд, основанная на Git. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Kactus](https://kactus.io/) — контроль версий для дизайна без необходимости менять используемые инструменты. Управляйте изменениями, документируйте работу и поддерживайте синхронность команды. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Plant](https://plantapp.io/) — приложение для Mac и плагин Sketch, предоставляющие полный контроль версий для дизайнеров и команд. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Relay for Figma](https://relay.graphics/) — Relay передает ваши последние активы из Figma напрямую в кодовую базу (еще не выпущен).
- [Versions](https://versions.sympli.io) — инструмент контроля версий для дизайнеров с функциями визуального сравнения, слияния и разрешения конфликтов. Работает с GitHub, Bitbucket, GitLab и Azure DevOps.

</article>

<article id="development-tools">

---

### Инструменты разработки

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

- [Blisk](https://blisk.io) — предоставляет рабочее пространство для разработки и тестирования современных веб-приложений в два раза быстрее.
- [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/) — разработческая версия браузера Firefox. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Litmus](https://litmus.com/) — платформа для создания email-кампаний, которая, среди прочего, позволяет увидеть, как HTML-письма будут отображаться в различных почтовых клиентах.
- [Polypane](https://polypane.rocks) — браузер, созданный с нуля для разработки и тестирования сайтов и приложений.
- [Storybook](https://storybook.js.org/) — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. Делает процесс создания потрясающих пользовательских интерфейсов организованным и эффективным. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Styleguidist](https://github.com/styleguidist/react-styleguidist) — изолированная среда разработки компонентов React с живым гайдом по стилям. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

</article>

<article id="experience-monitoring">

---

### Мониторинг пользовательского опыта

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

- [Amplitude](https://amplitude.com/) — поймите своих пользователей, быстро создавайте лучшие продуктовые впечатления и развивайте свой бизнес.
- [Chalkmark](https://www.optimalworkshop.com/chalkmark) — повышайте конверсию клиентов и успех выполнения задач, получая быстрые отзывы о дизайне до его реализации.
- [Fathom](https://usefathom.com/) — предоставляет простую и полезную статистику сайта без отслеживания или хранения персональных данных ваших пользователей.
- [FullStory](https://www.fullstory.com/) — приложение, которое собирает все данные о взаимодействии клиентов с вашим продуктом на одной мощной и удобной платформе.
- [Google Analytics](https://analytics.google.com/analytics/web/) — измеряйте ROI вашей рекламы и отслеживайте сайты и приложения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Heap](https://heapanalytics.com/) — автоматически фиксируйте каждое взаимодействие в вебе, на мобильных устройствах и в облаке, а затем анализируйте данные ретроспективно без написания кода.
- [Heatly](https://www.heatlyanalytics.com) — бесплатный инструмент тепловых карт для лучшего понимания пользовательского опыта на сайте. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Hotjar](https://www.hotjar.com/) — посмотрите, как посетители используют ваш сайт, и собирайте отзывы пользователей.
- [Inspectlet](https://www.inspectlet.com/) — записывайте видео сессий ваших посетителей, чтобы видеть всё, что они делают на сайте.
- [LiveSession](https://livesession.io) — аналитика воспроизведения пользовательских сессий высокого качества.
- [LogRocket](https://www.logrocket.com/) — увидьте, что делают пользователи на вашем сайте, что поможет быстрее воспроизводить баги и устранять проблемы.
- [Mixpanel](https://mixpanel.com/) — получите инсайты по всем данным, ориентированным на пользователей, чтобы принимать более умные решения и действовать быстрее, основываясь на том, как клиенты используют ваш продукт или сайт.
- [Mouseflow](https://mouseflow.com/) — записывайте перемещения курсора мыши.
- [Pendo](https://www.pendo.io/) — измеряйте и улучшайте клиентский опыт внутри приложений.
- [Smartlook](https://www.smartlook.com) — воспроизведение сессий пользователей и аналитика вовлеченности.
- [Usabilla](https://usabilla.com) — создавайте клиентоориентированный опыт, задавая правильные вопросы в нужное время.

</article>

<article id="font-tools">

---

### Инструменты работы со шрифтами

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

- [BeFonts](https://befonts.com/) — приличная коллекция бесплатных шрифтов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Behance Free Fonts](https://www.behance.net/search/?search=free%20font) — список бесплатных шрифтов, загруженных на Behance. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [DaFont](https://www.dafont.com/) — архив шрифтов, доступных для бесплатного скачивания. Сортировка по алфавиту, стилю, автору или популярности. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Emotype](http://emotype.webflow.io/) — позволяет легко находить шрифты на основе эмоций, которые вы хотите передать на своем сайте. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Fontbase](https://fontba.se/) — простой инструмент для управления шрифтами. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [FontFabric](https://www.fontfabric.com/) — красивый интерфейс и хорошая коллекция шрифтов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Fontface Ninja](https://fontface.ninja/) — расширение для браузера, которое позволяет определить шрифты, используемые на любом сайте.
- [FontPair](https://fontpair.co/) — простой инструмент, помогающий сочетать шрифты Google. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Fontown](https://www.fontown.com/en) — типографический инструмент с постоянно растущим каталогом шрифтов, упрощающий рабочий процесс дизайнеров.
- [Fonts](https://fonts.adobe.com/fonts) — тысячи красивых шрифтов от Adobe. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Fonts Arena](https://fontsarena.com/) — сайт о типографике с качественными бесплатными шрифтами, исследованиями, бесплатными альтернативами премиум-шрифтам и новостями. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [FontGet](https://www.fontget.com/) — разнообразие шрифтов, аккуратно отсортированных по тегам. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [FontSelf](https://www.fontself.com) — расширение для Illustrator и Photoshop CC, позволяющее превратить любой текст в шрифт OpenType за считанные минуты!
- [FontSpark](https://fontspark.app/) — простой инструмент для быстрого поиска лучших шрифтов для проектов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Font Squirrel](https://www.fontsquirrel.com/fonts/acherus-grotesque) — скачивайте бесплатные шрифты из широких коллекций. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Google Fonts](https://fonts.google.com/) — делает веб красивее, быстрее и открытее благодаря отличной типографике. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/) — удобный способ размещения шрифтов Google на собственном сервере. Бесплатно и с открытым исходным кодом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/majodev/google-webfonts-helper/)
- [LostType](http://losttype.com/) — первая типографика с подходом "плати сколько хочешь".
- [Measure](https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg) — измеряйте длину строк текста с этим расширением для Chrome. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [RightFont](https://rightfontapp.com/) — приложение для управления шрифтами, помогает просматривать, синхронизировать, устанавливать и организовывать шрифты через iCloud, Dropbox или Google Drive. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Sans Forgetica](http://sansforgetica.rmit/) — шрифт, который помогает лучше запоминать учебные заметки. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Size Calculator](https://sizecalc.com/) — рассчитывает воспринимаемый размер текста с учетом расстояния просмотра и физического размера типографики. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Typeface](https://typefaceapp.com/) — менеджер шрифтов, который улучшает рабочий процесс дизайна с помощью живых превью шрифтов и гибкой системы тегов. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Wakamai Fondue](https://wakamaifondue.com/) — инструмент, отвечающий на вопрос "что умеет мой шрифт?". ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Web Font Preview](https://webfontpreview.com/) — предварительный просмотр пар шрифтов Google с компонентами и шаблонами сайтов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/jonaskay/webfontpreview)
- [Webfont](https://webfontapp.com/) — создавайте и управляйте пользовательскими SVG-иконками-шрифтами, создавая общую библиотеку значков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [WordMarkIt](https://wordmark.it/) — отображает написанные вами слова/фразы всеми шрифтами, которые уже установлены на вашем компьютере. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

<div class="banner banner--yellow">

Вы также можете управлять шрифтами с помощью Specify, который упоминается в разделе [Дизайн-системы](#design-system-tools).

</div>

</article>

<article id="gradient-tools">

---

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

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

- [Blend](http://www.colinkeany.com/blend/) — создавайте и настраивайте красивые CSS3 градиенты. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Colorffy](https://www.colorffy.com/) — получайте CSS, изображения, превью интерфейсов или создавайте собственные градиенты. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Colors & Fonts](https://www.colorsandfonts.com/) — библиотека цветов, градиентов и шрифтов, отобранная для цифровых дизайнеров и веб-разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ColorSpace](https://mycolor.space/) — идеальная цветовая палитра для вашего следующего проекта! Генерируйте красивые цветовые схемы. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ColorSpark](https://colorspark.app/gradient) — помогает дизайнерам находить уникальные цвета и яркие градиенты. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Cool Backgrounds](https://coolbackgrounds.io/) — изучите тщательно отобранную коллекцию крутых фонов, которые вы можете добавить на блоги, сайты.
- [CoolHue](https://webkul.github.io/coolhue/) — отобранная палитра градиентов для вашего следующего потрясающего проекта. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [CSS Gradient](https://cssgradient.io/) — бесплатный инструмент генерации CSS-градиентов, который позволяет создавать красочные градиенты. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Egg Gradients](https://www.eggradients.com/) — коллекция оттенков 12 разных цветов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Grabient](https://www.grabient.com/) — красивый и простой интерфейс для генерации веб-градиентов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Gradienta](https://gradienta.io/) — многокрасочные CSS-градиенты, JPG-загрузки, 100% бесплатно! ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [GradientsList](https://www.gradientslist.com) — крупнейшая краудсорсинговая коллекция градиентов с ежедневными добавлениями пользователей через [Gradients Maker для iOS](https://itunes.apple.com/app/apple-store/id1442380225?pt=117877769&ct=gh&mt=8). ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Gradient Generator](https://colordesigner.io/gradient-generator) — инструмент, который генерирует ступенчатые градиенты между двумя цветами. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Gradient Hunt](https://gradienthunt.com/) — бесплатная открытая платформа для вдохновения цветами с тысячами модных ручных градиентов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Gradients Guru](http://gradientsguru.com/) — изображения фонов в режиме смешивания и красивые градиенты для вашего интерфейса. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [HtmlColours](https://htmlcolors.com/) — узнайте, как легко и красиво создавать градиенты с этим генератором градиентов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [UI Gradients](https://uigradients.com/) — тщательно отобранная коллекция красивых цветовых градиентов для дизайнеров и разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Web Gradients](https://webgradients.com/) — бесплатная коллекция из 180 линейных градиентов, которые можно использовать как фоны для контента на любом участке вашего сайта. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

<div class="banner banner--yellow">

Вы также можете создавать и проверять градиенты с помощью Leonardo, который упоминается в разделе [Инструменты доступности](#accessibility-tools).

</div>

  </article>

<article id="icons-tools">

---

### Инструменты для работы с иконками

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

- [Animaticons](http://animaticons.co/) — растущая коллекция красивых анимированных GIF-иконок высокого разрешения, которые можно настроить.
- [CoreUI Icons](https://coreui.io/icons/) — премиум набор бесплатных иконок в SVG, Webfont и растровых форматах. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Digital Nomad Icons](http://digitalnomadicons.com/) — набор иконок и эмодзи в стиле digital nomad. 25 иконок высокого разрешения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Essential Glyphs](https://interface.market/essential/basic-pack) — идеально подходящие иконки для любых размеров. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Feather Icons](https://feathericons.com/) — каждая иконка разработана на сетке 24x24 с акцентом на простоту, согласованность и читаемость. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Flaticon](https://www.flaticon.com/) — более 1 593 000 векторных иконок в SVG, PSD, PNG, EPS форматах или как иконный шрифт.
- [Font Awesome](https://fontawesome.com/) — самый популярный набор иконок и инструментов для веба, также с открытым исходным кодом. [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/FortAwesome/Font-Awesome)
- [Fontello](http://fontello.com/) — инструмент для создания собственных шрифтов с иконками, также с открытым исходным кодом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/fontello/fontello)
- [Freepik](https://www.freepik.com) — коллекция эксклюзивных бесплатных ресурсов и всех графических элементов, необходимых для ваших проектов.
- [Iconscout](https://iconscout.com/) — высококачественные иконки, иллюстрации и стоковые фото в одном месте.
- [Iconfinder](https://www.iconfinder.com) — маркетплейс векторных иконок (SVG). Наборы иконок доступны в формате IconJar.
- [IconJar](https://www.geticonjar.com/) — храните все ваши иконки в одном менеджере. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Iconmonstr](https://iconmonstr.com/) — более 4412 бесплатных иконок в 305 коллекциях. Большой и постоянно растущий ресурс. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Iconset](https://iconset.io/) — бесплатный, кроссплатформенный и быстрый менеджер SVG-иконок для Mac и Windows. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Icon Store](https://iconstore.co/) — библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ICONSVG](https://iconsvg.xyz/) — инструмент для упрощения поиска и генерации стандартных иконок для вашего проекта. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Icons8](https://icons8.com/icons) — бесплатные иконки в стиле iOS, Android и Windows. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Ikonate](https://www.ikonate.com/) — настройка, регулировка и загрузка бесплатных векторных иконок. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [illustrio](https://illustrio.com/) — умная библиотека иконок. Создавайте что-то великое с полностью настраиваемыми иконками. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Ionicons](https://ionicons.com/) — красиво разработанные иконки с открытым исходным кодом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Material Design Icons](https://materialdesignicons.com/) — бесплатные иконки в стиле Material Design, созданные благодаря вкладу сообщества. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Material Icons Library](https://icons.pixsellz.io/) — бесплатная коллекция более 1000 иконок для популярных графических инструментов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Motion](https://www.getmotion.io) — бесплатный и простой редактор анимации иконок.
- [Norde Source](https://norde.io/) — приложение для Mac, Windows и Linux для раскраски и настройки набора иконок под ваш бренд. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Noun Project](https://thenounproject.com/) — иконки для всего.
- [Nucleo](https://nucleoapp.com/) — приложение для Mac и Windows для сбора, настройки и экспорта всех ваших иконок. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Orion Icons](https://orioniconlibrary.com/all-icons) — векторные SVG-иконки с продвинутым интерактивным веб-приложением.
- [Simple Icons](https://simpleicons.org/) — бесплатные SVG-иконки для популярных брендов. Просто нажмите на нужную иконку, и загрузка начнется автоматически. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Share Icon](https://www.shareicon.net/) — более 300 000 бесплатных иконок для скачивания в различных форматах. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Streamline Emoji](http://emoji.streamlineicons.com/) — бесплатная коллекция из 850+ векторных эмодзи. Стиль вдохновлен японским стилем "Каваий" (милый). ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Svgsus](http://www.svgs.us/) — инструмент управления SVG-иконками. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [SVG Colorizer](https://www.iconshock.com/svg-color/) — инструмент для автоматического изменения всей цветовой палитры любого набора SVG-иконок, сохраняя оттенки, блики и тени. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [SVGRepo](https://www.svgrepo.com/) — сайт с более чем 300 000 SVG-векторов и иконок.
- [Tilda Icons](https://tilda.cc/free-icons/) — скачивайте бесплатные иконки для лендингов. Более 700 векторных иконок, собранных в 43 наборах для бизнеса. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Twemoji](https://twemoji.twitter.com/) — проект Twitter с открытым исходным кодом, предоставляющий эмодзи для любых нужд. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Unicons](https://iconscout.com/unicons) — более 1000 пиксельно-идеальных векторных иконок для вашего проекта. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [VisualPharm](https://visualpharm.com/) — бесплатные SVG-иконки с супербыстрым поиском. Создано для веселья командой Icons8. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Xicons](https://www.xicons.co/) — бесплатные векторные иконки, которые обновляются каждые 10 дней. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Zwicon](https://www.zwicon.com/) — вручную созданный набор иконок для вашего проекта. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

<div class="banner banner--yellow">

Вы также можете управлять иконками с помощью Specify, который упоминается в разделе [Дизайн-системы](#design-system-tools).

</div>

</article>

<article id="illustrations">

---

### Иллюстрации

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

- [Absurd Design](https://absurd.design) — бесплатные сюрреалистические иллюстрации для ваших проектов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Blobmaker](https://www.blobmaker.app/) — создавайте векторные иллюстрации blob прямо в браузере с возможностью настройки цвета, сложности и контраста. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Blush](https://blush.design/) — создавайте, смешивайте и настраивайте иллюстрации, созданные художниками со всего мира. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![Figma](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/figma.svg)
- [Humaaans](https://www.humaaans.com/) — бесплатная библиотека для создания иллюстраций с людьми путем комбинирования элементов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Illustration by Pngtree](https://pngtree.com/illustration-design) — более 13142 профессионально разработанных иллюстраций различных стилей.
- [IRA Design](https://iradesign.io/) — создавайте потрясающие иллюстрации, используя нарисованные от руки компоненты, выбор из 5 градиентов, а также форматы ai., svg. или png. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [JoeSchmoe](https://joeschmoe.io) — коллекция иллюстрированных аватаров для разработчиков и дизайнеров, идеально подходит в качестве заполнителей или для живых сайтов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [LukaszAdam](https://lukaszadam.com/illustrations) — бесплатные векторные иллюстрации и иконки. Доступны для личного и коммерческого использования. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ManyPixels](https://gallery.manypixels.co) — бесплатные иллюстрации без роялти для усиления ваших проектов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Mega Doodles Pack](https://github.com/MariaLetta/mega-doodles-pack) — большой векторный набор с нарисованными от руки doodles для презентаций, соцсетей, блогов и других целей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Open Doodles](https://www.opendoodles.com/) — набор бесплатных иллюстраций от Pablo Stanley, поддерживающий концепцию открытого дизайна. Вы можете копировать, редактировать, ремиксовать, делиться или переделывать эти изображения для любых целей без ограничений. Лицензия CC0. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Ouch](https://icons8.com/ouch) — векторные иллюстрации для улучшения ваших проектов. Бесплатно для личного и коммерческого использования. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Squircley](https://squircley.app/) — всё, что вам нужно, чтобы начать создавать красивые SVG squircle. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [unDraw](https://undraw.co) — коллекция красивых SVG-изображений. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Wannapik](https://www.wannapik.com/) — коллекция бесплатных иллюстраций, векторных изображений, фотографий и анимаций для любых целей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

</article>

<article id="information-architecture">

---

### Информационная архитектура

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

- [DYNO Mapper](https://dynomapper.com/) — организуйте проекты веб-сайтов с помощью визуальных карт сайта, инвентаризации контента, аудита контента, планирования контента, ежедневного отслеживания ключевых слов и тестирования доступности веб-сайта.
- [Octopus.do](https://octopus.do) — визуальный инструмент для создания карт сайта. Создавайте структуру сайта в реальном времени и быстро делитесь ею для совместной работы с вашей командой или клиентами.
- [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — создавайте красивые диаграммы и дизайны с помощью этого мощного и простого в использовании приложения. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [OptimalSort](https://www.optimalworkshop.com/optimalsort) — инструмент для сортировки карточек, который помогает понять, как люди группируют контент в вашем интерфейсе.
- [Treejack](https://www.optimalworkshop.com/treejack) — загрузите предложенную карту сайта, чтобы увидеть, как пользователь будет перемещаться по вашему сайту.
- [WriteMaps](https://writemaps.com/) — создавайте карты сайта, которые впечатляют! Планируйте страницы и контент для вашего следующего проекта веб-сайта визуально, увлекательно и красиво.

</article>

<article id="logo-design">

---

### Дизайн логотипов

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

- [Design Evo](https://www.designevo.com/) — большая коллекция векторных иконок и форм, которые помогут вам легко создать пользовательский логотип. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Free Logo Design](https://www.freelogodesign.org/) — создавайте потрясающие профессиональные логотипы за считанные секунды. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Graphic Springs](https://www.graphicsprings.com/) — выберите из галереи шаблонов логотипов в векторном формате, отсортированных по отраслям. Редактируйте графику и текст шаблона, затем скачайте его.
- [Logo Design Team](https://www.logodesignteam.com/) — предлагает доступные профессиональные услуги по разработке логотипов и бренд-дизайна на заказ.
- [Logojoy](https://logojoy.com/) — использует искусственный интеллект для мгновенной генерации уникальных идей логотипов для вашего бизнеса.
- [Logo Lab](https://logolab.app/home) — тестируйте свой логотип с помощью автоматизированных визуальных экспериментов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Logo Maker](https://www.ucraft.com/free-logo-maker) — позволяет создать бесплатный логотип за считанные секунды. Начните с пустого холста, добавьте текст и иконку, затем настройте дизайн. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Logo Maker](https://www.designhill.com/tools/logo-maker) от Designhill — генерируйте тысячи уникальных логотипов за несколько минут, даже без опыта в дизайне.
- [Logo Makr](https://logomakr.com/) — создавайте логотипы бесплатно, выбирайте из сотен шрифтов и иконок, а затем сохраняйте логотип на компьютер. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Logo My Way](https://www.logomyway.com/) — выбирайте из 600 индивидуальных дизайнов логотипов от креативных дизайнеров со всего мира.
- [Logo Package Express](http://thelogopackage.com) — экспортируйте и упаковывайте десятки вариантов логотипов и типов файлов для ваших клиентов автоматически за менее чем 5 минут.
- [Logo Rank](https://brandmark.io/logo-rank/) — загрузите свой логотип, чтобы узнать, как он оценивается по ряду объективных критериев. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Wizlogo](https://wizlogo.com/) — создавайте логотипы с помощью простого и доступного инструмента, поддерживаемого профессиональными дизайнерами.

<div class="banner banner--yellow">

Вы также можете создать дизайн логотипа с помощью Adobe Photoshop, GIMP, Inkscape, Krita и Vectr, которые упоминаются в разделе [UI дизайн](#ui-design-tools).

</div>

</article>

<article id="mockup-tools">

---

### Инструменты макетов

Макет (Mockup) — это визуальный способ представления продукта. В то время как каркас (wireframe) в основном отражает структуру продукта, макет показывает, как продукт будет выглядеть. Эти инструменты для создания макетов помогут вам разрабатывать и совместно работать над макетами, каркасами, диаграммами и прототипами:

- [Artboard Studio](https://artboard.studio/) — онлайн-приложение для графического дизайна, ориентированное на макеты продуктов.
- [Cleanmock](https://cleanmock.com) — создавайте впечатляющие макеты с использованием последних рамок устройств, таких как iPhone, и настраиваемых фонов.
- [Craftwork Design](https://craftwork.design/) — бесплатные и премиальные цифровые продукты высокого качества, которые ускоряют и упрощают вашу работу.
- [Device Shots](https://deviceshots.com) — инструмент для создания красивых макетов устройств с помощью скриншотов вашего веб-сайта или мобильного приложения бесплатно.
- [Devices by Facebook](https://facebook.design/devices) — изображения и файлы Sketch популярных устройств. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Dimmy.club](https://dimmy.club/) — генератор макетов устройств для ваших веб-сайтов и скриншотов приложений.
- [Frrames](https://frrames.com/) — идеально проработанные адаптивные макеты окон для вашей идеальной презентации.
- [Lstore Graphics](https://www.ls.graphics/) — бесплатные и премиум макеты, инструменты UI/UX, генераторы сцен для занятых дизайнеров. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Mediamodifier](https://mediamodifier.com) — создавайте впечатляющие макеты продуктов за считанные секунды.
- [Mockflow](https://www.mockflow.com/) — самый быстрый способ для мозгового штурма идей пользовательского интерфейса.
- [Mockup World](https://www.mockupworld.co/) — множество бесплатных и легальных, полностью слоистых, легко настраиваемых фотореалистичных PSD-файлов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Mockups For Free](https://mockupsforfree.com/) — бесплатные ресурсы для дизайнеров, PSD-файлы для графических и веб-дизайнеров. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Mockuuups](https://mockuuups.studio/) — инструмент drag-and-drop для создания красивых предварительных просмотров приложений или любых маркетинговых материалов.
- [Mock Video](https://www.mock.video/) — мгновенно создавайте макеты, добавляя рамки устройства к вашим видео.
- [Moqups](https://moqups.com/) — помогает создавать и сотрудничать в реальном времени над каркасами, макетами, диаграммами и прототипами.
- [Original Mockups](https://originalmockups.com/) — макеты высокого качества для Photoshop, которые выделят ваши дизайны.
- [Overframe for Mac](https://overframe.xyz/) — записывайте свои прототипы и приложения с наложением рамок устройства. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [PixelBuddha](https://pixelbuddha.net/) — бесплатные и премиальные ресурсы высокого качества для веб-дизайнеров и разработчиков.
- [Ramotion Store](https://store.ramotion.com/) — тщательно проработанные макеты Apple и Android для Sketch и Photoshop.
- [Rotato](https://www.rotato.xyz/) — анимированные 3D макеты для дизайнов приложений. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [SceneLab](https://scenelab.io) — создавайте реалистичные макеты и настраиваемые бренд-дизайны онлайн.
- [Screely](https://www.screely.com/) — быстро обрамляйте дизайны веб-страниц в минималистичное окно браузера. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ScreenSpace](https://www.screenspace.io/) — 3D-видео устройств для дизайнеров движения.
- [Screenzy](https://screenzy.io) — мгновенно преобразуйте свои изображения и скриншоты в красивые макеты, готовые к публикации в социальных сетях. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Screeener](https://github.com/zehfernandes/screeener) — используйте это приложение для добавления множества изображений в файл Keynote с выбранным вами макетом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Smartmockups](https://smartmockups.com/) — создавайте потрясающие макеты продуктов всего в несколько кликов.
- [shotsnapp](https://shotsnapp.com/) — создавайте красивые презентации макетов устройств для ваших цифровых приложений и веб-дизайнов.
- [The Mockup Club](https://themockup.club/) — каталог лучших бесплатных макетов для Photoshop, Sketch, Figma и InVision Studio. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Threed](http://threed.io/) — генерируйте пользовательские 3D макеты устройств в вашем браузере.
- [UI Store Design](https://www.uistore.design/) — более 200 бесплатных отобранных вручную ресурсов для Sketch, Figma, Adobe XD, InVision Studio, Photoshop, Illustrator CC. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [UI8 — Design Freebies](https://ui8.net/category/freebies) — эпические бесплатные ресурсы для дизайна, чтобы начать вашу работу. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Vector Mockups Library](https://mockups.kkuistore.com/) — бесплатная коллекция макетов для презентаций в Sketch, Figma и Photoshop. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

</article>

<article id="no-code-tools">

---

### Инструменты no-code

С появлением инструментов no-code каждый, у кого есть ноутбук, может создать и запустить проект. Эти инструменты помогают дизайнерам и создателям создавать веб-сайты, приложения и даже игры. Инструменты без кода позволяют автоматизировать рутинные задачи и могут использоваться без опыта в разработке. Ознакомьтесь с инструментами ниже, а если вам нужно больше, загляните в раздел Design to Code.

- [Bubble](https://bubble.io/) — создавайте и размещайте веб-приложения без необходимости писать код или нанимать команду инженеров.
- [Carrd](https://carrd.co/) — простые, бесплатные, полностью адаптивные одностраничные сайты практически для любых целей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Coda](https://coda.io) — новый тип документа, который объединяет гибкость текстов, мощь таблиц и утилиты приложений в едином холсте. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Kodika.io](https://kodika.io) — создавайте iOS-приложения с помощью конструктора приложений без кода для Mac и iPad, способного создавать мощные приложения с помощью Drag & Drop. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [PageXL](https://pagexl.com/) — простой конструктор одностраничных сайтов для быстрого создания лендингов и интернет-магазинов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Remove.bg](https://www.remove.bg/) — бесплатный сервис для удаления фона с любого фото. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Retool](https://tryretool.com/) — предоставляет строительные блоки, чтобы вы могли создавать инструменты гораздо быстрее.
- [sheet2api](https://sheet2api.com/) — создайте API из Google Sheets или Excel Online Spreadsheets без необходимости писать код.
- [Sheet2Site](https://www.sheet2site.com/) — создайте сайт из Google Sheets без написания кода.
- [Shopify](https://www.shopify.com/) — платформа со всеми функциями для электронной коммерции и точек продаж, необходимыми для запуска, ведения и роста вашего бизнеса.
- [Thunkable](https://thunkable.com/) — инструмент drag-and-drop для создания нативных мобильных приложений для всех.
- [UserGuiding](https://userguiding.com/) — создавайте пошаговые руководства, контрольные списки, подсветки и модальные окна для улучшения вовлечения пользователей.

</article>

<article id="pixel-art-tools">

---

### Инструменты Pixel Art (пиксельная графика)

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

- [Aseprite](https://www.aseprite.org/) — редактор анимированных спрайтов и инструмент для пиксельного искусства. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Data Pixels](https://github.com/gmattie/Data-Pixels) — создание пиксельного искусства программно. Включает DataPixels.js и настольное приложение Data Pixels Playground. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Draw!](http://www.drawbang.com/) — бесплатный и с открытым исходным кодом веб-инструмент для редактирования пиксельного искусства и GIF. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Grafx2](https://gitlab.com/GrafX2/grafX2) — программа для рисования растровой графики, вдохновленная Amiga-программами ​Deluxe Paint и Brilliance. Специализируется на рисовании с использованием 256 цветов. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [GraphicsGale](https://graphicsgale.com/us/) — обладает множеством функций, специфичных для пиксельного искусства, включая управление палитрой, выборочное удаление цветов и инструменты для быстрой замены и тестирования новых цветов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Goya](https://jackschaedler.github.io/goya/) — редактор пиксельного искусства, построенный на ClojureScript и Om. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Make 8 bit art](https://make8bitart.com/) — инструмент для рисования пиксельного искусства в браузере с открытым исходным кодом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/jennschiffer/make8bitart)
- [Piskel](https://www.piskelapp.com/) — онлайн-редактор для анимированных спрайтов и пиксельного искусства. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Pixel art to CSS](https://www.pixelartcss.com/) — веб-приложение для анимации и рисования пиксельного искусства на CSS, созданное на базе React. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Poxi](http://app.poxi.rocks/) — простой редактор пиксельного искусства. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Pyxel Edit](https://pyxeledit.com/) — редактор пиксельного искусства, созданный для увлекательного и простого создания тайлсетов, уровней и анимации. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)

</article>

<article id="prototyping-tools">

---

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

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

- [Alva](https://www.meetalva.io/) — создавайте живые прототипы с компонентами кода. Также является open source. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/meetalva/alva)
- [Axure RP](https://www.axure.com/) — каркас, прототипирование, совместная работа и генерация спецификаций.
- [SAP Build](https://www.build.me/) — полный набор облачных инструментов для проектирования и создания корпоративных приложений.
- [Creo](https://creolabs.com/) — прототипирование, экспорт кода и встроенный конструктор мобильных приложений. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Drama](https://www.drama.app/) — прототипирование, анимация и дизайн в одном приложении для Mac. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [InVision](https://www.invisionapp.com/) — платформа для прототипирования, совместной работы и управления рабочими процессами. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Flinto](https://www.flinto.com/) — приложение для Mac, позволяющее создавать интерактивные и анимированные прототипы дизайнов приложений.
- [Framer X](https://framer.com/) — инструмент для визуального проектирования реалистичных интерактивных прототипов. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Keynote](https://www.apple.com/keynote/) — встроенное приложение для Mac для создания презентаций, которое также можно использовать для быстрого прототипирования (пример использования дизайнерами Apple на WWDC 2014 в сессии "[Prototyping: Fake It Till You Make It](https://developer.apple.com/videos/play/wwdc2014/223/)"). ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Lightwell](https://lightwell.pro/) — визуальный инструмент и SDK для создания мобильных макетов и анимаций, которые переводятся в элементы iOS. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Marvel App](https://marvelapp.com/) — платформа для совместной работы над дизайном. Каркас, прототипирование, дизайн онлайн и создание спецификаций в одном месте.
- [Maze](https://maze.design/) — инструмент для дизайнеров и разработчиков, предоставляющий аналитические результаты с действенными KPI для ваших прототипов InVision.
- [Origami](https://origami.design/) — бесплатный инструмент для проектирования современных пользовательских интерфейсов. Быстро создавайте прототипы, запускайте их на iPhone или iPad, вносите изменения и экспортируйте фрагменты кода для разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Pencil](https://pencil.evolus.vn/) — инструмент для прототипирования с множеством встроенных компонентов, которые легко устанавливаются и используются для создания макетов на популярных настольных платформах. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Principle](https://principleformac.com/) — делает процесс проектирования анимированных и интерактивных пользовательских интерфейсов простым и удобным. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [ProtoPie](https://www.protopie.io/) — создавайте высокоточные взаимодействия, прототипы с использованием сенсоров и делитесь своими удивительными творениями за считанные минуты.
- [Proto.io](https://proto.io/) — инструмент для создания полностью интерактивных прототипов высокой точности, которые выглядят и работают точно так же, как ваше приложение.
- [Prott](https://prottapp.com/) — простой в использовании инструмент для прототипирования, способствующий командной работе.
- [Uizard](https://uizard.io/) — преобразуйте каркасы в высокоточные интерактивные прототипы, настраивайте системы стилей, экспортируйте в Sketch или HTML/CSS код. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Useberry](https://www.useberry.com/) — инструмент для тестирования удобства использования, позволяющий импортировать прототипы из InVision, AdobeXD, Sketch, Marvel и получать аналитическую информацию о поведении пользователей с помощью тепловых карт, видеозаписей, пользовательских потоков, временных шкал и ответов на последующие вопросы.
- [UXPin](https://www.uxpin.com/) — создавайте прототипы, которые кажутся реальными, с возможностями компонентов кода, логики, состояний и систем дизайна. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

<div class="banner banner--yellow">

Вы также можете заниматься прототипированием с помощью Figma, Adobe XD, Sketch и InVision Studio, которые упомянуты в разделе [UI дизайн](#ui-design-tools).

</div>

</article>

<article id="screenshot-software">

---

### Для создания скриншотов

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

- [Camtasia](https://www.techsmith.com/video-editor.html) — инструмент для записи экрана с встроенным полноценным редактором.
- [CleanShot](https://getcleanshot.com) — захват экрана с улучшенным встроенным инструментом аннотаций и быстрым доступом. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [CloudApp](https://www.getcloudapp.com/) — запись видео, веб-камеры, аннотирование скриншотов, создание GIF.
- [Collabshot](https://www.collabshot.com/) — делайте скриншоты и сотрудничайте над ними в реальном времени с коллегами. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Gifox](https://gifox.io) — приложение для записи и обмена GIF-анимациями. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Giphy Capture](https://giphy.com/apps/giphycapture) — захват частей экрана и экспорт в GIF или MP4. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Greenshot](https://getgreenshot.org/) — снимок выбранной области, окна или полного экрана. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Kap](https://getkap.co) — инструмент с открытым исходным кодом для записи экрана и экспорта в GIF, MP4, WebM и APNG. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/wulkano/kap) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Lighshot](https://itunes.apple.com/us/app/lightshot-screenshot/id526298438) — создание быстрых скриншотов экрана. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Monosnap](https://itunes.apple.com/us/app/monosnap/id540348655?mt=12) — создание скриншотов, аннотирование и загрузка в облако. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [OBS](https://obsproject.com/) — программное обеспечение с открытым исходным кодом для записи видео и потоковой трансляции. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Quicktime](https://support.apple.com/quicktime) — видеоплеер, который также можно использовать для записи экрана. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [ScreenFlow](http://www.telestream.net/screenflow/overview.htm) — программное обеспечение для редактирования видео и записи экрана для Mac. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Screenie](https://www.thnkdev.com/Screenie/) — фильтруйте и ищите изображения, меняйте форматы файлов скриншотов. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [ScreenshotAPI.net](https://screenshotapi.net) — создавайте идеальные полноэкранные снимки сайтов. ![web.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/web.svg)
- [ScreenToGif](https://www.screentogif.com/) — записывайте GIF-анимацию части экрана. Только для Windows. ![web.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/wulkano/kap)
- [ShareX](https://getsharex.com/) — инструмент для захвата экрана, обмена файлами и повышения продуктивности. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Shotty](https://meetshotty.com) — приложение для быстрого поиска нужного скриншота с последующим перетаскиванием в любое приложение. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Snagit](https://www.techsmith.com/screen-capture.html) — захват изображений и видео, создание GIF, аннотирование, редактирование и обмен.
- [Snipping Tool](https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots) — бесплатный инструмент для скриншотов на Windows. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Snappy](http://snappy-app.com/) — делает быстрые снимки экрана и организует их в коллекции. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Teampaper Snap](https://teampaper.me/snap/) — позволяет делать скриншоты выбранной области. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)

</article>

<article id="sketching-tools">

---

### Для набросков

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

- [Responsive Sketchsheets](https://zurb.com/playground/responsive-sketchsheets) — предлагает адаптивные предустановленные шаблоны. Они автоматически подстраивают свой макет под любой размер экрана и включают полезные функции. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)  
- [Sketchsheets](https://sketchsheets.com/) — проект с открытым исходным кодом, предоставляющий бесплатные шаблоны для печати последних устройств и платформ для создания дизайнов в виде wireframe. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/rnarrkus/sketchsheets)  
- [Sneakpeekit](https://sneakpeekit.com/) — печатайте сетки для заметок и рамки устройств. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)  
- [Sketchize](https://sketchize.com/) — выберите любой из доступных шаблонов, подходящих для вашего проекта, распечатайте его и начните создавать свой проект мечты. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

<div class="banner banner--yellow">

Вы также можете создавать наброски с помощью Sketch, упомянутого в разделе [UI дизайн](#ui-design-tools).  

</div>

</article>

<article id="smm-design-tools">

---

### Дизайн для SMM

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

- [Canva](https://www.canva.com/) — создавайте потрясающие дизайны для работы, жизни и развлечений — даже если вы не являетесь экспертом в дизайне!
- [Crello](https://crello.com/) — создавайте собственные дизайны: посты, обложки, графику и постеры с использованием лучшего программного обеспечения в интернете.
- [Pablo by Buffer](https://pablo.buffer.com/) — создавайте увлекательные изображения для своих постов в социальных сетях. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Remove.bg](https://www.remove.bg/) — бесплатный сервис для удаления фона с любого фото. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [SocialSizes](https://socialsizes.io/) — предоставляет дизайнерам лучшие размеры для использования изображений и видео-контента в социальных сетях. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Stencil](https://getstencil.com/) — инструмент графического дизайна, который позволяет легко и быстро создавать изображения для социальных сетей.

</article>

<article id="sound-design">

---

### Дизайн звука

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

- [Appsounds](https://appsounds.pro/) — UI Sound packs для приложений, игр и любых других продуктов.
- [AudioJungle](https://audiojungle.net/) — 836,206 треков и звуков от сообщества музыкантов и звукорежиссёров.
- [Bensound](https://www.bensound.com/) — скачивайте музыку Creative Commons, бесплатную роялти-фри музыку для использования в своих проектах. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Freesound](https://freesound.org/) — коллективная база данных звуков с лицензией Creative Commons. Просматривайте, скачивайте и делитесь звуками. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Fugue Music](https://icons8.com/music) — скачивайте бесплатную фоновую музыку для своих видео. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Max](https://cycling74.com/products/max/) — соединяйте объекты виртуальными проводами для создания интерактивных звуков, графики и пользовательских эффектов.
- [Reaper](http://reaper.fm/) — импортируйте любые аудио- и MIDI-файлы, синтезируйте, создавайте сэмплы, сочиняйте, аранжируйте, редактируйте, микшируйте и мастерите песни или любые другие аудиопроекты.
- [Sonic Pi](https://sonic-pi.net/) — музыкальный синтезатор для живого кодинга. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [SoundKit](https://soundkit.io/) — библиотека UI-звуков для всех ваших интерфейсных нужд.
- [UI Sounds](https://uisounds.prototypr.io/) — изучайте звуковой дизайн для пользовательских интерфейсов на примерах.
- [Wistia Music](https://wistia.com/resources/music) — скачивайте бесплатные фоновые треки, чтобы добавить энергии и эмоций в свои видео. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [WOWA](https://www.wowa.me/) — скачивайте роялти-фри музыку для видео на YouTube, подкастов и приложений. Без авторских прав (CC0). Музыка, вдохновлённая Unsplash. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [YouTube Audio Library](https://www.youtube.com/audiolibrary/music) — просматривайте и скачивайте бесплатную музыку для своих проектов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

</article>

<article id="stock-photos-tools">

---

### Работа со стоковыми фотографиями

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

- [Burst](https://burst.shopify.com/) — бесплатные стоковые фотографии для веб-сайтов и коммерческого использования. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Duotone](https://duotone.shapefactory.co/) — бесплатные дуотоновые изображения для использования в любых проектах или создания своих собственных. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Death to Stock](https://deathtothestockphoto.com/) — платный стоковый сервис с рассылкой бесплатных наборов фотографий и акцентом на нестандартных изображениях.
- [FoodiesFeed](https://foodiesfeed.com/) — тысячи красивых реалистичных фотографий еды в высоком разрешении, доступные бесплатно. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [FreePhotos.cc](https://freephotos.cc/) — бесплатные стоковые фотографии для коммерческого использования. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Freestocks.org](http://freestocks.org/) — качественные фотографии, распространяемые под лицензией Creative Commons CC0. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Gratisography](https://gratisography.com) — коллекция бесплатных фотографий высокого разрешения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Jay Mantri](https://jaymantri.com/) — каждую неделю добавляется 7 новых фотографий под лицензией Creative Commons CC0. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Kaboom Pics](https://kaboompics.com/) — стоковые фотографии, включая абстракции, архитектуру, моду, еду и пейзажи. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [LandingStock](https://landingstock.com/) — коллекция бесплатных изображений для ваших лендингов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Life of Pix](https://www.lifeofpix.com/) — бесплатные фотографии в высоком разрешении, созданные командой LEEROY. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [LoremPixel](https://lorempixel.com/) — API для предоставления стоковых фотографий с заданными размерами и категориями. Отличный инструмент для создания плейсхолдеров. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Magdeleine](https://magdeleine.co/) — бесплатные фотографии высокого качества для вашего вдохновения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Moose](https://photos.icons8.com/) — создавайте стоковые фотографии по запросу вместо поиска готовых. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [MMT Stock](http://mmtstock.com/) — фотографии высокого разрешения от Джеффри Беттса, распространяемые под лицензией Creative Commons CC0. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [New Old Stock](https://nos.twnsnd.co/) — винтажные фотографии из публичных архивов без известных ограничений авторских прав. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pexels](https://www.pexels.com/) — агрегатор многих бесплатных ресурсов стоковых фотографий. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Photo Creator](https://photos.icons8.com/creator) — бесплатный инструмент для создания реалистичных стоковых фотографий на заказ. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Picography](https://picography.co/) — бесплатные стоковые фотографии от Дейва Мейера и других фотографов под лицензией Creative Commons CC0. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pixabay](https://pixabay.com/) — фотографии, иллюстрации, векторные графики и видеоматериалы под собственной лицензией. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Picjumbo](http://picjumbo.com/) — коллекция полностью бесплатных фотографий для коммерческого и личного использования. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pngtree](https://pngtree.com/) — миллионы PNG-изображений, фонов и векторов для бесплатного скачивания. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [pxhere](https://pxhere.com/) — бесплатные стоковые изображения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Reshot](https://www.reshot.com/) — огромная библиотека тщательно отобранных бесплатных стоковых фотографий, которые нельзя найти в других местах. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [ShotStash](https://shotstash.com/) — тысячи бесплатных фотографий и видео высокого разрешения под лицензией CC0. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [SkitterPhoto](https://skitterphoto.com/) — разнообразные стоковые фотографии, распространяемые под лицензией Creative Commons CC0. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Startup Stock Photos](http://startupstockphotos.com/) — бесплатные фотографии для стартапов, блогеров и издателей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [StockSnap.io](https://stocksnap.io/) — большой выбор бесплатных стоковых фотографий и изображений высокого разрешения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [StyledStock](https://styledstock.co/) — бесплатная стоковая фотография с акцентом на женскую аудиторию. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [The Gender Spectrum Collection](https://broadlygenderphotos.vice.com/) — библиотека стоковых фотографий с изображениями трансгендерных и небинарных моделей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [UI Faces](https://uifaces.co/) — агрегатор бесплатных источников аватаров, которые можно использовать в дизайне макетов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Unsplash](https://unsplash.com) — бесплатные стоковые фотографии для использования. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [#WOCinTech Chat Photos](https://www.flickr.com/photos/wocintechchat) — бесплатные стоковые фотографии женщин-технологов из разных сфер. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Zoommy](http://www.zoommyapp.com) — помогает находить отличные бесплатные стоковые фотографии для ваших проектов или вдохновения. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

</article>

<article id="stock-videos">

---

### Стоковые видео

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

- [Coverr](https://coverr.co/) — красивые бесплатные стоковые видеоматериалы для вашей главной страницы. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Life of Vids](http://www.lifeofvids.com/) — предоставляет бесплатные стоковые видеоролики, клипы и зацикленные видео. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Mazwai](http://mazwai.com) — отличная коллекция бесплатных видеоклипов и материалов Creative Commons в HD-качестве. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Mixkit](https://mixkit.co/) — потрясающие бесплатные видео в HD. Вы можете использовать их абсолютно бесплатно. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Motion Places](https://www.motionplaces.com/) — тщательно подобранная коллекция красивых видеоматериалов, которые вы можете использовать в своих проектах. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pixabay](https://pixabay.com/) — более 1,5 миллиона стоковых видео и фотографий с лицензией Royalty-Free, созданных сообществом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pexels Videos](https://www.pexels.com/videos/) — упрощает поиск бесплатных стоковых видеоматериалов для вашего сайта, промо-роликов или других нужд. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Videezy](https://www.videezy.com/) — мгновенная загрузка миллионов бесплатных и премиальных видеоматериалов и графики.
- [Videvo](https://www.videvo.net/) — предлагает широкий выбор видеоклипов в HD-качестве, графики и бесплатных стоковых видеоматериалов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [123RF](https://www.123rf.com/) — более 100 000 нового контента ежедневно и круглосуточная поддержка.

</article>

<article id="tools-for-learning-design">

---

### Изучение дизайна

- [Design Better](https://www.designbetter.co/) — узнайте о лучших практиках, историях и инсайтах от ведущих мировых дизайнерских команд и лидеров. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Design+Code](https://designcode.io/) — полные курсы, посвященные лучшим инструментам и системам дизайна.
- [DesignerUp](https://designerup.co/) — подборка курсов с возможностью обучения в своем темпе и наставничество для освоения продуктового дизайна (UI/UX).
- [Figma Training](https://www.figmatraining.com) — экспресс-курс, посвященный Figma, для дизайнеров пользовательского интерфейса.
- [Interaction Design Foundation](https://www.interaction-design.org/) — популярный в индустрии сайт для изучения навыков UX/UI.
- [Laws of UX](https://lawsofux.com/) — подборка максим и принципов, которые дизайнеры могут учитывать при создании пользовательских интерфейсов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Learn UX](https://learnux.io/) — полный подход к изучению инструментов UI и UX.
- [Sketch Master](https://sketchmaster.com/) — подборка видеокурсов для профессионалов, изучающих Sketch.
  </article>

<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
        </a>
    </p>
</div>

<article id="ui-design-tools">

---

### UI-дизайн

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

- [Adobe XD](https://www.adobe.com/products/xd.html) — проектируйте, создавайте прототипы и делитесь любым пользовательским интерфейсом — от веб-сайтов и мобильных приложений до голосовых взаимодействий. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Affinity Designer](https://affinity.serif.com/en-gb/designer/) — редактор векторной графики для macOS, iOS и Microsoft Windows.
- [Akira](https://github.com/akiraux/Akira) — нативное приложение Linux для дизайна UI и UX, созданное на Vala и Gtk. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Botmock](https://www.botmock.com) — проектируйте, создавайте прототипы и тестируйте голосовые и текстовые разговорные приложения. Поддерживает несколько платформ.
- [CleverBrush](https://www.cleverbrush.com/) — онлайн-редактор векторной графики и инструмент цифровой публикации, который можно интегрировать на страницу как компонент JS.
- [Figma](https://www.figma.com/) — инструмент для проектирования, работающий в браузере, который позволяет проектировать и создавать прототипы с поддержкой совместной работы в реальном времени.
- [GIMP](https://www.gimp.org/) — бесплатное программное обеспечение для обработки изображений и графического дизайна. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Gravit](https://designer.io/) — бесплатное приложение для дизайна векторной графики, доступное для macOS, Windows, Linux, ChromeOS и браузера. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Illustrator](https://www.adobe.com/products/illustrator.html) — создавайте логотипы, значки, рисунки, типографику и иллюстрации для печати, веба, видео и мобильных устройств. Продукт компании Adobe.
- [Inkscape](https://inkscape.org/) — бесплатный редактор векторной графики с открытым исходным кодом. Может создавать или редактировать векторную графику, такую как иллюстрации, диаграммы, линейные рисунки, графики, логотипы и сложные картины. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Krita](https://krita.org/en/) — бесплатное программное обеспечение для рисования и графического дизайна, которое считается хорошей альтернативой Adobe Photoshop. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Lunacy](https://icons8.com/lunacy) — бесплатное нативное приложение для Windows, которое работает офлайн и поддерживает файлы .sketch. Гибкий и легкий инструмент. Интуитивно понятный и простой в использовании. Ускоряет работу и расширяет возможности дизайнеров UI и UX. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Photopea](https://www.photopea.com/) — бесплатное графическое приложение, работающее в браузере, альтернатива Photoshop. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Photoshop](https://www.adobe.com/products/photoshop.html) — программное обеспечение для обработки изображений и графического дизайна, разработанное Adobe.
- [Pixelixe](https://studio.pixelixe.com) — инструмент графического дизайна, созданный для маркетологов, блогеров и малого бизнеса, который позволяет создавать потрясающие и уникальные изображения, графику или статические веб-страницы за считанные минуты. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Sketch](https://www.sketchapp.com/) — набор инструментов для дизайна, созданный для Mac. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Studio](https://www.invisionapp.com/studio) — сочетает проектирование, создание прототипов и совместную работу в едином гармоничном рабочем процессе. Разработан InVision.
- [TwitPile](https://twitpile.com) — создает мозаичные изображения из подписчиков Twitter, интересов и списков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Vectr](https://vectr.com/) — простой веб- и настольный кроссплатформенный инструмент для легкого и интуитивно понятного создания векторной графики. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Voiceflow](https://www.voiceflow.com) — прототипируйте, проектируйте и развертывайте реальные приложения для Amazon Alexa и Google Home.

</article>

<article id="user-flow-tools">

---

### Построение пользовательских потоков

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

- [Draw.io](https://www.draw.io/) — бесплатное онлайн-программное обеспечение для создания диаграмм, блок-схем, оргструктур, UML, ER и сетевых диаграмм. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Flowmapp](https://flowmapp.com/) — онлайн-инструмент для создания карт сайта и пользовательских потоков, который помогает эффективно разрабатывать и планировать пользовательский опыт.
- [Google Drawings](https://docs.google.com/drawings/) — создавайте диаграммы и графики бесплатно в Google Docs. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Lucidchart](https://www.lucidchart.com/) — онлайн-инструмент для создания диаграмм, блок-схем, карт сайтов и многого другого.
- [MindNode](https://mindnode.com/) — приложение для создания ментальных карт, упрощающее процесс мозгового штурма. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [NinjaMock](https://ninjamock.com/) — онлайн-инструмент для прототипирования и пользовательских потоков. Связывайте представления и создавайте логические прототипы потоков с визуальным стилем от руки.
- [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — приложение для диаграмм и цифровой иллюстрации для macOS и iOS. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [Overflow](https://overflow.io/) — превращайте свои дизайны в интерактивные диаграммы пользовательских потоков, которые рассказывают историю.
- [Sketch.systems](https://sketch.systems/) — дизайн пользовательских интерфейсов и потоков с использованием интерактивных конечных автоматов. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [SQUID](https://uxmisfit.com/squid/) — создавайте красивые пользовательские потоки в Sketch за считанные минуты. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [WebSequenceDiagrams](https://www.websequencediagrams.com/) — простое веб-приложение для работы с взаимодействиями объектов, расположенными в последовательности времени. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Whimsical](https://whimsical.co/) — простой инструмент для создания блок-схем, каркасов и стикеров.
- [Wireflow](http://wireflow.co) — бесплатный, онлайн и открытый инструмент для создания красивых прототипов пользовательских потоков. [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/vanila-io/wireflow) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [XMind: ZEN](https://www.xmind.net/zen/) — инструмент для мозгового штурма и ментальных карт с возможностью переключения между схемами-деревьями и планами. Связывайте темы с другими схемами.
- [yEd](https://www.yworks.com/products/yed) — бесплатный десктопный инструмент для создания диаграмм. Подходит для множества случаев использования. Функция автоупорядочивания особенно полезна при создании блок-схем. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)

</article>

<article id="user-research-tools">

---

### Пользовательские исследования

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

- [Appoint.ly](https://appoint.ly) — веб-инструмент для быстрого планирования встреч с интеграцией с онлайн-календарями.
- [Calendly](https://calendly.com/) — помогает планировать встречи без лишней переписки по электронной почте.
- [Crowd Signal](https://crowdsignal.com/) — сбор, организация и анализ данных из различных источников, включая социальные сети и мобильные приложения.
- [Doodle](https://doodle.com/) — онлайн-календарь для управления временем и координации событий, встреч и назначений.
- [Evolt](https://evolt.io/en/) — создание пользовательских персон, сторибордов, бизнес-моделей, карт опыта, досок для мозгового штурма и мудбордов в современном формате.
- [Feedback Lite](https://www.feedbacklite.com/) — сбор высококачественной обратной связи от клиентов с использованием решений Voice of Customer для улучшения производительности веб-сайта и вовлеченности клиентов.
- [GoToMeeting](https://www.gotomeeting.com/en-gb) — простой и мощный сервис для веб-конференций.
- [Handrail](https://handrailux.com/) — платформа для исследований и анализа пользовательского опыта — планируйте исследования, собирайте и анализируйте данные, делитесь результатами.
- [JotForm](https://www.jotform.com) — создавайте онлайн-формы, получайте уведомления по электронной почте и собирайте данные. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Lookback](https://lookback.io/) — проводите удаленные исследования пользователей, записывайте и делайте заметки, используя прототипы или готовые продукты.
- [MineTime](https://minetime.ai) — бесплатное приложение для календаря с функциями умного планирования и аналитики времени. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Reflector](https://www.airsquirrels.com/reflector) — инструмент для зеркального отображения экрана и записи, который позволяет проводить удаленные пользовательские тесты.
- [Reframer](https://www.optimalworkshop.com/reframer) — инструмент для захвата, тегирования и выявления паттернов в качественных данных исследований.
- [Sticktail](https://sticktailapp.com/) — платформа для централизованного хранения, поиска и обмена пользовательскими данными внутри организации.
- [Survey Monkey](https://www.surveymonkey.com/) — онлайн-инструмент для создания опросов и сбора мнений значимых для вас людей.
- [Typeform](https://www.typeform.com/) — простой интерфейс drag-and-drop для создания форм, опросов и анкет, с возможностью приема платежей.
- [Wufoo](https://www.wufoo.com) — создавайте формы, собирайте данные и платежи, автоматизируйте рабочие процессы.
- [YesInsights](https://www.yesinsights.com/) — простые опросы с одним вопросом и NPS для улучшения вашего бизнеса.
- [UserBit](https://userbitapp.com/) — платформа с инструментами для проведения пользовательских исследований в реальном времени: тегирование/кодирование отзывов, создание пользовательских персон, визуализация карт сайта и многое другое.
- [User Interviews](https://www.userinterviews.com/) — подбор участников из сообщества в 125 000 человек на основе профессии, демографических данных, географии и других параметров для любых исследований.
- [Zoom](https://zoom.us) — один из лучших сервисов для онлайн-встреч.

</article>

<article id="visual-debugging-tools">

---

### Визуальная отладка

- [LogRocket](https://logrocket.com/) — инструмент для записи действий пользователей на вашем сайте, что позволяет воспроизводить ошибки и быстрее их исправлять.
- [PixelSnap](https://getpixelsnap.com) — магический инструмент для измерения любого элемента на экране. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg)
- [VisBug](https://github.com/GoogleChromeLabs/ProjectVisBug) — на любой веб-странице: визуальная отладка, быстрое изучение стилей и доступности (a11y), изменение CSS визуально, перемещение элементов с помощью мыши и многое другое. [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/GoogleChromeLabs/ProjectVisBug) ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Visual Inspector](https://www.canvasflip.com/visual-inspector/) — инструмент для совместной работы, позволяющий оставлять отзывы и исправлять ошибки дизайна на веб-сайтах.

</article>

<article id="wireframing-tools">

---

### Создание вайрфреймов

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

- [Balsamiq Cloud](https://balsamiq.cloud/) — простое создание эскизов пользовательского интерфейса. Фиксируйте идеи, сотрудничайте над дизайном и добивайтесь общего согласия.
- [BLOKK](http://www.blokkfont.com/) — шрифт для быстрого создания макетов и каркасов для клиентов, которые не понимают латиницу. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [CSS Grid Builder](https://cssgrid.cc/css-grid-builder.html) — инструмент для построения CSS-сеток, где сетка становится видимой только при добавлении контента (элементов), размещенных в соответствии с правилами сетки. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Gliffy](https://www.gliffy.com/) — инструмент для создания каркасов, UML-диаграмм, блок-схем, wireframes и многого другого.
- [Gridzzly](http://gridzzly.com/) — самый простой способ создать настраиваемую сетку для печати. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Layoutit](https://grid.layoutit.com/) — инструмент для создания интерфейсов с использованием CSS Grid и Bootstrap, который станет отправной точкой для ваших front-end разработок. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Pidoco](https://pidoco.com/en) — программное обеспечение, которое позволяет быстро создавать интерактивные UX-прототипы и кликабельные каркасы.
- [Wireframe.cc](https://wireframe.cc/) — простой инструмент для создания каркасов, который не отвлекает от работы. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Whimsical Wireframes](https://whimsical.co/wireframes/) — мгновенное создание каркасов под рукой. Обширная библиотека настраиваемых элементов, таких как кнопки, поля ввода, чекбоксы.
- [1200px Grid System](https://1200px.com/) — помогает создавать систему сеток для дизайнов сайтов с шириной, значительно превышающей стиль на 960 пикселей.

</article>

<article id="three-d-modeling-software">

---

### 3D-моделирование

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

- [Autodesk](https://www.autodesk.com/products/fusion-360/overview) — интегрированное программное обеспечение CAD, CAM и CAE. Объединяет дизайн, инженеринг и производство на одной платформе.
- [Blender](https://www.blender.org/) — бесплатное программное обеспечение для создания 3D-графики с открытым исходным кодом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [FreeCAD](https://www.freecadweb.org/) — бесплатный и мультиплатформенный 3D-параметрический моделлер с открытым исходным кодом. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [MatterControl](https://www.matterhackers.com/store/l/mattercontrol/sk/MKZGTDW6) — бесплатный программный пакет с открытым исходным кодом для проектирования, нарезки, организации и управления 3D-печатью. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Maya](https://www.autodesk.com/products/maya/overview) — создание анимаций, окружения, графики движения, виртуальной реальности и персонажей в одном инструменте.
- [Onshape](https://www.onshape.com/) — программное обеспечение для моделирования, специально ориентированное на проектирование технических и запасных частей, первое полнооблачное 3D-программное обеспечение.
- [OpenSCAD](https://www.openscad.org/) — программное обеспечение для создания твердых 3D-объектов CAD. ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)
- [Rhino](https://www.rhino3d.com/) — программное обеспечение для 3D-моделирования на основе кривых, создающее математически точные модели 3D-поверхностей.
- [SketchUp](https://www.sketchup.com) — программное обеспечение для 3D-дизайна, делающее 3D-моделирование доступным для всех благодаря простому и в то же время мощному набору инструментов.
- [Tinkercad](https://www.tinkercad.com) — бесплатное простое в использовании приложение для 3D-дизайна, электроники и программирования. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)
- [Vectary](https://www.vectary.com/) — создавайте красивые 3D-модели с помощью инструмента 3D-моделирования drag and drop.
- [3D Slash](https://www.3dslash.net) — инструмент для 3D-моделирования, доступный на всех устройствах и всех ОС, онлайн и оффлайн.

</article>

<article id="addendum">

### Addendum (Reference & Inspiration)

**Awesome Design Tools & Plugins** 

Переведен на русский язык и сохранен [Евгением Куценко](https://vk.com/diamlee) 

</article>
