Awesome-Design-Tools/README.md

Awesome Design Tools

• Awesome Design Plugins
• Awesome Design Conferences
• Awesome Design UI Kits

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

• Сейчас вы находитесь в разделе Awesome Design Tools, если вам нужны плагины — перейдите к Awesome Design Plugins.
• Чтобы найти инструмент, воспользуйтесь оглавлением или поиском по ключевому слову (например, "анимация", "градиент").

Оглавление

• Доступность
• Анимация
• Дополненная реальность
• Совместная работа
• Выбор цвета
• Обратная связь по дизайну
• Передача дизайна
• Вдохновение
• Системы дизайна
• "Дизайн в код"
• Контроль версий
• Инструменты разработки
• Мониторинг пользовательского опыта
• Работа со шрифтами
• Создание градиентов
• Работа с иконками
• Иллюстрации
• Информационная архитектура
• Дизайн логотипов
• Mockup макеты
• No-code
• Пиксель Арт
• Прототипирование
• Создание скриншотов
• Наброски
• Дизайн для SMM
• Звуковой дизайн
• Cтоковые фотогафии
• Стоковые видео
• Изучение дизайна
• UI-дизайн
• Построение пользовательских потоков
• Пользовательские исследования
• Визуальная отладка
• Создание вайрфреймов
• 3D-моделирование

---

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

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

• A11ygator — Веб-инструмент для анализа сайтов на соответствие правилам WCAG. Также доступен в виде расширения для браузера Google Chrome и Twitter-бота.
• Accessibility Insights — помогает разработчикам быстро находить и устранять проблемы доступности.
• Accessible Palette Builder — прототип на основе Elm, помогающий дизайнерам создавать доступные цветовые палитры.
• AChecker — веб-приложение для тестирования доступности, используемое для оценки HTML-контента на наличие проблем с доступностью.
• ANDI — инструмент тестирования доступности веб-контента (букмарклет). Автоматически обнаруживает проблемы с доступностью, предлагает улучшения и проверяет соответствие стандарту 508.
• Axe — движок доступности, предназначенный для работы во всех современных браузерах и с любыми инструментами, фреймворками, библиотеками и средами. Это инструмент автоматического тестирования доступности для разработчиков.
• ColorBox — веб-приложение, которое алгоритмически создает доступные цветовые системы. Разработано командой Lyft Design.
• Colorable — бесплатный веб-инструмент для проверки контраста.
• Color Oracle — бесплатный симулятор дальтонизма.
• Contrast — приложение для macOS для дизайнеров и разработчиков, предоставляющее быстрый доступ к коэффициентам контраста цветов по стандартам WCAG.
• Contrast Checker — помогает проверить контраст между фоном элемента и самой страницей.
• Contraste — приложение для проверки доступности текста в соответствии с Руководством по доступности веб-контента (WCAG).
• Inclusive Design — методология и набор инструментов, предоставленных командой Microsoft.
• Hex Naw — помогает протестировать целые цветовые системы на контрастность и доступность.
• Leonardo — генератор цветовых палитр по заданному коэффициенту контраста WCAG. Открытый веб-инструмент и npm-модуль для дизайнеров и инженеров. Разработан Adobe.
• PA11Y — инструмент тестирования доступности для выявления проблем с веб-страницами. Запускает HTML CodeSniffer из командной строки для программных отчетов о доступности. Это инструмент для разработчиков.
• Sim Daltonism — симулятор дальтонизма для macOS и iOS, позволяющий визуализировать цвета так, как они воспринимаются при различных типах дальтонизма.
• Stark — платный плагин для Sketch, позволяющий моделировать различные типы дальтонизма.
• Toptal’s Color Filter — позволяет протестировать ваш сайт и показывает, как люди с различными видами дальтонизма увидят ваши страницы.
• tota11y — инструмент визуализации доступности. Интересный факт: в названии инструмента вы видите "a11y". Это сокращение от accessibility, где "a" сопровождается 11 буквами, а затем "y".
• WAVE — позволяет оценить веб-контент на наличие проблем с доступностью прямо в Chrome и Firefox. Это проверяющий доступность веб-контента.
• 90 Examples — бесплатная коллекция доступных цветовых тем.

Функции проверки доступности также доступны в VisBug из категории Визуальная отладка.

---

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

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

• After Effects — цифровые визуальные эффекты, анимация и приложение для композитинга, разработанное Adobe.
• BeatFlyer — веб-инструмент, который позволяет быстро создавать зацикленные и яркие анимации из многослойных композиций.
• Dokyu Motion — упрощает дизайн анимации в After Effects, чтобы любой редактор мог рассказывать истории, которые не останутся незамеченными.
• Flare — мощный инструмент для дизайна и анимации, позволяющий дизайнерам и разработчикам создавать анимации для приложений или игр.
• Flow — профессиональный инструмент анимации для Sketch-дизайнов, который также экспортирует готовый код для iOS, веба или SVG-файлов.
• GSAP — набор инструментов для сценарных HTML5-анимаций с высокой производительностью во всех основных браузерах.
• Haiku Animator — анимация на основе ключевых кадров, соединяющая инструменты пользовательского интерфейса с кодом, который легко использовать разработчикам.
• Keyshape — инструмент 2D-анимации, позволяющий экспортировать анимации в формате SVG.
• Kite Compositor — мощное приложение для анимации и прототипирования для Mac и iOS.
• LightBox — пакет для создания 2D-анимации с рисованными кадрами.
• Lottie — мобильная библиотека для Android и iOS, которая парсит анимации из Adobe After Effects, экспортированные как JSON с помощью Bodymovin, и рендерит их нативно на мобильных устройствах и в вебе.
• Mantra — инструмент для анимации на основе временной шкалы в браузере.
• Meteoritic — библиотека анимационных эффектов для iOS и Android. Выберите из множества анимаций, подходящих для различных стилей приложений.
• Naker.Back — интегрируйте интерактивный фон бесплатно, чтобы привлечь больше внимания к вашему сайту.
• Naker.Story — сделайте ваш веб-контент интерактивным, чтобы увлечь посетителей как никогда ранее благодаря 3D.
• OFFEO — онлайн-инструмент для создания видеороликов для малого бизнеса, чтобы создавать рекламные ролики на уровне крупных брендов без большого бюджета.
• StorySwag — создавайте стильные анимированные посты для Instagram и Facebook всего в несколько нажатий прямо с вашего телефона.
• Spirit — инструмент анимации, который помогает создавать и управлять анимациями в реальном времени в браузере.
• Stylie — графический инструмент для создания CSS3-анимаций в браузере.
• Tumult Hype — приложение для создания анимаций и интерактивного HTML5-контента для macOS.

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

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

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

• Daqri — предоставляет профессиональный уровень дополненной реальности для рабочих процессов, накладывая цифровую информацию на физическую среду.
• EasyAR — мобильное приложение и движок дополненной реальности, упрощающий работу с AR.
• HP Reveal — добавляет ценность к печатному контенту с помощью визуальной интерактивности.
• Layar — помогает находить различные элементы на основе технологий дополненной реальности.
• Lens Studio — создавайте, публикуйте и делитесь своими AR-эффектами для Snapchat с кодом или без него.
• Lightform — инструмент для проектирования дополненной реальности через проекцию.
• Spark AR Studio — создавайте AR-эффекты для Instagram без написания кода.
• Torch — облачное приложение для 3D-дизайна и прототипирования, ориентированное на мобильную AR.
• Unity — создавайте качественные 3D и 2D игры, а также проекты для VR/AR, и разворачивайте их на мобильных и настольных устройствах.
• Vectary — создавайте 3D и AR для вашего веб-сайта.
• Vuforia — SDK для мобильных устройств, позволяющий создавать приложения дополненной реальности.
• Wikitude — расширяет возможности приложений для iOS, Android и умных очков с помощью отслеживания изображений и объектов, мгновенного отслеживания (SLAM), Geo AR и других функций.

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

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

