Лучшие инструменты и плагины для дизайна на все случаи жизни 👉
| docs | ||
| Media | ||
| .gitignore | ||
| Awesome-Design-Conferences.md | ||
| Awesome-Design-Plugins.md | ||
| Awesome-Design-UI-Kits.md | ||
| index.js | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
Awesome Design Tools
Как использовать
- Сейчас вы находитесь в разделе Awesome Design Tools, если вам нужны плагины — перейдите к Awesome Design Plugins.
- Чтобы найти инструмент, воспользуйтесь оглавлением или поиском по ключевому слову (например, "анимация", "градиент").
Оглавление
- Доступность
- Анимация
- Дополненная реальность
- Совместная работа
- Выбор цвета
- Обратная связь по дизайну
- Передача дизайна
- Вдохновение
- Системы дизайна
- "Дизайн в код"
- Контроль версий
- Инструменты разработки
- Мониторинг пользовательского опыта
- Работа со шрифтами
- Создание градиентов
- Работа с иконками
- Иллюстрации
- Информационная архитектура
- Дизайн логотипов
- Mockup макеты
- No-code
- Пиксель Арт
- Прототипирование
- Создание скриншотов
- Наброски
- Дизайн для SMM
- Звуковой дизайн
- Cтоковые фотогафии
- Стоковые видео
- Изучение дизайна
- UI-дизайн
- Построение пользовательских потоков
- Пользовательские исследования
- Визуальная отладка
- Создание вайрфреймов
- 3D-моделирование
Инструменты доступности
Доступность — это практика создания веб-сайтов и приложений, которые могут использовать все люди, включая людей с нарушениями зрения, моторики, слуха, речи или когнитивных функций. Здесь вы найдете инструменты для обеспечения веб-доступности, инструменты для тестирования доступности и приложения для доступности как для разработчиков, так и для дизайнеров:
- A11ygator — Веб-инструмент для анализа сайтов на соответствие правилам WCAG. Также доступен в виде расширения для браузера Google Chrome и Twitter-бота.
- Accessibility Insights — помогает разработчикам быстро находить и устранять проблемы доступности.
- Accessible Palette Builder — прототип на основе Elm, помогающий дизайнерам создавать доступные цветовые палитры.
- AChecker — веб-приложение для тестирования доступности, используемое для оценки HTML-контента на наличие проблем с доступностью.
- ANDI — инструмент тестирования доступности веб-контента (букмарклет). Автоматически обнаруживает проблемы с доступностью, предлагает улучшения и проверяет соответствие стандарту 508.
- Axe — движок доступности, предназначенный для работы во всех современных браузерах и с любыми инструментами, фреймворками, библиотеками и средами. Это инструмент автоматического тестирования доступности для разработчиков.
- ColorBox — веб-приложение, которое алгоритмически создает доступные цветовые системы. Разработано командой Lyft Design.
- Colorable — бесплатный веб-инструмент для проверки контраста.
- Color Oracle — бесплатный симулятор дальтонизма.
- Contrast — приложение для macOS для дизайнеров и разработчиков, предоставляющее быстрый доступ к коэффициентам контраста цветов по стандартам WCAG.
- Contrast Checker — помогает проверить контраст между фоном элемента и самой страницей.
- Contraste — приложение для проверки доступности текста в соответствии с Руководством по доступности веб-контента (WCAG).
- Inclusive Design — методология и набор инструментов, предоставленных командой Microsoft.
- Hex Naw — помогает протестировать целые цветовые системы на контрастность и доступность.
- Leonardo — генератор цветовых палитр по заданному коэффициенту контраста WCAG. Открытый веб-инструмент и npm-модуль для дизайнеров и инженеров. Разработан Adobe.
- PA11Y — инструмент тестирования доступности для выявления проблем с веб-страницами. Запускает HTML CodeSniffer из командной строки для программных отчетов о доступности. Это инструмент для разработчиков.
- Sim Daltonism — симулятор дальтонизма для macOS и iOS, позволяющий визуализировать цвета так, как они воспринимаются при различных типах дальтонизма.
- Stark — платный плагин для Sketch, позволяющий моделировать различные типы дальтонизма.
- Toptal’s Color Filter — позволяет протестировать ваш сайт и показывает, как люди с различными видами дальтонизма увидят ваши страницы.
- tota11y — инструмент визуализации доступности. Интересный факт: в названии инструмента вы видите "a11y". Это сокращение от accessibility, где "a" сопровождается 11 буквами, а затем "y".
- WAVE — позволяет оценить веб-контент на наличие проблем с доступностью прямо в Chrome и Firefox. Это проверяющий доступность веб-контента.
- 90 Examples — бесплатная коллекция доступных цветовых тем.
Функции проверки доступности также доступны в VisBug из категории Визуальная отладка.
Инструменты анимации
Анимации помогают пользователям легко и дружелюбно взаимодействовать с продуктом. Живой интерактивный интерфейс создает у пользователей чувство удовлетворения благодаря мгновенной обратной связи и эмоциональному взаимодействию. Эти бесплатные и платные инструменты разработаны, чтобы упростить создание анимации. Если вы планируете создавать анимационные переходы, микроинтеракции или анимации на основе прокрутки, ознакомьтесь с этими инструментами:
- After Effects — цифровые визуальные эффекты, анимация и приложение для композитинга, разработанное Adobe.
- BeatFlyer — веб-инструмент, который позволяет быстро создавать зацикленные и яркие анимации из многослойных композиций.
- Dokyu Motion — упрощает дизайн анимации в After Effects, чтобы любой редактор мог рассказывать истории, которые не останутся незамеченными.
- Flare — мощный инструмент для дизайна и анимации, позволяющий дизайнерам и разработчикам создавать анимации для приложений или игр.
- Flow — профессиональный инструмент анимации для Sketch-дизайнов, который также экспортирует готовый код для iOS, веба или SVG-файлов.
- GSAP — набор инструментов для сценарных HTML5-анимаций с высокой производительностью во всех основных браузерах.
- Haiku Animator — анимация на основе ключевых кадров, соединяющая инструменты пользовательского интерфейса с кодом, который легко использовать разработчикам.
- Keyshape — инструмент 2D-анимации, позволяющий экспортировать анимации в формате SVG.
- Kite Compositor — мощное приложение для анимации и прототипирования для Mac и iOS.
- LightBox — пакет для создания 2D-анимации с рисованными кадрами.
- Lottie — мобильная библиотека для Android и iOS, которая парсит анимации из Adobe After Effects, экспортированные как JSON с помощью Bodymovin, и рендерит их нативно на мобильных устройствах и в вебе.
- Mantra — инструмент для анимации на основе временной шкалы в браузере.
- Meteoritic — библиотека анимационных эффектов для iOS и Android. Выберите из множества анимаций, подходящих для различных стилей приложений.
- Naker.Back — интегрируйте интерактивный фон бесплатно, чтобы привлечь больше внимания к вашему сайту.
- Naker.Story — сделайте ваш веб-контент интерактивным, чтобы увлечь посетителей как никогда ранее благодаря 3D.
- OFFEO — онлайн-инструмент для создания видеороликов для малого бизнеса, чтобы создавать рекламные ролики на уровне крупных брендов без большого бюджета.
- StorySwag — создавайте стильные анимированные посты для Instagram и Facebook всего в несколько нажатий прямо с вашего телефона.
- Spirit — инструмент анимации, который помогает создавать и управлять анимациями в реальном времени в браузере.
- Stylie — графический инструмент для создания CSS3-анимаций в браузере.
- Tumult Hype — приложение для создания анимаций и интерактивного HTML5-контента для macOS.
Доступные приложения и инструменты для анимации UI и UX также включают Drama, Principle, Framer, Invision Studio и Flinto.
Дополненная реальность
Дополненная реальность (AR) — это технология, которая улучшает наш реальный мир, добавляя к нему слой цифровой информации. Использование AR растет с каждым днем, с появлением десятков новых AR-приложений, инструментов разработки и фреймворков. В этом разделе собраны различные инструменты дополненной реальности для создания, проецирования и прототипирования приложений, ориентированных на AR:
- Daqri — предоставляет профессиональный уровень дополненной реальности для рабочих процессов, накладывая цифровую информацию на физическую среду.
- EasyAR — мобильное приложение и движок дополненной реальности, упрощающий работу с AR.
- HP Reveal — добавляет ценность к печатному контенту с помощью визуальной интерактивности.
- Layar — помогает находить различные элементы на основе технологий дополненной реальности.
- Lens Studio — создавайте, публикуйте и делитесь своими AR-эффектами для Snapchat с кодом или без него.
- Lightform — инструмент для проектирования дополненной реальности через проекцию.
- Spark AR Studio — создавайте AR-эффекты для Instagram без написания кода.
- Torch — облачное приложение для 3D-дизайна и прототипирования, ориентированное на мобильную AR.
- Unity — создавайте качественные 3D и 2D игры, а также проекты для VR/AR, и разворачивайте их на мобильных и настольных устройствах.
- Vectary — создавайте 3D и AR для вашего веб-сайта.
- Vuforia — SDK для мобильных устройств, позволяющий создавать приложения дополненной реальности.
- Wikitude — расширяет возможности приложений для iOS, Android и умных очков с помощью отслеживания изображений и объектов, мгновенного отслеживания (SLAM), Geo AR и других функций.
Инструменты для совместной работы
Ищете инструменты для гибкой совместной работы в области дизайна и разработки? Отличная идея, ведь такие инструменты упрощают жизнь дизайнеров и разработчиков, экономят время и повышают производительность. Ну, в эпоху Slack вы и так всё это знаете. Здесь вы найдете лучшие инструменты для совместной работы продуктовых команд:
- Airtable — часть таблицы, часть базы данных, и полностью гибкий инструмент, который команды используют для организации своей работы так, как им удобно.
- Asana — платформа управления работой, которую команды используют, чтобы сосредоточиться на целях, проектах и ежедневных задачах для развития бизнеса.
- Basecamp — набор инструментов для управления проектами, предназначенный для организации сотрудников, распределения задач и отслеживания прогресса в одном месте.
- Freedcamp — самый инновационный способ управления проектами, полностью бесплатный... навсегда.
- Droplr — создание скриншотов, обмен файлами и записи экрана для объяснения идей.
- Excalidraw — инструмент для рисования диаграмм с эффектом ручного наброска.
- Filestage — программное обеспечение для гибкого утверждения контента, помогающее рецензировать видео, дизайн и документы с клиентами и коллегами.
- Float — инструмент для планирования проектов и распределения времени команды в одном месте.
- Gallery — инструмент для совместной работы, позволяющий загружать дизайнерские работы, получать отзывы и отслеживать изменения.
- HiveDesk — автоматическое отслеживание времени для удаленных сотрудников со скриншотами. Упрощает мониторинг производительности удаленных сотрудников и управление проектами.
- Jira — инструмент разработки программного обеспечения, используемый гибкими командами.
- Jitsi — мультиплатформенная система видеоконференций с открытым исходным кодом, которую можно установить или использовать на их серверах.
- Keybase — бесплатное приложение для совместной работы с встроенным сквозным шифрованием чатов, обменом файлами, git-репозиториями и другими функциями.
- Lumeer — простой визуальный инструмент для планирования, организации и отслеживания чего угодно, где угодно и когда угодно.
- Mattermost — гибкая платформа обмена сообщениями с открытым исходным кодом, соответствующая строгим стандартам конфиденциальности и безопасности.
- Milanote — простой в использовании инструмент для организации идей и проектов в виде визуальных досок.
- Mixed — инструмент для совместной работы и рисования в режиме реального времени для распределенных команд.
- Moqhub — быстрый онлайн-инструмент для проверки креативных проектов. Получайте отзывы по изображениям и PDF.
- MURAL — визуально мыслите и сотрудничайте где угодно и когда угодно.
- Nextcloud — платформа для совместной работы с открытым исходным кодом, включающая файлы, канбан-доски, чаты и звонки, календарь и многое другое.
- Notion — пишите, планируйте, сотрудничайте и организуйте свою работу. Notion — всё, что вам нужно, в одном инструменте.
- ProofHub — единое место для всех ваших проектов, команд и коммуникаций.
- RealtimeBoard (Miro) — платформа для совместной работы кросс-функциональных команд, ранее известная как Miro.
- Slack — хаб для совместной работы, независимо от типа вашей работы. Это место, где происходят разговоры, принимаются решения и всегда доступна информация.
- Sunsama — красиво оформленный менеджер задач для команд, объединяющий задачи из Trello/Jira/Asana в единую календарную систему.
- Taskade — простая, увлекательная и предназначенная для удаленных команд платформа для повышения производительности. Taskade синхронизируется в реальном времени на вебе, мобильных устройствах и настольных компьютерах.
- Trello — веб-приложение для управления проектами, которое позволяет организовывать и расставлять приоритеты для ваших проектов весело, гибко и эффективно.
- Witeboard — простой в использовании онлайн-доска для совместной работы в реальном времени.
- Workzone — простое и мощное программное обеспечение для управления проектами.
- Wrike — онлайн-программное обеспечение для управления проектами, предоставляющее полный контроль над задачами.
- Zenkit — инструмент для планирования встреч, отслеживания прогресса проектов и мозгового штурма новых идей.
- zipBoard — онлайн-инструмент для визуального отслеживания ошибок и аннотирования веб-сайтов.
- Zulip — сочетает оперативность чатов в реальном времени с моделью тредов электронной почты, помогая сосредоточиться на важных обсуждениях и игнорировать несущественные.
You can also have design collaboration into InVision Freehand tool.
Инструменты для выбора цвета
Если вы ищете инструмент пипетки, идентификатор цвета или захват цвета, обратите внимание на этот раздел. С помощью указанных здесь инструментов для выбора цвета вы сможете создавать новые цветовые комбинации и находить отличные варианты. Почти все эти инструменты бесплатны:
- BrandColors — крупнейшая коллекция официальных цветовых кодов брендов.
- Calcolor — веб-инструмент для управления цветовыми палитрами, предлагающий новый способ взаимодействия с цифровыми цветами.
- Chroma — бесплатное веб-приложение, которое позволяет определить цвет.
- Color — создавайте цветовые схемы с помощью цветового круга или просматривайте тысячи цветовых комбинаций от сообщества Color. Разработано Adobe.
- Color by Cloudflare — инструмент для предварительного просмотра палитр с элементами пользовательского интерфейса, циклического просмотра доступных цветовых комбинаций и создания палитр вручную, через URL-импорт или генеративно.
- Color Deck — коллекция палитр цветов, основанная на HSL. Инструмент также является open-source.
- Color Hexa — бесплатный инструмент для получения информации о любом цвете и генерации соответствующих цветовых палитр для дизайнов.
- Color Hex Picker — инструмент для определения названия любого цвета из изображения. Также предоставляет HEX-код и RGB-значение цвета.
- Color Hunt — бесплатная и открытая платформа для вдохновения цветами с тысячами модных цветовых палитр, отобранных вручную.
- ColorKit — инструмент для смешивания цветов и генерации оттенков и полуоттенков цветов.
- Color Leap — перенеситесь во времени и посмотрите цвета истории.
- ColorSlurp — универсальный инструмент для работы с цветами, который повышает продуктивность дизайнеров и разработчиков.
- ColorsWall — место для хранения или генерации цветовых палитр.
- Colorwise — поиск цветовых палитр самых популярных продуктов на Product Hunt.
- Colour Cafe — вдохновение цветами на Instagram с подбором современной цветовой палитры.
- Colourcode — онлайн-инструмент для дизайнеров, который позволяет легко и интуитивно комбинировать цвета.
- Coolors — супербыстрый генератор цветовых схем.
- Culrs — продуманно созданные и удобные цветовые палитры.
- Geenes — инструмент для создания гармоничных цветовых тем с экспортом кода и файлов Sketch.
- Image Color Picker — инструмент выбора цвета из изображения и генератор цветовых схем.
- Instant Eyedropper — минималистичный инструмент пипетки для Windows, поддерживающий несколько цветовых форматов для дизайнеров и разработчиков.
- Just Color Picker — бесплатный портативный автономный инструмент для выбора и редактирования цветов.
- Khroma — инструмент на базе ИИ для генерации цветовых палитр на основе ваших предпочтений.
- Material Colors Native — цветовая палитра дизайна Material от Google в формате приложения для macOS.
- Material Design Palette Generator — получение идеальных цветовых палитр дизайна Material из любого HEX-кода.
- Paletton — дизайнерский инструмент для создания цветовых комбинаций, которые хорошо работают вместе.
- Picular — сверхбыстрый генератор основных цветов, использующий поиск изображений Google.
- Pigment — генератор цветовых палитр с бесчисленными цветовыми конфигурациями, предлагаемыми приложением.
- Pikka — инструмент для выбора цвета и генерации цветовых схем для macOS.
- React Color — коллекция инструментов для выбора цвета из Sketch, Photoshop и Chrome. Бесплатный и с открытым исходным кодом.
- Sip — лучший способ собирать, организовывать и делиться цветами. Глобальный инструмент пипетки для macOS.
- Skala Color — поддерживает множество форматов, охватывающих всё, что может понадобиться для разработки веба, iOS, Android и macOS.
- Swatches — приложение для iOS, которое позволяет собирать, исследовать и делиться цветами, которые вдохновляют вас в повседневной жизни.
- Tint & Shade Generator — отображает оттенки и полутона заданного цвета HEX с шагом в 10%.
- Viz Palette — инструмент выбора цвета для визуализации данных.
Вы также можете создавать цветовые палитры с помощью Leonardo, который упоминается в разделе Инструменты доступности.
Инструменты обратной связи по дизайну
Как вы предоставляете и получаете обратную связь в процессе разработки? Для многих продуктовых команд этот процесс обычно довольно хаотичен, что приводит к задержкам и потере времени на бесконечные обсуждения. Если вы хотите быстро и структурировано получать обратную связь по проблемам пользовательского интерфейса или визуальным багам — обратите внимание на этот инструмент:
- Flawless Feedback — просматривайте и аннотируйте приложения для iOS, затем делитесь отзывами в Jira или Trello.
- GoVisually — программное обеспечение для онлайн-проверки, рецензирования и утверждения дизайна.
Инструменты передачи дизайна
Передача дизайна происходит, когда дизайнеры завершают работу и должны передать свои разработки разработчикам со всеми спецификациями и ресурсами. Инструменты для передачи дизайна позволяют автоматически генерировать гайд по стилю, оставлять комментарии к дизайну, а также инспектировать элементы. Эти инструменты минимизируют догадки и повышают эффективность процесса проектирования.
- Avocode — открывайте дизайны без использования инструментов для проектирования. Экспортируйте изображения без подготовки слоев. Кликайте на слои, чтобы получить код.
- Flawless App — инструмент для сравнения ожидаемого дизайна с реальным приложением прямо в iOS Simulator (полезен для дизайнеров, работающих с Xcode, или мобильных разработчиков).
- Inspect — подготовка дизайнов для разработки. Создан Invision.
- Sketch Measure — плагин для Sketch, который добавляет аннотации расстояний и размеров элементов.
- Specctr — в случае, если вы разрабатываете пользовательский интерфейс в Photoshop, Illustrator или InDesign, этот инструмент создаёт аннотации с размерами элементов.
- Sympli — автоматическая передача спецификаций и ресурсов из Sketch, Photoshop и Adobe XD. Интегрируется с Jira, Xcode и Android Studio.
- Zeplin — передавайте дизайны и гайды по стилям с точными спецификациями, ресурсами и сниппетами кода автоматически.
Вы также можете осуществить передачу дизайна с помощью Relay, который упоминается в разделе Контроль версий.
Вдохновение для дизайна
Творческий процесс может быть сложным. Если идеи не приходят сразу, попробуйте найти вдохновение в работах других дизайнеров. Эти сайты с дизайнерским вдохновением предлагают шаблоны дизайна, пользовательские потоки, разметки электронных писем и креативные решения популярных компаний и отличных продуктов:
- Behance — онлайн-платформа для демонстрации и поиска креативных работ.
- CodeMyUI — тщательно подобранная коллекция вдохновения для веб-дизайна и пользовательского интерфейса с фрагментами кода.
- Collect UI — платформа для ежедневного вдохновения, собранного из Daily UI и других источников. Основана на работах Dribbble, включает 14419 отобранных дизайнов.
- Creative Portfolios — подборка самых креативных портфолио, созданных дизайнерами и разработчиками.
- Design Hunt — ежедневная коллекция лучших продуктов, приложений и вдохновения для всех творческих людей.
- Dribbble — онлайн-сообщество для демонстрации работ пользователей. Отличный ресурс для вдохновения.
- Ficture — архив использования шрифтов, который вдохновляет.
- Inspiration UI — сообщество, предоставляющее лучшие дизайнерские ресурсы для создателей веб-контента.
- Hover States — демонстрация выдающихся работ на переднем крае цифровой культуры для творческого сообщества.
- Httpster — источник вдохновения, демонстрирующий крутые сайты, созданные людьми со всего мира.
- H69.Design — коллекции лендингов и бесплатные ресурсы для дизайнеров.
- Lapa Ninja — вдохновение дизайном лендингов со всего интернета. 1800+ примеров лендингов, ежедневно обновляемых.
- Mobile Patterns — библиотека вдохновения для дизайна, включающая лучшие UI/UX паттерны (iOS и Android).
- Mobbin — изучение мобильных паттернов дизайна популярных приложений. Исследуйте распространенные пользовательские потоки, такие как онбординг, регистрация и вход в систему, основные функции и многое другое.
- One Page Love — коллекция красивых и уникальных одностраничных сайтов для вдохновения в веб-дизайне.
- Owwly — дом для цифровых продуктов, созданных с любовью к дизайну.
- Page Flows — видео и скриншоты пользовательских потоков для вдохновения. Откройте для себя паттерны дизайна для более чем 160 различных задач.
- pttrns — паттерны дизайна для популярных мобильных приложений.
- Really Good Emails — более 4,150 отобранных дизайнов электронных писем.
- ReallyGoodUX — скриншоты и примеры отличного UX из реальных мобильных и веб-продуктов. Исследуйте лучшие примеры UX, включая онбординги и пошаговые инструкции.
- Saas Landing Page — откройте лучшие примеры лендингов, созданных ведущими SaaS-компаниями, и получите идеи и вдохновение для вашего следующего проекта.
- Saas Pages — коллекция лучших лендингов с акцентом на копирайтинг и дизайн.
- The Design Team — комиксы о команде дизайнеров стартапа из Силиконовой долины.
- Typewolf — помогает дизайнерам выбрать идеальные сочетания шрифтов для их следующих проектов.
- UI Garage — универсальный ресурс для дизайнеров, разработчиков и маркетологов, чтобы найти вдохновение, инструменты и лучшие ресурсы.
- UI Sources — более 500+ взаимодействий из лучших дизайнерских и высокодоходных приложений в App Store.
- UI Recipes — еженедельные 15-минутные уроки по дизайну пользовательского интерфейса из лучших приложений.
- UX Archive — исследуйте более 400 пользовательских потоков в 120 мобильных приложениях. Изучайте задачи, такие как бронирование, вход в систему, онбординг, покупки, поиск и многое другое.
- Waveguide — банк знаний о дизайне с тысячами примеров мобильных приложений, лендингов, eCommerce, CX/UX паттернов.
- Web Design Museum — более 1,200 тщательно отобранных веб-сайтов, демонстрирующих тренды веб-дизайна с 1994 по 2006 годы.
Дизайн-системы
Могу поспорить, вы слышали о дизайн-системах, ведь это довольно модная тема. Дизайн-системы предоставляют последовательные и надежные шаблоны дизайна, чтобы поддерживать синхронизацию между дизайном и разработкой. По сути, это коллекции правил, ограничений и принципов, реализованных в дизайне и коде. Здесь вы найдете инструменты для создания, поддержки и организации вашей дизайн-системы.
- Cabana — премиальная дизайн-система для Sketch, которая помогает создавать удивительные продукты быстрее, чем когда-либо.
- Catalog — живой гайд по стилю для цифровых продуктов, объединяющий документацию по дизайну с реальными работающими компонентами.
- Design System Manager — менеджер дизайн-систем от Invision.
- DSK — сокращение от "Design System Kit" — рабочее пространство для совместного создания дизайн-систем.
- EOS Design System — система с открытым исходным кодом, настраиваемая, построенная на Bootstrap, следуя концепции Atomic Design.
- Eva Design System — настраиваемая дизайн-система, доступная для Sketch с библиотеками компонентов для мобильных и веб-платформ.
- Frontify — создавайте графические руководства, библиотеки паттернов и дизайн-системы.
- Interplay — объедините дизайн и разработку вокруг единого источника истины. Инструмент пока недоступен для широкой публики (бета).
- Lingo — создавайте общую библиотеку ресурсов с вашей командой.
- Lucid — инструмент для создания, управления и обмена дизайн-системами. От простой библиотеки компонентов до детального описания стилей.
- Modulz — проектируйте, создавайте, документируйте и публикуйте свою дизайн-систему без написания кода.
- Prime Design System Kit — включает шаблоны устройств, диаграммы, UI-набор и даже набор иллюстраций.
- Specify — инструмент для создания, масштабирования и поддержки дизайн-системы.
- Storybook — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular.
- Symbol Design System — дизайн-система для Sketch на основе атомарных элементов.
- Toolabs — инструмент для проектирования, прототипирования и разработки дизайн-систем и компонентов. Пока недоступен для широкой публики, но вы можете подать заявку на ранний доступ.
- Zeroheight — гайды по стилю, создаваемые дизайнерами, расширяемые разработчиками и редактируемые всеми.
Дизайн в код
Каждый может научиться разработке, но это требует времени и усилий. Если вам нужен сайт или приложение прямо сейчас, и вы не хотите нанимать разработчика, обратите внимание на конструкторы сайтов. Такие инструменты «дизайн в код» помогут вам быстро и красиво создать портфолио, простой лендинг или приложение.
- Anima — веб-приложение с плагином для Sketch, которое конвертирует Sketch в HTML.
- Blocs — быстрый, простой в использовании и мощный визуальный инструмент веб-дизайна, позволяющий создавать адаптивные сайты без написания кода.
- Bootstrap Studio — мощный инструмент веб-дизайна для создания адаптивных сайтов с использованием фреймворка Bootstrap.
- Draftbit — визуально проектируйте и создавайте мобильные приложения прямо из вашего браузера.
- EasyLogic Studio — фантастический инструмент дизайна css+svg, который также конвертируется в код.
- Grapedrop — создавайте компоненты, веб-проекты и публикуйте их мгновенно в интернете с помощью простого редактора.
- Mobirise — автономное программное обеспечение для создания сайтов с функцией drag-and-drop, основанное на Bootstrap 3/4 и AMP.
- PageCloud — самый быстрый и настраиваемый конструктор сайтов, позволяющий любому создать идеальный сайт.
- PaintCode — приложение для векторной графики, которое мгновенно конвертирует рисунки в код Swift, Objective-C, JavaScript или Java.
- Pinegrow — профессиональный визуальный редактор для CSS Grid, Bootstrap 4 и 3, Foundation, адаптивного дизайна, HTML и CSS.
- px.div — качественный инструмент создания сайтов для разработчиков и дизайнеров.
- Readymag — визуально приятный инструмент для веб-дизайна, от лендингов до мультимедийных лонгридов, презентаций и портфолио.
- Sparkle — самый простой способ создать настоящий сайт: без кода и сложных терминов.
- STUDIO — создавайте с нуля, сотрудничайте в реальном времени и публикуйте сайты.
- Supernova Studio — импортируйте дизайны из Sketch и конвертируйте их в код для Android, iOS или React Native.
- Tilda — создавайте сайт, лендинг или интернет-магазин бесплатно с помощью модулей Tilda и публикуйте в тот же день.
- Wix — самый простой и многофункциональный конструктор сайтов, позволяющий создать уникальный сайт.
- Webflow — создавайте адаптивные сайты прямо в браузере, затем хостите у нас или экспортируйте код для размещения где угодно.
Контроль версий дизайна
Разработчики уже давно активно используют инструменты контроля версий, вероятно, начиная с 2005 года (первый релиз Git). Использование системы контроля версий — очевидный выбор для команд разработчиков, в то время как системы контроля версий для дизайнеров появились совсем недавно. Этот рынок быстро развивается, и мы ожидаем увидеть еще больше возможностей в области контроля версий для дизайнеров:
- Abstract — платформа для команд дизайнеров, позволяющая версионировать, управлять и совместно работать с файлами Sketch.
- Folio — простая система контроля версий для дизайнерских команд, основанная на Git.
- Kactus — контроль версий для дизайна без необходимости менять используемые инструменты. Управляйте изменениями, документируйте работу и поддерживайте синхронность команды.
- Plant — приложение для Mac и плагин Sketch, предоставляющие полный контроль версий для дизайнеров и команд.
- Relay for Figma — Relay передает ваши последние активы из Figma напрямую в кодовую базу (еще не выпущен).
- Versions — инструмент контроля версий для дизайнеров с функциями визуального сравнения, слияния и разрешения конфликтов. Работает с GitHub, Bitbucket, GitLab и Azure DevOps.
Инструменты разработки
Этот раздел упоминает инструменты разработки и браузеры. Браузеры для разработки включают функции, которые помогают разработчикам и дизайнерам создавать и тестировать сайты и приложения.
- Blisk — предоставляет рабочее пространство для разработки и тестирования современных веб-приложений в два раза быстрее.
- Firefox Developer Edition — разработческая версия браузера Firefox.
- Litmus — платформа для создания email-кампаний, которая, среди прочего, позволяет увидеть, как HTML-письма будут отображаться в различных почтовых клиентах.
- Polypane — браузер, созданный с нуля для разработки и тестирования сайтов и приложений.
- Storybook — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. Делает процесс создания потрясающих пользовательских интерфейсов организованным и эффективным.
- Styleguidist — изолированная среда разработки компонентов React с живым гайдом по стилям.
Мониторинг пользовательского опыта
Слушать пользователей важно, но еще важнее видеть, как они на самом деле используют ваш продукт. Для этого нужно установить различные аналитические инструменты, программное обеспечение для мониторинга опыта и приложения для анализа поведения пользователей. Просто используйте эти аналитические решения, учитывая данные пользователей:
- Amplitude — поймите своих пользователей, быстро создавайте лучшие продуктовые впечатления и развивайте свой бизнес.
- Chalkmark — повышайте конверсию клиентов и успех выполнения задач, получая быстрые отзывы о дизайне до его реализации.
- Fathom — предоставляет простую и полезную статистику сайта без отслеживания или хранения персональных данных ваших пользователей.
- FullStory — приложение, которое собирает все данные о взаимодействии клиентов с вашим продуктом на одной мощной и удобной платформе.
- Google Analytics — измеряйте ROI вашей рекламы и отслеживайте сайты и приложения.
- Heap — автоматически фиксируйте каждое взаимодействие в вебе, на мобильных устройствах и в облаке, а затем анализируйте данные ретроспективно без написания кода.
- Heatly — бесплатный инструмент тепловых карт для лучшего понимания пользовательского опыта на сайте.
- Hotjar — посмотрите, как посетители используют ваш сайт, и собирайте отзывы пользователей.
- Inspectlet — записывайте видео сессий ваших посетителей, чтобы видеть всё, что они делают на сайте.
- LiveSession — аналитика воспроизведения пользовательских сессий высокого качества.
- LogRocket — увидьте, что делают пользователи на вашем сайте, что поможет быстрее воспроизводить баги и устранять проблемы.
- Mixpanel — получите инсайты по всем данным, ориентированным на пользователей, чтобы принимать более умные решения и действовать быстрее, основываясь на том, как клиенты используют ваш продукт или сайт.
- Mouseflow — записывайте перемещения курсора мыши.
- Pendo — измеряйте и улучшайте клиентский опыт внутри приложений.
- Smartlook — воспроизведение сессий пользователей и аналитика вовлеченности.
- Usabilla — создавайте клиентоориентированный опыт, задавая правильные вопросы в нужное время.
Инструменты работы со шрифтами
Шрифты часто используются для того, чтобы сделать веб более красивым. Это важнейшая часть любого дизайна. В этом разделе вы найдете генераторы шрифтов и инструменты для поиска шрифтов, которые позволяют управлять ими и работать с ними:
- BeFonts — приличная коллекция бесплатных шрифтов.
- Behance Free Fonts — список бесплатных шрифтов, загруженных на Behance.
- DaFont — архив шрифтов, доступных для бесплатного скачивания. Сортировка по алфавиту, стилю, автору или популярности.
- Emotype — позволяет легко находить шрифты на основе эмоций, которые вы хотите передать на своем сайте.
- Fontbase — простой инструмент для управления шрифтами.
- FontFabric — красивый интерфейс и хорошая коллекция шрифтов.
- Fontface Ninja — расширение для браузера, которое позволяет определить шрифты, используемые на любом сайте.
- FontPair — простой инструмент, помогающий сочетать шрифты Google.
- Fontown — типографический инструмент с постоянно растущим каталогом шрифтов, упрощающий рабочий процесс дизайнеров.
- Fonts — тысячи красивых шрифтов от Adobe.
- Fonts Arena — сайт о типографике с качественными бесплатными шрифтами, исследованиями, бесплатными альтернативами премиум-шрифтам и новостями.
- FontGet — разнообразие шрифтов, аккуратно отсортированных по тегам.
- FontSelf — расширение для Illustrator и Photoshop CC, позволяющее превратить любой текст в шрифт OpenType за считанные минуты!
- FontSpark — простой инструмент для быстрого поиска лучших шрифтов для проектов.
- Font Squirrel — скачивайте бесплатные шрифты из широких коллекций.
- Google Fonts — делает веб красивее, быстрее и открытее благодаря отличной типографике.
- Google Webfonts Helper — удобный способ размещения шрифтов Google на собственном сервере. Бесплатно и с открытым исходным кодом.
- LostType — первая типографика с подходом "плати сколько хочешь".
- Measure — измеряйте длину строк текста с этим расширением для Chrome.
- RightFont — приложение для управления шрифтами, помогает просматривать, синхронизировать, устанавливать и организовывать шрифты через iCloud, Dropbox или Google Drive.
- Sans Forgetica — шрифт, который помогает лучше запоминать учебные заметки.
- Size Calculator — рассчитывает воспринимаемый размер текста с учетом расстояния просмотра и физического размера типографики.
- Typeface — менеджер шрифтов, который улучшает рабочий процесс дизайна с помощью живых превью шрифтов и гибкой системы тегов.
- Wakamai Fondue — инструмент, отвечающий на вопрос "что умеет мой шрифт?".
- Web Font Preview — предварительный просмотр пар шрифтов Google с компонентами и шаблонами сайтов.
- Webfont — создавайте и управляйте пользовательскими SVG-иконками-шрифтами, создавая общую библиотеку значков.
- WordMarkIt — отображает написанные вами слова/фразы всеми шрифтами, которые уже установлены на вашем компьютере.
Вы также можете управлять шрифтами с помощью Specify, который упоминается в разделе Дизайн-системы.
Инструменты для создания градиентов
Градиенты можно увидеть повсюду — в интерфейсе, брендинге, иллюстрациях, типографике. Градиент создается с использованием двух или более разных цветов, которые постепенно переходят друг в друга. Это может выглядеть как запоминающийся, свежий и уникальный цвет. Чтобы создать такой градиент для вашего дизайна, используйте эти палитры градиентных цветов.
- Blend — создавайте и настраивайте красивые CSS3 градиенты.
- Colorffy — получайте CSS, изображения, превью интерфейсов или создавайте собственные градиенты.
- Colors & Fonts — библиотека цветов, градиентов и шрифтов, отобранная для цифровых дизайнеров и веб-разработчиков.
- ColorSpace — идеальная цветовая палитра для вашего следующего проекта! Генерируйте красивые цветовые схемы.
- ColorSpark — помогает дизайнерам находить уникальные цвета и яркие градиенты.
- Cool Backgrounds — изучите тщательно отобранную коллекцию крутых фонов, которые вы можете добавить на блоги, сайты.
- CoolHue — отобранная палитра градиентов для вашего следующего потрясающего проекта.
- CSS Gradient — бесплатный инструмент генерации CSS-градиентов, который позволяет создавать красочные градиенты.
- Egg Gradients — коллекция оттенков 12 разных цветов.
- Grabient — красивый и простой интерфейс для генерации веб-градиентов.
- Gradienta — многокрасочные CSS-градиенты, JPG-загрузки, 100% бесплатно!
- GradientsList — крупнейшая краудсорсинговая коллекция градиентов с ежедневными добавлениями пользователей через Gradients Maker для iOS.
- Gradient Generator — инструмент, который генерирует ступенчатые градиенты между двумя цветами.
- Gradient Hunt — бесплатная открытая платформа для вдохновения цветами с тысячами модных ручных градиентов.
- Gradients Guru — изображения фонов в режиме смешивания и красивые градиенты для вашего интерфейса.
- HtmlColours — узнайте, как легко и красиво создавать градиенты с этим генератором градиентов.
- UI Gradients — тщательно отобранная коллекция красивых цветовых градиентов для дизайнеров и разработчиков.
- Web Gradients — бесплатная коллекция из 180 линейных градиентов, которые можно использовать как фоны для контента на любом участке вашего сайта.
Вы также можете создавать и проверять градиенты с помощью Leonardo, который упоминается в разделе Инструменты доступности.
Инструменты для работы с иконками
Как и шрифты, иконки используются в каждом дизайне. Эти базовые элементы поддерживают и направляют многие действия пользователей внутри продукта. Без сомнения, иконки являются важным элементом пользовательской навигации. Создание таких небольших элементов дизайна сложно и требует много времени, но вы можете найти тысячи векторных иконок для личного и коммерческого использования.
- Animaticons — растущая коллекция красивых анимированных GIF-иконок высокого разрешения, которые можно настроить.
- CoreUI Icons — премиум набор бесплатных иконок в SVG, Webfont и растровых форматах.
- Digital Nomad Icons — набор иконок и эмодзи в стиле digital nomad. 25 иконок высокого разрешения.
- Essential Glyphs — идеально подходящие иконки для любых размеров.
- Feather Icons — каждая иконка разработана на сетке 24x24 с акцентом на простоту, согласованность и читаемость.
- Flaticon — более 1 593 000 векторных иконок в SVG, PSD, PNG, EPS форматах или как иконный шрифт.
- Font Awesome — самый популярный набор иконок и инструментов для веба, также с открытым исходным кодом.
- Fontello — инструмент для создания собственных шрифтов с иконками, также с открытым исходным кодом.
- Freepik — коллекция эксклюзивных бесплатных ресурсов и всех графических элементов, необходимых для ваших проектов.
- Iconscout — высококачественные иконки, иллюстрации и стоковые фото в одном месте.
- Iconfinder — маркетплейс векторных иконок (SVG). Наборы иконок доступны в формате IconJar.
- IconJar — храните все ваши иконки в одном менеджере.
- Iconmonstr — более 4412 бесплатных иконок в 305 коллекциях. Большой и постоянно растущий ресурс.
- Iconset — бесплатный, кроссплатформенный и быстрый менеджер SVG-иконок для Mac и Windows.
- Icon Store — библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами.
- ICONSVG — инструмент для упрощения поиска и генерации стандартных иконок для вашего проекта.
- Icons8 — бесплатные иконки в стиле iOS, Android и Windows.
- Ikonate — настройка, регулировка и загрузка бесплатных векторных иконок.
- illustrio — умная библиотека иконок. Создавайте что-то великое с полностью настраиваемыми иконками.
- Ionicons — красиво разработанные иконки с открытым исходным кодом.
- Material Design Icons — бесплатные иконки в стиле Material Design, созданные благодаря вкладу сообщества.
- Material Icons Library — бесплатная коллекция более 1000 иконок для популярных графических инструментов.
- Motion — бесплатный и простой редактор анимации иконок.
- Norde Source — приложение для Mac, Windows и Linux для раскраски и настройки набора иконок под ваш бренд.
- Noun Project — иконки для всего.
- Nucleo — приложение для Mac и Windows для сбора, настройки и экспорта всех ваших иконок.
- Orion Icons — векторные SVG-иконки с продвинутым интерактивным веб-приложением.
- Simple Icons — бесплатные SVG-иконки для популярных брендов. Просто нажмите на нужную иконку, и загрузка начнется автоматически.
- Share Icon — более 300 000 бесплатных иконок для скачивания в различных форматах.
- Streamline Emoji — бесплатная коллекция из 850+ векторных эмодзи. Стиль вдохновлен японским стилем "Каваий" (милый).
- Svgsus — инструмент управления SVG-иконками.
- SVG Colorizer — инструмент для автоматического изменения всей цветовой палитры любого набора SVG-иконок, сохраняя оттенки, блики и тени.
- SVGRepo — сайт с более чем 300 000 SVG-векторов и иконок.
- Tilda Icons — скачивайте бесплатные иконки для лендингов. Более 700 векторных иконок, собранных в 43 наборах для бизнеса.
- Twemoji — проект Twitter с открытым исходным кодом, предоставляющий эмодзи для любых нужд.
- Unicons — более 1000 пиксельно-идеальных векторных иконок для вашего проекта.
- VisualPharm — бесплатные SVG-иконки с супербыстрым поиском. Создано для веселья командой Icons8.
- Xicons — бесплатные векторные иконки, которые обновляются каждые 10 дней.
- Zwicon — вручную созданный набор иконок для вашего проекта.
Вы также можете управлять иконками с помощью Specify, который упоминается в разделе Дизайн-системы.
Иллюстрации
Иллюстрации можно использовать на лендинге, в постах блога, внутри вашего приложения или в email-кампаниях. Они делают ваш дизайн живым и игривым. Хотя создание хороших иллюстраций — это задача для опытного графического дизайнера, вы можете найти бесплатные SVG-изображения и иллюстрации от добрых людей из нашего сообщества:
- Absurd Design — бесплатные сюрреалистические иллюстрации для ваших проектов.
- Blobmaker — создавайте векторные иллюстрации blob прямо в браузере с возможностью настройки цвета, сложности и контраста.
- Blush — создавайте, смешивайте и настраивайте иллюстрации, созданные художниками со всего мира.
- Humaaans — бесплатная библиотека для создания иллюстраций с людьми путем комбинирования элементов.
- Illustration by Pngtree — более 13142 профессионально разработанных иллюстраций различных стилей.
- IRA Design — создавайте потрясающие иллюстрации, используя нарисованные от руки компоненты, выбор из 5 градиентов, а также форматы ai., svg. или png.
- JoeSchmoe — коллекция иллюстрированных аватаров для разработчиков и дизайнеров, идеально подходит в качестве заполнителей или для живых сайтов.
- LukaszAdam — бесплатные векторные иллюстрации и иконки. Доступны для личного и коммерческого использования.
- ManyPixels — бесплатные иллюстрации без роялти для усиления ваших проектов.
- Mega Doodles Pack — большой векторный набор с нарисованными от руки doodles для презентаций, соцсетей, блогов и других целей.
- Open Doodles — набор бесплатных иллюстраций от Pablo Stanley, поддерживающий концепцию открытого дизайна. Вы можете копировать, редактировать, ремиксовать, делиться или переделывать эти изображения для любых целей без ограничений. Лицензия CC0.
- Ouch — векторные иллюстрации для улучшения ваших проектов. Бесплатно для личного и коммерческого использования.
- Squircley — всё, что вам нужно, чтобы начать создавать красивые SVG squircle.
- unDraw — коллекция красивых SVG-изображений.
- Wannapik — коллекция бесплатных иллюстраций, векторных изображений, фотографий и анимаций для любых целей.
Информационная архитектура
Информационная архитектура помогает дизайнерам организовывать и структурировать контент внутри веб-сайтов, мобильных приложений и другого программного обеспечения. Это помогает пользователям понять функциональность продукта и находить все необходимое. Эти инструменты для информационной архитектуры помогут вам создавать визуальные карты сайта и улучшать структуру контента вашего веб-сайта:
- DYNO Mapper — организуйте проекты веб-сайтов с помощью визуальных карт сайта, инвентаризации контента, аудита контента, планирования контента, ежедневного отслеживания ключевых слов и тестирования доступности веб-сайта.
- Octopus.do — визуальный инструмент для создания карт сайта. Создавайте структуру сайта в реальном времени и быстро делитесь ею для совместной работы с вашей командой или клиентами.
- OmniGraffle — создавайте красивые диаграммы и дизайны с помощью этого мощного и простого в использовании приложения.
- OptimalSort — инструмент для сортировки карточек, который помогает понять, как люди группируют контент в вашем интерфейсе.
- Treejack — загрузите предложенную карту сайта, чтобы увидеть, как пользователь будет перемещаться по вашему сайту.
- WriteMaps — создавайте карты сайта, которые впечатляют! Планируйте страницы и контент для вашего следующего проекта веб-сайта визуально, увлекательно и красиво.
Дизайн логотипов
Логотип — это отправная точка вашей бренд-идентичности. Он отражает миссию продукта, его функциональность и послание бренда. Идеальный логотип создает прочную связь между вашим продуктом и пользователями. Дизайн логотипа — это искусство, как и многие другие дисциплины дизайна. С помощью правильных инструментов для дизайна логотипов это искусство можно реализовать немного быстрее.
- Design Evo — большая коллекция векторных иконок и форм, которые помогут вам легко создать пользовательский логотип.
- Free Logo Design — создавайте потрясающие профессиональные логотипы за считанные секунды.
- Graphic Springs — выберите из галереи шаблонов логотипов в векторном формате, отсортированных по отраслям. Редактируйте графику и текст шаблона, затем скачайте его.
- Logo Design Team — предлагает доступные профессиональные услуги по разработке логотипов и бренд-дизайна на заказ.
- Logojoy — использует искусственный интеллект для мгновенной генерации уникальных идей логотипов для вашего бизнеса.
- Logo Lab — тестируйте свой логотип с помощью автоматизированных визуальных экспериментов.
- Logo Maker — позволяет создать бесплатный логотип за считанные секунды. Начните с пустого холста, добавьте текст и иконку, затем настройте дизайн.
- Logo Maker от Designhill — генерируйте тысячи уникальных логотипов за несколько минут, даже без опыта в дизайне.
- Logo Makr — создавайте логотипы бесплатно, выбирайте из сотен шрифтов и иконок, а затем сохраняйте логотип на компьютер.
- Logo My Way — выбирайте из 600 индивидуальных дизайнов логотипов от креативных дизайнеров со всего мира.
- Logo Package Express — экспортируйте и упаковывайте десятки вариантов логотипов и типов файлов для ваших клиентов автоматически за менее чем 5 минут.
- Logo Rank — загрузите свой логотип, чтобы узнать, как он оценивается по ряду объективных критериев.
- Wizlogo — создавайте логотипы с помощью простого и доступного инструмента, поддерживаемого профессиональными дизайнерами.
Вы также можете создать дизайн логотипа с помощью Adobe Photoshop, GIMP, Inkscape, Krita и Vectr, которые упоминаются в разделе UI дизайн.
Инструменты макетов
Макет (Mockup) — это визуальный способ представления продукта. В то время как каркас (wireframe) в основном отражает структуру продукта, макет показывает, как продукт будет выглядеть. Эти инструменты для создания макетов помогут вам разрабатывать и совместно работать над макетами, каркасами, диаграммами и прототипами:
- Artboard Studio — онлайн-приложение для графического дизайна, ориентированное на макеты продуктов.
- Cleanmock — создавайте впечатляющие макеты с использованием последних рамок устройств, таких как iPhone, и настраиваемых фонов.
- Craftwork Design — бесплатные и премиальные цифровые продукты высокого качества, которые ускоряют и упрощают вашу работу.
- Device Shots — инструмент для создания красивых макетов устройств с помощью скриншотов вашего веб-сайта или мобильного приложения бесплатно.
- Devices by Facebook — изображения и файлы Sketch популярных устройств.
- Dimmy.club — генератор макетов устройств для ваших веб-сайтов и скриншотов приложений.
- Frrames — идеально проработанные адаптивные макеты окон для вашей идеальной презентации.
- Lstore Graphics — бесплатные и премиум макеты, инструменты UI/UX, генераторы сцен для занятых дизайнеров.
- Mediamodifier — создавайте впечатляющие макеты продуктов за считанные секунды.
- Mockflow — самый быстрый способ для мозгового штурма идей пользовательского интерфейса.
- Mockup World — множество бесплатных и легальных, полностью слоистых, легко настраиваемых фотореалистичных PSD-файлов.
- Mockups For Free — бесплатные ресурсы для дизайнеров, PSD-файлы для графических и веб-дизайнеров.
- Mockuuups — инструмент drag-and-drop для создания красивых предварительных просмотров приложений или любых маркетинговых материалов.
- Mock Video — мгновенно создавайте макеты, добавляя рамки устройства к вашим видео.
- Moqups — помогает создавать и сотрудничать в реальном времени над каркасами, макетами, диаграммами и прототипами.
- Original Mockups — макеты высокого качества для Photoshop, которые выделят ваши дизайны.
- Overframe for Mac — записывайте свои прототипы и приложения с наложением рамок устройства.
- PixelBuddha — бесплатные и премиальные ресурсы высокого качества для веб-дизайнеров и разработчиков.
- Ramotion Store — тщательно проработанные макеты Apple и Android для Sketch и Photoshop.
- Rotato — анимированные 3D макеты для дизайнов приложений.
- SceneLab — создавайте реалистичные макеты и настраиваемые бренд-дизайны онлайн.
- Screely — быстро обрамляйте дизайны веб-страниц в минималистичное окно браузера.
- ScreenSpace — 3D-видео устройств для дизайнеров движения.
- Screenzy — мгновенно преобразуйте свои изображения и скриншоты в красивые макеты, готовые к публикации в социальных сетях.
- Screeener — используйте это приложение для добавления множества изображений в файл Keynote с выбранным вами макетом.
- Smartmockups — создавайте потрясающие макеты продуктов всего в несколько кликов.
- shotsnapp — создавайте красивые презентации макетов устройств для ваших цифровых приложений и веб-дизайнов.
- The Mockup Club — каталог лучших бесплатных макетов для Photoshop, Sketch, Figma и InVision Studio.
- Threed — генерируйте пользовательские 3D макеты устройств в вашем браузере.
- UI Store Design — более 200 бесплатных отобранных вручную ресурсов для Sketch, Figma, Adobe XD, InVision Studio, Photoshop, Illustrator CC.
- UI8 — Design Freebies — эпические бесплатные ресурсы для дизайна, чтобы начать вашу работу.
- Vector Mockups Library — бесплатная коллекция макетов для презентаций в Sketch, Figma и Photoshop.
Инструменты no-code
С появлением инструментов no-code каждый, у кого есть ноутбук, может создать и запустить проект. Эти инструменты помогают дизайнерам и создателям создавать веб-сайты, приложения и даже игры. Инструменты без кода позволяют автоматизировать рутинные задачи и могут использоваться без опыта в разработке. Ознакомьтесь с инструментами ниже, а если вам нужно больше, загляните в раздел Design to Code.
- Bubble — создавайте и размещайте веб-приложения без необходимости писать код или нанимать команду инженеров.
- Carrd — простые, бесплатные, полностью адаптивные одностраничные сайты практически для любых целей.
- Coda — новый тип документа, который объединяет гибкость текстов, мощь таблиц и утилиты приложений в едином холсте.
- Kodika.io — создавайте iOS-приложения с помощью конструктора приложений без кода для Mac и iPad, способного создавать мощные приложения с помощью Drag & Drop.
- PageXL — простой конструктор одностраничных сайтов для быстрого создания лендингов и интернет-магазинов.
- Remove.bg — бесплатный сервис для удаления фона с любого фото.
- Retool — предоставляет строительные блоки, чтобы вы могли создавать инструменты гораздо быстрее.
- sheet2api — создайте API из Google Sheets или Excel Online Spreadsheets без необходимости писать код.
- Sheet2Site — создайте сайт из Google Sheets без написания кода.
- Shopify — платформа со всеми функциями для электронной коммерции и точек продаж, необходимыми для запуска, ведения и роста вашего бизнеса.
- Thunkable — инструмент drag-and-drop для создания нативных мобильных приложений для всех.
- UserGuiding — создавайте пошаговые руководства, контрольные списки, подсветки и модальные окна для улучшения вовлечения пользователей.
Инструменты Pixel Art (пиксельная графика)
Пиксель-арт — это форма цифрового искусства, в которой цвет применяется к отдельным пикселям для создания изображения. Пиксельное искусство может использоваться для создания всего: от сложных сцен и фонов для игр до дизайна персонажей или эмодзи. Если вам интересно попробовать, изучите это программное обеспечение для пиксельного искусства для macOS и Windows:
- Aseprite — редактор анимированных спрайтов и инструмент для пиксельного искусства.
- Data Pixels — создание пиксельного искусства программно. Включает DataPixels.js и настольное приложение Data Pixels Playground.
- Draw! — бесплатный и с открытым исходным кодом веб-инструмент для редактирования пиксельного искусства и GIF.
- Grafx2 — программа для рисования растровой графики, вдохновленная Amiga-программами Deluxe Paint и Brilliance. Специализируется на рисовании с использованием 256 цветов.
- GraphicsGale — обладает множеством функций, специфичных для пиксельного искусства, включая управление палитрой, выборочное удаление цветов и инструменты для быстрой замены и тестирования новых цветов.
- Goya — редактор пиксельного искусства, построенный на ClojureScript и Om.
- Make 8 bit art — инструмент для рисования пиксельного искусства в браузере с открытым исходным кодом.
- Piskel — онлайн-редактор для анимированных спрайтов и пиксельного искусства.
- Pixel art to CSS — веб-приложение для анимации и рисования пиксельного искусства на CSS, созданное на базе React.
- Poxi — простой редактор пиксельного искусства.
- Pyxel Edit — редактор пиксельного искусства, созданный для увлекательного и простого создания тайлсетов, уровней и анимации.
Инструменты прототипирования
Прототип — это простой экспериментальный дизайн предлагаемого решения. Он должен помочь проверить идеи, дизайнерские предположения и гипотезы быстро и экономично. Инструменты для создания прототипов позволяют дизайнерам и клиентам увидеть, как продукт будет функционировать в реальном мире, и сотрудничать над этим решением. Многие современные инструменты для прототипирования можно использовать для построения каркасов, прототипирования и совместной работы.
- Alva — создавайте живые прототипы с компонентами кода. Также является open source.
- Axure RP — каркас, прототипирование, совместная работа и генерация спецификаций.
- SAP Build — полный набор облачных инструментов для проектирования и создания корпоративных приложений.
- Creo — прототипирование, экспорт кода и встроенный конструктор мобильных приложений.
- Drama — прототипирование, анимация и дизайн в одном приложении для Mac.
- InVision — платформа для прототипирования, совместной работы и управления рабочими процессами.
- Flinto — приложение для Mac, позволяющее создавать интерактивные и анимированные прототипы дизайнов приложений.
- Framer X — инструмент для визуального проектирования реалистичных интерактивных прототипов.
- Keynote — встроенное приложение для Mac для создания презентаций, которое также можно использовать для быстрого прототипирования (пример использования дизайнерами Apple на WWDC 2014 в сессии "Prototyping: Fake It Till You Make It").
- Lightwell — визуальный инструмент и SDK для создания мобильных макетов и анимаций, которые переводятся в элементы iOS.
- Marvel App — платформа для совместной работы над дизайном. Каркас, прототипирование, дизайн онлайн и создание спецификаций в одном месте.
- Maze — инструмент для дизайнеров и разработчиков, предоставляющий аналитические результаты с действенными KPI для ваших прототипов InVision.
- Origami — бесплатный инструмент для проектирования современных пользовательских интерфейсов. Быстро создавайте прототипы, запускайте их на iPhone или iPad, вносите изменения и экспортируйте фрагменты кода для разработчиков.
- Pencil — инструмент для прототипирования с множеством встроенных компонентов, которые легко устанавливаются и используются для создания макетов на популярных настольных платформах.
- Principle — делает процесс проектирования анимированных и интерактивных пользовательских интерфейсов простым и удобным.
- ProtoPie — создавайте высокоточные взаимодействия, прототипы с использованием сенсоров и делитесь своими удивительными творениями за считанные минуты.
- Proto.io — инструмент для создания полностью интерактивных прототипов высокой точности, которые выглядят и работают точно так же, как ваше приложение.
- Prott — простой в использовании инструмент для прототипирования, способствующий командной работе.
- Uizard — преобразуйте каркасы в высокоточные интерактивные прототипы, настраивайте системы стилей, экспортируйте в Sketch или HTML/CSS код.
- Useberry — инструмент для тестирования удобства использования, позволяющий импортировать прототипы из InVision, AdobeXD, Sketch, Marvel и получать аналитическую информацию о поведении пользователей с помощью тепловых карт, видеозаписей, пользовательских потоков, временных шкал и ответов на последующие вопросы.
- UXPin — создавайте прототипы, которые кажутся реальными, с возможностями компонентов кода, логики, состояний и систем дизайна.
Вы также можете заниматься прототипированием с помощью Figma, Adobe XD, Sketch и InVision Studio, которые упомянуты в разделе UI дизайн.
Для создания скриншотов
Создание скриншотов — типичная задача в рабочем процессе дизайна и разработки. Эти бесплатные и полнофункциональные приложения для скриншотов помогут вам легко захватывать экран. Некоторые инструменты работают только на macOS, в то время как другие поддерживают обе операционные системы:
- Camtasia — инструмент для записи экрана с встроенным полноценным редактором.
- CleanShot — захват экрана с улучшенным встроенным инструментом аннотаций и быстрым доступом.
- CloudApp — запись видео, веб-камеры, аннотирование скриншотов, создание GIF.
- Collabshot — делайте скриншоты и сотрудничайте над ними в реальном времени с коллегами.
- Gifox — приложение для записи и обмена GIF-анимациями.
- Giphy Capture — захват частей экрана и экспорт в GIF или MP4.
- Greenshot — снимок выбранной области, окна или полного экрана.
- Kap — инструмент с открытым исходным кодом для записи экрана и экспорта в GIF, MP4, WebM и APNG.
- Lighshot — создание быстрых скриншотов экрана.
- Monosnap — создание скриншотов, аннотирование и загрузка в облако.
- OBS — программное обеспечение с открытым исходным кодом для записи видео и потоковой трансляции.
- Quicktime — видеоплеер, который также можно использовать для записи экрана.
- ScreenFlow — программное обеспечение для редактирования видео и записи экрана для Mac.
- Screenie — фильтруйте и ищите изображения, меняйте форматы файлов скриншотов.
- ScreenshotAPI.net — создавайте идеальные полноэкранные снимки сайтов.
- ScreenToGif — записывайте GIF-анимацию части экрана. Только для Windows.
- ShareX — инструмент для захвата экрана, обмена файлами и повышения продуктивности.
- Shotty — приложение для быстрого поиска нужного скриншота с последующим перетаскиванием в любое приложение.
- Snagit — захват изображений и видео, создание GIF, аннотирование, редактирование и обмен.
- Snipping Tool — бесплатный инструмент для скриншотов на Windows.
- Snappy — делает быстрые снимки экрана и организует их в коллекции.
- Teampaper Snap — позволяет делать скриншоты выбранной области.
Для набросков
Иногда для начала создания приложения или веб-сайта вам нужны всего лишь карандаш и бумага. Вот несколько онлайн-инструментов для эскизов с отличными шаблонами, которые помогут ускорить ваш творческий процесс:
- Responsive Sketchsheets — предлагает адаптивные предустановленные шаблоны. Они автоматически подстраивают свой макет под любой размер экрана и включают полезные функции.
- Sketchsheets — проект с открытым исходным кодом, предоставляющий бесплатные шаблоны для печати последних устройств и платформ для создания дизайнов в виде wireframe.
- Sneakpeekit — печатайте сетки для заметок и рамки устройств.
- Sketchize — выберите любой из доступных шаблонов, подходящих для вашего проекта, распечатайте его и начните создавать свой проект мечты.
Вы также можете создавать наброски с помощью Sketch, упомянутого в разделе UI дизайн.
Дизайн для SMM
Часто маркетинговым командам нужны хорошо оформленные материалы. Это могут быть различные баннеры, промо-визуалы, фавиконы, анимации или просто красивые изображения для социальных платформ, таких как Twitter или Instagram. В этом разделе мы будем добавлять инструменты, которые помогут каждому создавать маркетинговые дизайны.
- Canva — создавайте потрясающие дизайны для работы, жизни и развлечений — даже если вы не являетесь экспертом в дизайне!
- Crello — создавайте собственные дизайны: посты, обложки, графику и постеры с использованием лучшего программного обеспечения в интернете.
- Pablo by Buffer — создавайте увлекательные изображения для своих постов в социальных сетях.
- Remove.bg — бесплатный сервис для удаления фона с любого фото.
- SocialSizes — предоставляет дизайнерам лучшие размеры для использования изображений и видео-контента в социальных сетях.
- Stencil — инструмент графического дизайна, который позволяет легко и быстро создавать изображения для социальных сетей.
Дизайн звука
Sound design — это искусство создания звукового ландшафта для сайта, приложения, фильма, игры или любого другого продукта. Звук обладает огромным потенциалом для преобразования того, как люди взаимодействуют с вашим продуктом. Некоторые программы для звукового дизайна являются очень сложными и предназначены в основном для профессиональных звукорежиссёров, в то время как другие подходят для начинающих.
- Appsounds — UI Sound packs для приложений, игр и любых других продуктов.
- AudioJungle — 836,206 треков и звуков от сообщества музыкантов и звукорежиссёров.
- Bensound — скачивайте музыку Creative Commons, бесплатную роялти-фри музыку для использования в своих проектах.
- Freesound — коллективная база данных звуков с лицензией Creative Commons. Просматривайте, скачивайте и делитесь звуками.
- Fugue Music — скачивайте бесплатную фоновую музыку для своих видео.
- Max — соединяйте объекты виртуальными проводами для создания интерактивных звуков, графики и пользовательских эффектов.
- Reaper — импортируйте любые аудио- и MIDI-файлы, синтезируйте, создавайте сэмплы, сочиняйте, аранжируйте, редактируйте, микшируйте и мастерите песни или любые другие аудиопроекты.
- Sonic Pi — музыкальный синтезатор для живого кодинга.
- SoundKit — библиотека UI-звуков для всех ваших интерфейсных нужд.
- UI Sounds — изучайте звуковой дизайн для пользовательских интерфейсов на примерах.
- Wistia Music — скачивайте бесплатные фоновые треки, чтобы добавить энергии и эмоций в свои видео.
- WOWA — скачивайте роялти-фри музыку для видео на YouTube, подкастов и приложений. Без авторских прав (CC0). Музыка, вдохновлённая Unsplash.
- YouTube Audio Library — просматривайте и скачивайте бесплатную музыку для своих проектов.
Работа со стоковыми фотографиями
Нужна качественная фотография для iOS-приложения или нового баннера? Вы всегда можете сделать её самостоятельно или воспользоваться стоковыми фото. К счастью, существует множество красивых бесплатных стоковых фотографий и изображений без авторских отчислений, которые можно использовать в любых проектах.
- Burst — бесплатные стоковые фотографии для веб-сайтов и коммерческого использования.
- Duotone — бесплатные дуотоновые изображения для использования в любых проектах или создания своих собственных.
- Death to Stock — платный стоковый сервис с рассылкой бесплатных наборов фотографий и акцентом на нестандартных изображениях.
- FoodiesFeed — тысячи красивых реалистичных фотографий еды в высоком разрешении, доступные бесплатно.
- FreePhotos.cc — бесплатные стоковые фотографии для коммерческого использования.
- Freestocks.org — качественные фотографии, распространяемые под лицензией Creative Commons CC0.
- Gratisography — коллекция бесплатных фотографий высокого разрешения.
- Jay Mantri — каждую неделю добавляется 7 новых фотографий под лицензией Creative Commons CC0.
- Kaboom Pics — стоковые фотографии, включая абстракции, архитектуру, моду, еду и пейзажи.
- LandingStock — коллекция бесплатных изображений для ваших лендингов.
- Life of Pix — бесплатные фотографии в высоком разрешении, созданные командой LEEROY.
- LoremPixel — API для предоставления стоковых фотографий с заданными размерами и категориями. Отличный инструмент для создания плейсхолдеров.
- Magdeleine — бесплатные фотографии высокого качества для вашего вдохновения.
- Moose — создавайте стоковые фотографии по запросу вместо поиска готовых.
- MMT Stock — фотографии высокого разрешения от Джеффри Беттса, распространяемые под лицензией Creative Commons CC0.
- New Old Stock — винтажные фотографии из публичных архивов без известных ограничений авторских прав.
- Pexels — агрегатор многих бесплатных ресурсов стоковых фотографий.
- Photo Creator — бесплатный инструмент для создания реалистичных стоковых фотографий на заказ.
- Picography — бесплатные стоковые фотографии от Дейва Мейера и других фотографов под лицензией Creative Commons CC0.
- Pixabay — фотографии, иллюстрации, векторные графики и видеоматериалы под собственной лицензией.
- Picjumbo — коллекция полностью бесплатных фотографий для коммерческого и личного использования.
- Pngtree — миллионы PNG-изображений, фонов и векторов для бесплатного скачивания.
- pxhere — бесплатные стоковые изображения.
- Reshot — огромная библиотека тщательно отобранных бесплатных стоковых фотографий, которые нельзя найти в других местах.
- ShotStash — тысячи бесплатных фотографий и видео высокого разрешения под лицензией CC0.
- SkitterPhoto — разнообразные стоковые фотографии, распространяемые под лицензией Creative Commons CC0.
- Startup Stock Photos — бесплатные фотографии для стартапов, блогеров и издателей.
- StockSnap.io — большой выбор бесплатных стоковых фотографий и изображений высокого разрешения.
- StyledStock — бесплатная стоковая фотография с акцентом на женскую аудиторию.
- The Gender Spectrum Collection — библиотека стоковых фотографий с изображениями трансгендерных и небинарных моделей.
- UI Faces — агрегатор бесплатных источников аватаров, которые можно использовать в дизайне макетов.
- Unsplash — бесплатные стоковые фотографии для использования.
- #WOCinTech Chat Photos — бесплатные стоковые фотографии женщин-технологов из разных сфер.
- Zoommy — помогает находить отличные бесплатные стоковые фотографии для ваших проектов или вдохновения.
Стоковые видео
Если вы работаете с видео-контентом, вам понравятся эти высококачественные, тщательно подобранные стоковые видеоматериалы. Ниже вы найдете множество хороших и бесплатных сайтов со стоковыми видео, которые можно использовать на вашем сайте, в рекламных кампаниях или в социальных сетях:
- Coverr — красивые бесплатные стоковые видеоматериалы для вашей главной страницы.
- Life of Vids — предоставляет бесплатные стоковые видеоролики, клипы и зацикленные видео.
- Mazwai — отличная коллекция бесплатных видеоклипов и материалов Creative Commons в HD-качестве.
- Mixkit — потрясающие бесплатные видео в HD. Вы можете использовать их абсолютно бесплатно.
- Motion Places — тщательно подобранная коллекция красивых видеоматериалов, которые вы можете использовать в своих проектах.
- Pixabay — более 1,5 миллиона стоковых видео и фотографий с лицензией Royalty-Free, созданных сообществом.
- Pexels Videos — упрощает поиск бесплатных стоковых видеоматериалов для вашего сайта, промо-роликов или других нужд.
- Videezy — мгновенная загрузка миллионов бесплатных и премиальных видеоматериалов и графики.
- Videvo — предлагает широкий выбор видеоклипов в HD-качестве, графики и бесплатных стоковых видеоматериалов.
- 123RF — более 100 000 нового контента ежедневно и круглосуточная поддержка.
Изучение дизайна
- Design Better — узнайте о лучших практиках, историях и инсайтах от ведущих мировых дизайнерских команд и лидеров.
- Design+Code — полные курсы, посвященные лучшим инструментам и системам дизайна.
- DesignerUp — подборка курсов с возможностью обучения в своем темпе и наставничество для освоения продуктового дизайна (UI/UX).
- Figma Training — экспресс-курс, посвященный Figma, для дизайнеров пользовательского интерфейса.
- Interaction Design Foundation — популярный в индустрии сайт для изучения навыков UX/UI.
- Laws of UX — подборка максим и принципов, которые дизайнеры могут учитывать при создании пользовательских интерфейсов.
- Learn UX — полный подход к изучению инструментов UI и UX.
- Sketch Master — подборка видеокурсов для профессионалов, изучающих Sketch.
UI-дизайн
Какие лучшие инструменты для дизайна пользовательского интерфейса в 2024 году? Вы можете выбрать любой из перечисленных инструментов, которые позволят вам выполнять десятки задач по дизайну — создание пользовательского интерфейса для сайта или мобильного приложения, разработку каркасов, прототипов, анимации или логотипов. Эти инструменты являются отличными и полнофункциональными для дизайнеров UX и UI:
- Adobe XD — проектируйте, создавайте прототипы и делитесь любым пользовательским интерфейсом — от веб-сайтов и мобильных приложений до голосовых взаимодействий.
- Affinity Designer — редактор векторной графики для macOS, iOS и Microsoft Windows.
- Akira — нативное приложение Linux для дизайна UI и UX, созданное на Vala и Gtk.
- Botmock — проектируйте, создавайте прототипы и тестируйте голосовые и текстовые разговорные приложения. Поддерживает несколько платформ.
- CleverBrush — онлайн-редактор векторной графики и инструмент цифровой публикации, который можно интегрировать на страницу как компонент JS.
- Figma — инструмент для проектирования, работающий в браузере, который позволяет проектировать и создавать прототипы с поддержкой совместной работы в реальном времени.
- GIMP — бесплатное программное обеспечение для обработки изображений и графического дизайна.
- Gravit — бесплатное приложение для дизайна векторной графики, доступное для macOS, Windows, Linux, ChromeOS и браузера.
- Illustrator — создавайте логотипы, значки, рисунки, типографику и иллюстрации для печати, веба, видео и мобильных устройств. Продукт компании Adobe.
- Inkscape — бесплатный редактор векторной графики с открытым исходным кодом. Может создавать или редактировать векторную графику, такую как иллюстрации, диаграммы, линейные рисунки, графики, логотипы и сложные картины.
- Krita — бесплатное программное обеспечение для рисования и графического дизайна, которое считается хорошей альтернативой Adobe Photoshop.
- Lunacy — бесплатное нативное приложение для Windows, которое работает офлайн и поддерживает файлы .sketch. Гибкий и легкий инструмент. Интуитивно понятный и простой в использовании. Ускоряет работу и расширяет возможности дизайнеров UI и UX.
- Photopea — бесплатное графическое приложение, работающее в браузере, альтернатива Photoshop.
- Photoshop — программное обеспечение для обработки изображений и графического дизайна, разработанное Adobe.
- Pixelixe — инструмент графического дизайна, созданный для маркетологов, блогеров и малого бизнеса, который позволяет создавать потрясающие и уникальные изображения, графику или статические веб-страницы за считанные минуты.
- Sketch — набор инструментов для дизайна, созданный для Mac.
- Studio — сочетает проектирование, создание прототипов и совместную работу в едином гармоничном рабочем процессе. Разработан InVision.
- TwitPile — создает мозаичные изображения из подписчиков Twitter, интересов и списков.
- Vectr — простой веб- и настольный кроссплатформенный инструмент для легкого и интуитивно понятного создания векторной графики.
- Voiceflow — прототипируйте, проектируйте и развертывайте реальные приложения для Amazon Alexa и Google Home.
Построение пользовательских потоков
Пользовательский поток — это серия шагов, которые пользователь предпринимает для достижения значимой цели. Это быстрый способ планирования путей пользователя и улучшения UX. Если вам нужно создать диаграмму пользовательского потока, карту пользовательского потока или карту сайта, обратите внимание на эти инструменты:
- Draw.io — бесплатное онлайн-программное обеспечение для создания диаграмм, блок-схем, оргструктур, UML, ER и сетевых диаграмм.
- Flowmapp — онлайн-инструмент для создания карт сайта и пользовательских потоков, который помогает эффективно разрабатывать и планировать пользовательский опыт.
- Google Drawings — создавайте диаграммы и графики бесплатно в Google Docs.
- Lucidchart — онлайн-инструмент для создания диаграмм, блок-схем, карт сайтов и многого другого.
- MindNode — приложение для создания ментальных карт, упрощающее процесс мозгового штурма.
- NinjaMock — онлайн-инструмент для прототипирования и пользовательских потоков. Связывайте представления и создавайте логические прототипы потоков с визуальным стилем от руки.
- OmniGraffle — приложение для диаграмм и цифровой иллюстрации для macOS и iOS.
- Overflow — превращайте свои дизайны в интерактивные диаграммы пользовательских потоков, которые рассказывают историю.
- Sketch.systems — дизайн пользовательских интерфейсов и потоков с использованием интерактивных конечных автоматов.
- SQUID — создавайте красивые пользовательские потоки в Sketch за считанные минуты.
- WebSequenceDiagrams — простое веб-приложение для работы с взаимодействиями объектов, расположенными в последовательности времени.
- Whimsical — простой инструмент для создания блок-схем, каркасов и стикеров.
- Wireflow — бесплатный, онлайн и открытый инструмент для создания красивых прототипов пользовательских потоков.
- XMind: ZEN — инструмент для мозгового штурма и ментальных карт с возможностью переключения между схемами-деревьями и планами. Связывайте темы с другими схемами.
- yEd — бесплатный десктопный инструмент для создания диаграмм. Подходит для множества случаев использования. Функция автоупорядочивания особенно полезна при создании блок-схем.
Пользовательские исследования
Пользовательские исследования помогают понять поведение, потребности и мотивации пользователей с помощью различных качественных и количественных методов (интервью, наблюдение, анкеты и т.д.). Эти инструменты для исследований пользователей могут быть вам полезны:
- Appoint.ly — веб-инструмент для быстрого планирования встреч с интеграцией с онлайн-календарями.
- Calendly — помогает планировать встречи без лишней переписки по электронной почте.
- Crowd Signal — сбор, организация и анализ данных из различных источников, включая социальные сети и мобильные приложения.
- Doodle — онлайн-календарь для управления временем и координации событий, встреч и назначений.
- Evolt — создание пользовательских персон, сторибордов, бизнес-моделей, карт опыта, досок для мозгового штурма и мудбордов в современном формате.
- Feedback Lite — сбор высококачественной обратной связи от клиентов с использованием решений Voice of Customer для улучшения производительности веб-сайта и вовлеченности клиентов.
- GoToMeeting — простой и мощный сервис для веб-конференций.
- Handrail — платформа для исследований и анализа пользовательского опыта — планируйте исследования, собирайте и анализируйте данные, делитесь результатами.
- JotForm — создавайте онлайн-формы, получайте уведомления по электронной почте и собирайте данные.
- Lookback — проводите удаленные исследования пользователей, записывайте и делайте заметки, используя прототипы или готовые продукты.
- MineTime — бесплатное приложение для календаря с функциями умного планирования и аналитики времени.
- Reflector — инструмент для зеркального отображения экрана и записи, который позволяет проводить удаленные пользовательские тесты.
- Reframer — инструмент для захвата, тегирования и выявления паттернов в качественных данных исследований.
- Sticktail — платформа для централизованного хранения, поиска и обмена пользовательскими данными внутри организации.
- Survey Monkey — онлайн-инструмент для создания опросов и сбора мнений значимых для вас людей.
- Typeform — простой интерфейс drag-and-drop для создания форм, опросов и анкет, с возможностью приема платежей.
- Wufoo — создавайте формы, собирайте данные и платежи, автоматизируйте рабочие процессы.
- YesInsights — простые опросы с одним вопросом и NPS для улучшения вашего бизнеса.
- UserBit — платформа с инструментами для проведения пользовательских исследований в реальном времени: тегирование/кодирование отзывов, создание пользовательских персон, визуализация карт сайта и многое другое.
- User Interviews — подбор участников из сообщества в 125 000 человек на основе профессии, демографических данных, географии и других параметров для любых исследований.
- Zoom — один из лучших сервисов для онлайн-встреч.
Визуальная отладка
- LogRocket — инструмент для записи действий пользователей на вашем сайте, что позволяет воспроизводить ошибки и быстрее их исправлять.
- PixelSnap — магический инструмент для измерения любого элемента на экране.
- VisBug — на любой веб-странице: визуальная отладка, быстрое изучение стилей и доступности (a11y), изменение CSS визуально, перемещение элементов с помощью мыши и многое другое.
- Visual Inspector — инструмент для совместной работы, позволяющий оставлять отзывы и исправлять ошибки дизайна на веб-сайтах.
Создание вайрфреймов
Каркас (wireframe) — это визуальная модель, отображающая основную структуру сайта или приложения. Он содержит наиболее важные элементы и контент, помогая легко объяснить идеи по дизайну. Каркасы — это низкодетализированный способ демонстрации дизайна. В этом разделе представлены лучшие инструменты для создания каркасов для различных случаев использования.
- Balsamiq Cloud — простое создание эскизов пользовательского интерфейса. Фиксируйте идеи, сотрудничайте над дизайном и добивайтесь общего согласия.
- BLOKK — шрифт для быстрого создания макетов и каркасов для клиентов, которые не понимают латиницу.
- CSS Grid Builder — инструмент для построения CSS-сеток, где сетка становится видимой только при добавлении контента (элементов), размещенных в соответствии с правилами сетки.
- Gliffy — инструмент для создания каркасов, UML-диаграмм, блок-схем, wireframes и многого другого.
- Gridzzly — самый простой способ создать настраиваемую сетку для печати.
- Layoutit — инструмент для создания интерфейсов с использованием CSS Grid и Bootstrap, который станет отправной точкой для ваших front-end разработок.
- Pidoco — программное обеспечение, которое позволяет быстро создавать интерактивные UX-прототипы и кликабельные каркасы.
- Wireframe.cc — простой инструмент для создания каркасов, который не отвлекает от работы.
- Whimsical Wireframes — мгновенное создание каркасов под рукой. Обширная библиотека настраиваемых элементов, таких как кнопки, поля ввода, чекбоксы.
- 1200px Grid System — помогает создавать систему сеток для дизайнов сайтов с шириной, значительно превышающей стиль на 960 пикселей.
3D-моделирование
3D графика используется в игровой индустрии, кинопроизводстве, архитектуре, инженерии и 3D-печати. 3D-художники и дизайнеры используют специализированное программное обеспечение для 3D-моделирования, упомянутое в этом разделе.
- Autodesk — интегрированное программное обеспечение CAD, CAM и CAE. Объединяет дизайн, инженеринг и производство на одной платформе.
- Blender — бесплатное программное обеспечение для создания 3D-графики с открытым исходным кодом.
- FreeCAD — бесплатный и мультиплатформенный 3D-параметрический моделлер с открытым исходным кодом.
- MatterControl — бесплатный программный пакет с открытым исходным кодом для проектирования, нарезки, организации и управления 3D-печатью.
- Maya — создание анимаций, окружения, графики движения, виртуальной реальности и персонажей в одном инструменте.
- Onshape — программное обеспечение для моделирования, специально ориентированное на проектирование технических и запасных частей, первое полнооблачное 3D-программное обеспечение.
- OpenSCAD — программное обеспечение для создания твердых 3D-объектов CAD.
- Rhino — программное обеспечение для 3D-моделирования на основе кривых, создающее математически точные модели 3D-поверхностей.
- SketchUp — программное обеспечение для 3D-дизайна, делающее 3D-моделирование доступным для всех благодаря простому и в то же время мощному набору инструментов.
- Tinkercad — бесплатное простое в использовании приложение для 3D-дизайна, электроники и программирования.
- Vectary — создавайте красивые 3D-модели с помощью инструмента 3D-моделирования drag and drop.
- 3D Slash — инструмент для 3D-моделирования, доступный на всех устройствах и всех ОС, онлайн и оффлайн.
Addendum (Reference & Inspiration)
Awesome Design Tools & Plugins
Переведен на русский язык и сохранен Евгением Куценко