# 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)

Awesome-Design-Tools

awesome

## Как использовать - Сейчас вы находитесь в разделе **Awesome Design Tools**, если вам нужны плагины — перейдите к [Awesome Design Plugins](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Plugins.md). - Чтобы найти инструмент, воспользуйтесь оглавлением или поиском по ключевому слову (например, "анимация", "градиент").
## Оглавление - [Доступность](#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)
--- ### Инструменты доступности Доступность — это практика создания веб-сайтов и приложений, которые могут использовать все люди, включая людей с нарушениями зрения, моторики, слуха, речи или когнитивных функций. Здесь вы найдете инструменты для обеспечения веб-доступности, инструменты для тестирования доступности и приложения для доступности как для разработчиков, так и для дизайнеров: - [**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)
--- ### Инструменты анимации
Анимации помогают пользователям легко и дружелюбно взаимодействовать с продуктом. Живой интерактивный интерфейс создает у пользователей чувство удовлетворения благодаря мгновенной обратной связи и эмоциональному взаимодействию. Эти бесплатные и платные инструменты разработаны, чтобы упростить создание анимации. Если вы планируете создавать анимационные переходы, микроинтеракции или анимации на основе прокрутки, ознакомьтесь с этими инструментами: - [**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)
--- ### Дополненная реальность Дополненная реальность (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 и других функций.
--- ### Инструменты для совместной работы Ищете инструменты для гибкой совместной работы в области дизайна и разработки? Отличная идея, ведь такие инструменты упрощают жизнь дизайнеров и разработчиков, экономят время и повышают производительность. Ну, в эпоху 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)
--- ### Инструменты для выбора цвета Если вы ищете инструмент пипетки, идентификатор цвета или захват цвета, обратите внимание на этот раздел. С помощью указанных здесь инструментов для выбора цвета вы сможете создавать новые цветовые комбинации и находить отличные варианты. Почти все эти инструменты бесплатны: - [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) - [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)
--- ### Инструменты обратной связи по дизайну Как вы предоставляете и получаете обратную связь в процессе разработки? Для многих продуктовых команд этот процесс обычно довольно хаотичен, что приводит к задержкам и потере времени на бесконечные обсуждения. Если вы хотите быстро и структурировано получать обратную связь по проблемам пользовательского интерфейса или визуальным багам — обратите внимание на этот инструмент: - [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) — программное обеспечение для онлайн-проверки, рецензирования и утверждения дизайна.
--- ### Инструменты передачи дизайна Передача дизайна происходит, когда дизайнеры завершают работу и должны передать свои разработки разработчикам со всеми спецификациями и ресурсами. Инструменты для передачи дизайна позволяют автоматически генерировать гайд по стилю, оставлять комментарии к дизайну, а также инспектировать элементы. Эти инструменты минимизируют догадки и повышают эффективность процесса проектирования. - [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/) — передавайте дизайны и гайды по стилям с точными спецификациями, ресурсами и сниппетами кода автоматически.
--- ### Вдохновение для дизайна Творческий процесс может быть сложным. Если идеи не приходят сразу, попробуйте найти вдохновение в работах других дизайнеров. Эти сайты с дизайнерским вдохновением предлагают шаблоны дизайна, пользовательские потоки, разметки электронных писем и креативные решения популярных компаний и отличных продуктов: - [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 годы.
--- ### Дизайн-системы Могу поспорить, вы слышали о дизайн-системах, ведь это довольно модная тема. Дизайн-системы предоставляют последовательные и надежные шаблоны дизайна, чтобы поддерживать синхронизацию между дизайном и разработкой. По сути, это коллекции правил, ограничений и принципов, реализованных в дизайне и коде. Здесь вы найдете инструменты для создания, поддержки и организации вашей дизайн-системы. - [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/) — гайды по стилю, создаваемые дизайнерами, расширяемые разработчиками и редактируемые всеми.
--- ### Дизайн в код Каждый может научиться разработке, но это требует времени и усилий. Если вам нужен сайт или приложение прямо сейчас, и вы не хотите нанимать разработчика, обратите внимание на конструкторы сайтов. Такие инструменты «дизайн в код» помогут вам быстро и красиво создать портфолио, простой лендинг или приложение. - [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/) — создавайте адаптивные сайты прямо в браузере, затем хостите у нас или экспортируйте код для размещения где угодно.
--- ### Контроль версий дизайна Разработчики уже давно активно используют инструменты контроля версий, вероятно, начиная с 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.
--- ### Инструменты разработки Этот раздел упоминает инструменты разработки и браузеры. Браузеры для разработки включают функции, которые помогают разработчикам и дизайнерам создавать и тестировать сайты и приложения. - [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)
--- ### Мониторинг пользовательского опыта Слушать пользователей важно, но еще важнее видеть, как они на самом деле используют ваш продукт. Для этого нужно установить различные аналитические инструменты, программное обеспечение для мониторинга опыта и приложения для анализа поведения пользователей. Просто используйте эти аналитические решения, учитывая данные пользователей: - [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) — создавайте клиентоориентированный опыт, задавая правильные вопросы в нужное время.
--- ### Инструменты работы со шрифтами Шрифты часто используются для того, чтобы сделать веб более красивым. Это важнейшая часть любого дизайна. В этом разделе вы найдете генераторы шрифтов и инструменты для поиска шрифтов, которые позволяют управлять ими и работать с ними: - [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)
--- ### Инструменты для создания градиентов Градиенты можно увидеть повсюду — в интерфейсе, брендинге, иллюстрациях, типографике. Градиент создается с использованием двух или более разных цветов, которые постепенно переходят друг в друга. Это может выглядеть как запоминающийся, свежий и уникальный цвет. Чтобы создать такой градиент для вашего дизайна, используйте эти палитры градиентных цветов. - [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)
--- ### Инструменты для работы с иконками Как и шрифты, иконки используются в каждом дизайне. Эти базовые элементы поддерживают и направляют многие действия пользователей внутри продукта. Без сомнения, иконки являются важным элементом пользовательской навигации. Создание таких небольших элементов дизайна сложно и требует много времени, но вы можете найти тысячи векторных иконок для личного и коммерческого использования. - [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)
--- ### Иллюстрации Иллюстрации можно использовать на лендинге, в постах блога, внутри вашего приложения или в 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)
--- ### Информационная архитектура Информационная архитектура помогает дизайнерам организовывать и структурировать контент внутри веб-сайтов, мобильных приложений и другого программного обеспечения. Это помогает пользователям понять функциональность продукта и находить все необходимое. Эти инструменты для информационной архитектуры помогут вам создавать визуальные карты сайта и улучшать структуру контента вашего веб-сайта: - [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/) — создавайте карты сайта, которые впечатляют! Планируйте страницы и контент для вашего следующего проекта веб-сайта визуально, увлекательно и красиво.
--- ### Дизайн логотипов Логотип — это отправная точка вашей бренд-идентичности. Он отражает миссию продукта, его функциональность и послание бренда. Идеальный логотип создает прочную связь между вашим продуктом и пользователями. Дизайн логотипа — это искусство, как и многие другие дисциплины дизайна. С помощью правильных инструментов для дизайна логотипов это искусство можно реализовать немного быстрее. - [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/) — создавайте логотипы с помощью простого и доступного инструмента, поддерживаемого профессиональными дизайнерами.
--- ### Инструменты макетов Макет (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)
--- ### Инструменты 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/) — создавайте пошаговые руководства, контрольные списки, подсветки и модальные окна для улучшения вовлечения пользователей.
--- ### Инструменты 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)
--- ### Инструменты прототипирования Прототип — это простой экспериментальный дизайн предлагаемого решения. Он должен помочь проверить идеи, дизайнерские предположения и гипотезы быстро и экономично. Инструменты для создания прототипов позволяют дизайнерам и клиентам увидеть, как продукт будет функционировать в реальном мире, и сотрудничать над этим решением. Многие современные инструменты для прототипирования можно использовать для построения каркасов, прототипирования и совместной работы. - [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)
--- ### Для создания скриншотов Создание скриншотов — типичная задача в рабочем процессе дизайна и разработки. Эти бесплатные и полнофункциональные приложения для скриншотов помогут вам легко захватывать экран. Некоторые инструменты работают только на 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)
--- ### Для набросков Иногда для начала создания приложения или веб-сайта вам нужны всего лишь карандаш и бумага. Вот несколько онлайн-инструментов для эскизов с отличными шаблонами, которые помогут ускорить ваш творческий процесс: - [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)
--- ### Дизайн для 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/) — инструмент графического дизайна, который позволяет легко и быстро создавать изображения для социальных сетей.
--- ### Дизайн звука 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)
--- ### Работа со стоковыми фотографиями Нужна качественная фотография для 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)
--- ### Стоковые видео Если вы работаете с видео-контентом, вам понравятся эти высококачественные, тщательно подобранные стоковые видеоматериалы. Ниже вы найдете множество хороших и бесплатных сайтов со стоковыми видео, которые можно использовать на вашем сайте, в рекламных кампаниях или в социальных сетях: - [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 нового контента ежедневно и круглосуточная поддержка.
--- ### Изучение дизайна - [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.

Abstract

--- ### 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.
--- ### Построение пользовательских потоков Пользовательский поток — это серия шагов, которые пользователь предпринимает для достижения значимой цели. Это быстрый способ планирования путей пользователя и улучшения 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)
--- ### Пользовательские исследования Пользовательские исследования помогают понять поведение, потребности и мотивации пользователей с помощью различных качественных и количественных методов (интервью, наблюдение, анкеты и т.д.). Эти инструменты для исследований пользователей могут быть вам полезны: - [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) — один из лучших сервисов для онлайн-встреч.
--- ### Визуальная отладка - [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/) — инструмент для совместной работы, позволяющий оставлять отзывы и исправлять ошибки дизайна на веб-сайтах.
--- ### Создание вайрфреймов Каркас (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 пикселей.
--- ### 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-моделирования, доступный на всех устройствах и всех ОС, онлайн и оффлайн.
### Addendum (Reference & Inspiration) **Awesome Design Tools & Plugins** Переведен на русский язык и сохранен [Евгением Куценко](https://vk.com/diamlee)