• Airtable — часть таблицы, часть базы данных, и полностью гибкий инструмент, который команды используют для организации своей работы так, как им удобно.
• Asana — платформа управления работой, которую команды используют, чтобы сосредоточиться на целях, проектах и ежедневных задачах для развития бизнеса.
• Basecamp — набор инструментов для управления проектами, предназначенный для организации сотрудников, распределения задач и отслеживания прогресса в одном месте.
• Freedcamp — самый инновационный способ управления проектами, полностью бесплатный... навсегда.
• Droplr — создание скриншотов, обмен файлами и записи экрана для объяснения идей.
• Excalidraw — инструмент для рисования диаграмм с эффектом ручного наброска.
• Filestage — программное обеспечение для гибкого утверждения контента, помогающее рецензировать видео, дизайн и документы с клиентами и коллегами.
• Float — инструмент для планирования проектов и распределения времени команды в одном месте.
• Gallery — инструмент для совместной работы, позволяющий загружать дизайнерские работы, получать отзывы и отслеживать изменения.
• HiveDesk — автоматическое отслеживание времени для удаленных сотрудников со скриншотами. Упрощает мониторинг производительности удаленных сотрудников и управление проектами.
• Jira — инструмент разработки программного обеспечения, используемый гибкими командами.
• Jitsi — мультиплатформенная система видеоконференций с открытым исходным кодом, которую можно установить или использовать на их серверах.
• Keybase — бесплатное приложение для совместной работы с встроенным сквозным шифрованием чатов, обменом файлами, git-репозиториями и другими функциями.
• Lumeer — простой визуальный инструмент для планирования, организации и отслеживания чего угодно, где угодно и когда угодно.
• Mattermost — гибкая платформа обмена сообщениями с открытым исходным кодом, соответствующая строгим стандартам конфиденциальности и безопасности.
• Milanote — простой в использовании инструмент для организации идей и проектов в виде визуальных досок.
• Mixed — инструмент для совместной работы и рисования в режиме реального времени для распределенных команд.
• Moqhub — быстрый онлайн-инструмент для проверки креативных проектов. Получайте отзывы по изображениям и PDF.
• MURAL — визуально мыслите и сотрудничайте где угодно и когда угодно.
• Nextcloud — платформа для совместной работы с открытым исходным кодом, включающая файлы, канбан-доски, чаты и звонки, календарь и многое другое.
• Notion — пишите, планируйте, сотрудничайте и организуйте свою работу. Notion — всё, что вам нужно, в одном инструменте.
• ProofHub — единое место для всех ваших проектов, команд и коммуникаций.
• RealtimeBoard (Miro) — платформа для совместной работы кросс-функциональных команд, ранее известная как Miro.
• Slack — хаб для совместной работы, независимо от типа вашей работы. Это место, где происходят разговоры, принимаются решения и всегда доступна информация.
• Sunsama — красиво оформленный менеджер задач для команд, объединяющий задачи из Trello/Jira/Asana в единую календарную систему.
• Taskade — простая, увлекательная и предназначенная для удаленных команд платформа для повышения производительности. Taskade синхронизируется в реальном времени на вебе, мобильных устройствах и настольных компьютерах.
• Trello — веб-приложение для управления проектами, которое позволяет организовывать и расставлять приоритеты для ваших проектов весело, гибко и эффективно.
• Witeboard — простой в использовании онлайн-доска для совместной работы в реальном времени.
• Workzone — простое и мощное программное обеспечение для управления проектами.
• Wrike — онлайн-программное обеспечение для управления проектами, предоставляющее полный контроль над задачами.
• Zenkit — инструмент для планирования встреч, отслеживания прогресса проектов и мозгового штурма новых идей.
• zipBoard — онлайн-инструмент для визуального отслеживания ошибок и аннотирования веб-сайтов.
• Zulip — сочетает оперативность чатов в реальном времени с моделью тредов электронной почты, помогая сосредоточиться на важных обсуждениях и игнорировать несущественные.

You can also have design collaboration into InVision Freehand tool.

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

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

• BrandColors — крупнейшая коллекция официальных цветовых кодов брендов.
• Calcolor — веб-инструмент для управления цветовыми палитрами, предлагающий новый способ взаимодействия с цифровыми цветами.
• Chroma — бесплатное веб-приложение, которое позволяет определить цвет.
• Color — создавайте цветовые схемы с помощью цветового круга или просматривайте тысячи цветовых комбинаций от сообщества Color. Разработано Adobe.
• Color by Cloudflare — инструмент для предварительного просмотра палитр с элементами пользовательского интерфейса, циклического просмотра доступных цветовых комбинаций и создания палитр вручную, через URL-импорт или генеративно.
• Color Deck — коллекция палитр цветов, основанная на HSL. Инструмент также является open-source.
• Color Hexa — бесплатный инструмент для получения информации о любом цвете и генерации соответствующих цветовых палитр для дизайнов.
• Color Hex Picker — инструмент для определения названия любого цвета из изображения. Также предоставляет HEX-код и RGB-значение цвета.
• Color Hunt — бесплатная и открытая платформа для вдохновения цветами с тысячами модных цветовых палитр, отобранных вручную.
• ColorKit — инструмент для смешивания цветов и генерации оттенков и полуоттенков цветов.
• Color Leap — перенеситесь во времени и посмотрите цвета истории.
• Colorpicker — полноценный инструмент для манипуляции цветами с открытым исходным кодом и функцией выбора цвета.
• ColorSlurp — универсальный инструмент для работы с цветами, который повышает продуктивность дизайнеров и разработчиков.
• ColorsWall — место для хранения или генерации цветовых палитр.
• Colorwise — поиск цветовых палитр самых популярных продуктов на Product Hunt.
• Colour Cafe — вдохновение цветами на Instagram с подбором современной цветовой палитры.
• Colourcode — онлайн-инструмент для дизайнеров, который позволяет легко и интуитивно комбинировать цвета.
• Coolors — супербыстрый генератор цветовых схем.
• Culrs — продуманно созданные и удобные цветовые палитры.
• Geenes — инструмент для создания гармоничных цветовых тем с экспортом кода и файлов Sketch.
• Image Color Picker — инструмент выбора цвета из изображения и генератор цветовых схем.
• Instant Eyedropper — минималистичный инструмент пипетки для Windows, поддерживающий несколько цветовых форматов для дизайнеров и разработчиков.
• Just Color Picker — бесплатный портативный автономный инструмент для выбора и редактирования цветов.
• Khroma — инструмент на базе ИИ для генерации цветовых палитр на основе ваших предпочтений.
• Material Colors Native — цветовая палитра дизайна Material от Google в формате приложения для macOS.
• Material Design Palette Generator — получение идеальных цветовых палитр дизайна Material из любого HEX-кода.
• Paletton — дизайнерский инструмент для создания цветовых комбинаций, которые хорошо работают вместе.
• Picular — сверхбыстрый генератор основных цветов, использующий поиск изображений Google.
• Pigment — генератор цветовых палитр с бесчисленными цветовыми конфигурациями, предлагаемыми приложением.
• Pikka — инструмент для выбора цвета и генерации цветовых схем для macOS.
• React Color — коллекция инструментов для выбора цвета из Sketch, Photoshop и Chrome. Бесплатный и с открытым исходным кодом.
• Sip — лучший способ собирать, организовывать и делиться цветами. Глобальный инструмент пипетки для macOS.
• Skala Color — поддерживает множество форматов, охватывающих всё, что может понадобиться для разработки веба, iOS, Android и macOS.
• Swatches — приложение для iOS, которое позволяет собирать, исследовать и делиться цветами, которые вдохновляют вас в повседневной жизни.
• Tint & Shade Generator — отображает оттенки и полутона заданного цвета HEX с шагом в 10%.
• Viz Palette — инструмент выбора цвета для визуализации данных.

