# 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)
### Инструменты для выбора цвета If you are looking for an eyedropper tool, color identifier or color capture, check this section. With the color pickers mentioned here, you will be able to create new color combinations and define great ones. Almost all of these tools are free: - [BrandColors](https://brandcolors.net/) — the biggest collection of official brand color codes around. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Calcolor](https://calcolor.co) — a web-based color palette management tool which provides a new way to interact with digital colors. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Chroma](https://chroma.spencerhamm.com/) — free web app which allows you to identify the color. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color](https://color.adobe.com/explore/?filter=most-popular&time=month) — create color schemes with the color wheel or browse thousands of color combinations from the Color community. Made by Adobe. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color by Cloudflare](https://cloudflare.design/color/) — a tool to preview palettes against UI elements, cycle through accessible color combos and create palettes manually, via URL import, or generatively. - [Color Deck](https://color.obscuredetour.com/) — an HSL driven color palette collection. It's also open-source. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/obscuredetour/color-deck) - [Color Hexa](https://www.colorhexa.com/) — free color tool providing information about any color and generating matching color palettes for designs. - [Color Hex Picker](http://colorhexpicker.com/) - a tool for getting the name of any color from any image. You also get the HEX code and RGB value for the color. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color Hunt](https://colorhunt.co/) — free and open platform for color inspiration with thousands of trendy hand-picked color palettes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ColorKit](https://colorkit.io) — a tool for blending colors and generating a color's shades and tints. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color Leap](https://colorleap.app) — leap through time and see the colors of history. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colorpicker](https://colorpicker.crea-th.at/) — a complete and open-source color manipulation tool with picking. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [ColorSlurp](http://colorslurp.com/) — the ultimate color productivity booster for designers and developers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [ColorsWall/](https://colorswall.com/) — place to store your color palettes or easy generate. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colorwise](https://www.colorwise.io/) — search through the color palettes of the most voted products on Product Hunt. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colour Cafe](https://www.instagram.com/colours.cafe/) — colors inspiration that has selected a modern color palette on Instagram. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colourcode](https://colourco.de/) — an online designer tool, which allows you to easily and intuitively combine colors. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Coolors](https://coolors.co/) — the super-fast color scheme generator. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Culrs](https://culrs.com/#/) — thoughtfully crafted and easy-to-use color palettes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Geenes](https://geenes.app) — a tool to create harmonious color themes with code and sketch file export.![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Image Color Picker](https://image-color.com) — image color picker and color scheme generator. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Instant Eyedropper](http://instant-eyedropper.com/) — a minimalist eyedropper tool for windows, supports multiple color formats for both designers and developers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Just Color Picker](http://annystudio.com/software/colorpicker/) — Free portable offline color picker and color editor. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Khroma](http://khroma.co/) — AI-based tool to generate color palettes based on your preferences. - [Material Colors Native](https://github.com/BafS/Material-Colors-native) — Google's material design color palette in the form of a mac app. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Material Design Palette Generator](https://materialpalettes.com/) — get perfect Material Design color palettes from any hex color. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Paletton](https://paletton.com) — a designer tool for creating color combinations that work together well. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Picular](https://picular.co/) — a rocket fast primary color generator using Google's image search. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pigment](https://pigment.shapefactory.co/) — a color palette generator with innumerable color configurations suggested by the app. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pikka](https://itunes.apple.com/us/app/pikka-color-picker/id1195076754) — color picker & color schemes generator for macOS. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [React Color](http://casesandberg.github.io/react-color/) — a collection of color pickers from Sketch, Photoshop, Chrome. It‘s free and open-source. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/casesandberg/react-color/) - [Sip](https://sipapp.io/) — a better way to collect, organize and share colors. Global eyedropper tool for macOS. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Skala Color](https://bjango.com/mac/skalacolor/) — works with a huge variety of formats, covering everything you’re likely to need for web, iOS, Android, and macOS development. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Swatches](https://swatchesapp.io/) — iOS app that lets you collect, inspect and share the colors that inspire you in your daily life. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Tint & Shade Generator](https://maketintsandshades.com/) — display tints and shades of a given hex color in 10% increments. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Viz Palette](https://projects.susielu.com/viz-palette) — color picker for data visualizations. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Инструменты обратной связи по дизайну How do you provide and get feedback during the development process? This process is usually pretty messy for many product teams, which caused product delays and time waste on back-and-forth communication. So if you wish to get fast and structural feedback on UI issues or visual bugs — take a look at this tool: - [Flawless Feedback](https://flawlessapp.io/feedback) — review and annotate iOS apps then share your feedback in Jira or Trello. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [GoVisually](https://govisually.com) — online proofing, design review & approval software.
### Инструменты передачи дизайна Design handoff happens when designers finish the work and need to deliver designs to developers with all specs and assets. Design handoff tools allow to automatically generate style guide, comment on the design, inspect elements. These tools minimize guesswork and improve the effectiveness of the design process. - [Avocode](https://avocode.com) — open designs without design tools. Export images without preparing layers. Click on layers to get code. - [Flawless App](https://flawlessapp.io/) — a tool to compare the expected design and the real app right inside iOS Simulator (useful for designers who use Xcode or mobile developers). ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Inspect](https://www.invisionapp.com/feature/inspect/) — prepare designs for development. Made by Invision. - [Sketch Measure](https://github.com/utom/sketch-measure) — Sketch redline plugin. Annotate distance and size of elements. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Specctr](https://specctr.com) — in the unfortunate event you're designing UI in PS, AI, or ID this tool creates redline annotations. - [Sympli](https://sympli.io) — automated specs and assets handoff from Sketch, Photoshop and Adobe XD. Integrated with Jira, Xcode and Android Studio. - [Zeplin](https://zeplin.io/) — handoff designs and style guides with accurate specs, assets, code snippets automatically.
### Вдохновение для дизайна The creative process can be tough. So if ideas don’t come to your mind right away, try to search for inspiration in the work of other designers. These design inspiration sites feature design patterns, user flows, email markups and creative solutions of popular companies and great products: - [Behance](https://www.behance.net/) — an online platform to showcase & discover creative work. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [CodeMyUI](https://codemyui.com/) — handpicked collection of web design & UI inspiration with code snippets. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Collect UI](http://collectui.com/) — a platform for your daily inspiration collected from Daily UI & beyond. Based on Dribbble shots, 14419 handpicked designs. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Creative Portfolios](http://www.creative-portfolios.com/) — a curation of the most creative portfolios made by designers & developers. - [Design Hunt](https://itunes.apple.com/us/app/design-hunt/id968588816?mt=8) — a daily collection of the best products, apps, and inspirations for all creatives. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Dribbble](https://dribbble.com/) — an online community for showcasing user-made artwork. A great resource to get inspired by others work. - [Ficture](https://ficture.design/) — a font in use archive that will inspire you. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Inspiration UI](http://inspirationui.com/) — a community that aims to provide the best design resources for those who create for the web. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Hover States](https://hoverstat.es/) — showcase great work from the bleeding edge of digital culture for, and with, the creative community. - [Httpster](https://httpster.net/) — an inspiration resource showcasing rocking websites made by people from all over the world. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [H69.Design](https://www.h69.design/) — landing page colletions & Free resources for designers. - [Lapa Ninja](https://www.lapa.ninja/) — landing page design inspiration from around the web. 1800+ landing page examples and updated daily. - [Mobile Patterns](https://www.mobile-patterns.com/) — a design inspirational library featuring finest UI UX Patterns (iOS and Android). - [Mobbin](https://mobbin.design/) — browse mobile design patterns for popular apps. Explore common user flows such as onboarding, account sign up and log in, core functionality, and more. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [One Page Love](https://onepagelove.com/gallery) — a collection of beautiful unique One Page websites for website design inspiration. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Owwly](https://owwly.com/feed/inspirations) — home for digital products crafted with passion to design. - [Page Flows](https://pageflows.com/) — user flow videos and screenshots to inspire you when you're stuck. Discover mobile and web design patterns for over 160 different tasks. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [pttrns](https://pttrns.com/) — design patterns for popular mobile apps. - [Really Good Emails](https://reallygoodemails.com/) — 4,150+ handpicked email design. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ReallyGoodUX](https://www.reallygoodux.io/) — screenshots, and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Saas Landing Page](https://saaslandingpage.com/) — iscover the best landing page examples created by top-class SaaS companies, and get ideas and inspiration for your next design project. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Saas Pages](https://saaspages.xyz/) — a collection of the best landing pages with a focus on copywriting and design. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [The Design Team](https://thedesignteam.io/) — comics about a design team for a tech startup in Silicon Valley. - [Typewolf](https://www.typewolf.com/) — helps designers choose the perfect font combination for their next design project. - [UI Garage](https://uigarage.net/) — the one-stop shop for designers, developers, and marketers to find inspiration, tools and the best resources. - [UI Sources](https://www.uisources.com/) — over 500+ interactions from the best designed and top-grossing apps on the App Store today. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [UI Recipes](https://uirecipes.com/) — weekly 15 min lessons on UI design from the hottest apps. - [UX Archive](http://uxarchive.com/) — browse more than 400 user flows across 120 mobile apps. Examine tasks such as booking, logging in, onboarding, purchasing, searching, and more. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Waveguide](https://www.waveguide.io/) — a design knowledge bank with thousands of artificially enriched examples of product and brand experience (examples of Mobile App, Landing pages, eCommerce, CX/UX Patterns). - [Web Design Museum](https://www.webdesignmuseum.org/) — over 1,200 carefully selected web sites that show web design trends between the years 1994 and 2006.
### Инструменты систем дизайна

