1154 lines
206 KiB
Markdown
1154 lines
206 KiB
Markdown
<div class="hidden-in-page">
|
||
|
||
# Awesome Design Tools
|
||
|
||
- [Awesome Design Plugins](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Plugins.md)
|
||
- [Awesome Design Conferences](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Conferences.md)
|
||
- [Awesome Design UI Kits](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-UI-Kits.md)
|
||
|
||
<p align="center">
|
||
<a href="https://flawlessapp.io/designtools">
|
||
<img src="https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/Awesome-design-tools-cover.png" alt="Awesome-Design-Tools"/>
|
||
</a>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img alt="awesome" src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" />
|
||
</p>
|
||
|
||
## Как использовать
|
||
|
||
- Сейчас вы находитесь в разделе **Awesome Design Tools**, если вам нужны плагины — перейдите к [Awesome Design Plugins](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Plugins.md).
|
||
- Чтобы найти инструмент, воспользуйтесь оглавлением или поиском по ключевому слову (например, "анимация", "градиент").
|
||
|
||
</div>
|
||
|
||
<header class='header header-top -blue'></header>
|
||
<div class="nav">
|
||
|
||
## Оглавление
|
||
|
||
- [Доступность](#accessibility-tools)
|
||
- [Анимация](#animation-tools)
|
||
- [Дополненная реальность](#augmented-reality)
|
||
- [Совместная работа](#collaboration-tools)
|
||
- [Выбор цвета](#color-picker-tools)
|
||
- [Обратная связь по дизайну](#design-feedback-tools)
|
||
- [Передача дизайна](#design-handoff-tools)
|
||
- [Вдохновение](#design-inspiration)
|
||
- [Системы дизайна](#design-system-tools)
|
||
- ["Дизайн в код"](#design-to-code-tools)
|
||
- [Контроль версий](#design-version-control)
|
||
- [Инструменты разработки](#development-tools)
|
||
- [Мониторинг пользовательского опыта](#experience-monitoring)
|
||
- [Работа со шрифтами](#font-tools)
|
||
- [Создание градиентов](#gradient-tools)
|
||
- [Работа с иконками](#icons-tools)
|
||
- [Иллюстрации](#illustrations)
|
||
- [Информационная архитектура](#information-architecture)
|
||
- [Дизайн логотипов](#logo-design)
|
||
- [Mockup макеты](#mockup-tools)
|
||
- [No-code](#no-code-tools)
|
||
- [Пиксель Арт](#pixel-art-tools)
|
||
- [Прототипирование](#prototyping-tools)
|
||
- [Создание скриншотов](#screenshot-software)
|
||
- [Наброски](#sketching-tools)
|
||
- [Дизайн для SMM](#smm-design-tools)
|
||
- [Звуковой дизайн](#sound-design)
|
||
- [Cтоковые фотогафии](#stock-photos-tools)
|
||
- [Стоковые видео](#stock-videos)
|
||
- [Изучение дизайна](#tools-for-learning-design)
|
||
- [UI-дизайн](#ui-design-tools)
|
||
- [Построение пользовательских потоков](#user-flow-tools)
|
||
- [Пользовательские исследования](#user-research-tools)
|
||
- [Визуальная отладка](#visual-debugging-tools)
|
||
- [Создание вайрфреймов](#wireframing-tools)
|
||
- [3D-моделирование](#three-d-modeling-software)
|
||
|
||
</div>
|
||
|
||
<main>
|
||
|
||
<article id="accessibility-tools">
|
||
|
||
---
|
||
|
||
### Инструменты доступности
|
||
|
||
Доступность — это практика создания веб-сайтов и приложений, которые могут использовать все люди, включая людей с нарушениями зрения, моторики, слуха, речи или когнитивных функций. Здесь вы найдете инструменты для обеспечения веб-доступности, инструменты для тестирования доступности и приложения для доступности как для разработчиков, так и для дизайнеров:
|
||
|
||
- [**A11ygator**](https://a11ygator.chialab.io) — Веб-инструмент для анализа сайтов на соответствие правилам WCAG. Также доступен в виде расширения для браузера Google Chrome и Twitter-бота.  [](https://github.com/chialab/a11ygator-app)
|
||
- [**Accessibility Insights**](https://accessibilityinsights.io/) — помогает разработчикам быстро находить и устранять проблемы доступности. 
|
||
- [**Accessible Palette Builder**](https://toolness.github.io/accessible-color-matrix/) — прототип на основе Elm, помогающий дизайнерам создавать доступные цветовые палитры.  [](https://github.com/toolness/accessible-color-matrix)
|
||
- [**AChecker**](https://achecker.ca) — веб-приложение для тестирования доступности, используемое для оценки HTML-контента на наличие проблем с доступностью. 
|
||
- [**ANDI**](https://www.ssa.gov/accessibility/andi/help/install.html) — инструмент тестирования доступности веб-контента (букмарклет). Автоматически обнаруживает проблемы с доступностью, предлагает улучшения и проверяет соответствие стандарту 508.  [](https://github.com/SSAgov/ANDI)
|
||
- [**Axe**](https://www.deque.com/axe/) — движок доступности, предназначенный для работы во всех современных браузерах и с любыми инструментами, фреймворками, библиотеками и средами. Это инструмент автоматического тестирования доступности для разработчиков.  [](https://github.com/dequelabs/axe-core)
|
||
- [**ColorBox**](http://www.colorbox.io/) — веб-приложение, которое алгоритмически создает доступные цветовые системы. Разработано командой Lyft Design. 
|
||
- [**Colorable**](https://colorable.jxnblk.com/) — бесплатный веб-инструмент для проверки контраста. 
|
||
- [**Color Oracle**](https://colororacle.org/) — бесплатный симулятор дальтонизма. 
|
||
- [**Contrast**](https://usecontrast.com/) — приложение для macOS для дизайнеров и разработчиков, предоставляющее быстрый доступ к коэффициентам контраста цветов по стандартам WCAG. 
|
||
- [**Contrast Checker**](https://contrast-checker.glitch.me/) — помогает проверить контраст между фоном элемента и самой страницей. 
|
||
- [**Contraste**](https://contrasteapp.com/) — приложение для проверки доступности текста в соответствии с Руководством по доступности веб-контента (WCAG). 
|
||
- [**Inclusive Design**](https://www.microsoft.com/design/inclusive/) — методология и набор инструментов, предоставленных командой Microsoft.
|
||
- [**Hex Naw**](https://hexnaw.com/) — помогает протестировать целые цветовые системы на контрастность и доступность. 
|
||
- [**Leonardo**](https://leonardocolor.io) — генератор цветовых палитр по заданному коэффициенту контраста WCAG. Открытый веб-инструмент и npm-модуль для дизайнеров и инженеров. Разработан Adobe.   
|
||
- [**PA11Y**](http://pa11y.org/) — инструмент тестирования доступности для выявления проблем с веб-страницами. Запускает HTML CodeSniffer из командной строки для программных отчетов о доступности. Это инструмент для разработчиков.  
|
||
- [**Sim Daltonism**](https://michelf.ca/projects/sim-daltonism/) — симулятор дальтонизма для macOS и iOS, позволяющий визуализировать цвета так, как они воспринимаются при различных типах дальтонизма.  [](https://www.github.com/michelf/sim-daltonism/)
|
||
- [**Stark**](https://getstark.co/) — платный плагин для Sketch, позволяющий моделировать различные типы дальтонизма. 
|
||
- [**Toptal’s Color Filter**](https://www.toptal.com/designers/colorfilter) — позволяет протестировать ваш сайт и показывает, как люди с различными видами дальтонизма увидят ваши страницы. 
|
||
- [**tota11y**](http://khan.github.io/tota11y/) — инструмент визуализации доступности. Интересный факт: в названии инструмента вы видите "a11y". Это сокращение от accessibility, где "a" сопровождается 11 буквами, а затем "y". 
|
||
- [**WAVE**](https://wave.webaim.org/) — позволяет оценить веб-контент на наличие проблем с доступностью прямо в Chrome и Firefox. Это проверяющий доступность веб-контента. 
|
||
- [**90 Examples**](http://clrs.cc/a11y/) — бесплатная коллекция доступных цветовых тем. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Функции проверки доступности также доступны в VisBug из категории [Визуальная отладка](#visual-debugging-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="animation-tools">
|
||
|
||
---
|
||
|
||
### Инструменты анимации
|
||
|
||
<br>
|
||
|
||
Анимации помогают пользователям легко и дружелюбно взаимодействовать с продуктом. Живой интерактивный интерфейс создает у пользователей чувство удовлетворения благодаря мгновенной обратной связи и эмоциональному взаимодействию. Эти бесплатные и платные инструменты разработаны, чтобы упростить создание анимации. Если вы планируете создавать анимационные переходы, микроинтеракции или анимации на основе прокрутки, ознакомьтесь с этими инструментами:
|
||
|
||
- [**After Effects**](https://www.adobe.com/products/aftereffects.html) — цифровые визуальные эффекты, анимация и приложение для композитинга, разработанное Adobe.
|
||
- [**BeatFlyer**](https://beatflyer.com/) — веб-инструмент, который позволяет быстро создавать зацикленные и яркие анимации из многослойных композиций.
|
||
- [**Dokyu Motion**](https://3dmybusiness.com) — упрощает дизайн анимации в After Effects, чтобы любой редактор мог рассказывать истории, которые не останутся незамеченными.
|
||
- [**Flare**](https://www.2dimensions.com/about-flare) — мощный инструмент для дизайна и анимации, позволяющий дизайнерам и разработчикам создавать анимации для приложений или игр. 
|
||
- [**Flow**](https://createwithflow.com/) — профессиональный инструмент анимации для Sketch-дизайнов, который также экспортирует готовый код для iOS, веба или SVG-файлов. 
|
||
- [**GSAP**](https://greensock.com/) — набор инструментов для сценарных HTML5-анимаций с высокой производительностью во всех основных браузерах. 
|
||
- [**Haiku Animator**](https://www.haikuforteams.com/) — анимация на основе ключевых кадров, соединяющая инструменты пользовательского интерфейса с кодом, который легко использовать разработчикам.
|
||
- [**Keyshape**](https://www.keyshapeapp.com/) — инструмент 2D-анимации, позволяющий экспортировать анимации в формате SVG. 
|
||
- [**Kite Compositor**](https://kiteapp.co/) — мощное приложение для анимации и прототипирования для Mac и iOS. 
|
||
- [**LightBox**](https://uselightbox.com/) — пакет для создания 2D-анимации с рисованными кадрами.  
|
||
- [**Lottie**](https://airbnb.io/lottie/) — мобильная библиотека для Android и iOS, которая парсит анимации из Adobe After Effects, экспортированные как JSON с помощью Bodymovin, и рендерит их нативно на мобильных устройствах и в вебе. 
|
||
- [**Mantra**](https://jeremyckahn.github.io/mantra/) — инструмент для анимации на основе временной шкалы в браузере. 
|
||
- [**Meteoritic**](https://meteoritic.io/) — библиотека анимационных эффектов для iOS и Android. Выберите из множества анимаций, подходящих для различных стилей приложений. 
|
||
- [**Naker.Back**](https://app.naker.io/back) — интегрируйте интерактивный фон бесплатно, чтобы привлечь больше внимания к вашему сайту. 
|
||
- [**Naker.Story**](https://naker.io/naker-story.html) — сделайте ваш веб-контент интерактивным, чтобы увлечь посетителей как никогда ранее благодаря 3D. 
|
||
- [**OFFEO**](https://offeo.com/) — онлайн-инструмент для создания видеороликов для малого бизнеса, чтобы создавать рекламные ролики на уровне крупных брендов без большого бюджета. 
|
||
- [**StorySwag**](https://storyswag.co) — создавайте стильные анимированные посты для Instagram и Facebook всего в несколько нажатий прямо с вашего телефона.  
|
||
- [**Spirit**](https://spiritapp.io/) — инструмент анимации, который помогает создавать и управлять анимациями в реальном времени в браузере. 
|
||
- [**Stylie**](https://jeremyckahn.github.io/stylie/) — графический инструмент для создания CSS3-анимаций в браузере. 
|
||
- [**Tumult Hype**](https://tumult.com/hype/) — приложение для создания анимаций и интерактивного HTML5-контента для macOS. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Доступные приложения и инструменты для анимации UI и UX также включают Drama, Principle, Framer, Invision Studio и Flinto.
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="augmented-reality">
|
||
|
||
---
|
||
|
||
### Дополненная реальность
|
||
|
||
Дополненная реальность (AR) — это технология, которая улучшает наш реальный мир, добавляя к нему слой цифровой информации. Использование AR растет с каждым днем, с появлением десятков новых AR-приложений, инструментов разработки и фреймворков. В этом разделе собраны различные инструменты дополненной реальности для создания, проецирования и прототипирования приложений, ориентированных на AR:
|
||
|
||
- [**Daqri**](https://daqri.com/) — предоставляет профессиональный уровень дополненной реальности для рабочих процессов, накладывая цифровую информацию на физическую среду.
|
||
- [**EasyAR**](https://www.easyar.com/) — мобильное приложение и движок дополненной реальности, упрощающий работу с AR.
|
||
- [**HP Reveal**](https://www.hpreveal.com/) — добавляет ценность к печатному контенту с помощью визуальной интерактивности.
|
||
- [**Layar**](https://www.layar.com/) — помогает находить различные элементы на основе технологий дополненной реальности.
|
||
- [**Lens Studio**](https://lensstudio.snapchat.com/) — создавайте, публикуйте и делитесь своими AR-эффектами для Snapchat с кодом или без него. 
|
||
- [**Lightform**](https://lightform.com/) — инструмент для проектирования дополненной реальности через проекцию.
|
||
- [**Spark AR Studio**](https://www.sparkar.com) — создавайте AR-эффекты для Instagram без написания кода.  
|
||
- [**Torch**](https://www.torch.app/) — облачное приложение для 3D-дизайна и прототипирования, ориентированное на мобильную AR.  
|
||
- [**Unity**](https://unity.com/) — создавайте качественные 3D и 2D игры, а также проекты для VR/AR, и разворачивайте их на мобильных и настольных устройствах.
|
||
- [**Vectary**](https://www.vectary.com/) — создавайте 3D и AR для вашего веб-сайта.
|
||
- [**Vuforia**](https://www.vuforia.com/) — SDK для мобильных устройств, позволяющий создавать приложения дополненной реальности.
|
||
- [**Wikitude**](https://www.wikitude.com/) — расширяет возможности приложений для iOS, Android и умных очков с помощью отслеживания изображений и объектов, мгновенного отслеживания (SLAM), Geo AR и других функций.
|
||
|
||
</article>
|
||
|
||
<article id="collaboration-tools">
|
||
|
||
---
|
||
|
||
### Инструменты для совместной работы
|
||
|
||
Ищете инструменты для гибкой совместной работы в области дизайна и разработки? Отличная идея, ведь такие инструменты упрощают жизнь дизайнеров и разработчиков, экономят время и повышают производительность. Ну, в эпоху Slack вы и так всё это знаете. Здесь вы найдете лучшие инструменты для совместной работы продуктовых команд:
|
||
|
||
- [Airtable](https://airtable.com/) — часть таблицы, часть базы данных, и полностью гибкий инструмент, который команды используют для организации своей работы так, как им удобно.
|
||
- [Asana](https://asana.com/) — платформа управления работой, которую команды используют, чтобы сосредоточиться на целях, проектах и ежедневных задачах для развития бизнеса.
|
||
- [Basecamp](https://basecamp.com/) — набор инструментов для управления проектами, предназначенный для организации сотрудников, распределения задач и отслеживания прогресса в одном месте.
|
||
- [Freedcamp](https://freedcamp.com/) — самый инновационный способ управления проектами, полностью бесплатный... навсегда.
|
||
- [Droplr](https://droplr.com/) — создание скриншотов, обмен файлами и записи экрана для объяснения идей.
|
||
- [Excalidraw](https://excalidraw.com/) — инструмент для рисования диаграмм с эффектом ручного наброска.  
|
||
- [Filestage](https://filestage.io/) — программное обеспечение для гибкого утверждения контента, помогающее рецензировать видео, дизайн и документы с клиентами и коллегами.
|
||
- [Float](https://www.float.com/) — инструмент для планирования проектов и распределения времени команды в одном месте.
|
||
- [Gallery](https://material.io/tools/gallery/) — инструмент для совместной работы, позволяющий загружать дизайнерские работы, получать отзывы и отслеживать изменения.  
|
||
- [HiveDesk](https://www.hivedesk.com/) — автоматическое отслеживание времени для удаленных сотрудников со скриншотами. Упрощает мониторинг производительности удаленных сотрудников и управление проектами.
|
||
- [Jira](https://www.atlassian.com/software/jira) — инструмент разработки программного обеспечения, используемый гибкими командами.
|
||
- [Jitsi](https://jitsi.org/) — мультиплатформенная система видеоконференций с открытым исходным кодом, которую можно установить или использовать на их серверах.  
|
||
- [Keybase](https://keybase.io) — бесплатное приложение для совместной работы с встроенным сквозным шифрованием чатов, обменом файлами, git-репозиториями и другими функциями.  
|
||
- [Lumeer](https://www.lumeer.io/) — простой визуальный инструмент для планирования, организации и отслеживания чего угодно, где угодно и когда угодно. 
|
||
- [Mattermost](https://mattermost.com/) — гибкая платформа обмена сообщениями с открытым исходным кодом, соответствующая строгим стандартам конфиденциальности и безопасности. 
|
||
- [Milanote](https://milanote.com/) — простой в использовании инструмент для организации идей и проектов в виде визуальных досок.
|
||
- [Mixed](https://mixed.io) — инструмент для совместной работы и рисования в режиме реального времени для распределенных команд. 
|
||
- [Moqhub](https://moqhub.com) — быстрый онлайн-инструмент для проверки креативных проектов. Получайте отзывы по изображениям и PDF.
|
||
- [MURAL](https://mural.co/) — визуально мыслите и сотрудничайте где угодно и когда угодно.
|
||
- [Nextcloud](https://nextcloud.com) — платформа для совместной работы с открытым исходным кодом, включающая файлы, канбан-доски, чаты и звонки, календарь и многое другое.  
|
||
- [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/) — простой в использовании онлайн-доска для совместной работы в реальном времени. 
|
||
- [Workzone](https://www.workzone.com/) — простое и мощное программное обеспечение для управления проектами.
|
||
- [Wrike](https://www.wrike.com/) — онлайн-программное обеспечение для управления проектами, предоставляющее полный контроль над задачами.
|
||
- [Zenkit](https://zenkit.com/) — инструмент для планирования встреч, отслеживания прогресса проектов и мозгового штурма новых идей.
|
||
- [zipBoard](https://zipboard.co) — онлайн-инструмент для визуального отслеживания ошибок и аннотирования веб-сайтов.
|
||
- [Zulip](https://zulipchat.com/) — сочетает оперативность чатов в реальном времени с моделью тредов электронной почты, помогая сосредоточиться на важных обсуждениях и игнорировать несущественные. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
You can also have design collaboration into [InVision Freehand](https://www.invisionapp.com/feature/freehand) tool.
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="color-picker-tools">
|
||
|
||
---
|
||
|
||
### Инструменты для выбора цвета
|
||
|
||
Если вы ищете инструмент пипетки, идентификатор цвета или захват цвета, обратите внимание на этот раздел. С помощью указанных здесь инструментов для выбора цвета вы сможете создавать новые цветовые комбинации и находить отличные варианты. Почти все эти инструменты бесплатны:
|
||
|
||
- [BrandColors](https://brandcolors.net/) — крупнейшая коллекция официальных цветовых кодов брендов. 
|
||
- [Calcolor](https://calcolor.co) — веб-инструмент для управления цветовыми палитрами, предлагающий новый способ взаимодействия с цифровыми цветами. 
|
||
- [Chroma](https://chroma.spencerhamm.com/) — бесплатное веб-приложение, которое позволяет определить цвет. 
|
||
- [Color](https://color.adobe.com/explore/?filter=most-popular&time=month) — создавайте цветовые схемы с помощью цветового круга или просматривайте тысячи цветовых комбинаций от сообщества Color. Разработано Adobe. 
|
||
- [Color by Cloudflare](https://cloudflare.design/color/) — инструмент для предварительного просмотра палитр с элементами пользовательского интерфейса, циклического просмотра доступных цветовых комбинаций и создания палитр вручную, через URL-импорт или генеративно.
|
||
- [Color Deck](https://color.obscuredetour.com/) — коллекция палитр цветов, основанная на HSL. Инструмент также является open-source.  [](https://github.com/obscuredetour/color-deck)
|
||
- [Color Hexa](https://www.colorhexa.com/) — бесплатный инструмент для получения информации о любом цвете и генерации соответствующих цветовых палитр для дизайнов.
|
||
- [Color Hex Picker](http://colorhexpicker.com/) — инструмент для определения названия любого цвета из изображения. Также предоставляет HEX-код и RGB-значение цвета. 
|
||
- [Color Hunt](https://colorhunt.co/) — бесплатная и открытая платформа для вдохновения цветами с тысячами модных цветовых палитр, отобранных вручную. 
|
||
- [ColorKit](https://colorkit.io) — инструмент для смешивания цветов и генерации оттенков и полуоттенков цветов. 
|
||
- [Color Leap](https://colorleap.app) — перенеситесь во времени и посмотрите цвета истории. 
|
||
- [ColorSlurp](http://colorslurp.com/) — универсальный инструмент для работы с цветами, который повышает продуктивность дизайнеров и разработчиков.  
|
||
- [ColorsWall](https://colorswall.com/) — место для хранения или генерации цветовых палитр. 
|
||
- [Colorwise](https://www.colorwise.io/) — поиск цветовых палитр самых популярных продуктов на Product Hunt. 
|
||
- [Colour Cafe](https://www.instagram.com/colours.cafe/) — вдохновение цветами на Instagram с подбором современной цветовой палитры. 
|
||
- [Colourcode](https://colourco.de/) — онлайн-инструмент для дизайнеров, который позволяет легко и интуитивно комбинировать цвета. 
|
||
- [Coolors](https://coolors.co/) — супербыстрый генератор цветовых схем.  
|
||
- [Culrs](https://culrs.com/#/) — продуманно созданные и удобные цветовые палитры. 
|
||
- [Geenes](https://geenes.app) — инструмент для создания гармоничных цветовых тем с экспортом кода и файлов Sketch. 
|
||
- [Image Color Picker](https://image-color.com) — инструмент выбора цвета из изображения и генератор цветовых схем. 
|
||
- [Instant Eyedropper](http://instant-eyedropper.com/) — минималистичный инструмент пипетки для Windows, поддерживающий несколько цветовых форматов для дизайнеров и разработчиков. 
|
||
- [Just Color Picker](http://annystudio.com/software/colorpicker/) — бесплатный портативный автономный инструмент для выбора и редактирования цветов. 
|
||
- [Khroma](http://khroma.co/) — инструмент на базе ИИ для генерации цветовых палитр на основе ваших предпочтений.
|
||
- [Material Colors Native](https://github.com/BafS/Material-Colors-native) — цветовая палитра дизайна Material от Google в формате приложения для macOS.   
|
||
- [Material Design Palette Generator](https://materialpalettes.com/) — получение идеальных цветовых палитр дизайна Material из любого HEX-кода.  
|
||
- [Paletton](https://paletton.com) — дизайнерский инструмент для создания цветовых комбинаций, которые хорошо работают вместе. 
|
||
- [Picular](https://picular.co/) — сверхбыстрый генератор основных цветов, использующий поиск изображений Google. 
|
||
- [Pigment](https://pigment.shapefactory.co/) — генератор цветовых палитр с бесчисленными цветовыми конфигурациями, предлагаемыми приложением. 
|
||
- [Pikka](https://itunes.apple.com/us/app/pikka-color-picker/id1195076754) — инструмент для выбора цвета и генерации цветовых схем для macOS. 
|
||
- [React Color](http://casesandberg.github.io/react-color/) — коллекция инструментов для выбора цвета из Sketch, Photoshop и Chrome. Бесплатный и с открытым исходным кодом.  [](https://github.com/casesandberg/react-color/)
|
||
- [Sip](https://sipapp.io/) — лучший способ собирать, организовывать и делиться цветами. Глобальный инструмент пипетки для macOS. 
|
||
- [Skala Color](https://bjango.com/mac/skalacolor/) — поддерживает множество форматов, охватывающих всё, что может понадобиться для разработки веба, iOS, Android и macOS.  
|
||
- [Swatches](https://swatchesapp.io/) — приложение для iOS, которое позволяет собирать, исследовать и делиться цветами, которые вдохновляют вас в повседневной жизни.  
|
||
- [Tint & Shade Generator](https://maketintsandshades.com/) — отображает оттенки и полутона заданного цвета HEX с шагом в 10%.  
|
||
- [Viz Palette](https://projects.susielu.com/viz-palette) — инструмент выбора цвета для визуализации данных. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете создавать цветовые палитры с помощью Leonardo, который упоминается в разделе [Инструменты доступности](#accessibility-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="design-feedback-tools">
|
||
|
||
---
|
||
|
||
### Инструменты обратной связи по дизайну
|
||
|
||
Как вы предоставляете и получаете обратную связь в процессе разработки? Для многих продуктовых команд этот процесс обычно довольно хаотичен, что приводит к задержкам и потере времени на бесконечные обсуждения. Если вы хотите быстро и структурировано получать обратную связь по проблемам пользовательского интерфейса или визуальным багам — обратите внимание на этот инструмент:
|
||
|
||
- [Flawless Feedback](https://flawlessapp.io/feedback) — просматривайте и аннотируйте приложения для iOS, затем делитесь отзывами в Jira или Trello. 
|
||
- [GoVisually](https://govisually.com) — программное обеспечение для онлайн-проверки, рецензирования и утверждения дизайна.
|
||
<div class="banner banner--yellow">
|
||
|
||
</article>
|
||
|
||
<article id="design-handoff-tools">
|
||
|
||
---
|
||
|
||
### Инструменты передачи дизайна
|
||
|
||
<!-- <div class="hidden-in-page">
|
||
<p align="center">
|
||
<a href="https://adobe.ly/33HVSdf">
|
||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD.png" alt="Abobe XD"/>
|
||
</a>
|
||
</p>
|
||
</div> -->
|
||
|
||
Передача дизайна происходит, когда дизайнеры завершают работу и должны передать свои разработки разработчикам со всеми спецификациями и ресурсами. Инструменты для передачи дизайна позволяют автоматически генерировать гайд по стилю, оставлять комментарии к дизайну, а также инспектировать элементы. Эти инструменты минимизируют догадки и повышают эффективность процесса проектирования.
|
||
|
||
- [Avocode](https://avocode.com) — открывайте дизайны без использования инструментов для проектирования. Экспортируйте изображения без подготовки слоев. Кликайте на слои, чтобы получить код.
|
||
- [Flawless App](https://flawlessapp.io/) — инструмент для сравнения ожидаемого дизайна с реальным приложением прямо в iOS Simulator (полезен для дизайнеров, работающих с Xcode, или мобильных разработчиков). 
|
||
- [Inspect](https://www.invisionapp.com/feature/inspect/) — подготовка дизайнов для разработки. Создан Invision.
|
||
- [Sketch Measure](https://github.com/utom/sketch-measure) — плагин для Sketch, который добавляет аннотации расстояний и размеров элементов.  
|
||
- [Specctr](https://specctr.com) — в случае, если вы разрабатываете пользовательский интерфейс в Photoshop, Illustrator или InDesign, этот инструмент создаёт аннотации с размерами элементов.
|
||
- [Sympli](https://sympli.io) — автоматическая передача спецификаций и ресурсов из Sketch, Photoshop и Adobe XD. Интегрируется с Jira, Xcode и Android Studio.
|
||
- [Zeplin](https://zeplin.io/) — передавайте дизайны и гайды по стилям с точными спецификациями, ресурсами и сниппетами кода автоматически.
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете осуществить передачу дизайна с помощью Relay, который упоминается в разделе [Контроль версий](#design-version-control).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="design-inspiration">
|
||
|
||
---
|
||
|
||
### Вдохновение для дизайна
|
||
|
||
Творческий процесс может быть сложным. Если идеи не приходят сразу, попробуйте найти вдохновение в работах других дизайнеров. Эти сайты с дизайнерским вдохновением предлагают шаблоны дизайна, пользовательские потоки, разметки электронных писем и креативные решения популярных компаний и отличных продуктов:
|
||
|
||
- [Behance](https://www.behance.net/) — онлайн-платформа для демонстрации и поиска креативных работ. 
|
||
- [CodeMyUI](https://codemyui.com/) — тщательно подобранная коллекция вдохновения для веб-дизайна и пользовательского интерфейса с фрагментами кода. 
|
||
- [Collect UI](http://collectui.com/) — платформа для ежедневного вдохновения, собранного из Daily UI и других источников. Основана на работах Dribbble, включает 14419 отобранных дизайнов. 
|
||
- [Creative Portfolios](http://www.creative-portfolios.com/) — подборка самых креативных портфолио, созданных дизайнерами и разработчиками.
|
||
- [Design Hunt](https://itunes.apple.com/us/app/design-hunt/id968588816?mt=8) — ежедневная коллекция лучших продуктов, приложений и вдохновения для всех творческих людей.  
|
||
- [Dribbble](https://dribbble.com/) — онлайн-сообщество для демонстрации работ пользователей. Отличный ресурс для вдохновения.
|
||
- [Ficture](https://ficture.design/) — архив использования шрифтов, который вдохновляет. 
|
||
- [Inspiration UI](http://inspirationui.com/) — сообщество, предоставляющее лучшие дизайнерские ресурсы для создателей веб-контента. 
|
||
- [Hover States](https://hoverstat.es/) — демонстрация выдающихся работ на переднем крае цифровой культуры для творческого сообщества.
|
||
- [Httpster](https://httpster.net/) — источник вдохновения, демонстрирующий крутые сайты, созданные людьми со всего мира. 
|
||
- [H69.Design](https://www.h69.design/) — коллекции лендингов и бесплатные ресурсы для дизайнеров.
|
||
- [Lapa Ninja](https://www.lapa.ninja/) — вдохновение дизайном лендингов со всего интернета. 1800+ примеров лендингов, ежедневно обновляемых.
|
||
- [Mobile Patterns](https://www.mobile-patterns.com/) — библиотека вдохновения для дизайна, включающая лучшие UI/UX паттерны (iOS и Android).
|
||
- [Mobbin](https://mobbin.design/) — изучение мобильных паттернов дизайна популярных приложений. Исследуйте распространенные пользовательские потоки, такие как онбординг, регистрация и вход в систему, основные функции и многое другое. 
|
||
- [One Page Love](https://onepagelove.com/gallery) — коллекция красивых и уникальных одностраничных сайтов для вдохновения в веб-дизайне. 
|
||
- [Owwly](https://owwly.com/feed/inspirations) — дом для цифровых продуктов, созданных с любовью к дизайну.
|
||
- [Page Flows](https://pageflows.com/) — видео и скриншоты пользовательских потоков для вдохновения. Откройте для себя паттерны дизайна для более чем 160 различных задач. 
|
||
- [pttrns](https://pttrns.com/) — паттерны дизайна для популярных мобильных приложений.
|
||
- [Really Good Emails](https://reallygoodemails.com/) — более 4,150 отобранных дизайнов электронных писем. 
|
||
- [ReallyGoodUX](https://www.reallygoodux.io/) — скриншоты и примеры отличного UX из реальных мобильных и веб-продуктов. Исследуйте лучшие примеры UX, включая онбординги и пошаговые инструкции. 
|
||
- [Saas Landing Page](https://saaslandingpage.com/) — откройте лучшие примеры лендингов, созданных ведущими SaaS-компаниями, и получите идеи и вдохновение для вашего следующего проекта. 
|
||
- [Saas Pages](https://saaspages.xyz/) — коллекция лучших лендингов с акцентом на копирайтинг и дизайн. 
|
||
- [The Design Team](https://thedesignteam.io/) — комиксы о команде дизайнеров стартапа из Силиконовой долины.
|
||
- [Typewolf](https://www.typewolf.com/) — помогает дизайнерам выбрать идеальные сочетания шрифтов для их следующих проектов.
|
||
- [UI Garage](https://uigarage.net/) — универсальный ресурс для дизайнеров, разработчиков и маркетологов, чтобы найти вдохновение, инструменты и лучшие ресурсы.
|
||
- [UI Sources](https://www.uisources.com/) — более 500+ взаимодействий из лучших дизайнерских и высокодоходных приложений в App Store. 
|
||
- [UI Recipes](https://uirecipes.com/) — еженедельные 15-минутные уроки по дизайну пользовательского интерфейса из лучших приложений.
|
||
- [UX Archive](http://uxarchive.com/) — исследуйте более 400 пользовательских потоков в 120 мобильных приложениях. Изучайте задачи, такие как бронирование, вход в систему, онбординг, покупки, поиск и многое другое. 
|
||
- [Waveguide](https://www.waveguide.io/) — банк знаний о дизайне с тысячами примеров мобильных приложений, лендингов, eCommerce, CX/UX паттернов.
|
||
- [Web Design Museum](https://www.webdesignmuseum.org/) — более 1,200 тщательно отобранных веб-сайтов, демонстрирующих тренды веб-дизайна с 1994 по 2006 годы.
|
||
|
||
</article>
|
||
|
||
<article id="design-system-tools">
|
||
|
||
---
|
||
|
||
### Дизайн-системы
|
||
|
||
Могу поспорить, вы слышали о дизайн-системах, ведь это довольно модная тема. Дизайн-системы предоставляют последовательные и надежные шаблоны дизайна, чтобы поддерживать синхронизацию между дизайном и разработкой. По сути, это коллекции правил, ограничений и принципов, реализованных в дизайне и коде. Здесь вы найдете инструменты для создания, поддержки и организации вашей дизайн-системы.
|
||
|
||
- [Cabana](https://cabanadesignsystem.com/) — премиальная дизайн-система для Sketch, которая помогает создавать удивительные продукты быстрее, чем когда-либо.
|
||
- [Catalog](https://www.catalog.style/) — живой гайд по стилю для цифровых продуктов, объединяющий документацию по дизайну с реальными работающими компонентами. 
|
||
- [Design System Manager](https://www.invisionapp.com/design-system-manager/) — менеджер дизайн-систем от Invision.
|
||
- [DSK](https://rundsk.com) — сокращение от "Design System Kit" — рабочее пространство для совместного создания дизайн-систем.  
|
||
- [EOS Design System](https://www.eosdesignsystem.com) — система с открытым исходным кодом, настраиваемая, построенная на Bootstrap, следуя концепции Atomic Design. 
|
||
- [Eva Design System](https://eva.design/) — настраиваемая дизайн-система, доступная для Sketch с библиотеками компонентов для мобильных и веб-платформ.  
|
||
- [Frontify](https://frontify.com/) — создавайте графические руководства, библиотеки паттернов и дизайн-системы.
|
||
- [Interplay](https://interplayapp.com/) — объедините дизайн и разработку вокруг единого источника истины. Инструмент пока недоступен для широкой публики (бета).
|
||
- [Lingo](https://www.lingoapp.com/) — создавайте общую библиотеку ресурсов с вашей командой. 
|
||
- [Lucid](https://lucid.style/) — инструмент для создания, управления и обмена дизайн-системами. От простой библиотеки компонентов до детального описания стилей.
|
||
- [Modulz](https://www.modulz.app/) — проектируйте, создавайте, документируйте и публикуйте свою дизайн-систему без написания кода.
|
||
- [Prime Design System Kit](https://www.primedesignsystem.com) — включает шаблоны устройств, диаграммы, UI-набор и даже набор иллюстраций. 
|
||
- [Specify](https://www.specifyapp.com/) — инструмент для создания, масштабирования и поддержки дизайн-системы.
|
||
- [Storybook](https://storybook.js.org/) — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. 
|
||
- [Symbol Design System](https://symboldesign.co/) — дизайн-система для Sketch на основе атомарных элементов.
|
||
- [Toolabs](https://www.toolabs.com/) — инструмент для проектирования, прототипирования и разработки дизайн-систем и компонентов. Пока недоступен для широкой публики, но вы можете подать заявку на ранний доступ.
|
||
- [Zeroheight](https://www.zeroheight.com/) — гайды по стилю, создаваемые дизайнерами, расширяемые разработчиками и редактируемые всеми.
|
||
|
||
</article>
|
||
|
||
<article id="design-to-code-tools">
|
||
|
||
---
|
||
|
||
### Дизайн в код
|
||
|
||
Каждый может научиться разработке, но это требует времени и усилий. Если вам нужен сайт или приложение прямо сейчас, и вы не хотите нанимать разработчика, обратите внимание на конструкторы сайтов. Такие инструменты «дизайн в код» помогут вам быстро и красиво создать портфолио, простой лендинг или приложение.
|
||
|
||
- [Anima](https://www.animaapp.com/) — веб-приложение с плагином для Sketch, которое конвертирует Sketch в HTML. 
|
||
- [Blocs](https://blocsapp.com/) — быстрый, простой в использовании и мощный визуальный инструмент веб-дизайна, позволяющий создавать адаптивные сайты без написания кода. 
|
||
- [Bootstrap Studio](https://bootstrapstudio.io/) — мощный инструмент веб-дизайна для создания адаптивных сайтов с использованием фреймворка Bootstrap.
|
||
- [Draftbit](https://draftbit.com/) — визуально проектируйте и создавайте мобильные приложения прямо из вашего браузера.
|
||
- [EasyLogic Studio](https://www.easylogic.studio/) — фантастический инструмент дизайна css+svg, который также конвертируется в код.  
|
||
- [Grapedrop](https://grapedrop.com/) — создавайте компоненты, веб-проекты и публикуйте их мгновенно в интернете с помощью простого редактора.
|
||
- [Mobirise](https://mobirise.com/) — автономное программное обеспечение для создания сайтов с функцией drag-and-drop, основанное на Bootstrap 3/4 и AMP. 
|
||
- [PageCloud](https://www.pagecloud.com/) — самый быстрый и настраиваемый конструктор сайтов, позволяющий любому создать идеальный сайт.
|
||
- [PaintCode](https://www.paintcodeapp.com) — приложение для векторной графики, которое мгновенно конвертирует рисунки в код Swift, Objective-C, JavaScript или Java. 
|
||
- [Pinegrow](https://pinegrow.com/) — профессиональный визуальный редактор для CSS Grid, Bootstrap 4 и 3, Foundation, адаптивного дизайна, HTML и CSS.
|
||
- [px.div](https://www.pxdiv.com) — качественный инструмент создания сайтов для разработчиков и дизайнеров.
|
||
- [Readymag](https://readymag.com/) — визуально приятный инструмент для веб-дизайна, от лендингов до мультимедийных лонгридов, презентаций и портфолио.
|
||
- [Sparkle](https://sparkleapp.com/) — самый простой способ создать настоящий сайт: без кода и сложных терминов. 
|
||
- [STUDIO](https://studio.design/) — создавайте с нуля, сотрудничайте в реальном времени и публикуйте сайты.
|
||
- [Supernova Studio](https://supernova.io/) — импортируйте дизайны из Sketch и конвертируйте их в код для Android, iOS или React Native.
|
||
- [Tilda](https://tilda.cc/) — создавайте сайт, лендинг или интернет-магазин бесплатно с помощью модулей Tilda и публикуйте в тот же день.
|
||
- [Wix](https://www.wix.com/) — самый простой и многофункциональный конструктор сайтов, позволяющий создать уникальный сайт.
|
||
- [Webflow](https://webflow.com/) — создавайте адаптивные сайты прямо в браузере, затем хостите у нас или экспортируйте код для размещения где угодно.
|
||
|
||
</article>
|
||
|
||
<article id="design-version-control">
|
||
|
||
---
|
||
|
||
### Контроль версий дизайна
|
||
|
||
Разработчики уже давно активно используют инструменты контроля версий, вероятно, начиная с 2005 года (первый релиз Git). Использование системы контроля версий — очевидный выбор для команд разработчиков, в то время как системы контроля версий для дизайнеров появились совсем недавно. Этот рынок быстро развивается, и мы ожидаем увидеть еще больше возможностей в области контроля версий для дизайнеров:
|
||
|
||
- [Abstract](https://www.abstract.com/) — платформа для команд дизайнеров, позволяющая версионировать, управлять и совместно работать с файлами Sketch.
|
||
- [Folio](http://folioformac.com/) — простая система контроля версий для дизайнерских команд, основанная на Git. 
|
||
- [Kactus](https://kactus.io/) — контроль версий для дизайна без необходимости менять используемые инструменты. Управляйте изменениями, документируйте работу и поддерживайте синхронность команды.  
|
||
- [Plant](https://plantapp.io/) — приложение для Mac и плагин Sketch, предоставляющие полный контроль версий для дизайнеров и команд. 
|
||
- [Relay for Figma](https://relay.graphics/) — Relay передает ваши последние активы из Figma напрямую в кодовую базу (еще не выпущен).
|
||
- [Versions](https://versions.sympli.io) — инструмент контроля версий для дизайнеров с функциями визуального сравнения, слияния и разрешения конфликтов. Работает с GitHub, Bitbucket, GitLab и Azure DevOps.
|
||
|
||
</article>
|
||
|
||
<article id="development-tools">
|
||
|
||
---
|
||
|
||
### Инструменты разработки
|
||
|
||
Этот раздел упоминает инструменты разработки и браузеры. Браузеры для разработки включают функции, которые помогают разработчикам и дизайнерам создавать и тестировать сайты и приложения.
|
||
|
||
- [Blisk](https://blisk.io) — предоставляет рабочее пространство для разработки и тестирования современных веб-приложений в два раза быстрее.
|
||
- [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/) — разработческая версия браузера Firefox. 
|
||
- [Litmus](https://litmus.com/) — платформа для создания email-кампаний, которая, среди прочего, позволяет увидеть, как HTML-письма будут отображаться в различных почтовых клиентах.
|
||
- [Polypane](https://polypane.rocks) — браузер, созданный с нуля для разработки и тестирования сайтов и приложений.
|
||
- [Storybook](https://storybook.js.org/) — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. Делает процесс создания потрясающих пользовательских интерфейсов организованным и эффективным.  
|
||
- [Styleguidist](https://github.com/styleguidist/react-styleguidist) — изолированная среда разработки компонентов React с живым гайдом по стилям.  
|
||
|
||
</article>
|
||
|
||
<article id="experience-monitoring">
|
||
|
||
---
|
||
|
||
### Мониторинг пользовательского опыта
|
||
|
||
Слушать пользователей важно, но еще важнее видеть, как они на самом деле используют ваш продукт. Для этого нужно установить различные аналитические инструменты, программное обеспечение для мониторинга опыта и приложения для анализа поведения пользователей. Просто используйте эти аналитические решения, учитывая данные пользователей:
|
||
|
||
- [Amplitude](https://amplitude.com/) — поймите своих пользователей, быстро создавайте лучшие продуктовые впечатления и развивайте свой бизнес.
|
||
- [Chalkmark](https://www.optimalworkshop.com/chalkmark) — повышайте конверсию клиентов и успех выполнения задач, получая быстрые отзывы о дизайне до его реализации.
|
||
- [Fathom](https://usefathom.com/) — предоставляет простую и полезную статистику сайта без отслеживания или хранения персональных данных ваших пользователей.
|
||
- [FullStory](https://www.fullstory.com/) — приложение, которое собирает все данные о взаимодействии клиентов с вашим продуктом на одной мощной и удобной платформе.
|
||
- [Google Analytics](https://analytics.google.com/analytics/web/) — измеряйте ROI вашей рекламы и отслеживайте сайты и приложения. 
|
||
- [Heap](https://heapanalytics.com/) — автоматически фиксируйте каждое взаимодействие в вебе, на мобильных устройствах и в облаке, а затем анализируйте данные ретроспективно без написания кода.
|
||
- [Heatly](https://www.heatlyanalytics.com) — бесплатный инструмент тепловых карт для лучшего понимания пользовательского опыта на сайте. 
|
||
- [Hotjar](https://www.hotjar.com/) — посмотрите, как посетители используют ваш сайт, и собирайте отзывы пользователей.
|
||
- [Inspectlet](https://www.inspectlet.com/) — записывайте видео сессий ваших посетителей, чтобы видеть всё, что они делают на сайте.
|
||
- [LiveSession](https://livesession.io) — аналитика воспроизведения пользовательских сессий высокого качества.
|
||
- [LogRocket](https://www.logrocket.com/) — увидьте, что делают пользователи на вашем сайте, что поможет быстрее воспроизводить баги и устранять проблемы.
|
||
- [Mixpanel](https://mixpanel.com/) — получите инсайты по всем данным, ориентированным на пользователей, чтобы принимать более умные решения и действовать быстрее, основываясь на том, как клиенты используют ваш продукт или сайт.
|
||
- [Mouseflow](https://mouseflow.com/) — записывайте перемещения курсора мыши.
|
||
- [Pendo](https://www.pendo.io/) — измеряйте и улучшайте клиентский опыт внутри приложений.
|
||
- [Smartlook](https://www.smartlook.com) — воспроизведение сессий пользователей и аналитика вовлеченности.
|
||
- [Usabilla](https://usabilla.com) — создавайте клиентоориентированный опыт, задавая правильные вопросы в нужное время.
|
||
|
||
</article>
|
||
|
||
<article id="font-tools">
|
||
|
||
---
|
||
|
||
### Инструменты работы со шрифтами
|
||
|
||
Шрифты часто используются для того, чтобы сделать веб более красивым. Это важнейшая часть любого дизайна. В этом разделе вы найдете генераторы шрифтов и инструменты для поиска шрифтов, которые позволяют управлять ими и работать с ними:
|
||
|
||
- [BeFonts](https://befonts.com/) — приличная коллекция бесплатных шрифтов. 
|
||
- [Behance Free Fonts](https://www.behance.net/search/?search=free%20font) — список бесплатных шрифтов, загруженных на Behance. 
|
||
- [DaFont](https://www.dafont.com/) — архив шрифтов, доступных для бесплатного скачивания. Сортировка по алфавиту, стилю, автору или популярности. 
|
||
- [Emotype](http://emotype.webflow.io/) — позволяет легко находить шрифты на основе эмоций, которые вы хотите передать на своем сайте. 
|
||
- [Fontbase](https://fontba.se/) — простой инструмент для управления шрифтами. 
|
||
- [FontFabric](https://www.fontfabric.com/) — красивый интерфейс и хорошая коллекция шрифтов. 
|
||
- [Fontface Ninja](https://fontface.ninja/) — расширение для браузера, которое позволяет определить шрифты, используемые на любом сайте.
|
||
- [FontPair](https://fontpair.co/) — простой инструмент, помогающий сочетать шрифты Google. 
|
||
- [Fontown](https://www.fontown.com/en) — типографический инструмент с постоянно растущим каталогом шрифтов, упрощающий рабочий процесс дизайнеров.
|
||
- [Fonts](https://fonts.adobe.com/fonts) — тысячи красивых шрифтов от Adobe. 
|
||
- [Fonts Arena](https://fontsarena.com/) — сайт о типографике с качественными бесплатными шрифтами, исследованиями, бесплатными альтернативами премиум-шрифтам и новостями. 
|
||
- [FontGet](https://www.fontget.com/) — разнообразие шрифтов, аккуратно отсортированных по тегам. 
|
||
- [FontSelf](https://www.fontself.com) — расширение для Illustrator и Photoshop CC, позволяющее превратить любой текст в шрифт OpenType за считанные минуты!
|
||
- [FontSpark](https://fontspark.app/) — простой инструмент для быстрого поиска лучших шрифтов для проектов. 
|
||
- [Font Squirrel](https://www.fontsquirrel.com/fonts/acherus-grotesque) — скачивайте бесплатные шрифты из широких коллекций. 
|
||
- [Google Fonts](https://fonts.google.com/) — делает веб красивее, быстрее и открытее благодаря отличной типографике. 
|
||
- [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/) — удобный способ размещения шрифтов Google на собственном сервере. Бесплатно и с открытым исходным кодом.  [](https://github.com/majodev/google-webfonts-helper/)
|
||
- [LostType](http://losttype.com/) — первая типографика с подходом "плати сколько хочешь".
|
||
- [Measure](https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg) — измеряйте длину строк текста с этим расширением для Chrome. 
|
||
- [RightFont](https://rightfontapp.com/) — приложение для управления шрифтами, помогает просматривать, синхронизировать, устанавливать и организовывать шрифты через iCloud, Dropbox или Google Drive. 
|
||
- [Sans Forgetica](http://sansforgetica.rmit/) — шрифт, который помогает лучше запоминать учебные заметки. 
|
||
- [Size Calculator](https://sizecalc.com/) — рассчитывает воспринимаемый размер текста с учетом расстояния просмотра и физического размера типографики. 
|
||
- [Typeface](https://typefaceapp.com/) — менеджер шрифтов, который улучшает рабочий процесс дизайна с помощью живых превью шрифтов и гибкой системы тегов. 
|
||
- [Wakamai Fondue](https://wakamaifondue.com/) — инструмент, отвечающий на вопрос "что умеет мой шрифт?". 
|
||
- [Web Font Preview](https://webfontpreview.com/) — предварительный просмотр пар шрифтов Google с компонентами и шаблонами сайтов.  [](https://github.com/jonaskay/webfontpreview)
|
||
- [Webfont](https://webfontapp.com/) — создавайте и управляйте пользовательскими SVG-иконками-шрифтами, создавая общую библиотеку значков.  
|
||
- [WordMarkIt](https://wordmark.it/) — отображает написанные вами слова/фразы всеми шрифтами, которые уже установлены на вашем компьютере. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете управлять шрифтами с помощью Specify, который упоминается в разделе [Дизайн-системы](#design-system-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="gradient-tools">
|
||
|
||
---
|
||
|
||
### Инструменты для создания градиентов
|
||
|
||
Градиенты можно увидеть повсюду — в интерфейсе, брендинге, иллюстрациях, типографике. Градиент создается с использованием двух или более разных цветов, которые постепенно переходят друг в друга. Это может выглядеть как запоминающийся, свежий и уникальный цвет. Чтобы создать такой градиент для вашего дизайна, используйте эти палитры градиентных цветов.
|
||
|
||
- [Blend](http://www.colinkeany.com/blend/) — создавайте и настраивайте красивые CSS3 градиенты. 
|
||
- [Colorffy](https://www.colorffy.com/) — получайте CSS, изображения, превью интерфейсов или создавайте собственные градиенты. 
|
||
- [Colors & Fonts](https://www.colorsandfonts.com/) — библиотека цветов, градиентов и шрифтов, отобранная для цифровых дизайнеров и веб-разработчиков. 
|
||
- [ColorSpace](https://mycolor.space/) — идеальная цветовая палитра для вашего следующего проекта! Генерируйте красивые цветовые схемы. 
|
||
- [ColorSpark](https://colorspark.app/gradient) — помогает дизайнерам находить уникальные цвета и яркие градиенты. 
|
||
- [Cool Backgrounds](https://coolbackgrounds.io/) — изучите тщательно отобранную коллекцию крутых фонов, которые вы можете добавить на блоги, сайты.
|
||
- [CoolHue](https://webkul.github.io/coolhue/) — отобранная палитра градиентов для вашего следующего потрясающего проекта. 
|
||
- [CSS Gradient](https://cssgradient.io/) — бесплатный инструмент генерации CSS-градиентов, который позволяет создавать красочные градиенты. 
|
||
- [Egg Gradients](https://www.eggradients.com/) — коллекция оттенков 12 разных цветов. 
|
||
- [Grabient](https://www.grabient.com/) — красивый и простой интерфейс для генерации веб-градиентов. 
|
||
- [Gradienta](https://gradienta.io/) — многокрасочные CSS-градиенты, JPG-загрузки, 100% бесплатно! 
|
||
- [GradientsList](https://www.gradientslist.com) — крупнейшая краудсорсинговая коллекция градиентов с ежедневными добавлениями пользователей через [Gradients Maker для iOS](https://itunes.apple.com/app/apple-store/id1442380225?pt=117877769&ct=gh&mt=8). 
|
||
- [Gradient Generator](https://colordesigner.io/gradient-generator) — инструмент, который генерирует ступенчатые градиенты между двумя цветами. 
|
||
- [Gradient Hunt](https://gradienthunt.com/) — бесплатная открытая платформа для вдохновения цветами с тысячами модных ручных градиентов.  
|
||
- [Gradients Guru](http://gradientsguru.com/) — изображения фонов в режиме смешивания и красивые градиенты для вашего интерфейса. 
|
||
- [HtmlColours](https://htmlcolors.com/) — узнайте, как легко и красиво создавать градиенты с этим генератором градиентов. 
|
||
- [UI Gradients](https://uigradients.com/) — тщательно отобранная коллекция красивых цветовых градиентов для дизайнеров и разработчиков. 
|
||
- [Web Gradients](https://webgradients.com/) — бесплатная коллекция из 180 линейных градиентов, которые можно использовать как фоны для контента на любом участке вашего сайта. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете создавать и проверять градиенты с помощью Leonardo, который упоминается в разделе [Инструменты доступности](#accessibility-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="icons-tools">
|
||
|
||
---
|
||
|
||
### Инструменты для работы с иконками
|
||
|
||
Как и шрифты, иконки используются в каждом дизайне. Эти базовые элементы поддерживают и направляют многие действия пользователей внутри продукта. Без сомнения, иконки являются важным элементом пользовательской навигации. Создание таких небольших элементов дизайна сложно и требует много времени, но вы можете найти тысячи векторных иконок для личного и коммерческого использования.
|
||
|
||
- [Animaticons](http://animaticons.co/) — растущая коллекция красивых анимированных GIF-иконок высокого разрешения, которые можно настроить.
|
||
- [CoreUI Icons](https://coreui.io/icons/) — премиум набор бесплатных иконок в SVG, Webfont и растровых форматах. 
|
||
- [Digital Nomad Icons](http://digitalnomadicons.com/) — набор иконок и эмодзи в стиле digital nomad. 25 иконок высокого разрешения. 
|
||
- [Essential Glyphs](https://interface.market/essential/basic-pack) — идеально подходящие иконки для любых размеров. 
|
||
- [Feather Icons](https://feathericons.com/) — каждая иконка разработана на сетке 24x24 с акцентом на простоту, согласованность и читаемость.  
|
||
- [Flaticon](https://www.flaticon.com/) — более 1 593 000 векторных иконок в SVG, PSD, PNG, EPS форматах или как иконный шрифт.
|
||
- [Font Awesome](https://fontawesome.com/) — самый популярный набор иконок и инструментов для веба, также с открытым исходным кодом. [](https://github.com/FortAwesome/Font-Awesome)
|
||
- [Fontello](http://fontello.com/) — инструмент для создания собственных шрифтов с иконками, также с открытым исходным кодом.  [](https://github.com/fontello/fontello)
|
||
- [Freepik](https://www.freepik.com) — коллекция эксклюзивных бесплатных ресурсов и всех графических элементов, необходимых для ваших проектов.
|
||
- [Iconscout](https://iconscout.com/) — высококачественные иконки, иллюстрации и стоковые фото в одном месте.
|
||
- [Iconfinder](https://www.iconfinder.com) — маркетплейс векторных иконок (SVG). Наборы иконок доступны в формате IconJar.
|
||
- [IconJar](https://www.geticonjar.com/) — храните все ваши иконки в одном менеджере. 
|
||
- [Iconmonstr](https://iconmonstr.com/) — более 4412 бесплатных иконок в 305 коллекциях. Большой и постоянно растущий ресурс. 
|
||
- [Iconset](https://iconset.io/) — бесплатный, кроссплатформенный и быстрый менеджер SVG-иконок для Mac и Windows. 
|
||
- [Icon Store](https://iconstore.co/) — библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами. 
|
||
- [ICONSVG](https://iconsvg.xyz/) — инструмент для упрощения поиска и генерации стандартных иконок для вашего проекта. 
|
||
- [Icons8](https://icons8.com/icons) — бесплатные иконки в стиле iOS, Android и Windows. 
|
||
- [Ikonate](https://www.ikonate.com/) — настройка, регулировка и загрузка бесплатных векторных иконок. 
|
||
- [illustrio](https://illustrio.com/) — умная библиотека иконок. Создавайте что-то великое с полностью настраиваемыми иконками. 
|
||
- [Ionicons](https://ionicons.com/) — красиво разработанные иконки с открытым исходным кодом. 
|
||
- [Material Design Icons](https://materialdesignicons.com/) — бесплатные иконки в стиле Material Design, созданные благодаря вкладу сообщества.  
|
||
- [Material Icons Library](https://icons.pixsellz.io/) — бесплатная коллекция более 1000 иконок для популярных графических инструментов. 
|
||
- [Motion](https://www.getmotion.io) — бесплатный и простой редактор анимации иконок.
|
||
- [Norde Source](https://norde.io/) — приложение для Mac, Windows и Linux для раскраски и настройки набора иконок под ваш бренд. 
|
||
- [Noun Project](https://thenounproject.com/) — иконки для всего.
|
||
- [Nucleo](https://nucleoapp.com/) — приложение для Mac и Windows для сбора, настройки и экспорта всех ваших иконок. 
|
||
- [Orion Icons](https://orioniconlibrary.com/all-icons) — векторные SVG-иконки с продвинутым интерактивным веб-приложением.
|
||
- [Simple Icons](https://simpleicons.org/) — бесплатные SVG-иконки для популярных брендов. Просто нажмите на нужную иконку, и загрузка начнется автоматически. 
|
||
- [Share Icon](https://www.shareicon.net/) — более 300 000 бесплатных иконок для скачивания в различных форматах. 
|
||
- [Streamline Emoji](http://emoji.streamlineicons.com/) — бесплатная коллекция из 850+ векторных эмодзи. Стиль вдохновлен японским стилем "Каваий" (милый). 
|
||
- [Svgsus](http://www.svgs.us/) — инструмент управления SVG-иконками. 
|
||
- [SVG Colorizer](https://www.iconshock.com/svg-color/) — инструмент для автоматического изменения всей цветовой палитры любого набора SVG-иконок, сохраняя оттенки, блики и тени. 
|
||
- [SVGRepo](https://www.svgrepo.com/) — сайт с более чем 300 000 SVG-векторов и иконок.
|
||
- [Tilda Icons](https://tilda.cc/free-icons/) — скачивайте бесплатные иконки для лендингов. Более 700 векторных иконок, собранных в 43 наборах для бизнеса. 
|
||
- [Twemoji](https://twemoji.twitter.com/) — проект Twitter с открытым исходным кодом, предоставляющий эмодзи для любых нужд. 
|
||
- [Unicons](https://iconscout.com/unicons) — более 1000 пиксельно-идеальных векторных иконок для вашего проекта. 
|
||
- [VisualPharm](https://visualpharm.com/) — бесплатные SVG-иконки с супербыстрым поиском. Создано для веселья командой Icons8. 
|
||
- [Xicons](https://www.xicons.co/) — бесплатные векторные иконки, которые обновляются каждые 10 дней. 
|
||
- [Zwicon](https://www.zwicon.com/) — вручную созданный набор иконок для вашего проекта. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете управлять иконками с помощью Specify, который упоминается в разделе [Дизайн-системы](#design-system-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="illustrations">
|
||
|
||
---
|
||
|
||
### Иллюстрации
|
||
|
||
Иллюстрации можно использовать на лендинге, в постах блога, внутри вашего приложения или в email-кампаниях. Они делают ваш дизайн живым и игривым. Хотя создание хороших иллюстраций — это задача для опытного графического дизайнера, вы можете найти бесплатные SVG-изображения и иллюстрации от добрых людей из нашего сообщества:
|
||
|
||
- [Absurd Design](https://absurd.design) — бесплатные сюрреалистические иллюстрации для ваших проектов. 
|
||
- [Blobmaker](https://www.blobmaker.app/) — создавайте векторные иллюстрации blob прямо в браузере с возможностью настройки цвета, сложности и контраста. 
|
||
- [Blush](https://blush.design/) — создавайте, смешивайте и настраивайте иллюстрации, созданные художниками со всего мира.  
|
||
- [Humaaans](https://www.humaaans.com/) — бесплатная библиотека для создания иллюстраций с людьми путем комбинирования элементов. 
|
||
- [Illustration by Pngtree](https://pngtree.com/illustration-design) — более 13142 профессионально разработанных иллюстраций различных стилей.
|
||
- [IRA Design](https://iradesign.io/) — создавайте потрясающие иллюстрации, используя нарисованные от руки компоненты, выбор из 5 градиентов, а также форматы ai., svg. или png. 
|
||
- [JoeSchmoe](https://joeschmoe.io) — коллекция иллюстрированных аватаров для разработчиков и дизайнеров, идеально подходит в качестве заполнителей или для живых сайтов. 
|
||
- [LukaszAdam](https://lukaszadam.com/illustrations) — бесплатные векторные иллюстрации и иконки. Доступны для личного и коммерческого использования. 
|
||
- [ManyPixels](https://gallery.manypixels.co) — бесплатные иллюстрации без роялти для усиления ваших проектов. 
|
||
- [Mega Doodles Pack](https://github.com/MariaLetta/mega-doodles-pack) — большой векторный набор с нарисованными от руки doodles для презентаций, соцсетей, блогов и других целей.  
|
||
- [Open Doodles](https://www.opendoodles.com/) — набор бесплатных иллюстраций от Pablo Stanley, поддерживающий концепцию открытого дизайна. Вы можете копировать, редактировать, ремиксовать, делиться или переделывать эти изображения для любых целей без ограничений. Лицензия CC0. 
|
||
- [Ouch](https://icons8.com/ouch) — векторные иллюстрации для улучшения ваших проектов. Бесплатно для личного и коммерческого использования. 
|
||
- [Squircley](https://squircley.app/) — всё, что вам нужно, чтобы начать создавать красивые SVG squircle. 
|
||
- [unDraw](https://undraw.co) — коллекция красивых SVG-изображений. 
|
||
- [Wannapik](https://www.wannapik.com/) — коллекция бесплатных иллюстраций, векторных изображений, фотографий и анимаций для любых целей. 
|
||
|
||
</article>
|
||
|
||
<article id="information-architecture">
|
||
|
||
---
|
||
|
||
### Информационная архитектура
|
||
|
||
Информационная архитектура помогает дизайнерам организовывать и структурировать контент внутри веб-сайтов, мобильных приложений и другого программного обеспечения. Это помогает пользователям понять функциональность продукта и находить все необходимое. Эти инструменты для информационной архитектуры помогут вам создавать визуальные карты сайта и улучшать структуру контента вашего веб-сайта:
|
||
|
||
- [DYNO Mapper](https://dynomapper.com/) — организуйте проекты веб-сайтов с помощью визуальных карт сайта, инвентаризации контента, аудита контента, планирования контента, ежедневного отслеживания ключевых слов и тестирования доступности веб-сайта.
|
||
- [Octopus.do](https://octopus.do) — визуальный инструмент для создания карт сайта. Создавайте структуру сайта в реальном времени и быстро делитесь ею для совместной работы с вашей командой или клиентами.
|
||
- [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — создавайте красивые диаграммы и дизайны с помощью этого мощного и простого в использовании приложения. 
|
||
- [OptimalSort](https://www.optimalworkshop.com/optimalsort) — инструмент для сортировки карточек, который помогает понять, как люди группируют контент в вашем интерфейсе.
|
||
- [Treejack](https://www.optimalworkshop.com/treejack) — загрузите предложенную карту сайта, чтобы увидеть, как пользователь будет перемещаться по вашему сайту.
|
||
- [WriteMaps](https://writemaps.com/) — создавайте карты сайта, которые впечатляют! Планируйте страницы и контент для вашего следующего проекта веб-сайта визуально, увлекательно и красиво.
|
||
|
||
</article>
|
||
|
||
<article id="logo-design">
|
||
|
||
---
|
||
|
||
### Дизайн логотипов
|
||
|
||
Логотип — это отправная точка вашей бренд-идентичности. Он отражает миссию продукта, его функциональность и послание бренда. Идеальный логотип создает прочную связь между вашим продуктом и пользователями. Дизайн логотипа — это искусство, как и многие другие дисциплины дизайна. С помощью правильных инструментов для дизайна логотипов это искусство можно реализовать немного быстрее.
|
||
|
||
- [Design Evo](https://www.designevo.com/) — большая коллекция векторных иконок и форм, которые помогут вам легко создать пользовательский логотип. 
|
||
- [Free Logo Design](https://www.freelogodesign.org/) — создавайте потрясающие профессиональные логотипы за считанные секунды. 
|
||
- [Graphic Springs](https://www.graphicsprings.com/) — выберите из галереи шаблонов логотипов в векторном формате, отсортированных по отраслям. Редактируйте графику и текст шаблона, затем скачайте его.
|
||
- [Logo Design Team](https://www.logodesignteam.com/) — предлагает доступные профессиональные услуги по разработке логотипов и бренд-дизайна на заказ.
|
||
- [Logojoy](https://logojoy.com/) — использует искусственный интеллект для мгновенной генерации уникальных идей логотипов для вашего бизнеса.
|
||
- [Logo Lab](https://logolab.app/home) — тестируйте свой логотип с помощью автоматизированных визуальных экспериментов. 
|
||
- [Logo Maker](https://www.ucraft.com/free-logo-maker) — позволяет создать бесплатный логотип за считанные секунды. Начните с пустого холста, добавьте текст и иконку, затем настройте дизайн. 
|
||
- [Logo Maker](https://www.designhill.com/tools/logo-maker) от Designhill — генерируйте тысячи уникальных логотипов за несколько минут, даже без опыта в дизайне.
|
||
- [Logo Makr](https://logomakr.com/) — создавайте логотипы бесплатно, выбирайте из сотен шрифтов и иконок, а затем сохраняйте логотип на компьютер. 
|
||
- [Logo My Way](https://www.logomyway.com/) — выбирайте из 600 индивидуальных дизайнов логотипов от креативных дизайнеров со всего мира.
|
||
- [Logo Package Express](http://thelogopackage.com) — экспортируйте и упаковывайте десятки вариантов логотипов и типов файлов для ваших клиентов автоматически за менее чем 5 минут.
|
||
- [Logo Rank](https://brandmark.io/logo-rank/) — загрузите свой логотип, чтобы узнать, как он оценивается по ряду объективных критериев. 
|
||
- [Wizlogo](https://wizlogo.com/) — создавайте логотипы с помощью простого и доступного инструмента, поддерживаемого профессиональными дизайнерами.
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете создать дизайн логотипа с помощью Adobe Photoshop, GIMP, Inkscape, Krita и Vectr, которые упоминаются в разделе [UI дизайн](#ui-design-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="mockup-tools">
|
||
|
||
---
|
||
|
||
### Инструменты макетов
|
||
|
||
Макет (Mockup) — это визуальный способ представления продукта. В то время как каркас (wireframe) в основном отражает структуру продукта, макет показывает, как продукт будет выглядеть. Эти инструменты для создания макетов помогут вам разрабатывать и совместно работать над макетами, каркасами, диаграммами и прототипами:
|
||
|
||
- [Artboard Studio](https://artboard.studio/) — онлайн-приложение для графического дизайна, ориентированное на макеты продуктов.
|
||
- [Cleanmock](https://cleanmock.com) — создавайте впечатляющие макеты с использованием последних рамок устройств, таких как iPhone, и настраиваемых фонов.
|
||
- [Craftwork Design](https://craftwork.design/) — бесплатные и премиальные цифровые продукты высокого качества, которые ускоряют и упрощают вашу работу.
|
||
- [Device Shots](https://deviceshots.com) — инструмент для создания красивых макетов устройств с помощью скриншотов вашего веб-сайта или мобильного приложения бесплатно.
|
||
- [Devices by Facebook](https://facebook.design/devices) — изображения и файлы Sketch популярных устройств. 
|
||
- [Dimmy.club](https://dimmy.club/) — генератор макетов устройств для ваших веб-сайтов и скриншотов приложений.
|
||
- [Frrames](https://frrames.com/) — идеально проработанные адаптивные макеты окон для вашей идеальной презентации.
|
||
- [Lstore Graphics](https://www.ls.graphics/) — бесплатные и премиум макеты, инструменты UI/UX, генераторы сцен для занятых дизайнеров. 
|
||
- [Mediamodifier](https://mediamodifier.com) — создавайте впечатляющие макеты продуктов за считанные секунды.
|
||
- [Mockflow](https://www.mockflow.com/) — самый быстрый способ для мозгового штурма идей пользовательского интерфейса.
|
||
- [Mockup World](https://www.mockupworld.co/) — множество бесплатных и легальных, полностью слоистых, легко настраиваемых фотореалистичных PSD-файлов. 
|
||
- [Mockups For Free](https://mockupsforfree.com/) — бесплатные ресурсы для дизайнеров, PSD-файлы для графических и веб-дизайнеров. 
|
||
- [Mockuuups](https://mockuuups.studio/) — инструмент drag-and-drop для создания красивых предварительных просмотров приложений или любых маркетинговых материалов.
|
||
- [Mock Video](https://www.mock.video/) — мгновенно создавайте макеты, добавляя рамки устройства к вашим видео.
|
||
- [Moqups](https://moqups.com/) — помогает создавать и сотрудничать в реальном времени над каркасами, макетами, диаграммами и прототипами.
|
||
- [Original Mockups](https://originalmockups.com/) — макеты высокого качества для Photoshop, которые выделят ваши дизайны.
|
||
- [Overframe for Mac](https://overframe.xyz/) — записывайте свои прототипы и приложения с наложением рамок устройства. 
|
||
- [PixelBuddha](https://pixelbuddha.net/) — бесплатные и премиальные ресурсы высокого качества для веб-дизайнеров и разработчиков.
|
||
- [Ramotion Store](https://store.ramotion.com/) — тщательно проработанные макеты Apple и Android для Sketch и Photoshop.
|
||
- [Rotato](https://www.rotato.xyz/) — анимированные 3D макеты для дизайнов приложений. 
|
||
- [SceneLab](https://scenelab.io) — создавайте реалистичные макеты и настраиваемые бренд-дизайны онлайн.
|
||
- [Screely](https://www.screely.com/) — быстро обрамляйте дизайны веб-страниц в минималистичное окно браузера. 
|
||
- [ScreenSpace](https://www.screenspace.io/) — 3D-видео устройств для дизайнеров движения.
|
||
- [Screenzy](https://screenzy.io) — мгновенно преобразуйте свои изображения и скриншоты в красивые макеты, готовые к публикации в социальных сетях. 
|
||
- [Screeener](https://github.com/zehfernandes/screeener) — используйте это приложение для добавления множества изображений в файл Keynote с выбранным вами макетом. 
|
||
- [Smartmockups](https://smartmockups.com/) — создавайте потрясающие макеты продуктов всего в несколько кликов.
|
||
- [shotsnapp](https://shotsnapp.com/) — создавайте красивые презентации макетов устройств для ваших цифровых приложений и веб-дизайнов.
|
||
- [The Mockup Club](https://themockup.club/) — каталог лучших бесплатных макетов для Photoshop, Sketch, Figma и InVision Studio. 
|
||
- [Threed](http://threed.io/) — генерируйте пользовательские 3D макеты устройств в вашем браузере.
|
||
- [UI Store Design](https://www.uistore.design/) — более 200 бесплатных отобранных вручную ресурсов для Sketch, Figma, Adobe XD, InVision Studio, Photoshop, Illustrator CC. 
|
||
- [UI8 — Design Freebies](https://ui8.net/category/freebies) — эпические бесплатные ресурсы для дизайна, чтобы начать вашу работу. 
|
||
- [Vector Mockups Library](https://mockups.kkuistore.com/) — бесплатная коллекция макетов для презентаций в Sketch, Figma и Photoshop. 
|
||
|
||
</article>
|
||
|
||
<article id="no-code-tools">
|
||
|
||
---
|
||
|
||
### Инструменты no-code
|
||
|
||
С появлением инструментов no-code каждый, у кого есть ноутбук, может создать и запустить проект. Эти инструменты помогают дизайнерам и создателям создавать веб-сайты, приложения и даже игры. Инструменты без кода позволяют автоматизировать рутинные задачи и могут использоваться без опыта в разработке. Ознакомьтесь с инструментами ниже, а если вам нужно больше, загляните в раздел Design to Code.
|
||
|
||
- [Bubble](https://bubble.io/) — создавайте и размещайте веб-приложения без необходимости писать код или нанимать команду инженеров.
|
||
- [Carrd](https://carrd.co/) — простые, бесплатные, полностью адаптивные одностраничные сайты практически для любых целей. 
|
||
- [Coda](https://coda.io) — новый тип документа, который объединяет гибкость текстов, мощь таблиц и утилиты приложений в едином холсте. 
|
||
- [Kodika.io](https://kodika.io) — создавайте iOS-приложения с помощью конструктора приложений без кода для Mac и iPad, способного создавать мощные приложения с помощью Drag & Drop. 
|
||
- [PageXL](https://pagexl.com/) — простой конструктор одностраничных сайтов для быстрого создания лендингов и интернет-магазинов. 
|
||
- [Remove.bg](https://www.remove.bg/) — бесплатный сервис для удаления фона с любого фото. 
|
||
- [Retool](https://tryretool.com/) — предоставляет строительные блоки, чтобы вы могли создавать инструменты гораздо быстрее.
|
||
- [sheet2api](https://sheet2api.com/) — создайте API из Google Sheets или Excel Online Spreadsheets без необходимости писать код.
|
||
- [Sheet2Site](https://www.sheet2site.com/) — создайте сайт из Google Sheets без написания кода.
|
||
- [Shopify](https://www.shopify.com/) — платформа со всеми функциями для электронной коммерции и точек продаж, необходимыми для запуска, ведения и роста вашего бизнеса.
|
||
- [Thunkable](https://thunkable.com/) — инструмент drag-and-drop для создания нативных мобильных приложений для всех.
|
||
- [UserGuiding](https://userguiding.com/) — создавайте пошаговые руководства, контрольные списки, подсветки и модальные окна для улучшения вовлечения пользователей.
|
||
|
||
</article>
|
||
|
||
<article id="pixel-art-tools">
|
||
|
||
---
|
||
|
||
### Инструменты Pixel Art (пиксельная графика)
|
||
|
||
Пиксель-арт — это форма цифрового искусства, в которой цвет применяется к отдельным пикселям для создания изображения. Пиксельное искусство может использоваться для создания всего: от сложных сцен и фонов для игр до дизайна персонажей или эмодзи. Если вам интересно попробовать, изучите это программное обеспечение для пиксельного искусства для macOS и Windows:
|
||
|
||
- [Aseprite](https://www.aseprite.org/) — редактор анимированных спрайтов и инструмент для пиксельного искусства. 
|
||
- [Data Pixels](https://github.com/gmattie/Data-Pixels) — создание пиксельного искусства программно. Включает DataPixels.js и настольное приложение Data Pixels Playground.  
|
||
- [Draw!](http://www.drawbang.com/) — бесплатный и с открытым исходным кодом веб-инструмент для редактирования пиксельного искусства и GIF.  
|
||
- [Grafx2](https://gitlab.com/GrafX2/grafX2) — программа для рисования растровой графики, вдохновленная Amiga-программами Deluxe Paint и Brilliance. Специализируется на рисовании с использованием 256 цветов.  
|
||
- [GraphicsGale](https://graphicsgale.com/us/) — обладает множеством функций, специфичных для пиксельного искусства, включая управление палитрой, выборочное удаление цветов и инструменты для быстрой замены и тестирования новых цветов. 
|
||
- [Goya](https://jackschaedler.github.io/goya/) — редактор пиксельного искусства, построенный на ClojureScript и Om.  
|
||
- [Make 8 bit art](https://make8bitart.com/) — инструмент для рисования пиксельного искусства в браузере с открытым исходным кодом.  [](https://github.com/jennschiffer/make8bitart)
|
||
- [Piskel](https://www.piskelapp.com/) — онлайн-редактор для анимированных спрайтов и пиксельного искусства.  
|
||
- [Pixel art to CSS](https://www.pixelartcss.com/) — веб-приложение для анимации и рисования пиксельного искусства на CSS, созданное на базе React.  
|
||
- [Poxi](http://app.poxi.rocks/) — простой редактор пиксельного искусства.  
|
||
- [Pyxel Edit](https://pyxeledit.com/) — редактор пиксельного искусства, созданный для увлекательного и простого создания тайлсетов, уровней и анимации.  
|
||
|
||
</article>
|
||
|
||
<article id="prototyping-tools">
|
||
|
||
---
|
||
|
||
### Инструменты прототипирования
|
||
|
||
Прототип — это простой экспериментальный дизайн предлагаемого решения. Он должен помочь проверить идеи, дизайнерские предположения и гипотезы быстро и экономично. Инструменты для создания прототипов позволяют дизайнерам и клиентам увидеть, как продукт будет функционировать в реальном мире, и сотрудничать над этим решением. Многие современные инструменты для прототипирования можно использовать для построения каркасов, прототипирования и совместной работы.
|
||
|
||
- [Alva](https://www.meetalva.io/) — создавайте живые прототипы с компонентами кода. Также является open source.  [](https://github.com/meetalva/alva)
|
||
- [Axure RP](https://www.axure.com/) — каркас, прототипирование, совместная работа и генерация спецификаций.
|
||
- [SAP Build](https://www.build.me/) — полный набор облачных инструментов для проектирования и создания корпоративных приложений.
|
||
- [Creo](https://creolabs.com/) — прототипирование, экспорт кода и встроенный конструктор мобильных приложений. 
|
||
- [Drama](https://www.drama.app/) — прототипирование, анимация и дизайн в одном приложении для Mac. 
|
||
- [InVision](https://www.invisionapp.com/) — платформа для прототипирования, совместной работы и управления рабочими процессами. 
|
||
- [Flinto](https://www.flinto.com/) — приложение для Mac, позволяющее создавать интерактивные и анимированные прототипы дизайнов приложений.
|
||
- [Framer X](https://framer.com/) — инструмент для визуального проектирования реалистичных интерактивных прототипов. 
|
||
- [Keynote](https://www.apple.com/keynote/) — встроенное приложение для Mac для создания презентаций, которое также можно использовать для быстрого прототипирования (пример использования дизайнерами Apple на WWDC 2014 в сессии "[Prototyping: Fake It Till You Make It](https://developer.apple.com/videos/play/wwdc2014/223/)").  
|
||
- [Lightwell](https://lightwell.pro/) — визуальный инструмент и SDK для создания мобильных макетов и анимаций, которые переводятся в элементы iOS. 
|
||
- [Marvel App](https://marvelapp.com/) — платформа для совместной работы над дизайном. Каркас, прототипирование, дизайн онлайн и создание спецификаций в одном месте.
|
||
- [Maze](https://maze.design/) — инструмент для дизайнеров и разработчиков, предоставляющий аналитические результаты с действенными KPI для ваших прототипов InVision.
|
||
- [Origami](https://origami.design/) — бесплатный инструмент для проектирования современных пользовательских интерфейсов. Быстро создавайте прототипы, запускайте их на iPhone или iPad, вносите изменения и экспортируйте фрагменты кода для разработчиков.  
|
||
- [Pencil](https://pencil.evolus.vn/) — инструмент для прототипирования с множеством встроенных компонентов, которые легко устанавливаются и используются для создания макетов на популярных настольных платформах. 
|
||
- [Principle](https://principleformac.com/) — делает процесс проектирования анимированных и интерактивных пользовательских интерфейсов простым и удобным. 
|
||
- [ProtoPie](https://www.protopie.io/) — создавайте высокоточные взаимодействия, прототипы с использованием сенсоров и делитесь своими удивительными творениями за считанные минуты.
|
||
- [Proto.io](https://proto.io/) — инструмент для создания полностью интерактивных прототипов высокой точности, которые выглядят и работают точно так же, как ваше приложение.
|
||
- [Prott](https://prottapp.com/) — простой в использовании инструмент для прототипирования, способствующий командной работе.
|
||
- [Uizard](https://uizard.io/) — преобразуйте каркасы в высокоточные интерактивные прототипы, настраивайте системы стилей, экспортируйте в Sketch или HTML/CSS код. 
|
||
- [Useberry](https://www.useberry.com/) — инструмент для тестирования удобства использования, позволяющий импортировать прототипы из InVision, AdobeXD, Sketch, Marvel и получать аналитическую информацию о поведении пользователей с помощью тепловых карт, видеозаписей, пользовательских потоков, временных шкал и ответов на последующие вопросы.
|
||
- [UXPin](https://www.uxpin.com/) — создавайте прототипы, которые кажутся реальными, с возможностями компонентов кода, логики, состояний и систем дизайна. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете заниматься прототипированием с помощью Figma, Adobe XD, Sketch и InVision Studio, которые упомянуты в разделе [UI дизайн](#ui-design-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="screenshot-software">
|
||
|
||
---
|
||
|
||
### Для создания скриншотов
|
||
|
||
Создание скриншотов — типичная задача в рабочем процессе дизайна и разработки. Эти бесплатные и полнофункциональные приложения для скриншотов помогут вам легко захватывать экран. Некоторые инструменты работают только на macOS, в то время как другие поддерживают обе операционные системы:
|
||
|
||
- [Camtasia](https://www.techsmith.com/video-editor.html) — инструмент для записи экрана с встроенным полноценным редактором.
|
||
- [CleanShot](https://getcleanshot.com) — захват экрана с улучшенным встроенным инструментом аннотаций и быстрым доступом. 
|
||
- [CloudApp](https://www.getcloudapp.com/) — запись видео, веб-камеры, аннотирование скриншотов, создание GIF.
|
||
- [Collabshot](https://www.collabshot.com/) — делайте скриншоты и сотрудничайте над ними в реальном времени с коллегами. 
|
||
- [Gifox](https://gifox.io) — приложение для записи и обмена GIF-анимациями. 
|
||
- [Giphy Capture](https://giphy.com/apps/giphycapture) — захват частей экрана и экспорт в GIF или MP4.  
|
||
- [Greenshot](https://getgreenshot.org/) — снимок выбранной области, окна или полного экрана. 
|
||
- [Kap](https://getkap.co) — инструмент с открытым исходным кодом для записи экрана и экспорта в GIF, MP4, WebM и APNG.  [](https://github.com/wulkano/kap) 
|
||
- [Lighshot](https://itunes.apple.com/us/app/lightshot-screenshot/id526298438) — создание быстрых скриншотов экрана. 
|
||
- [Monosnap](https://itunes.apple.com/us/app/monosnap/id540348655?mt=12) — создание скриншотов, аннотирование и загрузка в облако. 
|
||
- [OBS](https://obsproject.com/) — программное обеспечение с открытым исходным кодом для записи видео и потоковой трансляции.  
|
||
- [Quicktime](https://support.apple.com/quicktime) — видеоплеер, который также можно использовать для записи экрана.  
|
||
- [ScreenFlow](http://www.telestream.net/screenflow/overview.htm) — программное обеспечение для редактирования видео и записи экрана для Mac. 
|
||
- [Screenie](https://www.thnkdev.com/Screenie/) — фильтруйте и ищите изображения, меняйте форматы файлов скриншотов. 
|
||
- [ScreenshotAPI.net](https://screenshotapi.net) — создавайте идеальные полноэкранные снимки сайтов. 
|
||
- [ScreenToGif](https://www.screentogif.com/) — записывайте GIF-анимацию части экрана. Только для Windows.  [](https://github.com/wulkano/kap)
|
||
- [ShareX](https://getsharex.com/) — инструмент для захвата экрана, обмена файлами и повышения продуктивности.  
|
||
- [Shotty](https://meetshotty.com) — приложение для быстрого поиска нужного скриншота с последующим перетаскиванием в любое приложение. 
|
||
- [Snagit](https://www.techsmith.com/screen-capture.html) — захват изображений и видео, создание GIF, аннотирование, редактирование и обмен.
|
||
- [Snipping Tool](https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots) — бесплатный инструмент для скриншотов на Windows. 
|
||
- [Snappy](http://snappy-app.com/) — делает быстрые снимки экрана и организует их в коллекции.  
|
||
- [Teampaper Snap](https://teampaper.me/snap/) — позволяет делать скриншоты выбранной области.  
|
||
|
||
</article>
|
||
|
||
<article id="sketching-tools">
|
||
|
||
---
|
||
|
||
### Для набросков
|
||
|
||
Иногда для начала создания приложения или веб-сайта вам нужны всего лишь карандаш и бумага. Вот несколько онлайн-инструментов для эскизов с отличными шаблонами, которые помогут ускорить ваш творческий процесс:
|
||
|
||
- [Responsive Sketchsheets](https://zurb.com/playground/responsive-sketchsheets) — предлагает адаптивные предустановленные шаблоны. Они автоматически подстраивают свой макет под любой размер экрана и включают полезные функции. 
|
||
- [Sketchsheets](https://sketchsheets.com/) — проект с открытым исходным кодом, предоставляющий бесплатные шаблоны для печати последних устройств и платформ для создания дизайнов в виде wireframe.  [](https://github.com/rnarrkus/sketchsheets)
|
||
- [Sneakpeekit](https://sneakpeekit.com/) — печатайте сетки для заметок и рамки устройств. 
|
||
- [Sketchize](https://sketchize.com/) — выберите любой из доступных шаблонов, подходящих для вашего проекта, распечатайте его и начните создавать свой проект мечты. 
|
||
|
||
<div class="banner banner--yellow">
|
||
|
||
Вы также можете создавать наброски с помощью Sketch, упомянутого в разделе [UI дизайн](#ui-design-tools).
|
||
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<article id="smm-design-tools">
|
||
|
||
---
|
||
|
||
### Дизайн для SMM
|
||
|
||
Часто маркетинговым командам нужны хорошо оформленные материалы. Это могут быть различные баннеры, промо-визуалы, фавиконы, анимации или просто красивые изображения для социальных платформ, таких как Twitter или Instagram. В этом разделе мы будем добавлять инструменты, которые помогут каждому создавать маркетинговые дизайны.
|
||
|
||
- [Canva](https://www.canva.com/) — создавайте потрясающие дизайны для работы, жизни и развлечений — даже если вы не являетесь экспертом в дизайне!
|
||
- [Crello](https://crello.com/) — создавайте собственные дизайны: посты, обложки, графику и постеры с использованием лучшего программного обеспечения в интернете.
|
||
- [Pablo by Buffer](https://pablo.buffer.com/) — создавайте увлекательные изображения для своих постов в социальных сетях. 
|
||
- [Remove.bg](https://www.remove.bg/) — бесплатный сервис для удаления фона с любого фото. 
|
||
- [SocialSizes](https://socialsizes.io/) — предоставляет дизайнерам лучшие размеры для использования изображений и видео-контента в социальных сетях. 
|
||
- [Stencil](https://getstencil.com/) — инструмент графического дизайна, который позволяет легко и быстро создавать изображения для социальных сетей.
|
||
|
||
</article>
|
||
|
||
<article id="sound-design">
|
||
|
||
---
|
||
|
||
### Дизайн звука
|
||
|
||
Sound design — это искусство создания звукового ландшафта для сайта, приложения, фильма, игры или любого другого продукта. Звук обладает огромным потенциалом для преобразования того, как люди взаимодействуют с вашим продуктом. Некоторые программы для звукового дизайна являются очень сложными и предназначены в основном для профессиональных звукорежиссёров, в то время как другие подходят для начинающих.
|
||
|
||
- [Appsounds](https://appsounds.pro/) — UI Sound packs для приложений, игр и любых других продуктов.
|
||
- [AudioJungle](https://audiojungle.net/) — 836,206 треков и звуков от сообщества музыкантов и звукорежиссёров.
|
||
- [Bensound](https://www.bensound.com/) — скачивайте музыку Creative Commons, бесплатную роялти-фри музыку для использования в своих проектах. 
|
||
- [Freesound](https://freesound.org/) — коллективная база данных звуков с лицензией Creative Commons. Просматривайте, скачивайте и делитесь звуками. 
|
||
- [Fugue Music](https://icons8.com/music) — скачивайте бесплатную фоновую музыку для своих видео. 
|
||
- [Max](https://cycling74.com/products/max/) — соединяйте объекты виртуальными проводами для создания интерактивных звуков, графики и пользовательских эффектов.
|
||
- [Reaper](http://reaper.fm/) — импортируйте любые аудио- и MIDI-файлы, синтезируйте, создавайте сэмплы, сочиняйте, аранжируйте, редактируйте, микшируйте и мастерите песни или любые другие аудиопроекты.
|
||
- [Sonic Pi](https://sonic-pi.net/) — музыкальный синтезатор для живого кодинга.  
|
||
- [SoundKit](https://soundkit.io/) — библиотека UI-звуков для всех ваших интерфейсных нужд.
|
||
- [UI Sounds](https://uisounds.prototypr.io/) — изучайте звуковой дизайн для пользовательских интерфейсов на примерах.
|
||
- [Wistia Music](https://wistia.com/resources/music) — скачивайте бесплатные фоновые треки, чтобы добавить энергии и эмоций в свои видео. 
|
||
- [WOWA](https://www.wowa.me/) — скачивайте роялти-фри музыку для видео на YouTube, подкастов и приложений. Без авторских прав (CC0). Музыка, вдохновлённая Unsplash. 
|
||
- [YouTube Audio Library](https://www.youtube.com/audiolibrary/music) — просматривайте и скачивайте бесплатную музыку для своих проектов. 
|
||
|
||
</article>
|
||
|
||
<article id="stock-photos-tools">
|
||
|
||
---
|
||
|
||
### Работа со стоковыми фотографиями
|
||
|
||
Нужна качественная фотография для iOS-приложения или нового баннера? Вы всегда можете сделать её самостоятельно или воспользоваться стоковыми фото. К счастью, существует множество красивых бесплатных стоковых фотографий и изображений без авторских отчислений, которые можно использовать в любых проектах.
|
||
|
||
- [Burst](https://burst.shopify.com/) — бесплатные стоковые фотографии для веб-сайтов и коммерческого использования. 
|
||
- [Duotone](https://duotone.shapefactory.co/) — бесплатные дуотоновые изображения для использования в любых проектах или создания своих собственных. 
|
||
- [Death to Stock](https://deathtothestockphoto.com/) — платный стоковый сервис с рассылкой бесплатных наборов фотографий и акцентом на нестандартных изображениях.
|
||
- [FoodiesFeed](https://foodiesfeed.com/) — тысячи красивых реалистичных фотографий еды в высоком разрешении, доступные бесплатно. 
|
||
- [FreePhotos.cc](https://freephotos.cc/) — бесплатные стоковые фотографии для коммерческого использования. 
|
||
- [Freestocks.org](http://freestocks.org/) — качественные фотографии, распространяемые под лицензией Creative Commons CC0. 
|
||
- [Gratisography](https://gratisography.com) — коллекция бесплатных фотографий высокого разрешения. 
|
||
- [Jay Mantri](https://jaymantri.com/) — каждую неделю добавляется 7 новых фотографий под лицензией Creative Commons CC0. 
|
||
- [Kaboom Pics](https://kaboompics.com/) — стоковые фотографии, включая абстракции, архитектуру, моду, еду и пейзажи. 
|
||
- [LandingStock](https://landingstock.com/) — коллекция бесплатных изображений для ваших лендингов. 
|
||
- [Life of Pix](https://www.lifeofpix.com/) — бесплатные фотографии в высоком разрешении, созданные командой LEEROY. 
|
||
- [LoremPixel](https://lorempixel.com/) — API для предоставления стоковых фотографий с заданными размерами и категориями. Отличный инструмент для создания плейсхолдеров. 
|
||
- [Magdeleine](https://magdeleine.co/) — бесплатные фотографии высокого качества для вашего вдохновения. 
|
||
- [Moose](https://photos.icons8.com/) — создавайте стоковые фотографии по запросу вместо поиска готовых. 
|
||
- [MMT Stock](http://mmtstock.com/) — фотографии высокого разрешения от Джеффри Беттса, распространяемые под лицензией Creative Commons CC0. 
|
||
- [New Old Stock](https://nos.twnsnd.co/) — винтажные фотографии из публичных архивов без известных ограничений авторских прав. 
|
||
- [Pexels](https://www.pexels.com/) — агрегатор многих бесплатных ресурсов стоковых фотографий. 
|
||
- [Photo Creator](https://photos.icons8.com/creator) — бесплатный инструмент для создания реалистичных стоковых фотографий на заказ. 
|
||
- [Picography](https://picography.co/) — бесплатные стоковые фотографии от Дейва Мейера и других фотографов под лицензией Creative Commons CC0. 
|
||
- [Pixabay](https://pixabay.com/) — фотографии, иллюстрации, векторные графики и видеоматериалы под собственной лицензией. 
|
||
- [Picjumbo](http://picjumbo.com/) — коллекция полностью бесплатных фотографий для коммерческого и личного использования. 
|
||
- [Pngtree](https://pngtree.com/) — миллионы PNG-изображений, фонов и векторов для бесплатного скачивания. 
|
||
- [pxhere](https://pxhere.com/) — бесплатные стоковые изображения. 
|
||
- [Reshot](https://www.reshot.com/) — огромная библиотека тщательно отобранных бесплатных стоковых фотографий, которые нельзя найти в других местах. 
|
||
- [ShotStash](https://shotstash.com/) — тысячи бесплатных фотографий и видео высокого разрешения под лицензией CC0. 
|
||
- [SkitterPhoto](https://skitterphoto.com/) — разнообразные стоковые фотографии, распространяемые под лицензией Creative Commons CC0. 
|
||
- [Startup Stock Photos](http://startupstockphotos.com/) — бесплатные фотографии для стартапов, блогеров и издателей. 
|
||
- [StockSnap.io](https://stocksnap.io/) — большой выбор бесплатных стоковых фотографий и изображений высокого разрешения. 
|
||
- [StyledStock](https://styledstock.co/) — бесплатная стоковая фотография с акцентом на женскую аудиторию. 
|
||
- [The Gender Spectrum Collection](https://broadlygenderphotos.vice.com/) — библиотека стоковых фотографий с изображениями трансгендерных и небинарных моделей. 
|
||
- [UI Faces](https://uifaces.co/) — агрегатор бесплатных источников аватаров, которые можно использовать в дизайне макетов. 
|
||
- [Unsplash](https://unsplash.com) — бесплатные стоковые фотографии для использования. 
|
||
- [#WOCinTech Chat Photos](https://www.flickr.com/photos/wocintechchat) — бесплатные стоковые фотографии женщин-технологов из разных сфер. 
|
||
- [Zoommy](http://www.zoommyapp.com) — помогает находить отличные бесплатные стоковые фотографии для ваших проектов или вдохновения. 
|
||
|
||
</article>
|
||
|
||
<article id="stock-videos">
|
||
|
||
---
|
||
|
||
### Стоковые видео
|
||
|
||
Если вы работаете с видео-контентом, вам понравятся эти высококачественные, тщательно подобранные стоковые видеоматериалы. Ниже вы найдете множество хороших и бесплатных сайтов со стоковыми видео, которые можно использовать на вашем сайте, в рекламных кампаниях или в социальных сетях:
|
||
|
||
- [Coverr](https://coverr.co/) — красивые бесплатные стоковые видеоматериалы для вашей главной страницы. 
|
||
- [Life of Vids](http://www.lifeofvids.com/) — предоставляет бесплатные стоковые видеоролики, клипы и зацикленные видео. 
|
||
- [Mazwai](http://mazwai.com) — отличная коллекция бесплатных видеоклипов и материалов Creative Commons в HD-качестве. 
|
||
- [Mixkit](https://mixkit.co/) — потрясающие бесплатные видео в HD. Вы можете использовать их абсолютно бесплатно. 
|
||
- [Motion Places](https://www.motionplaces.com/) — тщательно подобранная коллекция красивых видеоматериалов, которые вы можете использовать в своих проектах. 
|
||
- [Pixabay](https://pixabay.com/) — более 1,5 миллиона стоковых видео и фотографий с лицензией Royalty-Free, созданных сообществом. 
|
||
- [Pexels Videos](https://www.pexels.com/videos/) — упрощает поиск бесплатных стоковых видеоматериалов для вашего сайта, промо-роликов или других нужд. 
|
||
- [Videezy](https://www.videezy.com/) — мгновенная загрузка миллионов бесплатных и премиальных видеоматериалов и графики.
|
||
- [Videvo](https://www.videvo.net/) — предлагает широкий выбор видеоклипов в HD-качестве, графики и бесплатных стоковых видеоматериалов. 
|
||
- [123RF](https://www.123rf.com/) — более 100 000 нового контента ежедневно и круглосуточная поддержка.
|
||
|
||
</article>
|
||
|
||
<article id="tools-for-learning-design">
|
||
|
||
---
|
||
|
||
### Изучение дизайна
|
||
|
||
- [Design Better](https://www.designbetter.co/) — узнайте о лучших практиках, историях и инсайтах от ведущих мировых дизайнерских команд и лидеров. 
|
||
- [Design+Code](https://designcode.io/) — полные курсы, посвященные лучшим инструментам и системам дизайна.
|
||
- [DesignerUp](https://designerup.co/) — подборка курсов с возможностью обучения в своем темпе и наставничество для освоения продуктового дизайна (UI/UX).
|
||
- [Figma Training](https://www.figmatraining.com) — экспресс-курс, посвященный Figma, для дизайнеров пользовательского интерфейса.
|
||
- [Interaction Design Foundation](https://www.interaction-design.org/) — популярный в индустрии сайт для изучения навыков UX/UI.
|
||
- [Laws of UX](https://lawsofux.com/) — подборка максим и принципов, которые дизайнеры могут учитывать при создании пользовательских интерфейсов. 
|
||
- [Learn UX](https://learnux.io/) — полный подход к изучению инструментов UI и UX.
|
||
- [Sketch Master](https://sketchmaster.com/) — подборка видеокурсов для профессионалов, изучающих Sketch.
|
||
</article>
|
||
|
||
<div class="hidden-in-page">
|
||
<p align="center">
|
||
<a href="http://bit.ly/33Q3AC0">
|
||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
|
||
</a>
|
||
</p>
|
||
</div>
|
||
|
||
<article id="ui-design-tools">
|
||
|
||
---
|
||
|
||
### UI-дизайн
|
||
|
||
Какие лучшие инструменты для дизайна пользовательского интерфейса в 2024 году? Вы можете выбрать любой из перечисленных инструментов, которые позволят вам выполнять десятки задач по дизайну — создание пользовательского интерфейса для сайта или мобильного приложения, разработку каркасов, прототипов, анимации или логотипов. Эти инструменты являются отличными и полнофункциональными для дизайнеров UX и UI:
|
||
|
||
- [Adobe XD](https://www.adobe.com/products/xd.html) — проектируйте, создавайте прототипы и делитесь любым пользовательским интерфейсом — от веб-сайтов и мобильных приложений до голосовых взаимодействий. 
|
||
- [Affinity Designer](https://affinity.serif.com/en-gb/designer/) — редактор векторной графики для macOS, iOS и Microsoft Windows.
|
||
- [Akira](https://github.com/akiraux/Akira) — нативное приложение Linux для дизайна UI и UX, созданное на Vala и Gtk. 
|
||
- [Botmock](https://www.botmock.com) — проектируйте, создавайте прототипы и тестируйте голосовые и текстовые разговорные приложения. Поддерживает несколько платформ.
|
||
- [CleverBrush](https://www.cleverbrush.com/) — онлайн-редактор векторной графики и инструмент цифровой публикации, который можно интегрировать на страницу как компонент JS.
|
||
- [Figma](https://www.figma.com/) — инструмент для проектирования, работающий в браузере, который позволяет проектировать и создавать прототипы с поддержкой совместной работы в реальном времени.
|
||
- [GIMP](https://www.gimp.org/) — бесплатное программное обеспечение для обработки изображений и графического дизайна.  
|
||
- [Gravit](https://designer.io/) — бесплатное приложение для дизайна векторной графики, доступное для macOS, Windows, Linux, ChromeOS и браузера. 
|
||
- [Illustrator](https://www.adobe.com/products/illustrator.html) — создавайте логотипы, значки, рисунки, типографику и иллюстрации для печати, веба, видео и мобильных устройств. Продукт компании Adobe.
|
||
- [Inkscape](https://inkscape.org/) — бесплатный редактор векторной графики с открытым исходным кодом. Может создавать или редактировать векторную графику, такую как иллюстрации, диаграммы, линейные рисунки, графики, логотипы и сложные картины.  
|
||
- [Krita](https://krita.org/en/) — бесплатное программное обеспечение для рисования и графического дизайна, которое считается хорошей альтернативой Adobe Photoshop.  
|
||
- [Lunacy](https://icons8.com/lunacy) — бесплатное нативное приложение для Windows, которое работает офлайн и поддерживает файлы .sketch. Гибкий и легкий инструмент. Интуитивно понятный и простой в использовании. Ускоряет работу и расширяет возможности дизайнеров UI и UX. 
|
||
- [Photopea](https://www.photopea.com/) — бесплатное графическое приложение, работающее в браузере, альтернатива Photoshop. 
|
||
- [Photoshop](https://www.adobe.com/products/photoshop.html) — программное обеспечение для обработки изображений и графического дизайна, разработанное Adobe.
|
||
- [Pixelixe](https://studio.pixelixe.com) — инструмент графического дизайна, созданный для маркетологов, блогеров и малого бизнеса, который позволяет создавать потрясающие и уникальные изображения, графику или статические веб-страницы за считанные минуты. 
|
||
- [Sketch](https://www.sketchapp.com/) — набор инструментов для дизайна, созданный для Mac. 
|
||
- [Studio](https://www.invisionapp.com/studio) — сочетает проектирование, создание прототипов и совместную работу в едином гармоничном рабочем процессе. Разработан InVision.
|
||
- [TwitPile](https://twitpile.com) — создает мозаичные изображения из подписчиков Twitter, интересов и списков. 
|
||
- [Vectr](https://vectr.com/) — простой веб- и настольный кроссплатформенный инструмент для легкого и интуитивно понятного создания векторной графики. 
|
||
- [Voiceflow](https://www.voiceflow.com) — прототипируйте, проектируйте и развертывайте реальные приложения для Amazon Alexa и Google Home.
|
||
|
||
</article>
|
||
|
||
<article id="user-flow-tools">
|
||
|
||
---
|
||
|
||
### Построение пользовательских потоков
|
||
|
||
Пользовательский поток — это серия шагов, которые пользователь предпринимает для достижения значимой цели. Это быстрый способ планирования путей пользователя и улучшения UX. Если вам нужно создать диаграмму пользовательского потока, карту пользовательского потока или карту сайта, обратите внимание на эти инструменты:
|
||
|
||
- [Draw.io](https://www.draw.io/) — бесплатное онлайн-программное обеспечение для создания диаграмм, блок-схем, оргструктур, UML, ER и сетевых диаграмм. 
|
||
- [Flowmapp](https://flowmapp.com/) — онлайн-инструмент для создания карт сайта и пользовательских потоков, который помогает эффективно разрабатывать и планировать пользовательский опыт.
|
||
- [Google Drawings](https://docs.google.com/drawings/) — создавайте диаграммы и графики бесплатно в Google Docs. 
|
||
- [Lucidchart](https://www.lucidchart.com/) — онлайн-инструмент для создания диаграмм, блок-схем, карт сайтов и многого другого.
|
||
- [MindNode](https://mindnode.com/) — приложение для создания ментальных карт, упрощающее процесс мозгового штурма. 
|
||
- [NinjaMock](https://ninjamock.com/) — онлайн-инструмент для прототипирования и пользовательских потоков. Связывайте представления и создавайте логические прототипы потоков с визуальным стилем от руки.
|
||
- [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — приложение для диаграмм и цифровой иллюстрации для macOS и iOS. 
|
||
- [Overflow](https://overflow.io/) — превращайте свои дизайны в интерактивные диаграммы пользовательских потоков, которые рассказывают историю.
|
||
- [Sketch.systems](https://sketch.systems/) — дизайн пользовательских интерфейсов и потоков с использованием интерактивных конечных автоматов. 
|
||
- [SQUID](https://uxmisfit.com/squid/) — создавайте красивые пользовательские потоки в Sketch за считанные минуты. 
|
||
- [WebSequenceDiagrams](https://www.websequencediagrams.com/) — простое веб-приложение для работы с взаимодействиями объектов, расположенными в последовательности времени. 
|
||
- [Whimsical](https://whimsical.co/) — простой инструмент для создания блок-схем, каркасов и стикеров.
|
||
- [Wireflow](http://wireflow.co) — бесплатный, онлайн и открытый инструмент для создания красивых прототипов пользовательских потоков. [](https://github.com/vanila-io/wireflow) 
|
||
- [XMind: ZEN](https://www.xmind.net/zen/) — инструмент для мозгового штурма и ментальных карт с возможностью переключения между схемами-деревьями и планами. Связывайте темы с другими схемами.
|
||
- [yEd](https://www.yworks.com/products/yed) — бесплатный десктопный инструмент для создания диаграмм. Подходит для множества случаев использования. Функция автоупорядочивания особенно полезна при создании блок-схем. 
|
||
|
||
</article>
|
||
|
||
<article id="user-research-tools">
|
||
|
||
---
|
||
|
||
### Пользовательские исследования
|
||
|
||
Пользовательские исследования помогают понять поведение, потребности и мотивации пользователей с помощью различных качественных и количественных методов (интервью, наблюдение, анкеты и т.д.). Эти инструменты для исследований пользователей могут быть вам полезны:
|
||
|
||
- [Appoint.ly](https://appoint.ly) — веб-инструмент для быстрого планирования встреч с интеграцией с онлайн-календарями.
|
||
- [Calendly](https://calendly.com/) — помогает планировать встречи без лишней переписки по электронной почте.
|
||
- [Crowd Signal](https://crowdsignal.com/) — сбор, организация и анализ данных из различных источников, включая социальные сети и мобильные приложения.
|
||
- [Doodle](https://doodle.com/) — онлайн-календарь для управления временем и координации событий, встреч и назначений.
|
||
- [Evolt](https://evolt.io/en/) — создание пользовательских персон, сторибордов, бизнес-моделей, карт опыта, досок для мозгового штурма и мудбордов в современном формате.
|
||
- [Feedback Lite](https://www.feedbacklite.com/) — сбор высококачественной обратной связи от клиентов с использованием решений Voice of Customer для улучшения производительности веб-сайта и вовлеченности клиентов.
|
||
- [GoToMeeting](https://www.gotomeeting.com/en-gb) — простой и мощный сервис для веб-конференций.
|
||
- [Handrail](https://handrailux.com/) — платформа для исследований и анализа пользовательского опыта — планируйте исследования, собирайте и анализируйте данные, делитесь результатами.
|
||
- [JotForm](https://www.jotform.com) — создавайте онлайн-формы, получайте уведомления по электронной почте и собирайте данные. 
|
||
- [Lookback](https://lookback.io/) — проводите удаленные исследования пользователей, записывайте и делайте заметки, используя прототипы или готовые продукты.
|
||
- [MineTime](https://minetime.ai) — бесплатное приложение для календаря с функциями умного планирования и аналитики времени. 
|
||
- [Reflector](https://www.airsquirrels.com/reflector) — инструмент для зеркального отображения экрана и записи, который позволяет проводить удаленные пользовательские тесты.
|
||
- [Reframer](https://www.optimalworkshop.com/reframer) — инструмент для захвата, тегирования и выявления паттернов в качественных данных исследований.
|
||
- [Sticktail](https://sticktailapp.com/) — платформа для централизованного хранения, поиска и обмена пользовательскими данными внутри организации.
|
||
- [Survey Monkey](https://www.surveymonkey.com/) — онлайн-инструмент для создания опросов и сбора мнений значимых для вас людей.
|
||
- [Typeform](https://www.typeform.com/) — простой интерфейс drag-and-drop для создания форм, опросов и анкет, с возможностью приема платежей.
|
||
- [Wufoo](https://www.wufoo.com) — создавайте формы, собирайте данные и платежи, автоматизируйте рабочие процессы.
|
||
- [YesInsights](https://www.yesinsights.com/) — простые опросы с одним вопросом и NPS для улучшения вашего бизнеса.
|
||
- [UserBit](https://userbitapp.com/) — платформа с инструментами для проведения пользовательских исследований в реальном времени: тегирование/кодирование отзывов, создание пользовательских персон, визуализация карт сайта и многое другое.
|
||
- [User Interviews](https://www.userinterviews.com/) — подбор участников из сообщества в 125 000 человек на основе профессии, демографических данных, географии и других параметров для любых исследований.
|
||
- [Zoom](https://zoom.us) — один из лучших сервисов для онлайн-встреч.
|
||
|
||
</article>
|
||
|
||
<article id="visual-debugging-tools">
|
||
|
||
---
|
||
|
||
### Визуальная отладка
|
||
|
||
- [LogRocket](https://logrocket.com/) — инструмент для записи действий пользователей на вашем сайте, что позволяет воспроизводить ошибки и быстрее их исправлять.
|
||
- [PixelSnap](https://getpixelsnap.com) — магический инструмент для измерения любого элемента на экране. 
|
||
- [VisBug](https://github.com/GoogleChromeLabs/ProjectVisBug) — на любой веб-странице: визуальная отладка, быстрое изучение стилей и доступности (a11y), изменение CSS визуально, перемещение элементов с помощью мыши и многое другое. [](https://github.com/GoogleChromeLabs/ProjectVisBug) 
|
||
- [Visual Inspector](https://www.canvasflip.com/visual-inspector/) — инструмент для совместной работы, позволяющий оставлять отзывы и исправлять ошибки дизайна на веб-сайтах.
|
||
|
||
</article>
|
||
|
||
<article id="wireframing-tools">
|
||
|
||
---
|
||
|
||
### Создание вайрфреймов
|
||
|
||
Каркас (wireframe) — это визуальная модель, отображающая основную структуру сайта или приложения. Он содержит наиболее важные элементы и контент, помогая легко объяснить идеи по дизайну. Каркасы — это низкодетализированный способ демонстрации дизайна. В этом разделе представлены лучшие инструменты для создания каркасов для различных случаев использования.
|
||
|
||
- [Balsamiq Cloud](https://balsamiq.cloud/) — простое создание эскизов пользовательского интерфейса. Фиксируйте идеи, сотрудничайте над дизайном и добивайтесь общего согласия.
|
||
- [BLOKK](http://www.blokkfont.com/) — шрифт для быстрого создания макетов и каркасов для клиентов, которые не понимают латиницу. 
|
||
- [CSS Grid Builder](https://cssgrid.cc/css-grid-builder.html) — инструмент для построения CSS-сеток, где сетка становится видимой только при добавлении контента (элементов), размещенных в соответствии с правилами сетки. 
|
||
- [Gliffy](https://www.gliffy.com/) — инструмент для создания каркасов, UML-диаграмм, блок-схем, wireframes и многого другого.
|
||
- [Gridzzly](http://gridzzly.com/) — самый простой способ создать настраиваемую сетку для печати. 
|
||
- [Layoutit](https://grid.layoutit.com/) — инструмент для создания интерфейсов с использованием CSS Grid и Bootstrap, который станет отправной точкой для ваших front-end разработок. 
|
||
- [Pidoco](https://pidoco.com/en) — программное обеспечение, которое позволяет быстро создавать интерактивные UX-прототипы и кликабельные каркасы.
|
||
- [Wireframe.cc](https://wireframe.cc/) — простой инструмент для создания каркасов, который не отвлекает от работы. 
|
||
- [Whimsical Wireframes](https://whimsical.co/wireframes/) — мгновенное создание каркасов под рукой. Обширная библиотека настраиваемых элементов, таких как кнопки, поля ввода, чекбоксы.
|
||
- [1200px Grid System](https://1200px.com/) — помогает создавать систему сеток для дизайнов сайтов с шириной, значительно превышающей стиль на 960 пикселей.
|
||
|
||
</article>
|
||
|
||
<article id="three-d-modeling-software">
|
||
|
||
---
|
||
|
||
### 3D-моделирование
|
||
|
||
3D графика используется в игровой индустрии, кинопроизводстве, архитектуре, инженерии и 3D-печати. 3D-художники и дизайнеры используют специализированное программное обеспечение для 3D-моделирования, упомянутое в этом разделе.
|
||
|
||
- [Autodesk](https://www.autodesk.com/products/fusion-360/overview) — интегрированное программное обеспечение CAD, CAM и CAE. Объединяет дизайн, инженеринг и производство на одной платформе.
|
||
- [Blender](https://www.blender.org/) — бесплатное программное обеспечение для создания 3D-графики с открытым исходным кодом.  
|
||
- [FreeCAD](https://www.freecadweb.org/) — бесплатный и мультиплатформенный 3D-параметрический моделлер с открытым исходным кодом.  
|
||
- [MatterControl](https://www.matterhackers.com/store/l/mattercontrol/sk/MKZGTDW6) — бесплатный программный пакет с открытым исходным кодом для проектирования, нарезки, организации и управления 3D-печатью.  
|
||
- [Maya](https://www.autodesk.com/products/maya/overview) — создание анимаций, окружения, графики движения, виртуальной реальности и персонажей в одном инструменте.
|
||
- [Onshape](https://www.onshape.com/) — программное обеспечение для моделирования, специально ориентированное на проектирование технических и запасных частей, первое полнооблачное 3D-программное обеспечение.
|
||
- [OpenSCAD](https://www.openscad.org/) — программное обеспечение для создания твердых 3D-объектов CAD. 
|
||
- [Rhino](https://www.rhino3d.com/) — программное обеспечение для 3D-моделирования на основе кривых, создающее математически точные модели 3D-поверхностей.
|
||
- [SketchUp](https://www.sketchup.com) — программное обеспечение для 3D-дизайна, делающее 3D-моделирование доступным для всех благодаря простому и в то же время мощному набору инструментов.
|
||
- [Tinkercad](https://www.tinkercad.com) — бесплатное простое в использовании приложение для 3D-дизайна, электроники и программирования. 
|
||
- [Vectary](https://www.vectary.com/) — создавайте красивые 3D-модели с помощью инструмента 3D-моделирования drag and drop.
|
||
- [3D Slash](https://www.3dslash.net) — инструмент для 3D-моделирования, доступный на всех устройствах и всех ОС, онлайн и оффлайн.
|
||
|
||
</article>
|
||
|
||
<article id="addendum">
|
||
|
||
### Addendum (Reference & Inspiration)
|
||
|
||
**Awesome Design Tools & Plugins**
|
||
|
||
Переведен на русский язык и сохранен [Евгением Куценко](https://vk.com/diamlee)
|
||
|
||
</article>
|