Вы также можете создавать цветовые палитры с помощью Leonardo, который упоминается в разделе Инструменты доступности.

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

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

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

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

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

• Avocode — открывайте дизайны без использования инструментов для проектирования. Экспортируйте изображения без подготовки слоев. Кликайте на слои, чтобы получить код.
• Flawless App — инструмент для сравнения ожидаемого дизайна с реальным приложением прямо в iOS Simulator (полезен для дизайнеров, работающих с Xcode, или мобильных разработчиков).
• Inspect — подготовка дизайнов для разработки. Создан Invision.
• Sketch Measure — плагин для Sketch, который добавляет аннотации расстояний и размеров элементов.
• Specctr — в случае, если вы разрабатываете пользовательский интерфейс в Photoshop, Illustrator или InDesign, этот инструмент создаёт аннотации с размерами элементов.
• Sympli — автоматическая передача спецификаций и ресурсов из Sketch, Photoshop и Adobe XD. Интегрируется с Jira, Xcode и Android Studio.
• Zeplin — передавайте дизайны и гайды по стилям с точными спецификациями, ресурсами и сниппетами кода автоматически.

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

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

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

• Behance — онлайн-платформа для демонстрации и поиска креативных работ.
• CodeMyUI — тщательно подобранная коллекция вдохновения для веб-дизайна и пользовательского интерфейса с фрагментами кода.
• Collect UI — платформа для ежедневного вдохновения, собранного из Daily UI и других источников. Основана на работах Dribbble, включает 14419 отобранных дизайнов.
• Creative Portfolios — подборка самых креативных портфолио, созданных дизайнерами и разработчиками.
• Design Hunt — ежедневная коллекция лучших продуктов, приложений и вдохновения для всех творческих людей.
• Dribbble — онлайн-сообщество для демонстрации работ пользователей. Отличный ресурс для вдохновения.
• Ficture — архив использования шрифтов, который вдохновляет.
• Inspiration UI — сообщество, предоставляющее лучшие дизайнерские ресурсы для создателей веб-контента.
• Hover States — демонстрация выдающихся работ на переднем крае цифровой культуры для творческого сообщества.
• Httpster — источник вдохновения, демонстрирующий крутые сайты, созданные людьми со всего мира.
• H69.Design — коллекции лендингов и бесплатные ресурсы для дизайнеров.
• Lapa Ninja — вдохновение дизайном лендингов со всего интернета. 1800+ примеров лендингов, ежедневно обновляемых.
• Mobile Patterns — библиотека вдохновения для дизайна, включающая лучшие UI/UX паттерны (iOS и Android).
• Mobbin — изучение мобильных паттернов дизайна популярных приложений. Исследуйте распространенные пользовательские потоки, такие как онбординг, регистрация и вход в систему, основные функции и многое другое.
• One Page Love — коллекция красивых и уникальных одностраничных сайтов для вдохновения в веб-дизайне.
• Owwly — дом для цифровых продуктов, созданных с любовью к дизайну.
• Page Flows — видео и скриншоты пользовательских потоков для вдохновения. Откройте для себя паттерны дизайна для более чем 160 различных задач.
• pttrns — паттерны дизайна для популярных мобильных приложений.
• Really Good Emails — более 4,150 отобранных дизайнов электронных писем.
• ReallyGoodUX — скриншоты и примеры отличного UX из реальных мобильных и веб-продуктов. Исследуйте лучшие примеры UX, включая онбординги и пошаговые инструкции.
• Saas Landing Page — откройте лучшие примеры лендингов, созданных ведущими SaaS-компаниями, и получите идеи и вдохновение для вашего следующего проекта.
• Saas Pages — коллекция лучших лендингов с акцентом на копирайтинг и дизайн.
• The Design Team — комиксы о команде дизайнеров стартапа из Силиконовой долины.
• Typewolf — помогает дизайнерам выбрать идеальные сочетания шрифтов для их следующих проектов.
• UI Garage — универсальный ресурс для дизайнеров, разработчиков и маркетологов, чтобы найти вдохновение, инструменты и лучшие ресурсы.
• UI Sources — более 500+ взаимодействий из лучших дизайнерских и высокодоходных приложений в App Store.
• UI Recipes — еженедельные 15-минутные уроки по дизайну пользовательского интерфейса из лучших приложений.
• UX Archive — исследуйте более 400 пользовательских потоков в 120 мобильных приложениях. Изучайте задачи, такие как бронирование, вход в систему, онбординг, покупки, поиск и многое другое.
• Waveguide — банк знаний о дизайне с тысячами примеров мобильных приложений, лендингов, eCommerce, CX/UX паттернов.
• Web Design Museum — более 1,200 тщательно отобранных веб-сайтов, демонстрирующих тренды веб-дизайна с 1994 по 2006 годы.

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

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

• Cabana — премиальная дизайн-система для Sketch, которая помогает создавать удивительные продукты быстрее, чем когда-либо.
• Catalog — живой гайд по стилю для цифровых продуктов, объединяющий документацию по дизайну с реальными работающими компонентами.
• Design System Manager — менеджер дизайн-систем от Invision.
• DSK — сокращение от "Design System Kit" — рабочее пространство для совместного создания дизайн-систем.
• EOS Design System — система с открытым исходным кодом, настраиваемая, построенная на Bootstrap, следуя концепции Atomic Design.
• Eva Design System — настраиваемая дизайн-система, доступная для Sketch с библиотеками компонентов для мобильных и веб-платформ.
• Frontify — создавайте графические руководства, библиотеки паттернов и дизайн-системы.
• Interplay — объедините дизайн и разработку вокруг единого источника истины. Инструмент пока недоступен для широкой публики (бета).
• Lingo — создавайте общую библиотеку ресурсов с вашей командой.
• Lucid — инструмент для создания, управления и обмена дизайн-системами. От простой библиотеки компонентов до детального описания стилей.
• Modulz — проектируйте, создавайте, документируйте и публикуйте свою дизайн-систему без написания кода.
• Prime Design System Kit — включает шаблоны устройств, диаграммы, UI-набор и даже набор иллюстраций.
• Specify — инструмент для создания, масштабирования и поддержки дизайн-системы.
• Storybook — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular.
• Symbol Design System — дизайн-система для Sketch на основе атомарных элементов.
• Toolabs — инструмент для проектирования, прототипирования и разработки дизайн-систем и компонентов. Пока недоступен для широкой публики, но вы можете подать заявку на ранний доступ.
• Zeroheight — гайды по стилю, создаваемые дизайнерами, расширяемые разработчиками и редактируемые всеми.

Дизайн в код

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