Abstract

I bet you heard about Design Systems, as it’s a pretty trendy topic. Design systems provide consistent, robust design patterns to keep design and development in sync. They are essentially collections of rules, constraints, and principles, implemented in design and code. Here you can find tools to build, maintain and organize your design system. - [Cabana](https://cabanadesignsystem.com/) — a Premium Design System for Sketch that helps you create amazing products faster than ever before. - [Catalog](https://www.catalog.style/) — a living style guide for digital products, combining design documentation with real live components. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Design System Manager](https://www.invisionapp.com/design-system-manager/) — Invision's design system manager. - [DSK](https://rundsk.com) — short for “Design System Kit” – a workbench for collaboratively creating Design Systems. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [EOS Design System](https://www.eosdesignsystem.com) — an open-source and customizable built on top of Bootstrap following the Atomic Design concept. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Eva Design System](https://eva.design/) — customizable design system, available for Sketch with Mobile and Web component libraries. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Frontify](https://frontify.com/) — create graphical guidelines, patterns libraries, design systems. - [Interplay](https://interplayapp.com/) — connect design and engineering around a single source of truth. The tool is not publicly available yet (beta). - [Lingo](https://www.lingoapp.com/) — create a shared asset library with your entire team. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Lucid](https://lucid.style/) — tool for creating, managing and sharing a design system. From a simple component library through to detailed descriptions of your styles. - [Modulz](https://www.modulz.app/) — design, build, document and publish your design system—without writing code. - [Prime Design System Kit](https://www.primedesignsystem.com) — it includes device templates, charts, UI kit and even illustration kit. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Specify](https://www.specifyapp.com/) — a tool to create, scale and maintain a design system. - [Storybook](https://storybook.js.org/) — an open-source tool for developing UI components in isolation for React, Vue, and Angular. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Symbol Design System](https://symboldesign.co/) — design System for Sketch-based on atomic elements. - [Toolabs](https://www.toolabs.com/) — design systems and components based design, prototype and development tool. It's not public yet but you can apply to the early access. - [Zeroheight](https://www.zeroheight.com/) — style guides created by designers, extended by developers, and editable by everyone.
### Инструменты "Дизайн в код" Everyone can learn development but it takes time and effort. If you need a website or an app right now and you don’t want to hire a developer, pay attention to the website builders. Such design to code tools will help you to make a portfolio, simple landing or an app pretty fast and beautiful. - [Anima](https://www.animaapp.com/) — a web app with a Sketch plugin that converts Sketch to HTML. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Blocs](https://blocsapp.com/) — a fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Bootstrap Studio](https://bootstrapstudio.io/) — a powerful web design tool for creating responsive websites using the Bootstrap framework. - [Draftbit](https://draftbit.com/) — visually design and build mobile apps directly from your browser. - [EasyLogic Studio](https://www.easylogic.studio/) — fantastic css+svg design tool, also it is converted into code as shown.![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Grapedrop](https://grapedrop.com/) — design your components, web projects and publish them instantly online, with an easy to use editor. - [Mobirise](https://mobirise.com/) — an offline drag and drop website builder software that is based on Bootstrap 3/4 and \ AMP. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [PageCloud](https://www.pagecloud.com/) — the fastest and most customizable website builder that allows anyone to create their ideal website. - [PaintCode](https://www.paintcodeapp.com) — vector drawing app that instantly converts drawings into Swift, Objective-C, JavaScript or Java code. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Pinegrow](https://pinegrow.com/) — a professional visual editor for CSS Grid, Bootstrap 4 and 3, Foundation, responsive design, HTML, and CSS. - [px.div](https://www.pxdiv.com) — a proper site build tool for developers and designers. - [Readymag](https://readymag.com/) — a visually-pleasing tool for designing on the web from landing pages to multimedia long-reads, presentations and portfolios. - [Sparkle](https://sparkleapp.com/) — the easiest way to make a real website, no code, no jargon. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [STUDIO](https://studio.design/) — design from scratch, collaborate in real-time and publish websites. - [Supernova Studio](https://supernova.io/) — import designs from Sketch and convert them into Android, iOS or React Native code. - [Tilda](https://tilda.cc/) — create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day. - [Wix](https://www.wix.com/) — the easiest and fullest-featured website builder, that allows you to create your own highly customized site. - [Webflow](https://webflow.com/) — build responsive websites in your browser, then host with us or export your code to host wherever.
### Контроль версий дизайна

Abstract

Developers actively use version control tools for a long time, probably since 2005 (Git first release). Using a version control system is no brainer for dev teams, while the design version control system appeared only recently. This market is rapidly developing and we expect to see even more in version control for designers: - [Abstract](https://www.abstract.com/) — a platform for design teams to version, manage and collaborate on Sketch files. - [Folio](http://folioformac.com/) — a simple version control system for design teams based on Git. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Kactus](https://kactus.io/) — design version control without changing your tools. Manage changes, document work and keep your team in sync. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Plant](https://plantapp.io/) — Mac app and Sketch plugin offering complete version control for designers and teams. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Relay for Figma](https://relay.graphics/) — Relay pushes your latest assets from Figma directly to your codebase (not released yet). - [Versions](https://versions.sympli.io) — a version control tool for designers with visual diff, merge and conflict resolution. Works with GitHub, Bitbucket, GitLab and Azure DevOps.
### Инструменты разработки This section mentions development tools and browsers. Development browsers have features that help developers and designers create and test websites and apps. - [Blisk](https://blisk.io) — provides a development workspace to develop and test modern web applications twice faster. - [Firefox developer edition](https://www.mozilla.org/en-US/firefox/developer/) — developer edition of the Firefox browser. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Litmus](https://litmus.com/) — an email campaign creation platform that, amongst other things, lets you see how HTML emails will appear in a wide variety of email clients. - [Polypane](https://polypane.rocks) — a browser built from the ground up to create and test websites and apps. - [Storybook](https://storybook.js.org/) — an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Styleguidist](https://github.com/styleguidist/react-styleguidist) — isolated React component development environment with a living style guide. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Мониторинг пользовательского опыта Listening to users is important but seeing the real usage is even more crucial. For these, you need to install different analytic tools, experience monitoring software, and user behavior apps. Just use those analytics solutions concerning users data: - [Amplitude](https://amplitude.com/) — understand your users, rapidly release better product experiences, and grow your business. - [Chalkmark](https://www.optimalworkshop.com/chalkmark) — increase your customer conversion and task-oriented success rates by getting quick feedback on designs before you implement. - [Fathom](https://usefathom.com/) — provides simple, useful websites stats without tracking or storing personal data of your users. - [FullStory](https://www.fullstory.com/) — an app that captures all your customer experience data in one powerful, easy-to-use platform. - [Google Analytics](https://analytics.google.com/analytics/web/) — measure your advertising ROI and track your sites and applications. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Heap](https://heapanalytics.com/) — automatically capture every web, mobile, and cloud interaction then retroactively analyze your data without writing code. - [Heatly](https://www.heatlyanalytics.com) — free heatmap tools to understand the website's user experience better. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Hotjar](https://www.hotjar.com/) — see how visitors are using your website and collect user feedback. - [Inspectlet](https://www.inspectlet.com/) — record videos of your visitors as they use your site, so you can see everything they do. - [LiveSession](https://livesession.io) - high-quality user's session replay analytics. - [LogRocket](https://www.logrocket.com/) — see what users do on your site, helping you reproduce bugs and fix issues faster. - [Mixpanel](https://mixpanel.com/) — get insights across all of your user-centric data to make smarter decisions and act faster based on how customers use your product or website. - [Mouseflow](https://mouseflow.com/) — record mouse cursor movements. - [Pendo](https://www.pendo.io/) — measure and elevate the customer experience within their applications. - [Smartlook](https://www.smartlook.com) — user session replay and user engagement analytics. - [Usabilla](https://usabilla.com) — build future-proof customer experiences by asking the right questions at the right time.
### Инструменты работы со шрифтами Fonts are commonly used for making the web a more beautiful place. It’s an essential part of any design. In this section, you’ll find fonts generators & font finder tools that allow you to manage and work with fonts: - [BeFonts](https://befonts.com/) — a Decent collection of free fonts. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Behance Free Fonts](https://www.behance.net/search/?search=free%20font) — a list of free fonts uploaded on Behance. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [DaFont](https://www.dafont.com/) — archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Emotype](http://emotype.webflow.io/) — makes it easy to find fonts based on the emotions you want to convey on your website. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Fontbase](https://fontba.se/) — font management made easy. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [FontFabric](https://www.fontfabric.com/) — gorgeous interface and good collection. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Fontface Ninja](https://fontface.ninja/) — browser extension to discover what fonts are being used on any website. - [FontPair](https://fontpair.co/) — a simple tool that helps you pair Google Fonts together. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Fontown](https://www.fontown.com/en) — a typographic tool with a nonstop growing font catalog which facilitates designer workflow. - [Fonts](https://fonts.adobe.com/fonts) — thousands of beautiful fonts by Adobe. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Fonts Arena](https://fontsarena.com/) — curated typography website with high-quality free fonts, done-for-you research articles, free alternatives to premium fonts, news, and more. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [FontGet](https://www.fontget.com/) — variety of fonts all sorted neatly with tags. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [FontSelf](https://www.fontself.com) — an extension for Illustrator and Photoshop CC that lets you turn any lettering into OpenType fonts in minutes! - [FontSpark](https://fontspark.app/) — a simple tool to help designers quickly find the best fonts for their projects. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Font Squirrel](https://www.fontsquirrel.com/fonts/acherus-grotesque) — download free fonts with wide collections.![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Google Fonts](https://fonts.google.com/) — making the web more beautiful, fast, and open through great typography. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/) — a hassle way to self-host Google Fonts. It‘s free and open-source. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/majodev/google-webfonts-helper/) - [LostType](http://losttype.com/) — the first Pay-What-You-Want type foundry. - [Measure](https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg) — measure typographic line lengths with this browser extension for Chrome. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [RightFont](https://rightfontapp.com/) — font managing app, helps preview, sync, install and organize fonts over iCloud, Dropbox or Google Drive. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Sans Forgetica](http://sansforgetica.rmit/) — a downloadable font that is scientifically designed to help you remember your study notes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Size Calculator](https://sizecalc.com/) — calculate the perceived size using viewing distance and physical size of the printed typography. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Typeface](https://typefaceapp.com/) — font manager that improves your design workflow with live font previews and flexible tagging. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Wakamai Fondue](https://wakamaifondue.com/) — the tool that answers the question "what can my font do?". ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Web Font Preview](https://webfontpreview.com/) — preview Google Font pairings with components and site templates. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/jonaskay/webfontpreview) - [Webfont](https://webfontapp.com/) — create and maintain custom SVG icon fonts, made a shared library of icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [WordMarkIt](https://wordmark.it/) — displays your written word/phrase with all the fonts which are already installed on your computer. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)

Abstract

### Инструменты для создания градиентов You can see gradient colors are everywhere — UI, branding, illustration, typography. A gradient is created by using two or more different colors to paint one element while gradually fading between them. It might look as a memorable, fresh and unique color. To make such a gradient for your design, use these gradient color palettes. - [Blend](http://www.colinkeany.com/blend/) — create and customize beautiful CSS3 gradients. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colorffy](https://www.colorffy.com/) — get CSS, images, UI previews or create own gradients. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colors & Fonts](https://www.colorsandfonts.com/) — a curated library of colors, gradients and fonts for digital designers and web developers.![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ColorSpace](https://mycolor.space/) — the perfect matching color scheme for your next project! Generate nice color palettes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ColorSpark](https://colorspark.app/gradient) — helps designers find unique colors and striking gradient combinations. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Cool Backgrounds](https://coolbackgrounds.io/) — explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites. - [CoolHue](https://webkul.github.io/coolhue/) — handpicked gradient palette and swatch for your next super amazing stuff. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [CSS Gradient](https://cssgradient.io/) — a free CSS gradient generator tool, this website lets you create a colorful gradient background. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Egg Gradients](https://www.eggradients.com/) — a color collection page that includes shades of 12 different colors. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Grabient](https://www.grabient.com/) — beautiful and simple UI for generating web gradients. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Gradienta](https://gradienta.io/) — multicolor CSS Gradients, JPG Downloads, 100% Free! ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [GradientsList](https://www.gradientslist.com) — a largest crowdsourced collection of gradients, with daily contributions from users on [Gradients Maker for iOS](https://itunes.apple.com/app/apple-store/id1442380225?pt=117877769&ct=gh&mt=8) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Gradient Generator](https://colordesigner.io/gradient-generator) — a tool that generates a stepped gradient between two colors. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Gradient Hunt](https://gradienthunt.com/) — a free and open platform for color inspiration with thousands of trendy hand-made color gradients. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Gradients Guru](http://gradientsguru.com/) — blend mode background images & beautiful background gradients for your UI. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [HtmlColours](https://htmlcolors.com/) — realize how easy and beautiful it is to create gradients with this gradient generator. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [UI Gradients](https://uigradients.com/) — handpicked collection of beautiful color gradients for designers and developers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Web Gradients](https://webgradients.com/) — a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Инструменты для работы с иконками As well as fonts, icons are used in every design. These basic elements support and guide many user actions inside the product. Without a doubt, icons are a vital element in user navigation. While making those small design elements is hard and time-consuming, you can get thousands of vector icons for personal and commercial use. - [Animaticons](http://animaticons.co/) — a growing set of beautiful, high-resolution, animated GIF icons that you can customize. - [CoreUI Icons](https://coreui.io/icons/) — premium designed free icon set with marks in SVG, Webfont and raster formats. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Digital Nomad Icons](http://digitalnomadicons.com/) — lifestyle icon & emoji pack for your next project. 25 high-resolution flat icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Essential Glyphs](https://interface.market/essential/basic-pack) — created to cover your needs in perfect-shaped icons. Adapted for small and large sizes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Feather Icons](https://feathericons.com/) — each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Flaticon](https://www.flaticon.com/) — 1593000+ vector icons in SVG, PSD, PNG, EPS format or as icon font. - [Font Awesome](https://fontawesome.com/) — the web's most popular icon set and toolkit, also it's open source. [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/FortAwesome/Font-Awesome) - [Fontello](http://fontello.com/) — tool to build custom fonts with icons, also open source. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/fontello/fontello) - [Freepik](https://www.freepik.com) — collection of exclusive freebies and all graphic resources that you need for your projects. - [Iconscout](https://iconscout.com/) — get high-quality Icons, Illustrations and Stock photos at one place. - [Iconfinder](https://www.iconfinder.com) — a marketplace for vector icons (SVG). Icon sets available in IconJar format. - [IconJar](https://www.geticonjar.com/) — store all your icons in one icon manager. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Iconmonstr](https://iconmonstr.com/) — discover 4412+ free icons in 305 collections.Big and continuously growing source of simple icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Iconset](https://iconset.io/) — free, cross-platform and fast SVG icon organizer working on Mac and Windows. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Icon Store](https://iconstore.co/) — a library of free vector icons for personal and commercial projects, designed by first-class designers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ICONSVG](https://iconsvg.xyz/) — a tool to simplify the process of finding and generating common icons for your project. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Icons8](https://icons8.com/icons) — free iOS, Android and Windows styled icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Ikonate](https://www.ikonate.com/) — customize, adjust and download free vector icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [illustrio](https://illustrio.com/) — a smarter icon library. Build something great with 100% customizable icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Ionicons](https://ionicons.com/) — beautifully crafted open source icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Material Design Icons](https://materialdesignicons.com/) — free material design icons made possible by open source contributons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Material Icons Library](https://icons.pixsellz.io/) — free collection of 1000+ icons for popular graphics tools. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Motion](https://www.getmotion.io) — free, simple animated icon editor. - [Norde Source](https://norde.io/) — mac, Windows and Linux app to color and customize icon sets to fit your brand. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Noun Project](https://thenounproject.com/) — icons for everything. - [Nucleo](https://nucleoapp.com/) — a Mac and Windows app to collect, customize and export all your icons. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Orion Icons](https://orioniconlibrary.com/all-icons) — SVG vector icons with an advanced interactive web app. - [Simple Icons](https://simpleicons.org/) — free SVG icons for popular brands. Simply click the icon you want, and the download should start automatically. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Share Icon](https://www.shareicon.net/) — more than 300 000 free download icons in different formats. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Streamline Emoji](http://emoji.streamlineicons.com/) — a free collection of 850 + vector emoji. The style is inspired by the japanese “Kawaii” (cute) style. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Svgsus](http://www.svgs.us/) — SVG icon management tool. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [SVG Colorizer](https://www.iconshock.com/svg-color/) — a tool to automatically change the entire color palette of any given SVG icon pack intelligently keeping the shades, highlights & shadows. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [SVGRepo](https://www.svgrepo.com/) — a site with 300.000+ SVG Vectors and Icons. - [Tilda Icons](https://tilda.cc/free-icons/) — download free icons for landing pages. More than 700 vector icons, collected in 43 sets for business. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Twemoji](https://twemoji.twitter.com/) — Twitter’s open-source emoji has you covered for all your project's emoji needs. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Unicons](https://iconscout.com/unicons) — 1000+ pixel-perfect vector icons for your next project. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [VisualPharm](https://visualpharm.com/) — free SVG Icons with super-fast search and free Coke. Built for fun by Icons8. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Xicons](https://www.xicons.co/) — free vector icons, that update every 10 days. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Zwicon](https://www.zwicon.com/) — handcrafted icon set for your next project. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Иллюстрации Illustrations can be used on your landing page, blog posts, inside your app or email campaign. They make your design live and playful. While drawing good illustration is a task of a skilled graphic designer, you can grab free SVG images & illustrations from very kind people in our community: - [Absurd Design](https://absurd.design) — free surrealist illustrations for your projects. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Blobmaker](https://www.blobmaker.app/) — create vector blob illustrations in the browser, with varying colour, complexity and contrast. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Blush](https://blush.design/) — create, mix and customize illustrations made by artists around the world. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![Figma](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/figma.svg) - [Humaaans](https://www.humaaans.com/) — a free library to mix-&-match illustrations of people. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Illustration by Pngtree](https://pngtree.com/illustration-design) — over 13142 professionally designed illustrations of different styles. - [IRA Design](https://iradesign.io/) — create amazing illustrations, using hand-drawn sketch components, a cool selection of 5 gradients and ai., svg. or png. formats. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [JoeSchmoe](https://joeschmoe.io) — an illustrated avatar collection for developers and designers, perfect as placeholders or live sites. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [LukaszAdam](https://lukaszadam.com/illustrations) — free vector art illustrations and icons. They are available for personal and commercial use. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ManyPixels](https://gallery.manypixels.co) — royalty-free illustrations to power up your projects. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Mega Doodles Pack](https://github.com/MariaLetta/mega-doodles-pack) — big vector pack with hand-drawn doodles for presentations, social media, blog posts and so on. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Open Doodles](https://www.opendoodles.com/) — a set of free illustrations by Pablo Stanley that embraces the idea of Open Design. You can copy, edit, remix, share, or redraw these images for any purpose without restriction under copyright or database law (CC0 license.). ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Ouch](https://icons8.com/ouch) — vector illustrations to class up your project. Free for both personal and commercial use. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Squircley](https://squircley.app/) - all you need to start creating beautiful SVG squircles. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [unDraw](https://undraw.co) — a collection of beautiful SVG images. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Wannapik](https://www.wannapik.com/) — a collection of free illustrations, vector images, photos, and animations for any use. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Информационная архитектура Information architecture helps designers organize and structure content inside websites, mobile apps, and other software. So users will understand product functionality and will find everything needed. These information architecture tools should allow you to create visual sitemaps and to improve your website content structure: - [DYNO Mapper](https://dynomapper.com/) — organize website projects using visual sitemaps, content inventory, content audit, content planning, daily keyword tracking, and website accessibility testing. - [Octopus.do](https://octopus.do) — visual sitemap builder. Build your website structure in real-time and rapidly share it to collaborate with your team or clients. - [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — сreate beautiful diagrams and designs with this powerful and easy to use app.![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [OptimalSort](https://www.optimalworkshop.com/optimalsort) — card sorting tool that allows you to understand how people categorize content in your UI. - [Treejack](https://www.optimalworkshop.com/treejack) — upload your proposed sitemap to see how a user would move through your site. - [WriteMaps](https://writemaps.com/) — create sitemaps that impress! Plan out the pages and content for your next website project in a visual, fun, and beautiful manner.
### Дизайн логотипов A logo is the starting point of your brand identity. It reflects the product mission, functionality and brand message. Ideally, the logo creates a strong connection between your product and the users. Logo design is an art, as well as many other design disciplines. With the right logo design tools, this art can be done right a bit faster. - [Design Evo](https://www.designevo.com/) — a large collection of vector icons and shapes help you design custom logos easily. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Free Logo Design](https://www.freelogodesign.org/) — create stunning professional logos in seconds. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Graphic Springs](https://www.graphicsprings.com/) — choose from a gallery of vector format logo templates, categorized by industry. Edit the graphics and texts of your template, then download it. - [Logo Design Team](https://www.logodesignteam.com/) — offers affordable professional custom logo design and brand design services. - [Logojoy](https://logojoy.com/) — uses artificial intelligence to instantly generate unique logo ideas for your business. - [Logo Lab](https://logolab.app/home) — put your logo to the test with automated visual experiments. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Logo Maker](https://www.ucraft.com/free-logo-maker) — allows you to make a free logo within seconds. Start with a blank canvas, add text and an icon, and then customize. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Logo Maker](https://www.designhill.com/tools/logo-maker) by Designhill — generate 1000s of unique logos in only few minutes, without design expertise. - [Logo Makr](https://logomakr.com/) — design a logo for free, choose from hundreds of fonts and icons, then save a logo on the computer. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Logo My Way](https://www.logomyway.com/) — choose from 600 custom logo designs from creative designers worldwide. - [Logo Package Express](http://thelogopackage.com) — export and package dozens of logo variations and file types for your clients automatically in under 5 minutes. - [Logo Rank](https://brandmark.io/logo-rank/) — upload your logo to see how it rates on a number of objective measures. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Wizlogo](https://wizlogo.com/) — create a logo with a simple and affordable tool backed by professional designers.
### Инструменты макетов A mockup is a visual way of representing the product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. These mockup tools that help you create and collaborate on mockups, wireframes, diagrams, and prototypes: - [Artboard Studio](https://artboard.studio/) — online graphic design application mainly focused on product mockups. - [Cleanmock](https://cleanmock.com) — create stunning mockups using the latest device frames like iPhone & custom backgrounds. - [Craftwork Design](https://craftwork.design/) — free and premium high-quality digital products that make your work faster and easier. - [Device Shots](https://deviceshots.com) — a tool that helps you create beautiful device mockups with the screenshot of your website or mobile application, for free. - [Devices by Facebook](https://facebook.design/devices) — images and Sketch files of popular devices. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Dimmy.club](https://dimmy.club/) — device mockup generator for your website and app screenshots. - [Frrames](https://frrames.com/) — Frrames mockups is perfectly crafted responsive windows mockups for your ideal presentation. - [Lstore Graphics](https://www.ls.graphics/) — free and premium mockups, UI/UX tools, scene creators for busy designers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Mediamodifier](https://mediamodifier.com) — create impressive product mockups in seconds. - [Mockflow](https://www.mockflow.com/) — the quickest way to brainstorm user interface ideas. - [Mockup World](https://www.mockupworld.co/) — tons of free and legal, fully layered, easily customizable photo realistic PSDs. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Mockups For Free](https://mockupsforfree.com/) — free design resources, PSD files for graphic and web designers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Mockuuups](https://mockuuups.studio/) — drag-and-drop tool for creating beautiful app previews or any marketing materials. - [Mock Video](https://www.mock.video/) — instantly create mockups by adding a device frame to your videos. - [Moqups](https://moqups.com/) — helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes. - [Original Mockups](https://originalmockups.com/) — high-quality mockups for Photoshop that make your designs stand out. - [Overframe for Mac](https://overframe.xyz/) — record your prototype & app with device frame overlay. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [PixelBuddha](https://pixelbuddha.net/) — free and premium high-quality resources for web designers and developers. - [Ramotion Store](https://store.ramotion.com/) — carefully crafted Apple and Android mockups for Sketch and Photoshop. - [Rotato](https://www.rotato.xyz/) — animated 3D mockups for your app designs. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [SceneLab](https://scenelab.io) — create realistic mockups and customized brand designs online. - [Screely](https://www.screely.com/) — quickly frame web page designs into a minimalist browser window. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ScreenSpace](https://www.screenspace.io/) — 3D devices videos for motion designer. - [Screenzy](https://screenzy.io) — instantly transform your pictures and screenshots into beautiful mockups ready to be shared on social media. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Screeener](https://github.com/zehfernandes/screeener) — use this app to insert a bunch of images to a keynote file, using the mockup you choose.![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Smartmockups](https://smartmockups.com/) — create stunning product mockups with just a few clicks. - [shotsnapp](https://shotsnapp.com/) — create beautiful device mockup presentation for your digital app and website design. - [The Mockup Club](https://themockup.club/) — a directory of the best free design mockups for Photoshop, Sketch, Figma and InVision Studio. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Threed](http://threed.io/) — generate custom 3D Device Mockups in your Browser. - [UI Store Design](https://www.uistore.design/) — 200+ free handpicked design resources for Sketch, Figma, Adobe XD, InVision Studio, Photoshop, Illustrator CC. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [UI8 — Design Freebies](https://ui8.net/category/freebies) — epic design freebies to get you started. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Vector Mockups Library](https://mockups.kkuistore.com/) — free collection of presentation Mockups for Sketch, Figma & Photoshop. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Инструменты no-code With a rise of “no code tools”, everyone with a laptop can build and launch a project. These tools help designers and makers create websites, apps, and even games. No code tools allow to automate routine tasks and can be used without a development background. Take a look at the tools here and if you need more — check Design to Code section. - [Bubble](https://bubble.io/) — build and host web applications without having to write code or hire a team of engineers. - [Carrd](https://carrd.co/) — simple, free, fully responsive one-page sites for pretty much anything. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Coda](https://coda.io) — a new type of document that blends the flexibility of documents, the power of spreadsheets, and the utility of apps into a single new canvas. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Kodika.io](https://kodika.io) — build iOS apps with Kodika no code app builder for Mac & iPad, capable of creating powerful apps with Drag & Drop. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [PageXL](https://pagexl.com/) — a simple one-page website builder for quickly creating landing pages and online stores. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Remove.bg](https://www.remove.bg/) — a free service to remove the background of any photo. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Retool](https://tryretool.com/) — gives you building blocks and you can build tools much faster. - [sheet2api](https://sheet2api.com/) — create an API from Google Sheets or Excel Online Spreadsheets, no coding required. - [Sheet2Site](https://www.sheet2site.com/) — create a website from Google Sheets without writing code. - [Shopify](https://www.shopify.com/) — one platform with all the e-commerce and point of sale features you need to start, run, and grow your business. - [Thunkable](https://thunkable.com/) — a drag-and-drop tool for anyone to build native mobile apps. - [UserGuiding](https://userguiding.com/) — create walkthroughs, checklists, hotspots, and modals to improve user onboarding.
### Инструменты Pixel Art (пиксельная графика) Pixel art is a digital art form where color is applied to individual pixels to create an image. The pixel art can be used to create everything from intricate scenes and game backgrounds to character designs or emoji. If you feel curious to try, check this pixel art software for both macOS and Windows: - [Aseprite](https://www.aseprite.org/) — animated sprite editor & pixel art tool. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Data Pixels](https://github.com/gmattie/Data-Pixels) — create pixel art programmatically. Includes DataPixels.js and Data Pixels Playground desktop app. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Draw!](http://www.drawbang.com/) — open-source and free web-based pixel art and GIF editor. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Grafx2](https://gitlab.com/GrafX2/grafX2) — a bitmap paint program inspired by the Amiga programs ​Deluxe Paint and Brilliance. Specialized in 256-color drawing. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [GraphicsGale](https://graphicsgale.com/us/) — has many pixel-art specific features, including palette control, selectively erasing colors, and tools for quickly replacing and trying new colors. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Goya](https://jackschaedler.github.io/goya/) — a pixel-art editor built on ClojureScript and Om. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Make 8 bit art](https://make8bitart.com/) — an open source and in-browser pixel art drawing tool. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/jennschiffer/make8bitart) - [Piskel](https://www.piskelapp.com/) — online editor for animated sprites & pixel art. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Pixel art to CSS](https://www.pixelartcss.com/) — pixel art animation and drawing web app powered by React. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Poxi](http://app.poxi.rocks/) — a flat pixel art editor. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Pyxel Edit](https://pyxeledit.com/) — a pixel art editor designed to make it fun and easy to make tilesets, levels and animations. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)
### Инструменты прототипирования A prototype is a simple experimental design of a proposed solution. It should help to test ideas, design assumptions, and hypotheses in a fast and cheap way. Prototyping tools allow designers and clients to see how the product would function in the real world and collaborate on this solution. Many modern prototyping tools can use for wireframing, prototyping, and collaboration: - [Alva](https://www.meetalva.io/) — create living prototypes with code components. It's also open source. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/meetalva/alva) - [Axure RP](https://www.axure.com/) — wireframing, prototyping, collaboration & specifications generation. - [SAP Build](https://www.build.me/) — a complete set of cloud‑based tools to design and build your enterprise app. - [Creo](https://creolabs.com/) — prototyping, code exporting and built-in mobile app builder. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Drama](https://www.drama.app/) — prototype, animate and design in a single Mac app. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [InVision](https://www.invisionapp.com/) — prototyping, collaboration & workflow platform. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Flinto](https://www.flinto.com/) — a Mac app for creating interactive and animated prototypes of app designs. - [Framer X](https://framer.com/) — a tool to visually design realistic interactive prototypes. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Keynote](https://www.apple.com/keynote/) — the built-in Mac app for creating presentations that can also be used for quick prototyping (see how Apple designers use it in the WWDC 2014 session "[Prototyping: Fake It Till You Make It](https://developer.apple.com/videos/play/wwdc2014/223/)" to verify design concepts). ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Lightwell](https://lightwell.pro/) — visual tool and SDK to build mobile layouts and animations that translate into native iOS elements. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Marvel App](https://marvelapp.com/) — the collaborative design platform. Wireframe, prototype, design online and create design specs in one place. - [Maze](https://maze.design/) — a tool for designers and developers that gives analytical results with actionable KPIs for your Invision prototypes. - [Origami](https://origami.design/) — a free tool for designing modern user interfaces. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Pencil](https://pencil.evolus.vn/) — prototyping tool with many built-in components that people can easily install and use to create mockups in popular desktop platforms. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Principle](https://principleformac.com/) — makes it easy to design animated and interactive user interfaces. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [ProtoPie](https://www.protopie.io/) — piece hi-fi interactions together, build sensor-aided prototypes and share your amazing creations in a matter of minutes. - [Proto.io](https://proto.io/) — a tool to create fully-interactive high-fidelity prototypes that look and work exactly as your app should. - [Prott](https://prottapp.com/) — an easy to use and intuitive prototyping tool, promotes team collaboration. - [Uizard](https://uizard.io/) — transform wireframes into high-fidelity interactive prototypes, customize style systems, export to Sketch, export to HTML/CSS code. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Useberry](https://www.useberry.com/) — a usability testing tool that allows importing prototypes from InVision, AdodeXD, Sketch, Marvel and getting users’ behavior insights with heatmaps, video recordings, user flows, time bars and answers of follow-up questions. - [UXPin](https://www.uxpin.com/) — build prototypes that feel real, with powers of code components, logic, states, and design systems. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Для создания скриншотов Taking screenshots is a typical task in the design & development workflow. So these free and full-featured screenshot apps can help you capture a screen with ease. Some screen captures are macOS only, while others support both OS: - [Camtasia](https://www.techsmith.com/video-editor.html) — a screen recorder that comes with a full-blown built-in editor. - [CleanShot](https://getcleanshot.com) — capture your screen in a superior way with a built-in annotation tool and Quick Access Overlay. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [CloudApp](https://www.getcloudapp.com/) — record videos, webcam, annotate screenshots, create GIFs. - [Collabshot](https://www.collabshot.com/) — take and collaborate on screenshots in real-time with your coworkers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Gifox](https://gifox.io) — delightful GIF recording and sharing app. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Giphy Capture](https://giphy.com/apps/giphycapture) — capture parts of your screen and export as gif or mp4. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Greenshot](https://getgreenshot.org/) — take a screenshot of a selected region, window or fullscreen. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Kap](https://getkap.co) — open source screen recorder with options to export to GIF, MP4, WebM and APNG. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/wulkano/kap) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Lighshot](https://itunes.apple.com/us/app/lightshot-screenshot/id526298438) — taking quick captures of your screen. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Monosnap](https://itunes.apple.com/us/app/monosnap/id540348655?mt=12) — create screenshots, annotate and upload them to the cloud. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [OBS](https://obsproject.com/) — open source software for video recording and live streaming. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Quicktime](https://support.apple.com/quicktime) — a video player that you can use to record your screen. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [ScreenFlow](http://www.telestream.net/screenflow/overview.htm) — video editing and screen recording software for Mac. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Screenie](https://www.thnkdev.com/Screenie/) — filter and search through images, change screenshot filetypes. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [ScreenshotAPI.net](https://screenshotapi.net) — create pixel-perfect full page website screenshots. ![web](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/web.svg) - [ScreenToGif](https://www.screentogif.com/) — record a gif of part of the screen. Only available for Windows. ![web.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/wulkano/kap) - [ShareX](https://getsharex.com/) — screen capture, file sharing, and productivity tool. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Shotty](https://meetshotty.com) — a menu bar app that helps you quickly find the screenshot you're looking for so you can drag and drop it into any application. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Snagit](https://www.techsmith.com/screen-capture.html) — capture images and video, create GIFs, annotate, edit, and share. - [Snipping Tool](https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots) — Windows free screenshot tool. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Snappy](http://snappy-app.com/) — takes quick shots and organizes them for you into collections. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Teampaper Snap](https://teampaper.me/snap/) — allows you to take screenshots of a selected area. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg)
### Для набросков Sometimes you need just a pencil and paper to start creating your app or website. So here are you can find online sketching tools with great sketch sheet templates to speed up your creative process: - [Responsive Sketchsheets](https://zurb.com/playground/responsive-sketchsheets) — offers responsive pre-design templates. These will automatically adapt their layout to any screen size and include neat features. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Sketchsheets](https://sketchsheets.com/) — an open source project dedicated to providing free printable templates of the latest devices and platforms for wireframing designs. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/rnarrkus/sketchsheets) - [Sneakpeekit](https://sneakpeekit.com/) — print note taking grids and devices frames. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Sketchize](https://sketchize.com/) — just choose any of the sketch sheets that fits your project, print it out and start to sketch your dream. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Дизайн для SMM Often marketing teams need well-design materials. It can be different banners, promo visuals, favicons, animations or just nice images for social platforms, like Twitter or Instagram. It this section we will keep adding tools for everyone to create marketing designs. - [Canva](https://www.canva.com/) — create stunning designs for work, life, and play—even if you're not a design expert! - [Crello](https://crello.com/) — create own designs: posts, covers, graphics, and posters using the best software on the web. - [Pablo by Buffer](https://pablo.buffer.com/) — design engaging images for your social media posts. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Remove.bg](https://www.remove.bg/) — a free service to remove the background of any photo. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [SocialSizes](https://socialsizes.io/) — provides designers with the best sizes to use for image and video content on social media. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Stencil](https://getstencil.com/) — a graphic design tool that is all about creating social media images easily and quickly.
### Звуковой дизайн Sound design is an art of creating a soundscape for a site, app, movie, game or any other product. The sound has great potential for transforming the way people connect with your product. Some sound design software is very advanced and can be used mostly by sound designers, while others are good for beginners. - [Appsounds](https://appsounds.pro/) — UI Sound packs for apps, games, and any product. - [AudioJungle](https://audiojungle.net/) — 836,206 tracks and sounds from the community of musicians and sound engineers. - [Bensound](https://www.bensound.com/) — download creative commons music, royalty free music for free and use it in your project. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Freesound](https://freesound.org/) — a collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Fugue Music](https://icons8.com/music) — download free background music for your videos. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Max](https://cycling74.com/products/max/) — connect objects with virtual patch cords to create interactive sounds, graphics, and custom effects. - [Reaper](http://reaper.fm/) — import any audio and MIDI, synthesize, sample, compose, arrange, edit, mix, and master songs or any other audio projects. - [Sonic Pi](https://sonic-pi.net/) — a live coding music synth. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [SoundKit](https://soundkit.io/) — a UI sound library designed for all of your interface needs. - [UI Sounds](https://uisounds.prototypr.io/) — learn sound design for user interfaces by example. - [Wistia Music](https://wistia.com/resources/music) — download some free background tracks to add energy and emotion to your videos. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [WOWA](https://www.wowa.me/) — download royalty-free music for YouTube videos, podcasts, and apps. No copyright CC0. Music inspired by Unsplash. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [YouTube Audio Library](https://www.youtube.com/audiolibrary/music) — browse and download free music for your project. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Работа со стоковыми фотографиями Need a high-quality photo for iOS app or new banner? You can always shoot it yourself or borrow from the stock photo sites. Luckily, there are hundreds of beautiful, free stock photos and royalty-free images that you can use for any project: - [Burst](https://burst.shopify.com/) — free stock photos for websites and commercial use. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Duotone](https://duotone.shapefactory.co/) — free duotone images to use in any project, or make custom duotone images. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Death to Stock](https://deathtothestockphoto.com/) — paid-for stock photo service with a mailing list for occasional free packs, and a focus on not looking like stock photography. - [FoodiesFeed](https://foodiesfeed.com/) — thousands of beautiful realistic free food pictures in high resolution. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [FreePhotos.cc](https://freephotos.cc/) — free stock photos for commercial use. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Freestocks.org](http://freestocks.org/) — high quality photos all released under Creative Commons CC0. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Gratisography](https://gratisography.com) — a collection of free high-resolution pictures. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Jay Mantri](https://jaymantri.com/) — 7 new photos released every Thursday under the Creative Commons CC0. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Kaboom Pics](https://kaboompics.com/) — stock photos including abstract, city/architecture, fashion, food & landscapes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [LandingStock](https://landingstock.com/) — a collection of free images for your landing page. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Life of Pix](https://www.lifeofpix.com/) — free high-resolution photos, created by the LEEROY team. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [LoremPixel](https://lorempixel.com/) — an API that serves stock photos at specified sizes and categories. Great for placeholder/user-generated content. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Magdeleine](https://magdeleine.co/) — free high-quality stock photos for your inspiration. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Moose](https://photos.icons8.com/) — don't search for stock photos, create them. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [MMT STock](http://mmtstock.com/) — high-resolution photos provided by Jeffrey Betts with Creative Commons CC0. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [New Old Stock](https://nos.twnsnd.co/) — a vintage photos from the public archives free of known copyright restrictions. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pexels](https://www.pexels.com/) — an aggregate of many free stock photo resources. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Photo Creator](https://photos.icons8.com/creator) — a free tool for creating realistic stock photos on your demand. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Picography](https://picography.co/) — free stock photos by Dave Meier and various other photographers with Creative Commons CC0. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pixabay](https://pixabay.com/) — sharing photos, illustrations, vector graphics, and film footage under a proprietary license. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Picjumbo](http://picjumbo.com/) — a collection of totally free photos for your commercial & personal works. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pngtree](https://pngtree.com/) — millions of PNG images, backgrounds and vectors for free download. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [pxhere](https://pxhere.com/) — free image stock. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Reshot](https://www.reshot.com/) — a massive library of handpicked free stock photos you won’t find elsewhere. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ShotStash](https://shotstash.com/) — thousands of free high-resolution CC0 photos and videos. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [SkitterPhoto](https://skitterphoto.com/) — a wide variety of stock photos and are released under Creative Commons CC0. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Startup Stock Photos](http://startupstockphotos.com/) — free photos for startups, bloggers and publishers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [StockSnap.io](https://stocksnap.io/) — a large selection of free stock photos and high-resolution images. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [StyledStock](https://styledstock.co/) — free feminine stock photography for every woman entrepreneur. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [The Gender Spectrum Collection](https://broadlygenderphotos.vice.com/) — a stock photo library featuring images of trans and non-binary models that go beyond the clichés. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [UI Faces](https://uifaces.co/) — an aggregator that indexes various free avatar sources that you can use in your design mockups. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Unsplash](https://unsplash.com) — stock photos free to use. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [#WOCinTech Chat Photos](https://www.flickr.com/photos/wocintechchat) — free stock photos of women technologists of diverse backgrounds. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Zoommy](http://www.zoommyapp.com) — helps you find awesome free stock photos for your creative product or inspiration. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Стоковые видео If you work with video-content, you will enjoy these high-quality, hand-curated stock videos. You'll find many good and free stock video sites below, which you can use on your website, in your ad campaigns or social media: - [Coverr](https://coverr.co/) — beautiful, free stock video footage for your homepage. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Life of Vids](http://www.lifeofvids.com/) — provides free stock videos, clips, and loops. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Mazwai](http://mazwai.com) — great collection of free creative commons HD video clips & footages. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Mixkit](https://mixkit.co/) — extraordinary Free HD videos. For you to use, completely free of charge. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Motion Places](https://www.motionplaces.com/) — a curated collection of beautiful footage you can use for your projects. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pixabay](https://pixabay.com/) — it has more than 1.5 million royalty-free stock videos and photos shared by their community of creators. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pexels Videos](https://www.pexels.com/videos/) — makes it easy to find free stock footage for your website, promo video or anything else. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Videezy](https://www.videezy.com/) — download millions of free and premium stock footage and motion graphics instantly. - [Videvo](https://www.videvo.net/) — offers a large selection of HD video clips, motion graphics, and free stock footage. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [123RF](https://www.123rf.com/) — over 100,000 daily new content & 24/7 online support.
### Изучение дизайна - [Design Better](https://www.designbetter.co/) — discover the best practices, stories, and insights from the world’s top design teams and leaders. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Design+Code](https://designcode.io/) — complete courses about the best tools and design systems. - [DesignerUp](https://designerup.co/) — a collection of self-paced courses and mentorship to help you master Product Design (UI/UX). - [Figma Training](https://www.figmatraining.com) — a crash course all about Figma, for UI designers. - [Interaction Design Foundation](https://www.interaction-design.org/) — a website that is the industry well known for learning UX/UI skills. - [Laws of UX](https://lawsofux.com/) — a collection of the maxims and principles that designers can consider when building user interfaces. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Learn UX](https://learnux.io/) — a complete approach to learning UI & UX Tools. - [Sketch Master](https://sketchmaster.com/) — a collection of video training courses for professionals learning Sketch.

Abstract

### UI-дизайн What are the best UI design tools in 2019? You can pick any of the tools below and it will allow you to do dozens of design tasks — UI for site or mobile, wireframe, prototype, animation, logo. These are great and fully-functional tools for UX & UI designers: - [Adobe XD](https://www.adobe.com/products/xd.html) — design, prototype, and share any user experience, from websites and mobile apps to voice interactions. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Affinity Designer](https://affinity.serif.com/en-gb/designer/) — a vector graphics editor for macOS, iOS, and Microsoft Windows. - [Akira](https://github.com/akiraux/Akira) — native Linux App for UI and UX Design built in Vala and Gtk. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Botmock](https://www.botmock.com) — design, prototype, and test voice and text conversational apps. Supports multiple platforms. - [CleverBrush](https://www.cleverbrush.com/) — a browser-based online vector editor and digital publishing tool which is possible to integrate to the page as JS component. - [Figma](https://www.figma.com/) — a design tool based in the browser, that allows to design and prototype with real-time collaboration. - [GIMP](https://www.gimp.org/) — a free & open-source imaging and graphic design software. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Gravit](https://designer.io/) — a free vector design app, available for macOS, Windows, Linux, ChromeOS, and browser. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Illustrator](https://www.adobe.com/products/illustrator.html) — create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile. Made by Adobe. - [Inkscape](https://inkscape.org/) — a free and open-source vector graphics editor. It can create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos, and complex paintings. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Krita](https://krita.org/en/) — a free painting and graphic design software considered a good alternative to Adobe Photoshop. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Lunacy](https://icons8.com/lunacy) — a free native windows app that works offline and supports .sketch files. Flexible and light weighed. Intuitive and easy to use. Speedups and empowers UI and UX designers. The must have to produce stunning designs. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Photopea](https://www.photopea.com/) — a free browser-based graphic design app alternative to Photoshop. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Photoshop](https://www.adobe.com/products/photoshop.html) — imaging and graphic design software developed by Adobe. - [Pixelixe](https://studio.pixelixe.com) — a graphic design tool built for marketers, bloggers and small businesses that needs to create stunning and unique images, graphics or static webpages in minutes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Sketch](https://www.sketchapp.com/) — a design toolkit built for Mac. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Studio](https://www.invisionapp.com/studio) — combines design, prototyping, and collaboration into one harmonious workflow. Made by InVision. - [TwitPile](https://twitpile.com) — creates tiled images out of Twitter followers, interests and lists. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Vectr](https://vectr.com/) — a simple web and desktop cross-platform tool to create vector graphics easily and intuitively. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Voiceflow](https://www.voiceflow.com) — prototype, design and deploy real apps for Amazon Alexa & Google Home.
### Построение пользовательских потоков User flow is a series of steps a user takes to achieve a meaningful goal. It's a fast way to plan customer journey paths and improve UX. So if you need to make a user flow diagram, user flow map or a sitemap, take a look at these tools: - [Draw.io](https://www.draw.io/) — a free online diagram software for making flowcharts, process diagrams, org charts, UML, ER, and network diagrams. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Flowmapp](https://flowmapp.com/) — an online tool for creating sitemaps and user flows that helps you to effectively design and plan user experience. - [Google Drawings](https://docs.google.com/drawings/) — create diagrams and charts, for free; all within Google Docs. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Lucidchart](https://www.lucidchart.com/) — an online tool for creating diagrams, flow charts, sitemaps, and more. - [MindNode](https://mindnode.com/) — a mind mapping app that makes brainstorming simple and easy. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [NinjaMock](https://ninjamock.com/) — wireframe and user flow online tool. Link your views and create logic flow prototype. All with freehand visual style. - [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — a diagramming and digital illustration application for macOS and iOS. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Overflow](https://overflow.io/) — turn your designs into playable user flow diagrams that tell a story. - [Sketch.systems](https://sketch.systems/) — ui and flow design with interactive state machines. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [SQUID](https://uxmisfit.com/squid/) — create beautiful User Flows in Sketch in just minutes. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [WebSequenceDiagrams](https://www.websequencediagrams.com/) — a simple webapp to work out object interactions arranged in time sequence. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Whimsical](https://whimsical.co/) — easy to create flow charts, wireframes and sticky notes. - [Wireflow](http://wireflow.co) — free, online and open source tool for creating beautiful user flow prototypes. [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/vanila-io/wireflow) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [XMind: ZEN](https://www.xmind.net/zen/) — a brainstorming and mind mapping tool that can switch between outline and tree-chart. Link topics with other charts. - [yEd](https://www.yworks.com/products/yed) — free desktop tool for making diagrams. Usable for the wide variety of use cases. Auto-layout helps a lot when making flowcharts. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
### Пользовательские исследования User research helps you understand user behaviors, needs, and motivations through various qualitative and quantitative methods (interviews, observation, forms, etc). These user research tools can be useful for you: - [Appoint.ly](https://appoint.ly) — a web-based scheduling tool that helps to schedule meetings quickly through the integration with calendars online. - [Calendly](https://calendly.com/) — Calendly helps you schedule meetings without the back-and-forth emails. - [Crowd Signal](https://crowdsignal.com/) — collect, organize and analyze data from a variety of sources, including social media and mobile. - [Doodle](https://doodle.com/) — online calendar tool for time management, and coordinating events, meetings, appointments - [Evolt](https://evolt.io/en/) — create user personas, storyboards, business model canvas, experience maps, brainstorming boards and moodboards in a clean and modern way. - [Feedback Lite](https://www.feedbacklite.com/) — collect high quality customer feedback using Voice of Customer solutions designed to improve your website performance and boost customer engagement. - [GoToMeeting](https://www.gotomeeting.com/en-gb) — a simple, extraordinarily powerful web conferencing service. - [Handrail](https://handrailux.com/) — end-to-end, collaborative user research and insights platform — plan research, collect and analyze data, and share your findings. - [JotForm](https://www.jotform.com) — create online forms, get an email for each response, collect data. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Lookback](https://lookback.io/) — remotely run, record, and take notes for your user research sessions, either with a live product or with a prototype. - [MineTime](https://minetime.ai) — a free calendar app with smart scheduling and time analytics features. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Reflector](https://www.airsquirrels.com/reflector) — Reflector is a basic screen-mirroring and recording tool so you can conduct user tests remotely, using any existing wireframes or prototypes. - [Reframer](https://www.optimalworkshop.com/reframer) — a research tool that helps your team to capture, tag (code) and identify patterns in qualitative data across multiple research participants. - [Sticktail](https://sticktailapp.com/) — a platform for centralizing, finding and sharing user insights within your organization. - [Survey Monkey](https://www.surveymonkey.com/) — online survey tool to capture the voices and opinions of the people who matter most to you. - [Typeform](https://www.typeform.com/) — use a simple drag-and-drop interface to create any kind of form, survey, or questionnaire, and even take credit card payments. - [Wufoo](https://www.wufoo.com) — сreate forms, collect data and payments and automate your workflows. - [YesInsights](https://www.yesinsights.com/) — simple one question and NPS surveys to improve your business. - [UserBit](https://userbitapp.com/) — a platform of real-time research tools for your team. Tag/code interviews and feedback, capture insights, create personas, visual sitemaps and more. - [User Interviews](https://www.userinterviews.com/) — recruit participants from a community of 125,000 members based on profession, demographics, geography and more, for any kind of research. - [Zoom](https://zoom.us) — it's one of the best online meeting services.
### Визуальная отладка - [LogRocket](https://logrocket.com/) — a tool to record what users do on your site so you can reproduce bugs and fix issues faster. - [PixelSnap](https://getpixelsnap.com) — the magical way to measure everything on your screen. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [VisBug](https://github.com/GoogleChromeLabs/ProjectVisBug) — on any webpage: visually debug, quick inspect style and a11y, change CSS visually, click and drag elements around, and much more. [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/GoogleChromeLabs/ProjectVisBug) ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Visual Inspector](https://www.canvasflip.com/visual-inspector/) — collaboration tool for website feedback and fixing design bugs.
### Создание вайрфреймов A wireframe is a visual mockup that outlines the basic structure of the site or an app. It contains the most essential elements and the content, helping you easily explain ideas on design. Wireframes are a low-fidelity way of showing a design. This section is presented the best wireframing tools for a variety of use cases. - [Balsamiq Cloud](https://balsamiq.cloud/) — effortless UI sketching. Capture your ideas, collaborate on your designs, get everyone on board. - [BLOKK](http://www.blokkfont.com/) — a font for quick mock-ups and wireframing for clients who do not understand Latin. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [CSS Grid Builder](https://cssgrid.cc/css-grid-builder.html) — with this tool there is no HTML part to the grid. The grid only becomes apparent when content (elements) are added and positioned according to the grid rules. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Gliffy](https://www.gliffy.com/) — a tool for creating the framework, UML diagrams, flowcharts, wireframes and more. - [Gridzzly](http://gridzzly.com/) — the easiest way to create custom grid paper printable. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Layoutit](https://grid.layoutit.com/) — a interface builder for CSS Grid & Bootstrap that wants to be the kick-off for your front-end developments. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pidoco](https://pidoco.com/en) — software that lets you quickly create click-through wireframes and fully interactive UX prototypes. - [Wireframe.cc](https://wireframe.cc/) — a simple wireframing tool that doesn't get in your way. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Whimsical Wireframes](https://whimsical.co/wireframes/) — instant wireframing at your fingertips. Rich library of configurable elements like buttons, inputs, checkboxes. - [1200px Grid System](https://1200px.com/) — helps you build a grid system for much wider website designs than the 960-pixel style.
### 3D-моделирование 3D graphics are used in gaming, film making, architecture, engineering, and 3D printing. 3D artists & designers use specific 3D modeling software, mentioned in this section. - [Autodesk](https://www.autodesk.com/products/fusion-360/overview) — integrated CAD, CAM, and CAE software. Unify design, engineering, and manufacturing into a single platform. - [Blender](https://www.blender.org/) — free and open-source 3D Creation Software. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [FreeCAD](https://www.freecadweb.org/) — a free and open-source multiplatform 3D parametric modeler. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [MatterControl](https://www.matterhackers.com/store/l/mattercontrol/sk/MKZGTDW6) — a free, open-source, all-in-one software package that lets you design, slice, organize and manage your 3D prints. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Maya](https://www.autodesk.com/products/maya/overview) — make animations, environments, motion graphics, virtual reality, and character creation, all in one toolset. - [Onshape](https://www.onshape.com/) — a modeling software specially oriented to design technical and spare parts, was the first full-cloud 3D software created. - [OpenSCAD](https://www.openscad.org/) — a software for creating solid 3D CAD objects. ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Rhino](https://www.rhino3d.com/) — a curve-based 3D modeling software that creates mathematically-precise models of 3D surfaces. - [SketchUp](https://www.sketchup.com) — 3D design software that truly makes 3D modeling for everyone, with a simple to learn yet robust toolset. - [Tinkercad](https://www.tinkercad.com) — a free, easy-to-use app for 3D design, electronics, and coding. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Vectary](https://www.vectary.com/) — create beautiful 3D models with our drag and drop 3D modeling tool. - [3D Slash](https://www.3dslash.net) — 3D modeling tool, available on all devices and all OS, online and offline.
### Addendum (Reference & Inspiration) Awesome Design Tools & Plugins is curated by [Lisa Dziuba](https://twitter.com/LisaDziuba) & [Valia Havruliyk](https://twitter.com/ValiaHavryliuk) from Flawless team. And it was hugely inspired by articles from the design community and Prototypr.io Toolbox made by our good friend Graeme Fulton. If you found some great design tools, please [suggest it](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md). Thanks for making this project awesome :)