kutsenko/Awesome-Design-Tools
kutsenko/Awesome-Design-Tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновить README.md

Browse Source
This commit is contained in:
Евгений Куценко 2024-12-27 15:51:40 +01:00
parent 498f0721b1
commit 6f8a1852b7
1 changed files with 79 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
README.md
View File

@ -2,9 +2,9 @@
# Awesome Design Tools
- [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md)
- [Awesome Design Conferences](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Conferences.md)
- [Awesome Design UI Kits](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md)
- [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">
@ -16,74 +16,54 @@
<img alt="awesome" src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" /> <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
</p>
## Awesome Design Tools as a part of Flawless App family joins Abstract!
## Как использовать
Today, we’re excited to announce that Flawless App has joined [Abstract](https://www.abstract.com), a design delivery platform that brings visibility, accountability, measurability, and predictability to design.
Flawless App was our first company, and we’re proud of everything that we’ve achieved with our 5-person team.
Since 2015, we’ve launched powerful tools for designers and developers — among them are [Flawless App](https://flawlessapp.io/), [Reduce](https://flawlessapp.io/reduceapp), [Flawless Feedback](https://flawlessapp.io/feedback). We’ve also invested a lot of love and care into community-driven initiatives. Awesome Design Tools is one of them.
#### So what’s next?
Our team has joined Abstract and is focused on building out the [Abstract SDK](https://sdk.goabstract.com), bringing developers’ experience forward. One unbelievable journey has finished and the new one has just begun. And if you want to know more about the future of Awesome Design Tools, [please keep reading our FAQ](https://flawlessapp.io/designtools/joinsabstract).
<p align="center">
<a href="https://flawlessapp.io/designtools/joinsabstract">
<img src="https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/awesome-design-tools-joins-abstract-cover.png" alt="Awesome-Design-Tools-Joins-Abstract"/>
</a>
</p>
## How to Use and Contribute
- Now you are in the **Awesome Design Tools** section, if you need plugins — go to [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md).
- To find the tool, go through the Table of Contents or search for a keyword (for example, "animation", "prototyping").
- Ask [Lisa](https://twitter.com/LisaDziuba) on Twitter.
If you found some great design tool or plugin, just send a Pull Request with respect to our [Contribution Guidelines](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md) (they're very simple, please take a look). Design tools should be submitted here and plugins in [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md) file. We use such labels for free ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg), open source ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) and Mac only ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) tools, don't forget to add them. Now I'd love to see your suggestions!
- Сейчас вы находитесь в разделе **Awesome Design Tools**, если вам нужны плагины — перейдите к [Awesome Design Plugins](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/src/branch/master/Awesome-Design-Plugins.md).
- Чтобы найти инструмент, воспользуйтесь оглавлением или поиском по ключевому слову (например, "animation", "prototyping").
</div>
<header class='header header-top -blue'></header>
<div class="nav">
## Table of Content
## Оглавление
- [Accessibility Tools](#accessibility-tools)
- [Animation Tools](#animation-tools)
- [Augmented Reality](#augmented-reality)
- [Collaboration Tools](#collaboration-tools)
- [Color Picker Tools](#color-picker-tools)
- [Design Feedback Tools](#design-feedback-tools)
- [Design Handoff Tools](#design-handoff-tools)
- [Design Inspiration](#design-inspiration)
- [Design System Tools](#design-system-tools)
- [Design to Code Tools](#design-to-code-tools)
- [Design Version Control](#design-version-control)
- [Development Tools](#development-tools)
- [Experience Monitoring](#experience-monitoring)
- [Font Tools](#font-tools)
- [Gradient Tools](#gradient-tools)
- [Icons Tools](#icons-tools)
- [Illustrations](#illustrations)
- [Information Architecture](#information-architecture)
- [Logo Design](#logo-design)
- [Mockup Tools](#mockup-tools)
- [No Code Tools](#no-code-tools)
- [Pixel Art Tools](#pixel-art-tools)
- [Prototyping Tools](#prototyping-tools)
- [Screenshot Software](#screenshot-software)
- [Sketching Tools](#sketching-tools)
- [SMM Design Tools](#smm-design-tools)
- [Sound Design](#sound-design)
- [Stock Photos Tools](#stock-photos-tools)
- [Stock Videos](#stock-videos)
- [Tools for Learning Design](#tools-for-learning-design)
- [UI Design Tools](#ui-design-tools)
- [User Flow Tools](#user-flow-tools)
- [User Research Tools](#user-research-tools)
- [Visual Debugging Tools](#visual-debugging-tools)
- [Wireframing Tools](#wireframing-tools)
- [3D Modeling Software](#three-d-modeling-software)
- [Инструменты доступности](#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-tools)
- [Инструменты без кода](#no-code-tools)
- [Инструменты для пиксельной графики](#pixel-art-tools)
- [Инструменты прототипирования](#prototyping-tools)
- [Программное обеспечение для создания скриншотов](#screenshot-software)
- [Инструменты для набросков](#sketching-tools)
- [Инструменты дизайна для SMM](#smm-design-tools)
- [Звуковой дизайн](#sound-design)
- [Инструменты работы со стоковыми фотографиями](#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>
@ -91,7 +71,7 @@ If you found some great design tool or plugin, just send a Pull Request with res
<article id="accessibility-tools">
### Accessibility Tools
### Инструменты доступности
Accessibility is the practice of creating websites and apps usable for all people, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Here you will find web accessibility tools, accessibility testing tools, and accessibility apps both for developers and designers:
@ -128,7 +108,7 @@ Accessibility checking features are also available in VisBug from the [Visual De
<article id="animation-tools">
### Animation Tools
### Инструменты анимации
<div class="hidden-in-page">
<p align="center">
@ -172,7 +152,7 @@ Drama, Principle, Framer, Invision Studio, Flinto are also among UI & UX animati
<article id="augmented-reality">
### Augmented Reality
### Дополненная реальность
Augmented Reality is a technology that upgrades our real world, by adding a layer of digital information to it. The use of AR increases day by day with dozens of new AR apps, development kits, and AR frameworks. So in this section is collected different augmented reality tools for creating, projecting and prototyping apps focused on AR:
@ -193,7 +173,7 @@ Augmented Reality is a technology that upgrades our real world, by adding a laye
<article id="collaboration-tools">
### Collaboration Tools
### Инструменты для совместной работы
<!---
<div class="hidden-in-page">
@ -251,7 +231,7 @@ You can also have design collaboration into [InVision Freehand](https://www.invi
<article id="color-picker-tools">
### Color Picker Tools
### Инструменты для выбора цвета
If you are looking for an eyedropper tool, color identifier or color capture, check this section. With the color pickers mentioned here, you will be able to create new color combinations and define great ones. Almost all of these tools are free:
@ -302,7 +282,7 @@ You can also create color palettes with Leonardo, which is mentioned in the [Acc
<article id="design-feedback-tools">
### Design Feedback Tools
### Инструменты обратной связи по дизайну
How do you provide and get feedback during the development process? This process is usually pretty messy for many product teams, which caused product delays and time waste on back-and-forth communication. So if you wish to get fast and structural feedback on UI issues or visual bugs — take a look at this tool:
@ -314,7 +294,7 @@ How do you provide and get feedback during the development process? This process
<article id="design-handoff-tools">
### Design Handoff Tools
### Инструменты передачи дизайна
<!-- <div class="hidden-in-page">
<p align="center">
@ -344,7 +324,7 @@ You can also make a design handoff within Relay, mentioned in the [Design Versio
<article id="design-inspiration">
### Design Inspiration
### Вдохновение для дизайна
<!-- <div class="hidden-in-page">
<p align="center">
@ -391,7 +371,7 @@ The creative process can be tough. So if ideas don’t come to your mind right a
<article id="design-system-tools">
### Design System Tools
### Инструменты систем дизайна
<div class="hidden-in-page">
<p align="center">
@ -431,7 +411,7 @@ We can also add to this in Sketch, Figma, UXPin and Framer X ([Framer X Team Sto
<article id="design-to-code-tools">
### Design to Code Tools
### Инструменты "Дизайн в код"
<!-- <div class="hidden-in-page">
<p align="center">
@ -466,7 +446,7 @@ Everyone can learn development but it takes time and effort. If you need a websi
<article id="design-version-control">
### Design Version Control
### Контроль версий дизайна
<div class="hidden-in-page">
<p align="center">
@ -489,7 +469,7 @@ Developers actively use version control tools for a long time, probably since 20
<article id="development-tools">
### Development Tools
### Инструменты разработки
This section mentions development tools and browsers. Development browsers have features that help developers and designers create and test websites and apps.
@ -512,7 +492,7 @@ This section mentions development tools and browsers. Development browsers have
<article id="experience-monitoring">
### Experience Monitoring
### Мониторинг пользовательского опыта
Listening to users is important but seeing the real usage is even more crucial. For these, you need to install different analytic tools, experience monitoring software, and user behavior apps. Just use those analytics solutions concerning users data:
@ -537,7 +517,7 @@ Listening to users is important but seeing the real usage is even more crucial.
<article id="font-tools">
### Font Tools
### Инструменты работы со шрифтами
Fonts are commonly used for making the web a more beautiful place. It’s an essential part of any design. In this section, you’ll find fonts generators & font finder tools that allow you to manage and work with fonts:
@ -587,7 +567,7 @@ You can also handle fonts with Specify, which is mentioned in the [Design System
<article id="gradient-tools">
### Gradient Tools
### Инструменты для создания градиентов
You can see gradient colors are everywhere — UI, branding, illustration, typography. A gradient is created by using two or more different colors to paint one element while gradually fading between them. It might look as a memorable, fresh and unique color. To make such a gradient for your design, use these gradient color palettes.
@ -620,7 +600,7 @@ You can also create and audit gradients with Leonardo, which is mentioned in the
<article id="icons-tools">
### Icons Tools
### Инструменты для работы с иконками
As well as fonts, icons are used in every design. These basic elements support and guide many user actions inside the product. Without a doubt, icons are a vital element in user navigation. While making those small design elements is hard and time-consuming, you can get thousands of vector icons for personal and commercial use.
@ -674,7 +654,7 @@ You can also handle icons with Specify, which is mentioned in the [Design System
<article id="illustrations">
### Illustrations
### Иллюстрации
<!-- <div class="hidden-in-page">
<p align="center">
@ -706,7 +686,7 @@ Illustrations can be used on your landing page, blog posts, inside your app or e
<article id="information-architecture">
### Information Architecture
### Информационная архитектура
Information architecture helps designers organize and structure content inside websites, mobile apps, and other software. So users will understand product functionality and will find everything needed. These information architecture tools should allow you to create visual sitemaps and to improve your website content structure:
@ -721,7 +701,7 @@ Information architecture helps designers organize and structure content inside w
<article id="logo-design">
### Logo Design
### Дизайн логотипов
A logo is the starting point of your brand identity. It reflects the product mission, functionality and brand message. Ideally, the logo creates a strong connection between your product and the users. Logo design is an art, as well as many other design disciplines. With the right logo design tools, this art can be done right a bit faster.
@ -749,7 +729,7 @@ You can also do your logo design with Adobe Photoshop, GIMP, Inkscape, Krita and
<article id="mockup-tools">
### Mockup Tools
### Инструменты макетов
<!-- <div class="hidden-in-page">
<p align="center">
@ -798,7 +778,7 @@ A mockup is a visual way of representing the product. While a wireframe mostly r
<article id="no-code-tools">
### No Code Tools
### Инструменты no-code
With a rise of “no code tools”, everyone with a laptop can build and launch a project. These tools help designers and makers create websites, apps, and even games. No code tools allow to automate routine tasks and can be used without a development background. Take a look at the tools here and if you need more — check Design to Code section.
@ -819,7 +799,7 @@ With a rise of “no code tools”, everyone with a laptop can build and launch
<article id="pixel-art-tools">
### Pixel Art Tools
### Инструменты Pixel Art (пиксельная графика)
Pixel art is a digital art form where color is applied to individual pixels to create an image. The pixel art can be used to create everything from intricate scenes and game backgrounds to character designs or emoji. If you feel curious to try, check this pixel art software for both macOS and Windows:
@ -847,7 +827,7 @@ Pixel art is a digital art form where color is applied to individual pixels to c
<article id="prototyping-tools">
### Prototyping Tools
### Инструменты прототипирования
A prototype is a simple experimental design of a proposed solution. It should help to test ideas, design assumptions, and hypotheses in a fast and cheap way. Prototyping tools allow designers and clients to see how the product would function in the real world and collaborate on this solution. Many modern prototyping tools can use for wireframing, prototyping, and collaboration:
@ -883,7 +863,7 @@ You can also do prototyping with Figma, Adobe XD, Sketch and InVision Studio, wh
<article id="screenshot-software">
### Screenshot Software
### Для создания скриншотов
<!-- <div class="hidden-in-page">
<p align="center">
@ -923,7 +903,7 @@ Taking screenshots is a typical task in the design & development workflow. So th
<article id="sketching-tools">
### Sketching Tools
### Для набросков
Sometimes you need just a pencil and paper to start creating your app or website. So here are you can find online sketching tools with great sketch sheet templates to speed up your creative process:
@ -942,7 +922,7 @@ You can also do some sketching with Sketch mentioned in [UI design tools](https:
<article id="smm-design-tools">
### SMM Design Tools
### Дизайн для SMM
Often marketing teams need well-design materials. It can be different banners, promo visuals, favicons, animations or just nice images for social platforms, like Twitter or Instagram. It this section we will keep adding tools for everyone to create marketing designs.
@ -957,7 +937,7 @@ Often marketing teams need well-design materials. It can be different banners, p
<article id="sound-design">
### Sound Design
### Звуковой дизайн
Sound design is an art of creating a soundscape for a site, app, movie, game or any other product. The sound has great potential for transforming the way people connect with your product. Some sound design software is very advanced and can be used mostly by sound designers, while others are good for beginners.
@ -979,7 +959,7 @@ Sound design is an art of creating a soundscape for a site, app, movie, game or
<article id="stock-photos-tools">
### Stock Photos Tools
### Работа со стоковыми фотографиями
Need a high-quality photo for iOS app or new banner? You can always shoot it yourself or borrow from the stock photo sites. Luckily, there are hundreds of beautiful, free stock photos and royalty-free images that you can use for any project:
@ -1022,7 +1002,7 @@ Need a high-quality photo for iOS app or new banner? You can always shoot it you
<article id="stock-videos">
### Stock Videos
### Стоковые видео
If you work with video-content, you will enjoy these high-quality, hand-curated stock videos. You'll find many good and free stock video sites below, which you can use on your website, in your ad campaigns or social media:
@ -1049,7 +1029,7 @@ If you work with video-content, you will enjoy these high-quality, hand-curated
<article id="tools-for-learning-design">
### Tools for Learning Design
### Изучение дизайна
- [Design Better](https://www.designbetter.co/) — discover the best practices, stories, and insights from the world’s top design teams and leaders. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
- [Design+Code](https://designcode.io/) — complete courses about the best tools and design systems.
@ -1071,7 +1051,7 @@ If you work with video-content, you will enjoy these high-quality, hand-curated
<article id="ui-design-tools">
### UI Design Tools
### UI-дизайн
What are the best UI design tools in 2019? You can pick any of the tools below and it will allow you to do dozens of design tasks — UI for site or mobile, wireframe, prototype, animation, logo. These are great and fully-functional tools for UX & UI designers:
@ -1108,7 +1088,7 @@ What are the best UI design tools in 2019? You can pick any of the tools below a
<article id="user-flow-tools">
### User Flow Tools
### Построение пользовательских потоков
User flow is a series of steps a user takes to achieve a meaningful goal. It's a fast way to plan customer journey paths and improve UX. So if you need to make a user flow diagram, user flow map or a sitemap, take a look at these tools:
@ -1140,7 +1120,7 @@ User flow is a series of steps a user takes to achieve a meaningful goal. It's a
<article id="user-research-tools">
### User Research Tools
### Пользовательские исследования
User research helps you understand user behaviors, needs, and motivations through various qualitative and quantitative methods (interviews, observation, forms, etc). These user research tools can be useful for you:
@ -1170,7 +1150,7 @@ User research helps you understand user behaviors, needs, and motivations throug
<article id="visual-debugging-tools">
### Visual Debugging Tools
### Визуальная отладка
- [LogRocket](https://logrocket.com/) — a tool to record what users do on your site so you can reproduce bugs and fix issues faster.
- [PixelSnap](https://getpixelsnap.com) — the magical way to measure everything on your screen. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg)
@ -1181,7 +1161,7 @@ User research helps you understand user behaviors, needs, and motivations throug
<article id="wireframing-tools">
### Wireframing Tools
### Создание вайрфреймов
A wireframe is a visual mockup that outlines the basic structure of the site or an app. It contains the most essential elements and the content, helping you easily explain ideas on design. Wireframes are a low-fidelity way of showing a design. This section is presented the best wireframing tools for a variety of use cases.
@ -1208,7 +1188,7 @@ A wireframe is a visual mockup that outlines the basic structure of the site or
<article id="three-d-modeling-software">
### Three D Modeling Software
### 3D-моделирование
3D graphics are used in gaming, film making, architecture, engineering, and 3D printing. 3D artists & designers use specific 3D modeling software, mentioned in this section.