• Anima — веб-приложение с плагином для Sketch, которое конвертирует Sketch в HTML.
• Blocs — быстрый, простой в использовании и мощный визуальный инструмент веб-дизайна, позволяющий создавать адаптивные сайты без написания кода.
• Bootstrap Studio — мощный инструмент веб-дизайна для создания адаптивных сайтов с использованием фреймворка Bootstrap.
• Draftbit — визуально проектируйте и создавайте мобильные приложения прямо из вашего браузера.
• EasyLogic Studio — фантастический инструмент дизайна css+svg, который также конвертируется в код.
• Grapedrop — создавайте компоненты, веб-проекты и публикуйте их мгновенно в интернете с помощью простого редактора.
• Mobirise — автономное программное обеспечение для создания сайтов с функцией drag-and-drop, основанное на Bootstrap 3/4 и AMP.
• PageCloud — самый быстрый и настраиваемый конструктор сайтов, позволяющий любому создать идеальный сайт.
• PaintCode — приложение для векторной графики, которое мгновенно конвертирует рисунки в код Swift, Objective-C, JavaScript или Java.
• Pinegrow — профессиональный визуальный редактор для CSS Grid, Bootstrap 4 и 3, Foundation, адаптивного дизайна, HTML и CSS.
• px.div — качественный инструмент создания сайтов для разработчиков и дизайнеров.
• Readymag — визуально приятный инструмент для веб-дизайна, от лендингов до мультимедийных лонгридов, презентаций и портфолио.
• Sparkle — самый простой способ создать настоящий сайт: без кода и сложных терминов.
• STUDIO — создавайте с нуля, сотрудничайте в реальном времени и публикуйте сайты.
• Supernova Studio — импортируйте дизайны из Sketch и конвертируйте их в код для Android, iOS или React Native.
• Tilda — создавайте сайт, лендинг или интернет-магазин бесплатно с помощью модулей Tilda и публикуйте в тот же день.
• Wix — самый простой и многофункциональный конструктор сайтов, позволяющий создать уникальный сайт.
• Webflow — создавайте адаптивные сайты прямо в браузере, затем хостите у нас или экспортируйте код для размещения где угодно.

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

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

• Abstract — платформа для команд дизайнеров, позволяющая версионировать, управлять и совместно работать с файлами Sketch.
• Folio — простая система контроля версий для дизайнерских команд, основанная на Git.
• Kactus — контроль версий для дизайна без необходимости менять используемые инструменты. Управляйте изменениями, документируйте работу и поддерживайте синхронность команды.
• Plant — приложение для Mac и плагин Sketch, предоставляющие полный контроль версий для дизайнеров и команд.
• Relay for Figma — Relay передает ваши последние активы из Figma напрямую в кодовую базу (еще не выпущен).
• Versions — инструмент контроля версий для дизайнеров с функциями визуального сравнения, слияния и разрешения конфликтов. Работает с GitHub, Bitbucket, GitLab и Azure DevOps.

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

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

• Blisk — предоставляет рабочее пространство для разработки и тестирования современных веб-приложений в два раза быстрее.
• Firefox Developer Edition — разработческая версия браузера Firefox.
• Litmus — платформа для создания email-кампаний, которая, среди прочего, позволяет увидеть, как HTML-письма будут отображаться в различных почтовых клиентах.
• Polypane — браузер, созданный с нуля для разработки и тестирования сайтов и приложений.
• Storybook — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. Делает процесс создания потрясающих пользовательских интерфейсов организованным и эффективным.
• Styleguidist — изолированная среда разработки компонентов React с живым гайдом по стилям.

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

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

• Amplitude — поймите своих пользователей, быстро создавайте лучшие продуктовые впечатления и развивайте свой бизнес.
• Chalkmark — повышайте конверсию клиентов и успех выполнения задач, получая быстрые отзывы о дизайне до его реализации.
• Fathom — предоставляет простую и полезную статистику сайта без отслеживания или хранения персональных данных ваших пользователей.
• FullStory — приложение, которое собирает все данные о взаимодействии клиентов с вашим продуктом на одной мощной и удобной платформе.
• Google Analytics — измеряйте ROI вашей рекламы и отслеживайте сайты и приложения.
• Heap — автоматически фиксируйте каждое взаимодействие в вебе, на мобильных устройствах и в облаке, а затем анализируйте данные ретроспективно без написания кода.
• Heatly — бесплатный инструмент тепловых карт для лучшего понимания пользовательского опыта на сайте.
• Hotjar — посмотрите, как посетители используют ваш сайт, и собирайте отзывы пользователей.
• Inspectlet — записывайте видео сессий ваших посетителей, чтобы видеть всё, что они делают на сайте.
• LiveSession — аналитика воспроизведения пользовательских сессий высокого качества.
• LogRocket — увидьте, что делают пользователи на вашем сайте, что поможет быстрее воспроизводить баги и устранять проблемы.
• Mixpanel — получите инсайты по всем данным, ориентированным на пользователей, чтобы принимать более умные решения и действовать быстрее, основываясь на том, как клиенты используют ваш продукт или сайт.
• Mouseflow — записывайте перемещения курсора мыши.
• Pendo — измеряйте и улучшайте клиентский опыт внутри приложений.
• Smartlook — воспроизведение сессий пользователей и аналитика вовлеченности.
• Usabilla — создавайте клиентоориентированный опыт, задавая правильные вопросы в нужное время.

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

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

• BeFonts — приличная коллекция бесплатных шрифтов.
• Behance Free Fonts — список бесплатных шрифтов, загруженных на Behance.
• DaFont — архив шрифтов, доступных для бесплатного скачивания. Сортировка по алфавиту, стилю, автору или популярности.
• Emotype — позволяет легко находить шрифты на основе эмоций, которые вы хотите передать на своем сайте.
• Fontbase — простой инструмент для управления шрифтами.
• FontFabric — красивый интерфейс и хорошая коллекция шрифтов.
• Fontface Ninja — расширение для браузера, которое позволяет определить шрифты, используемые на любом сайте.
• FontPair — простой инструмент, помогающий сочетать шрифты Google.
• Fontown — типографический инструмент с постоянно растущим каталогом шрифтов, упрощающий рабочий процесс дизайнеров.
• Fonts — тысячи красивых шрифтов от Adobe.
• Fonts Arena — сайт о типографике с качественными бесплатными шрифтами, исследованиями, бесплатными альтернативами премиум-шрифтам и новостями.
• FontGet — разнообразие шрифтов, аккуратно отсортированных по тегам.
• FontSelf — расширение для Illustrator и Photoshop CC, позволяющее превратить любой текст в шрифт OpenType за считанные минуты!
• FontSpark — простой инструмент для быстрого поиска лучших шрифтов для проектов.
• Font Squirrel — скачивайте бесплатные шрифты из широких коллекций.
• Google Fonts — делает веб красивее, быстрее и открытее благодаря отличной типографике.
• Google Webfonts Helper — удобный способ размещения шрифтов Google на собственном сервере. Бесплатно и с открытым исходным кодом.
• LostType — первая типографика с подходом "плати сколько хочешь".
• Measure — измеряйте длину строк текста с этим расширением для Chrome.
• RightFont — приложение для управления шрифтами, помогает просматривать, синхронизировать, устанавливать и организовывать шрифты через iCloud, Dropbox или Google Drive.
• Sans Forgetica — шрифт, который помогает лучше запоминать учебные заметки.
• Size Calculator — рассчитывает воспринимаемый размер текста с учетом расстояния просмотра и физического размера типографики.
• Typeface — менеджер шрифтов, который улучшает рабочий процесс дизайна с помощью живых превью шрифтов и гибкой системы тегов.
• Wakamai Fondue — инструмент, отвечающий на вопрос "что умеет мой шрифт?".
• Web Font Preview — предварительный просмотр пар шрифтов Google с компонентами и шаблонами сайтов.
• Webfont — создавайте и управляйте пользовательскими SVG-иконками-шрифтами, создавая общую библиотеку значков.
• WordMarkIt — отображает написанные вами слова/фразы всеми шрифтами, которые уже установлены на вашем компьютере.

Вы также можете управлять шрифтами с помощью Specify, который упоминается в разделе Дизайн-системы.

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

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

• Blend — создавайте и настраивайте красивые CSS3 градиенты.
• Colorffy — получайте CSS, изображения, превью интерфейсов или создавайте собственные градиенты.
• Colors & Fonts — библиотека цветов, градиентов и шрифтов, отобранная для цифровых дизайнеров и веб-разработчиков.
• ColorSpace — идеальная цветовая палитра для вашего следующего проекта! Генерируйте красивые цветовые схемы.
• ColorSpark — помогает дизайнерам находить уникальные цвета и яркие градиенты.
• Cool Backgrounds — изучите тщательно отобранную коллекцию крутых фонов, которые вы можете добавить на блоги, сайты.
• CoolHue — отобранная палитра градиентов для вашего следующего потрясающего проекта.
• CSS Gradient — бесплатный инструмент генерации CSS-градиентов, который позволяет создавать красочные градиенты.
• Egg Gradients — коллекция оттенков 12 разных цветов.
• Grabient — красивый и простой интерфейс для генерации веб-градиентов.
• Gradienta — многокрасочные CSS-градиенты, JPG-загрузки, 100% бесплатно!
• GradientsList — крупнейшая краудсорсинговая коллекция градиентов с ежедневными добавлениями пользователей через Gradients Maker для iOS.
• Gradient Generator — инструмент, который генерирует ступенчатые градиенты между двумя цветами.
• Gradient Hunt — бесплатная открытая платформа для вдохновения цветами с тысячами модных ручных градиентов.
• Gradients Guru — изображения фонов в режиме смешивания и красивые градиенты для вашего интерфейса.
• HtmlColours — узнайте, как легко и красиво создавать градиенты с этим генератором градиентов.
• UI Gradients — тщательно отобранная коллекция красивых цветовых градиентов для дизайнеров и разработчиков.
• Web Gradients — бесплатная коллекция из 180 линейных градиентов, которые можно использовать как фоны для контента на любом участке вашего сайта.

Вы также можете создавать и проверять градиенты с помощью Leonardo, который упоминается в разделе Инструменты доступности.

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

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

• Animaticons — растущая коллекция красивых анимированных GIF-иконок высокого разрешения, которые можно настроить.
• CoreUI Icons — премиум набор бесплатных иконок в SVG, Webfont и растровых форматах.
• Digital Nomad Icons — набор иконок и эмодзи в стиле digital nomad. 25 иконок высокого разрешения.
• Essential Glyphs — идеально подходящие иконки для любых размеров.
• Feather Icons — каждая иконка разработана на сетке 24x24 с акцентом на простоту, согласованность и читаемость.
• Flaticon — более 1 593 000 векторных иконок в SVG, PSD, PNG, EPS форматах или как иконный шрифт.
• Font Awesome — самый популярный набор иконок и инструментов для веба, также с открытым исходным кодом.
• Fontello — инструмент для создания собственных шрифтов с иконками, также с открытым исходным кодом.
• Freepik — коллекция эксклюзивных бесплатных ресурсов и всех графических элементов, необходимых для ваших проектов.
• Iconscout — высококачественные иконки, иллюстрации и стоковые фото в одном месте.
• Iconfinder — маркетплейс векторных иконок (SVG). Наборы иконок доступны в формате IconJar.
• IconJar — храните все ваши иконки в одном менеджере.
• Iconmonstr — более 4412 бесплатных иконок в 305 коллекциях. Большой и постоянно растущий ресурс.
• Iconset — бесплатный, кроссплатформенный и быстрый менеджер SVG-иконок для Mac и Windows.
• Icon Store — библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами.
• ICONSVG — инструмент для упрощения поиска и генерации стандартных иконок для вашего проекта.
• Icons8 — бесплатные иконки в стиле iOS, Android и Windows.
• Ikonate — настройка, регулировка и загрузка бесплатных векторных иконок.
• illustrio — умная библиотека иконок. Создавайте что-то великое с полностью настраиваемыми иконками.
• Ionicons — красиво разработанные иконки с открытым исходным кодом.
• Material Design Icons — бесплатные иконки в стиле Material Design, созданные благодаря вкладу сообщества.
• Material Icons Library — бесплатная коллекция более 1000 иконок для популярных графических инструментов.
• Motion — бесплатный и простой редактор анимации иконок.
• Norde Source — приложение для Mac, Windows и Linux для раскраски и настройки набора иконок под ваш бренд.
• Noun Project — иконки для всего.
• Nucleo — приложение для Mac и Windows для сбора, настройки и экспорта всех ваших иконок.
• Orion Icons — векторные SVG-иконки с продвинутым интерактивным веб-приложением.
• Simple Icons — бесплатные SVG-иконки для популярных брендов. Просто нажмите на нужную иконку, и загрузка начнется автоматически.
• Share Icon — более 300 000 бесплатных иконок для скачивания в различных форматах.
• Streamline Emoji — бесплатная коллекция из 850+ векторных эмодзи. Стиль вдохновлен японским стилем "Каваий" (милый).
• Svgsus — инструмент управления SVG-иконками.
• SVG Colorizer — инструмент для автоматического изменения всей цветовой палитры любого набора SVG-иконок, сохраняя оттенки, блики и тени.
• SVGRepo — сайт с более чем 300 000 SVG-векторов и иконок.
• Tilda Icons — скачивайте бесплатные иконки для лендингов. Более 700 векторных иконок, собранных в 43 наборах для бизнеса.
• Twemoji — проект Twitter с открытым исходным кодом, предоставляющий эмодзи для любых нужд.
• Unicons — более 1000 пиксельно-идеальных векторных иконок для вашего проекта.
• VisualPharm — бесплатные SVG-иконки с супербыстрым поиском. Создано для веселья командой Icons8.
• Xicons — бесплатные векторные иконки, которые обновляются каждые 10 дней.
• Zwicon — вручную созданный набор иконок для вашего проекта.

Вы также можете управлять иконками с помощью Specify, который упоминается в разделе Дизайн-системы.

Иллюстрации

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

• Absurd Design — бесплатные сюрреалистические иллюстрации для ваших проектов.
• Blobmaker — создавайте векторные иллюстрации blob прямо в браузере с возможностью настройки цвета, сложности и контраста.
• Blush — создавайте, смешивайте и настраивайте иллюстрации, созданные художниками со всего мира.
• Humaaans — бесплатная библиотека для создания иллюстраций с людьми путем комбинирования элементов.
• Illustration by Pngtree — более 13142 профессионально разработанных иллюстраций различных стилей.
• IRA Design — создавайте потрясающие иллюстрации, используя нарисованные от руки компоненты, выбор из 5 градиентов, а также форматы ai., svg. или png.
• JoeSchmoe — коллекция иллюстрированных аватаров для разработчиков и дизайнеров, идеально подходит в качестве заполнителей или для живых сайтов.
• LukaszAdam — бесплатные векторные иллюстрации и иконки. Доступны для личного и коммерческого использования.
• ManyPixels — бесплатные иллюстрации без роялти для усиления ваших проектов.
• Mega Doodles Pack — большой векторный набор с нарисованными от руки doodles для презентаций, соцсетей, блогов и других целей.
• Open Doodles — набор бесплатных иллюстраций от Pablo Stanley, поддерживающий концепцию открытого дизайна. Вы можете копировать, редактировать, ремиксовать, делиться или переделывать эти изображения для любых целей без ограничений. Лицензия CC0.
• Ouch — векторные иллюстрации для улучшения ваших проектов. Бесплатно для личного и коммерческого использования.
• Squircley — всё, что вам нужно, чтобы начать создавать красивые SVG squircle.
• unDraw — коллекция красивых SVG-изображений.
• Wannapik — коллекция бесплатных иллюстраций, векторных изображений, фотографий и анимаций для любых целей.

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

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

• DYNO Mapper — организуйте проекты веб-сайтов с помощью визуальных карт сайта, инвентаризации контента, аудита контента, планирования контента, ежедневного отслеживания ключевых слов и тестирования доступности веб-сайта.
• Octopus.do — визуальный инструмент для создания карт сайта. Создавайте структуру сайта в реальном времени и быстро делитесь ею для совместной работы с вашей командой или клиентами.
• OmniGraffle — создавайте красивые диаграммы и дизайны с помощью этого мощного и простого в использовании приложения.
• OptimalSort — инструмент для сортировки карточек, который помогает понять, как люди группируют контент в вашем интерфейсе.
• Treejack — загрузите предложенную карту сайта, чтобы увидеть, как пользователь будет перемещаться по вашему сайту.
• WriteMaps — создавайте карты сайта, которые впечатляют! Планируйте страницы и контент для вашего следующего проекта веб-сайта визуально, увлекательно и красиво.

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

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

• Design Evo — a large collection of vector icons and shapes help you design custom logos easily.
• Free Logo Design — create stunning professional logos in seconds.
• Graphic Springs — 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 — offers affordable professional custom logo design and brand design services.
• Logojoy — uses artificial intelligence to instantly generate unique logo ideas for your business.
• Logo Lab — put your logo to the test with automated visual experiments.
• Logo Maker — allows you to make a free logo within seconds. Start with a blank canvas, add text and an icon, and then customize.
• Logo Maker by Designhill — generate 1000s of unique logos in only few minutes, without design expertise.
• Logo Makr — design a logo for free, choose from hundreds of fonts and icons, then save a logo on the computer.
• Logo My Way — choose from 600 custom logo designs from creative designers worldwide.
• Logo Package Express — export and package dozens of logo variations and file types for your clients automatically in under 5 minutes.
• Logo Rank — upload your logo to see how it rates on a number of objective measures.
• Wizlogo — create a logo with a simple and affordable tool backed by professional designers.

You can also do your logo design with Adobe Photoshop, GIMP, Inkscape, Krita and Vectr which are mentioned in UI design tools.

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

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 — online graphic design application mainly focused on product mockups.
• Cleanmock — create stunning mockups using the latest device frames like iPhone & custom backgrounds.
• Craftwork Design — free and premium high-quality digital products that make your work faster and easier.
• Device Shots — a tool that helps you create beautiful device mockups with the screenshot of your website or mobile application, for free.
• Devices by Facebook — images and Sketch files of popular devices.
• Dimmy.club — device mockup generator for your website and app screenshots.
• Frrames — Frrames mockups is perfectly crafted responsive windows mockups for your ideal presentation.
• Lstore Graphics — free and premium mockups, UI/UX tools, scene creators for busy designers.
• Mediamodifier — create impressive product mockups in seconds.
• Mockflow — the quickest way to brainstorm user interface ideas.
• Mockup World — tons of free and legal, fully layered, easily customizable photo realistic PSDs.
• Mockups For Free — free design resources, PSD files for graphic and web designers.
• Mockuuups — drag-and-drop tool for creating beautiful app previews or any marketing materials.
• Mock Video — instantly create mockups by adding a device frame to your videos.
• Moqups — helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.
• Original Mockups — high-quality mockups for Photoshop that make your designs stand out.
• Overframe for Mac — record your prototype & app with device frame overlay.
• PixelBuddha — free and premium high-quality resources for web designers and developers.
• Ramotion Store — carefully crafted Apple and Android mockups for Sketch and Photoshop.
• Rotato — animated 3D mockups for your app designs.
• SceneLab — create realistic mockups and customized brand designs online.
• Screely — quickly frame web page designs into a minimalist browser window.
• ScreenSpace — 3D devices videos for motion designer.
• Screenzy — instantly transform your pictures and screenshots into beautiful mockups ready to be shared on social media.
• Screeener — use this app to insert a bunch of images to a keynote file, using the mockup you choose.
• Smartmockups — create stunning product mockups with just a few clicks.
• shotsnapp — create beautiful device mockup presentation for your digital app and website design.
• The Mockup Club — a directory of the best free design mockups for Photoshop, Sketch, Figma and InVision Studio.
• Threed — generate custom 3D Device Mockups in your Browser.
• UI Store Design — 200+ free handpicked design resources for Sketch, Figma, Adobe XD, InVision Studio, Photoshop, Illustrator CC.
• UI8 — Design Freebies — epic design freebies to get you started.
• Vector Mockups Library — free collection of presentation Mockups for Sketch, Figma & Photoshop.

Инструменты 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 — build and host web applications without having to write code or hire a team of engineers.
• Carrd — simple, free, fully responsive one-page sites for pretty much anything.
• Coda — 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.
• Kodika.io — build iOS apps with Kodika no code app builder for Mac & iPad, capable of creating powerful apps with Drag & Drop.
• PageXL — a simple one-page website builder for quickly creating landing pages and online stores.
• Remove.bg — a free service to remove the background of any photo.
• Retool — gives you building blocks and you can build tools much faster.
• sheet2api — create an API from Google Sheets or Excel Online Spreadsheets, no coding required.
• Sheet2Site — create a website from Google Sheets without writing code.
• Shopify — one platform with all the e-commerce and point of sale features you need to start, run, and grow your business.
• Thunkable — a drag-and-drop tool for anyone to build native mobile apps.
• UserGuiding — 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 — animated sprite editor & pixel art tool.
• Data Pixels — create pixel art programmatically. Includes DataPixels.js and Data Pixels Playground desktop app.
• Draw! — open-source and free web-based pixel art and GIF editor.
• Grafx2 — a bitmap paint program inspired by the Amiga programs ​Deluxe Paint and Brilliance. Specialized in 256-color drawing.
• GraphicsGale — has many pixel-art specific features, including palette control, selectively erasing colors, and tools for quickly replacing and trying new colors.
• Goya — a pixel-art editor built on ClojureScript and Om.
• Make 8 bit art — an open source and in-browser pixel art drawing tool.
• Piskel — online editor for animated sprites & pixel art.
• Pixel art to CSS — pixel art animation and drawing web app powered by React.
• Poxi — a flat pixel art editor.
• Pyxel Edit — a pixel art editor designed to make it fun and easy to make tilesets, levels and animations.

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

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 — create living prototypes with code components. It's also open source.
• Axure RP — wireframing, prototyping, collaboration & specifications generation.
• SAP Build — a complete set of cloud‑based tools to design and build your enterprise app.
• Creo — prototyping, code exporting and built-in mobile app builder.
• Drama — prototype, animate and design in a single Mac app.
• InVision — prototyping, collaboration & workflow platform.
• Flinto — a Mac app for creating interactive and animated prototypes of app designs.
• Framer X — a tool to visually design realistic interactive prototypes.
• 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" to verify design concepts).
• Lightwell — visual tool and SDK to build mobile layouts and animations that translate into native iOS elements.
• Marvel App — the collaborative design platform. Wireframe, prototype, design online and create design specs in one place.
• Maze — a tool for designers and developers that gives analytical results with actionable KPIs for your Invision prototypes.
• Origami — 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.
• Pencil — prototyping tool with many built-in components that people can easily install and use to create mockups in popular desktop platforms.
• Principle — makes it easy to design animated and interactive user interfaces.
• ProtoPie — piece hi-fi interactions together, build sensor-aided prototypes and share your amazing creations in a matter of minutes.
• Proto.io — a tool to create fully-interactive high-fidelity prototypes that look and work exactly as your app should.
• Prott — an easy to use and intuitive prototyping tool, promotes team collaboration.
• Uizard — transform wireframes into high-fidelity interactive prototypes, customize style systems, export to Sketch, export to HTML/CSS code.
• Useberry — 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 — build prototypes that feel real, with powers of code components, logic, states, and design systems.

You can also do prototyping with Figma, Adobe XD, Sketch and InVision Studio, which are mentioned in the UI Design Tools section.

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

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 — a screen recorder that comes with a full-blown built-in editor.
• CleanShot — capture your screen in a superior way with a built-in annotation tool and Quick Access Overlay.
• CloudApp — record videos, webcam, annotate screenshots, create GIFs.
• Collabshot — take and collaborate on screenshots in real-time with your coworkers.
• Gifox — delightful GIF recording and sharing app.
• Giphy Capture — capture parts of your screen and export as gif or mp4.
• Greenshot — take a screenshot of a selected region, window or fullscreen.
• Kap — open source screen recorder with options to export to GIF, MP4, WebM and APNG.
• Lighshot — taking quick captures of your screen.
• Monosnap — create screenshots, annotate and upload them to the cloud.
• OBS — open source software for video recording and live streaming.
• Quicktime — a video player that you can use to record your screen.
• ScreenFlow — video editing and screen recording software for Mac.
• Screenie — filter and search through images, change screenshot filetypes.
• ScreenshotAPI.net — create pixel-perfect full page website screenshots.
• ScreenToGif — record a gif of part of the screen. Only available for Windows.
• ShareX — screen capture, file sharing, and productivity tool.
• Shotty — 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.
• Snagit — capture images and video, create GIFs, annotate, edit, and share.
• Snipping Tool — Windows free screenshot tool.
• Snappy — takes quick shots and organizes them for you into collections.
• Teampaper Snap — allows you to take screenshots of a selected area.

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

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 — offers responsive pre-design templates. These will automatically adapt their layout to any screen size and include neat features.
• Sketchsheets — an open source project dedicated to providing free printable templates of the latest devices and platforms for wireframing designs.
• Sneakpeekit — print note taking grids and devices frames.
• Sketchize — just choose any of the sketch sheets that fits your project, print it out and start to sketch your dream.

You can also do some sketching with Sketch mentioned in UI design tools.

Дизайн для 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 — create stunning designs for work, life, and play—even if you're not a design expert!
• Crello — create own designs: posts, covers, graphics, and posters using the best software on the web.
• Pablo by Buffer — design engaging images for your social media posts.
• Remove.bg — a free service to remove the background of any photo.
• SocialSizes — provides designers with the best sizes to use for image and video content on social media.
• Stencil — 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 — UI Sound packs for apps, games, and any product.
• AudioJungle — 836,206 tracks and sounds from the community of musicians and sound engineers.
• Bensound — download creative commons music, royalty free music for free and use it in your project.
• Freesound — a collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds.
• Fugue Music — download free background music for your videos.
• Max — connect objects with virtual patch cords to create interactive sounds, graphics, and custom effects.
• Reaper — import any audio and MIDI, synthesize, sample, compose, arrange, edit, mix, and master songs or any other audio projects.
• Sonic Pi — a live coding music synth.
• SoundKit — a UI sound library designed for all of your interface needs.
• UI Sounds — learn sound design for user interfaces by example.
• Wistia Music — download some free background tracks to add energy and emotion to your videos.
• WOWA — download royalty-free music for YouTube videos, podcasts, and apps. No copyright CC0. Music inspired by Unsplash.
• YouTube Audio Library — browse and download free music for your project.

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

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 — free stock photos for websites and commercial use.
• Duotone — free duotone images to use in any project, or make custom duotone images.
• Death to Stock — paid-for stock photo service with a mailing list for occasional free packs, and a focus on not looking like stock photography.
• FoodiesFeed — thousands of beautiful realistic free food pictures in high resolution.
• FreePhotos.cc — free stock photos for commercial use.
• Freestocks.org — high quality photos all released under Creative Commons CC0.
• Gratisography — a collection of free high-resolution pictures.
• Jay Mantri — 7 new photos released every Thursday under the Creative Commons CC0.
• Kaboom Pics — stock photos including abstract, city/architecture, fashion, food & landscapes.
• LandingStock — a collection of free images for your landing page.
• Life of Pix — free high-resolution photos, created by the LEEROY team.
• LoremPixel — an API that serves stock photos at specified sizes and categories. Great for placeholder/user-generated content.
• Magdeleine — free high-quality stock photos for your inspiration.
• Moose — don't search for stock photos, create them.
• MMT STock — high-resolution photos provided by Jeffrey Betts with Creative Commons CC0.
• New Old Stock — a vintage photos from the public archives free of known copyright restrictions.
• Pexels — an aggregate of many free stock photo resources.
• Photo Creator — a free tool for creating realistic stock photos on your demand.
• Picography — free stock photos by Dave Meier and various other photographers with Creative Commons CC0.
• Pixabay — sharing photos, illustrations, vector graphics, and film footage under a proprietary license.
• Picjumbo — a collection of totally free photos for your commercial & personal works.
• Pngtree — millions of PNG images, backgrounds and vectors for free download.
• pxhere — free image stock.
• Reshot — a massive library of handpicked free stock photos you won’t find elsewhere.
• ShotStash — thousands of free high-resolution CC0 photos and videos.
• SkitterPhoto — a wide variety of stock photos and are released under Creative Commons CC0.
• Startup Stock Photos — free photos for startups, bloggers and publishers.
• StockSnap.io — a large selection of free stock photos and high-resolution images.
• StyledStock — free feminine stock photography for every woman entrepreneur.
• The Gender Spectrum Collection — a stock photo library featuring images of trans and non-binary models that go beyond the clichés.
• UI Faces — an aggregator that indexes various free avatar sources that you can use in your design mockups.
• Unsplash — stock photos free to use.
• #WOCinTech Chat Photos — free stock photos of women technologists of diverse backgrounds.
• Zoommy — helps you find awesome free stock photos for your creative product or inspiration.

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

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 — beautiful, free stock video footage for your homepage.
• Life of Vids — provides free stock videos, clips, and loops.
• Mazwai — great collection of free creative commons HD video clips & footages.
• Mixkit — extraordinary Free HD videos. For you to use, completely free of charge.
• Motion Places — a curated collection of beautiful footage you can use for your projects.
• Pixabay — it has more than 1.5 million royalty-free stock videos and photos shared by their community of creators.
• Pexels Videos — makes it easy to find free stock footage for your website, promo video or anything else.
• Videezy — download millions of free and premium stock footage and motion graphics instantly.
• Videvo — offers a large selection of HD video clips, motion graphics, and free stock footage.
• 123RF — over 100,000 daily new content & 24/7 online support.

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

• Design Better — discover the best practices, stories, and insights from the world’s top design teams and leaders.
• Design+Code — complete courses about the best tools and design systems.
• DesignerUp — a collection of self-paced courses and mentorship to help you master Product Design (UI/UX).
• Figma Training — a crash course all about Figma, for UI designers.
• Interaction Design Foundation — a website that is the industry well known for learning UX/UI skills.
• Laws of UX — a collection of the maxims and principles that designers can consider when building user interfaces.
• Learn UX — a complete approach to learning UI & UX Tools.
• Sketch Master — a collection of video training courses for professionals learning Sketch.

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 — design, prototype, and share any user experience, from websites and mobile apps to voice interactions.
• Affinity Designer — a vector graphics editor for macOS, iOS, and Microsoft Windows.
• Akira — native Linux App for UI and UX Design built in Vala and Gtk.
• Botmock — design, prototype, and test voice and text conversational apps. Supports multiple platforms.
• CleverBrush — a browser-based online vector editor and digital publishing tool which is possible to integrate to the page as JS component.
• Figma — a design tool based in the browser, that allows to design and prototype with real-time collaboration.
• GIMP — a free & open-source imaging and graphic design software.
• Gravit — a free vector design app, available for macOS, Windows, Linux, ChromeOS, and browser.
• Illustrator — create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile. Made by Adobe.
• Inkscape — 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.
• Krita — a free painting and graphic design software considered a good alternative to Adobe Photoshop.
• 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.
• Photopea — a free browser-based graphic design app alternative to Photoshop.
• Photoshop — imaging and graphic design software developed by Adobe.
• Pixelixe — 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.
• Sketch — a design toolkit built for Mac.
• Studio — combines design, prototyping, and collaboration into one harmonious workflow. Made by InVision.
• TwitPile — creates tiled images out of Twitter followers, interests and lists.
• Vectr — a simple web and desktop cross-platform tool to create vector graphics easily and intuitively.
• Voiceflow — 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 — a free online diagram software for making flowcharts, process diagrams, org charts, UML, ER, and network diagrams.
• Flowmapp — an online tool for creating sitemaps and user flows that helps you to effectively design and plan user experience.
• Google Drawings — create diagrams and charts, for free; all within Google Docs.
• Lucidchart — an online tool for creating diagrams, flow charts, sitemaps, and more.
• MindNode — a mind mapping app that makes brainstorming simple and easy.
• NinjaMock — wireframe and user flow online tool. Link your views and create logic flow prototype. All with freehand visual style.
• OmniGraffle — a diagramming and digital illustration application for macOS and iOS.
• Overflow — turn your designs into playable user flow diagrams that tell a story.
• Sketch.systems — ui and flow design with interactive state machines.
• SQUID — create beautiful User Flows in Sketch in just minutes.
• WebSequenceDiagrams — a simple webapp to work out object interactions arranged in time sequence.
• Whimsical — easy to create flow charts, wireframes and sticky notes.
• Wireflow — free, online and open source tool for creating beautiful user flow prototypes.
• XMind: ZEN — a brainstorming and mind mapping tool that can switch between outline and tree-chart. Link topics with other charts.
• yEd — free desktop tool for making diagrams. Usable for the wide variety of use cases. Auto-layout helps a lot when making flowcharts.

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

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 — a web-based scheduling tool that helps to schedule meetings quickly through the integration with calendars online.
• Calendly — Calendly helps you schedule meetings without the back-and-forth emails.
• Crowd Signal — collect, organize and analyze data from a variety of sources, including social media and mobile.
• Doodle — online calendar tool for time management, and coordinating events, meetings, appointments
• Evolt — create user personas, storyboards, business model canvas, experience maps, brainstorming boards and moodboards in a clean and modern way.
• Feedback Lite — collect high quality customer feedback using Voice of Customer solutions designed to improve your website performance and boost customer engagement.
• GoToMeeting — a simple, extraordinarily powerful web conferencing service.
• Handrail — end-to-end, collaborative user research and insights platform — plan research, collect and analyze data, and share your findings.
• JotForm — create online forms, get an email for each response, collect data.
• Lookback — remotely run, record, and take notes for your user research sessions, either with a live product or with a prototype.
• MineTime — a free calendar app with smart scheduling and time analytics features.
• Reflector — Reflector is a basic screen-mirroring and recording tool so you can conduct user tests remotely, using any existing wireframes or prototypes.
• Reframer — a research tool that helps your team to capture, tag (code) and identify patterns in qualitative data across multiple research participants.
• Sticktail — a platform for centralizing, finding and sharing user insights within your organization.
• Survey Monkey — online survey tool to capture the voices and opinions of the people who matter most to you.
• Typeform — use a simple drag-and-drop interface to create any kind of form, survey, or questionnaire, and even take credit card payments.
• Wufoo — сreate forms, collect data and payments and automate your workflows.
• YesInsights — simple one question and NPS surveys to improve your business.
• UserBit — 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 — recruit participants from a community of 125,000 members based on profession, demographics, geography and more, for any kind of research.
• Zoom — it's one of the best online meeting services.

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

• LogRocket — a tool to record what users do on your site so you can reproduce bugs and fix issues faster.
• PixelSnap — the magical way to measure everything on your screen.
• VisBug — on any webpage: visually debug, quick inspect style and a11y, change CSS visually, click and drag elements around, and much more.
• 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 — effortless UI sketching. Capture your ideas, collaborate on your designs, get everyone on board.
• BLOKK — a font for quick mock-ups and wireframing for clients who do not understand Latin.
• CSS Grid Builder — 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.
• Gliffy — a tool for creating the framework, UML diagrams, flowcharts, wireframes and more.
• Gridzzly — the easiest way to create custom grid paper printable.
• Layoutit — a interface builder for CSS Grid & Bootstrap that wants to be the kick-off for your front-end developments.
• Pidoco — software that lets you quickly create click-through wireframes and fully interactive UX prototypes.
• Wireframe.cc — a simple wireframing tool that doesn't get in your way.
• Whimsical Wireframes — instant wireframing at your fingertips. Rich library of configurable elements like buttons, inputs, checkboxes.
• 1200px Grid System — 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 — integrated CAD, CAM, and CAE software. Unify design, engineering, and manufacturing into a single platform.
• Blender — free and open-source 3D Creation Software.
• FreeCAD — a free and open-source multiplatform 3D parametric modeler.
• MatterControl — a free, open-source, all-in-one software package that lets you design, slice, organize and manage your 3D prints.
• Maya — make animations, environments, motion graphics, virtual reality, and character creation, all in one toolset.
• Onshape — a modeling software specially oriented to design technical and spare parts, was the first full-cloud 3D software created.
• OpenSCAD — a software for creating solid 3D CAD objects.
• Rhino — a curve-based 3D modeling software that creates mathematically-precise models of 3D surfaces.
• SketchUp — 3D design software that truly makes 3D modeling for everyone, with a simple to learn yet robust toolset.
• Tinkercad — a free, easy-to-use app for 3D design, electronics, and coding.
• Vectary — create beautiful 3D models with our drag and drop 3D modeling tool.
• 3D Slash — 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 & Valia Havruliyk 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. Thanks for making this project awesome :)