Обновить README.md
This commit is contained in:
parent
68bf088e7a
commit
6ed17410c5
648
README.md
648
README.md
@ -220,48 +220,48 @@ You can also have design collaboration into [InVision Freehand](https://www.invi
|
||||
|
||||
### Инструменты для выбора цвета
|
||||
|
||||
If you are looking for an eyedropper tool, color identifier or color capture, check this section. With the color pickers mentioned here, you will be able to create new color combinations and define great ones. Almost all of these tools are free:
|
||||
Если вы ищете инструмент пипетки, идентификатор цвета или захват цвета, обратите внимание на этот раздел. С помощью указанных здесь инструментов для выбора цвета вы сможете создавать новые цветовые комбинации и находить отличные варианты. Почти все эти инструменты бесплатны:
|
||||
|
||||
- [BrandColors](https://brandcolors.net/) — the biggest collection of official brand color codes around. 
|
||||
- [Calcolor](https://calcolor.co) — a web-based color palette management tool which provides a new way to interact with digital colors. 
|
||||
- [Chroma](https://chroma.spencerhamm.com/) — free web app which allows you to identify the color. 
|
||||
- [Color](https://color.adobe.com/explore/?filter=most-popular&time=month) — create color schemes with the color wheel or browse thousands of color combinations from the Color community. Made by Adobe. 
|
||||
- [Color by Cloudflare](https://cloudflare.design/color/) — a tool to preview palettes against UI elements, cycle through accessible color combos and create palettes manually, via URL import, or generatively.
|
||||
- [Color Deck](https://color.obscuredetour.com/) — an HSL driven color palette collection. It's also open-source.  [](https://github.com/obscuredetour/color-deck)
|
||||
- [Color Hexa](https://www.colorhexa.com/) — free color tool providing information about any color and generating matching color palettes for designs.
|
||||
- [Color Hex Picker](http://colorhexpicker.com/) - a tool for getting the name of any color from any image. You also get the HEX code and RGB value for the color. 
|
||||
- [Color Hunt](https://colorhunt.co/) — free and open platform for color inspiration with thousands of trendy hand-picked color palettes. 
|
||||
- [ColorKit](https://colorkit.io) — a tool for blending colors and generating a color's shades and tints. 
|
||||
- [Color Leap](https://colorleap.app) — leap through time and see the colors of history. 
|
||||
- [Colorpicker](https://colorpicker.crea-th.at/) — a complete and open-source color manipulation tool with picking.  
|
||||
- [ColorSlurp](http://colorslurp.com/) — the ultimate color productivity booster for designers and developers.  
|
||||
- [ColorsWall/](https://colorswall.com/) — place to store your color palettes or easy generate. 
|
||||
- [Colorwise](https://www.colorwise.io/) — search through the color palettes of the most voted products on Product Hunt. 
|
||||
- [Colour Cafe](https://www.instagram.com/colours.cafe/) — colors inspiration that has selected a modern color palette on Instagram. 
|
||||
- [Colourcode](https://colourco.de/) — an online designer tool, which allows you to easily and intuitively combine colors. 
|
||||
- [Coolors](https://coolors.co/) — the super-fast color scheme generator.  
|
||||
- [Culrs](https://culrs.com/#/) — thoughtfully crafted and easy-to-use color palettes. 
|
||||
- [Geenes](https://geenes.app) — a tool to create harmonious color themes with code and sketch file export.
|
||||
- [Image Color Picker](https://image-color.com) — image color picker and color scheme generator. 
|
||||
- [Instant Eyedropper](http://instant-eyedropper.com/) — a minimalist eyedropper tool for windows, supports multiple color formats for both designers and developers. 
|
||||
- [Just Color Picker](http://annystudio.com/software/colorpicker/) — Free portable offline color picker and color editor. 
|
||||
- [Khroma](http://khroma.co/) — AI-based tool to generate color palettes based on your preferences.
|
||||
- [Material Colors Native](https://github.com/BafS/Material-Colors-native) — Google's material design color palette in the form of a mac app.   
|
||||
- [Material Design Palette Generator](https://materialpalettes.com/) — get perfect Material Design color palettes from any hex color.  
|
||||
- [Paletton](https://paletton.com) — a designer tool for creating color combinations that work together well. 
|
||||
- [Picular](https://picular.co/) — a rocket fast primary color generator using Google's image search. 
|
||||
- [Pigment](https://pigment.shapefactory.co/) — a color palette generator with innumerable color configurations suggested by the app. 
|
||||
- [Pikka](https://itunes.apple.com/us/app/pikka-color-picker/id1195076754) — color picker & color schemes generator for macOS. 
|
||||
- [React Color](http://casesandberg.github.io/react-color/) — a collection of color pickers from Sketch, Photoshop, Chrome. It‘s free and open-source.  [](https://github.com/casesandberg/react-color/)
|
||||
- [Sip](https://sipapp.io/) — a better way to collect, organize and share colors. Global eyedropper tool for macOS. 
|
||||
- [Skala Color](https://bjango.com/mac/skalacolor/) — works with a huge variety of formats, covering everything you’re likely to need for web, iOS, Android, and macOS development.  
|
||||
- [Swatches](https://swatchesapp.io/) — iOS app that lets you collect, inspect and share the colors that inspire you in your daily life.  
|
||||
- [Tint & Shade Generator](https://maketintsandshades.com/) — display tints and shades of a given hex color in 10% increments.  
|
||||
- [Viz Palette](https://projects.susielu.com/viz-palette) — color picker for data visualizations. 
|
||||
- [BrandColors](https://brandcolors.net/) — крупнейшая коллекция официальных цветовых кодов брендов. 
|
||||
- [Calcolor](https://calcolor.co) — веб-инструмент для управления цветовыми палитрами, предлагающий новый способ взаимодействия с цифровыми цветами. 
|
||||
- [Chroma](https://chroma.spencerhamm.com/) — бесплатное веб-приложение, которое позволяет определить цвет. 
|
||||
- [Color](https://color.adobe.com/explore/?filter=most-popular&time=month) — создавайте цветовые схемы с помощью цветового круга или просматривайте тысячи цветовых комбинаций от сообщества Color. Разработано Adobe. 
|
||||
- [Color by Cloudflare](https://cloudflare.design/color/) — инструмент для предварительного просмотра палитр с элементами пользовательского интерфейса, циклического просмотра доступных цветовых комбинаций и создания палитр вручную, через URL-импорт или генеративно.
|
||||
- [Color Deck](https://color.obscuredetour.com/) — коллекция палитр цветов, основанная на HSL. Инструмент также является open-source.  [](https://github.com/obscuredetour/color-deck)
|
||||
- [Color Hexa](https://www.colorhexa.com/) — бесплатный инструмент для получения информации о любом цвете и генерации соответствующих цветовых палитр для дизайнов.
|
||||
- [Color Hex Picker](http://colorhexpicker.com/) — инструмент для определения названия любого цвета из изображения. Также предоставляет HEX-код и RGB-значение цвета. 
|
||||
- [Color Hunt](https://colorhunt.co/) — бесплатная и открытая платформа для вдохновения цветами с тысячами модных цветовых палитр, отобранных вручную. 
|
||||
- [ColorKit](https://colorkit.io) — инструмент для смешивания цветов и генерации оттенков и полуоттенков цветов. 
|
||||
- [Color Leap](https://colorleap.app) — перенеситесь во времени и посмотрите цвета истории. 
|
||||
- [Colorpicker](https://colorpicker.crea-th.at/) — полноценный инструмент для манипуляции цветами с открытым исходным кодом и функцией выбора цвета.  
|
||||
- [ColorSlurp](http://colorslurp.com/) — универсальный инструмент для работы с цветами, который повышает продуктивность дизайнеров и разработчиков.  
|
||||
- [ColorsWall](https://colorswall.com/) — место для хранения или генерации цветовых палитр. 
|
||||
- [Colorwise](https://www.colorwise.io/) — поиск цветовых палитр самых популярных продуктов на Product Hunt. 
|
||||
- [Colour Cafe](https://www.instagram.com/colours.cafe/) — вдохновение цветами на Instagram с подбором современной цветовой палитры. 
|
||||
- [Colourcode](https://colourco.de/) — онлайн-инструмент для дизайнеров, который позволяет легко и интуитивно комбинировать цвета. 
|
||||
- [Coolors](https://coolors.co/) — супербыстрый генератор цветовых схем.  
|
||||
- [Culrs](https://culrs.com/#/) — продуманно созданные и удобные цветовые палитры. 
|
||||
- [Geenes](https://geenes.app) — инструмент для создания гармоничных цветовых тем с экспортом кода и файлов Sketch. 
|
||||
- [Image Color Picker](https://image-color.com) — инструмент выбора цвета из изображения и генератор цветовых схем. 
|
||||
- [Instant Eyedropper](http://instant-eyedropper.com/) — минималистичный инструмент пипетки для Windows, поддерживающий несколько цветовых форматов для дизайнеров и разработчиков. 
|
||||
- [Just Color Picker](http://annystudio.com/software/colorpicker/) — бесплатный портативный автономный инструмент для выбора и редактирования цветов. 
|
||||
- [Khroma](http://khroma.co/) — инструмент на базе ИИ для генерации цветовых палитр на основе ваших предпочтений.
|
||||
- [Material Colors Native](https://github.com/BafS/Material-Colors-native) — цветовая палитра дизайна Material от Google в формате приложения для macOS.   
|
||||
- [Material Design Palette Generator](https://materialpalettes.com/) — получение идеальных цветовых палитр дизайна Material из любого HEX-кода.  
|
||||
- [Paletton](https://paletton.com) — дизайнерский инструмент для создания цветовых комбинаций, которые хорошо работают вместе. 
|
||||
- [Picular](https://picular.co/) — сверхбыстрый генератор основных цветов, использующий поиск изображений Google. 
|
||||
- [Pigment](https://pigment.shapefactory.co/) — генератор цветовых палитр с бесчисленными цветовыми конфигурациями, предлагаемыми приложением. 
|
||||
- [Pikka](https://itunes.apple.com/us/app/pikka-color-picker/id1195076754) — инструмент для выбора цвета и генерации цветовых схем для macOS. 
|
||||
- [React Color](http://casesandberg.github.io/react-color/) — коллекция инструментов для выбора цвета из Sketch, Photoshop и Chrome. Бесплатный и с открытым исходным кодом.  [](https://github.com/casesandberg/react-color/)
|
||||
- [Sip](https://sipapp.io/) — лучший способ собирать, организовывать и делиться цветами. Глобальный инструмент пипетки для macOS. 
|
||||
- [Skala Color](https://bjango.com/mac/skalacolor/) — поддерживает множество форматов, охватывающих всё, что может понадобиться для разработки веба, iOS, Android и macOS.  
|
||||
- [Swatches](https://swatchesapp.io/) — приложение для iOS, которое позволяет собирать, исследовать и делиться цветами, которые вдохновляют вас в повседневной жизни.  
|
||||
- [Tint & Shade Generator](https://maketintsandshades.com/) — отображает оттенки и полутона заданного цвета HEX с шагом в 10%.  
|
||||
- [Viz Palette](https://projects.susielu.com/viz-palette) — инструмент выбора цвета для визуализации данных. 
|
||||
|
||||
<div class="banner banner--yellow">
|
||||
|
||||
You can also create color palettes with Leonardo, which is mentioned in the [Accessibility Tools section](#accessibility-tools).
|
||||
Вы также можете создавать цветовые палитры с помощью Leonardo, который упоминается в разделе [Инструменты доступности](#accessibility-tools).
|
||||
|
||||
</div>
|
||||
|
||||
@ -271,10 +271,10 @@ You can also create color palettes with Leonardo, which is mentioned in the [Acc
|
||||
|
||||
### Инструменты обратной связи по дизайну
|
||||
|
||||
How do you provide and get feedback during the development process? This process is usually pretty messy for many product teams, which caused product delays and time waste on back-and-forth communication. So if you wish to get fast and structural feedback on UI issues or visual bugs — take a look at this tool:
|
||||
Как вы предоставляете и получаете обратную связь в процессе разработки? Для многих продуктовых команд этот процесс обычно довольно хаотичен, что приводит к задержкам и потере времени на бесконечные обсуждения. Если вы хотите быстро и структурировано получать обратную связь по проблемам пользовательского интерфейса или визуальным багам — обратите внимание на этот инструмент:
|
||||
|
||||
- [Flawless Feedback](https://flawlessapp.io/feedback) — review and annotate iOS apps then share your feedback in Jira or Trello. 
|
||||
- [GoVisually](https://govisually.com) — online proofing, design review & approval software.
|
||||
- [Flawless Feedback](https://flawlessapp.io/feedback) — просматривайте и аннотируйте приложения для iOS, затем делитесь отзывами в Jira или Trello. 
|
||||
- [GoVisually](https://govisually.com) — программное обеспечение для онлайн-проверки, рецензирования и утверждения дизайна.
|
||||
<div class="banner banner--yellow">
|
||||
|
||||
</article>
|
||||
@ -291,19 +291,19 @@ How do you provide and get feedback during the development process? This process
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
Design handoff happens when designers finish the work and need to deliver designs to developers with all specs and assets. Design handoff tools allow to automatically generate style guide, comment on the design, inspect elements. These tools minimize guesswork and improve the effectiveness of the design process.
|
||||
Передача дизайна происходит, когда дизайнеры завершают работу и должны передать свои разработки разработчикам со всеми спецификациями и ресурсами. Инструменты для передачи дизайна позволяют автоматически генерировать гайд по стилю, оставлять комментарии к дизайну, а также инспектировать элементы. Эти инструменты минимизируют догадки и повышают эффективность процесса проектирования.
|
||||
|
||||
- [Avocode](https://avocode.com) — open designs without design tools. Export images without preparing layers. Click on layers to get code.
|
||||
- [Flawless App](https://flawlessapp.io/) — a tool to compare the expected design and the real app right inside iOS Simulator (useful for designers who use Xcode or mobile developers). 
|
||||
- [Inspect](https://www.invisionapp.com/feature/inspect/) — prepare designs for development. Made by Invision.
|
||||
- [Sketch Measure](https://github.com/utom/sketch-measure) — Sketch redline plugin. Annotate distance and size of elements.  
|
||||
- [Specctr](https://specctr.com) — in the unfortunate event you're designing UI in PS, AI, or ID this tool creates redline annotations.
|
||||
- [Sympli](https://sympli.io) — automated specs and assets handoff from Sketch, Photoshop and Adobe XD. Integrated with Jira, Xcode and Android Studio.
|
||||
- [Zeplin](https://zeplin.io/) — handoff designs and style guides with accurate specs, assets, code snippets automatically.
|
||||
- [Avocode](https://avocode.com) — открывайте дизайны без использования инструментов для проектирования. Экспортируйте изображения без подготовки слоев. Кликайте на слои, чтобы получить код.
|
||||
- [Flawless App](https://flawlessapp.io/) — инструмент для сравнения ожидаемого дизайна с реальным приложением прямо в iOS Simulator (полезен для дизайнеров, работающих с Xcode, или мобильных разработчиков). 
|
||||
- [Inspect](https://www.invisionapp.com/feature/inspect/) — подготовка дизайнов для разработки. Создан Invision.
|
||||
- [Sketch Measure](https://github.com/utom/sketch-measure) — плагин для Sketch, который добавляет аннотации расстояний и размеров элементов.  
|
||||
- [Specctr](https://specctr.com) — в случае, если вы разрабатываете пользовательский интерфейс в Photoshop, Illustrator или InDesign, этот инструмент создаёт аннотации с размерами элементов.
|
||||
- [Sympli](https://sympli.io) — автоматическая передача спецификаций и ресурсов из Sketch, Photoshop и Adobe XD. Интегрируется с Jira, Xcode и Android Studio.
|
||||
- [Zeplin](https://zeplin.io/) — передавайте дизайны и гайды по стилям с точными спецификациями, ресурсами и сниппетами кода автоматически.
|
||||
|
||||
<div class="banner banner--yellow">
|
||||
|
||||
You can also make a design handoff within Relay, mentioned in the [Design Version Control](#design-version-control) section.
|
||||
Вы также можете осуществить передачу дизайна с помощью Relay, который упоминается в разделе [Контроль версий](#design-version-control).
|
||||
|
||||
</div>
|
||||
|
||||
@ -313,121 +313,91 @@ You can also make a design handoff within Relay, mentioned in the [Design Versio
|
||||
|
||||
### Вдохновение для дизайна
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/2VQVTJ8">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
Творческий процесс может быть сложным. Если идеи не приходят сразу, попробуйте найти вдохновение в работах других дизайнеров. Эти сайты с дизайнерским вдохновением предлагают шаблоны дизайна, пользовательские потоки, разметки электронных писем и креативные решения популярных компаний и отличных продуктов:
|
||||
|
||||
The creative process can be tough. So if ideas don’t come to your mind right away, try to search for inspiration in the work of other designers. These design inspiration sites feature design patterns, user flows, email markups and creative solutions of popular companies and great products:
|
||||
|
||||
- [Behance](https://www.behance.net/) — an online platform to showcase & discover creative work. 
|
||||
- [CodeMyUI](https://codemyui.com/) — handpicked collection of web design & UI inspiration with code snippets. 
|
||||
- [Collect UI](http://collectui.com/) — a platform for your daily inspiration collected from Daily UI & beyond. Based on Dribbble shots, 14419 handpicked designs. 
|
||||
- [Creative Portfolios](http://www.creative-portfolios.com/) — a curation of the most creative portfolios made by designers & developers.
|
||||
- [Design Hunt](https://itunes.apple.com/us/app/design-hunt/id968588816?mt=8) — a daily collection of the best products, apps, and inspirations for all creatives.  
|
||||
- [Dribbble](https://dribbble.com/) — an online community for showcasing user-made artwork. A great resource to get inspired by others work.
|
||||
- [Ficture](https://ficture.design/) — a font in use archive that will inspire you. 
|
||||
- [Inspiration UI](http://inspirationui.com/) — a community that aims to provide the best design resources for those who create for the web. 
|
||||
- [Hover States](https://hoverstat.es/) — showcase great work from the bleeding edge of digital culture for, and with, the creative community.
|
||||
- [Httpster](https://httpster.net/) — an inspiration resource showcasing rocking websites made by people from all over the world. 
|
||||
- [H69.Design](https://www.h69.design/) — landing page colletions & Free resources for designers.
|
||||
- [Lapa Ninja](https://www.lapa.ninja/) — landing page design inspiration from around the web. 1800+ landing page examples and updated daily.
|
||||
- [Mobile Patterns](https://www.mobile-patterns.com/) — a design inspirational library featuring finest UI UX Patterns (iOS and Android).
|
||||
- [Mobbin](https://mobbin.design/) — browse mobile design patterns for popular apps. Explore common user flows such as onboarding, account sign up and log in, core functionality, and more. 
|
||||
- [One Page Love](https://onepagelove.com/gallery) — a collection of beautiful unique One Page websites for website design inspiration. 
|
||||
- [Owwly](https://owwly.com/feed/inspirations) — home for digital products crafted with passion to design.
|
||||
- [Page Flows](https://pageflows.com/) — user flow videos and screenshots to inspire you when you're stuck. Discover mobile and web design patterns for over 160 different tasks. 
|
||||
- [pttrns](https://pttrns.com/) — design patterns for popular mobile apps.
|
||||
- [Really Good Emails](https://reallygoodemails.com/) — 4,150+ handpicked email design. 
|
||||
- [ReallyGoodUX](https://www.reallygoodux.io/) — screenshots, and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs. 
|
||||
- [Saas Landing Page](https://saaslandingpage.com/) — iscover the best landing page examples created by top-class SaaS companies, and get ideas and inspiration for your next design project. 
|
||||
- [Saas Pages](https://saaspages.xyz/) — a collection of the best landing pages with a focus on copywriting and design. 
|
||||
- [The Design Team](https://thedesignteam.io/) — comics about a design team for a tech startup in Silicon Valley.
|
||||
- [Typewolf](https://www.typewolf.com/) — helps designers choose the perfect font combination for their next design project.
|
||||
- [UI Garage](https://uigarage.net/) — the one-stop shop for designers, developers, and marketers to find inspiration, tools and the best resources.
|
||||
- [UI Sources](https://www.uisources.com/) — over 500+ interactions from the best designed and top-grossing apps on the App Store today. 
|
||||
- [UI Recipes](https://uirecipes.com/) — weekly 15 min lessons on UI design from the hottest apps.
|
||||
- [UX Archive](http://uxarchive.com/) — browse more than 400 user flows across 120 mobile apps. Examine tasks such as booking, logging in, onboarding, purchasing, searching, and more. 
|
||||
- [Waveguide](https://www.waveguide.io/) — a design knowledge bank with thousands of artificially enriched examples of product and brand experience (examples of Mobile App, Landing pages, eCommerce, CX/UX Patterns).
|
||||
- [Web Design Museum](https://www.webdesignmuseum.org/) — over 1,200 carefully selected web sites that show web design trends between the years 1994 and 2006.
|
||||
- [Behance](https://www.behance.net/) — онлайн-платформа для демонстрации и поиска креативных работ. 
|
||||
- [CodeMyUI](https://codemyui.com/) — тщательно подобранная коллекция вдохновения для веб-дизайна и пользовательского интерфейса с фрагментами кода. 
|
||||
- [Collect UI](http://collectui.com/) — платформа для ежедневного вдохновения, собранного из Daily UI и других источников. Основана на работах Dribbble, включает 14419 отобранных дизайнов. 
|
||||
- [Creative Portfolios](http://www.creative-portfolios.com/) — подборка самых креативных портфолио, созданных дизайнерами и разработчиками.
|
||||
- [Design Hunt](https://itunes.apple.com/us/app/design-hunt/id968588816?mt=8) — ежедневная коллекция лучших продуктов, приложений и вдохновения для всех творческих людей.  
|
||||
- [Dribbble](https://dribbble.com/) — онлайн-сообщество для демонстрации работ пользователей. Отличный ресурс для вдохновения.
|
||||
- [Ficture](https://ficture.design/) — архив использования шрифтов, который вдохновляет. 
|
||||
- [Inspiration UI](http://inspirationui.com/) — сообщество, предоставляющее лучшие дизайнерские ресурсы для создателей веб-контента. 
|
||||
- [Hover States](https://hoverstat.es/) — демонстрация выдающихся работ на переднем крае цифровой культуры для творческого сообщества.
|
||||
- [Httpster](https://httpster.net/) — источник вдохновения, демонстрирующий крутые сайты, созданные людьми со всего мира. 
|
||||
- [H69.Design](https://www.h69.design/) — коллекции лендингов и бесплатные ресурсы для дизайнеров.
|
||||
- [Lapa Ninja](https://www.lapa.ninja/) — вдохновение дизайном лендингов со всего интернета. 1800+ примеров лендингов, ежедневно обновляемых.
|
||||
- [Mobile Patterns](https://www.mobile-patterns.com/) — библиотека вдохновения для дизайна, включающая лучшие UI/UX паттерны (iOS и Android).
|
||||
- [Mobbin](https://mobbin.design/) — изучение мобильных паттернов дизайна популярных приложений. Исследуйте распространенные пользовательские потоки, такие как онбординг, регистрация и вход в систему, основные функции и многое другое. 
|
||||
- [One Page Love](https://onepagelove.com/gallery) — коллекция красивых и уникальных одностраничных сайтов для вдохновения в веб-дизайне. 
|
||||
- [Owwly](https://owwly.com/feed/inspirations) — дом для цифровых продуктов, созданных с любовью к дизайну.
|
||||
- [Page Flows](https://pageflows.com/) — видео и скриншоты пользовательских потоков для вдохновения. Откройте для себя паттерны дизайна для более чем 160 различных задач. 
|
||||
- [pttrns](https://pttrns.com/) — паттерны дизайна для популярных мобильных приложений.
|
||||
- [Really Good Emails](https://reallygoodemails.com/) — более 4,150 отобранных дизайнов электронных писем. 
|
||||
- [ReallyGoodUX](https://www.reallygoodux.io/) — скриншоты и примеры отличного UX из реальных мобильных и веб-продуктов. Исследуйте лучшие примеры UX, включая онбординги и пошаговые инструкции. 
|
||||
- [Saas Landing Page](https://saaslandingpage.com/) — откройте лучшие примеры лендингов, созданных ведущими SaaS-компаниями, и получите идеи и вдохновение для вашего следующего проекта. 
|
||||
- [Saas Pages](https://saaspages.xyz/) — коллекция лучших лендингов с акцентом на копирайтинг и дизайн. 
|
||||
- [The Design Team](https://thedesignteam.io/) — комиксы о команде дизайнеров стартапа из Силиконовой долины.
|
||||
- [Typewolf](https://www.typewolf.com/) — помогает дизайнерам выбрать идеальные сочетания шрифтов для их следующих проектов.
|
||||
- [UI Garage](https://uigarage.net/) — универсальный ресурс для дизайнеров, разработчиков и маркетологов, чтобы найти вдохновение, инструменты и лучшие ресурсы.
|
||||
- [UI Sources](https://www.uisources.com/) — более 500+ взаимодействий из лучших дизайнерских и высокодоходных приложений в App Store. 
|
||||
- [UI Recipes](https://uirecipes.com/) — еженедельные 15-минутные уроки по дизайну пользовательского интерфейса из лучших приложений.
|
||||
- [UX Archive](http://uxarchive.com/) — исследуйте более 400 пользовательских потоков в 120 мобильных приложениях. Изучайте задачи, такие как бронирование, вход в систему, онбординг, покупки, поиск и многое другое. 
|
||||
- [Waveguide](https://www.waveguide.io/) — банк знаний о дизайне с тысячами примеров мобильных приложений, лендингов, eCommerce, CX/UX паттернов.
|
||||
- [Web Design Museum](https://www.webdesignmuseum.org/) — более 1,200 тщательно отобранных веб-сайтов, демонстрирующих тренды веб-дизайна с 1994 по 2006 годы.
|
||||
|
||||
</article>
|
||||
|
||||
<article id="design-system-tools">
|
||||
|
||||
### Инструменты систем дизайна
|
||||
### Дизайн-системы
|
||||
|
||||
<div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/33Q3AC0">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
Могу поспорить, вы слышали о дизайн-системах, ведь это довольно модная тема. Дизайн-системы предоставляют последовательные и надежные шаблоны дизайна, чтобы поддерживать синхронизацию между дизайном и разработкой. По сути, это коллекции правил, ограничений и принципов, реализованных в дизайне и коде. Здесь вы найдете инструменты для создания, поддержки и организации вашей дизайн-системы.
|
||||
|
||||
I bet you heard about Design Systems, as it’s a pretty trendy topic. Design systems provide consistent, robust design patterns to keep design and development in sync. They are essentially collections of rules, constraints, and principles, implemented in design and code. Here you can find tools to build, maintain and organize your design system.
|
||||
|
||||
- [Cabana](https://cabanadesignsystem.com/) — a Premium Design System for Sketch that helps you create amazing products faster than ever before.
|
||||
- [Catalog](https://www.catalog.style/) — a living style guide for digital products, combining design documentation with real live components. 
|
||||
- [Design System Manager](https://www.invisionapp.com/design-system-manager/) — Invision's design system manager.
|
||||
- [DSK](https://rundsk.com) — short for “Design System Kit” – a workbench for collaboratively creating Design Systems.  
|
||||
- [EOS Design System](https://www.eosdesignsystem.com) — an open-source and customizable built on top of Bootstrap following the Atomic Design concept. 
|
||||
- [Eva Design System](https://eva.design/) — customizable design system, available for Sketch with Mobile and Web component libraries.  
|
||||
- [Frontify](https://frontify.com/) — create graphical guidelines, patterns libraries, design systems.
|
||||
- [Interplay](https://interplayapp.com/) — connect design and engineering around a single source of truth. The tool is not publicly available yet (beta).
|
||||
- [Lingo](https://www.lingoapp.com/) — create a shared asset library with your entire team. 
|
||||
- [Lucid](https://lucid.style/) — tool for creating, managing and sharing a design system. From a simple component library through to detailed descriptions of your styles.
|
||||
- [Modulz](https://www.modulz.app/) — design, build, document and publish your design system—without writing code.
|
||||
- [Prime Design System Kit](https://www.primedesignsystem.com) — it includes device templates, charts, UI kit and even illustration kit. 
|
||||
- [Specify](https://www.specifyapp.com/) — a tool to create, scale and maintain a design system.
|
||||
- [Storybook](https://storybook.js.org/) — an open-source tool for developing UI components in isolation for React, Vue, and Angular. 
|
||||
- [Symbol Design System](https://symboldesign.co/) — design System for Sketch-based on atomic elements.
|
||||
- [Toolabs](https://www.toolabs.com/) — design systems and components based design, prototype and development tool. It's not public yet but you can apply to the early access.
|
||||
- [Zeroheight](https://www.zeroheight.com/) — style guides created by designers, extended by developers, and editable by everyone.
|
||||
|
||||
<div class="banner banner--yellow">
|
||||
|
||||
We can also add to this in Sketch, Figma, UXPin and Framer X ([Framer X Team Store](https://www.framer.com/design-systems/)).
|
||||
|
||||
</div>
|
||||
- [Cabana](https://cabanadesignsystem.com/) — премиальная дизайн-система для Sketch, которая помогает создавать удивительные продукты быстрее, чем когда-либо.
|
||||
- [Catalog](https://www.catalog.style/) — живой гайд по стилю для цифровых продуктов, объединяющий документацию по дизайну с реальными работающими компонентами. 
|
||||
- [Design System Manager](https://www.invisionapp.com/design-system-manager/) — менеджер дизайн-систем от Invision.
|
||||
- [DSK](https://rundsk.com) — сокращение от "Design System Kit" — рабочее пространство для совместного создания дизайн-систем.  
|
||||
- [EOS Design System](https://www.eosdesignsystem.com) — система с открытым исходным кодом, настраиваемая, построенная на Bootstrap, следуя концепции Atomic Design. 
|
||||
- [Eva Design System](https://eva.design/) — настраиваемая дизайн-система, доступная для Sketch с библиотеками компонентов для мобильных и веб-платформ.  
|
||||
- [Frontify](https://frontify.com/) — создавайте графические руководства, библиотеки паттернов и дизайн-системы.
|
||||
- [Interplay](https://interplayapp.com/) — объедините дизайн и разработку вокруг единого источника истины. Инструмент пока недоступен для широкой публики (бета).
|
||||
- [Lingo](https://www.lingoapp.com/) — создавайте общую библиотеку ресурсов с вашей командой. 
|
||||
- [Lucid](https://lucid.style/) — инструмент для создания, управления и обмена дизайн-системами. От простой библиотеки компонентов до детального описания стилей.
|
||||
- [Modulz](https://www.modulz.app/) — проектируйте, создавайте, документируйте и публикуйте свою дизайн-систему без написания кода.
|
||||
- [Prime Design System Kit](https://www.primedesignsystem.com) — включает шаблоны устройств, диаграммы, UI-набор и даже набор иллюстраций. 
|
||||
- [Specify](https://www.specifyapp.com/) — инструмент для создания, масштабирования и поддержки дизайн-системы.
|
||||
- [Storybook](https://storybook.js.org/) — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. 
|
||||
- [Symbol Design System](https://symboldesign.co/) — дизайн-система для Sketch на основе атомарных элементов.
|
||||
- [Toolabs](https://www.toolabs.com/) — инструмент для проектирования, прототипирования и разработки дизайн-систем и компонентов. Пока недоступен для широкой публики, но вы можете подать заявку на ранний доступ.
|
||||
- [Zeroheight](https://www.zeroheight.com/) — гайды по стилю, создаваемые дизайнерами, расширяемые разработчиками и редактируемые всеми.
|
||||
|
||||
</article>
|
||||
|
||||
<article id="design-to-code-tools">
|
||||
|
||||
### Инструменты "Дизайн в код"
|
||||
### Дизайн в код
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/2ZwUoEq">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
Каждый может научиться разработке, но это требует времени и усилий. Если вам нужен сайт или приложение прямо сейчас, и вы не хотите нанимать разработчика, обратите внимание на конструкторы сайтов. Такие инструменты «дизайн в код» помогут вам быстро и красиво создать портфолио, простой лендинг или приложение.
|
||||
|
||||
Everyone can learn development but it takes time and effort. If you need a website or an app right now and you don’t want to hire a developer, pay attention to the website builders. Such design to code tools will help you to make a portfolio, simple landing or an app pretty fast and beautiful.
|
||||
|
||||
- [Anima](https://www.animaapp.com/) — a web app with a Sketch plugin that converts Sketch to HTML. 
|
||||
- [Blocs](https://blocsapp.com/) — a fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code. 
|
||||
- [Bootstrap Studio](https://bootstrapstudio.io/) — a powerful web design tool for creating responsive websites using the Bootstrap framework.
|
||||
- [Draftbit](https://draftbit.com/) — visually design and build mobile apps directly from your browser.
|
||||
- [EasyLogic Studio](https://www.easylogic.studio/) — fantastic css+svg design tool, also it is converted into code as shown. 
|
||||
- [Grapedrop](https://grapedrop.com/) — design your components, web projects and publish them instantly online, with an easy to use editor.
|
||||
- [Mobirise](https://mobirise.com/) — an offline drag and drop website builder software that is based on Bootstrap 3/4 and \ AMP. 
|
||||
- [PageCloud](https://www.pagecloud.com/) — the fastest and most customizable website builder that allows anyone to create their ideal website.
|
||||
- [PaintCode](https://www.paintcodeapp.com) — vector drawing app that instantly converts drawings into Swift, Objective-C, JavaScript or Java code. 
|
||||
- [Pinegrow](https://pinegrow.com/) — a professional visual editor for CSS Grid, Bootstrap 4 and 3, Foundation, responsive design, HTML, and CSS.
|
||||
- [px.div](https://www.pxdiv.com) — a proper site build tool for developers and designers.
|
||||
- [Readymag](https://readymag.com/) — a visually-pleasing tool for designing on the web from landing pages to multimedia long-reads, presentations and portfolios.
|
||||
- [Sparkle](https://sparkleapp.com/) — the easiest way to make a real website, no code, no jargon. 
|
||||
- [STUDIO](https://studio.design/) — design from scratch, collaborate in real-time and publish websites.
|
||||
- [Supernova Studio](https://supernova.io/) — import designs from Sketch and convert them into Android, iOS or React Native code.
|
||||
- [Tilda](https://tilda.cc/) — create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day.
|
||||
- [Wix](https://www.wix.com/) — the easiest and fullest-featured website builder, that allows you to create your own highly customized site.
|
||||
- [Webflow](https://webflow.com/) — build responsive websites in your browser, then host with us or export your code to host wherever.
|
||||
- [Anima](https://www.animaapp.com/) — веб-приложение с плагином для Sketch, которое конвертирует Sketch в HTML. 
|
||||
- [Blocs](https://blocsapp.com/) — быстрый, простой в использовании и мощный визуальный инструмент веб-дизайна, позволяющий создавать адаптивные сайты без написания кода. 
|
||||
- [Bootstrap Studio](https://bootstrapstudio.io/) — мощный инструмент веб-дизайна для создания адаптивных сайтов с использованием фреймворка Bootstrap.
|
||||
- [Draftbit](https://draftbit.com/) — визуально проектируйте и создавайте мобильные приложения прямо из вашего браузера.
|
||||
- [EasyLogic Studio](https://www.easylogic.studio/) — фантастический инструмент дизайна css+svg, который также конвертируется в код.  
|
||||
- [Grapedrop](https://grapedrop.com/) — создавайте компоненты, веб-проекты и публикуйте их мгновенно в интернете с помощью простого редактора.
|
||||
- [Mobirise](https://mobirise.com/) — автономное программное обеспечение для создания сайтов с функцией drag-and-drop, основанное на Bootstrap 3/4 и AMP. 
|
||||
- [PageCloud](https://www.pagecloud.com/) — самый быстрый и настраиваемый конструктор сайтов, позволяющий любому создать идеальный сайт.
|
||||
- [PaintCode](https://www.paintcodeapp.com) — приложение для векторной графики, которое мгновенно конвертирует рисунки в код Swift, Objective-C, JavaScript или Java. 
|
||||
- [Pinegrow](https://pinegrow.com/) — профессиональный визуальный редактор для CSS Grid, Bootstrap 4 и 3, Foundation, адаптивного дизайна, HTML и CSS.
|
||||
- [px.div](https://www.pxdiv.com) — качественный инструмент создания сайтов для разработчиков и дизайнеров.
|
||||
- [Readymag](https://readymag.com/) — визуально приятный инструмент для веб-дизайна, от лендингов до мультимедийных лонгридов, презентаций и портфолио.
|
||||
- [Sparkle](https://sparkleapp.com/) — самый простой способ создать настоящий сайт: без кода и сложных терминов. 
|
||||
- [STUDIO](https://studio.design/) — создавайте с нуля, сотрудничайте в реальном времени и публикуйте сайты.
|
||||
- [Supernova Studio](https://supernova.io/) — импортируйте дизайны из Sketch и конвертируйте их в код для Android, iOS или React Native.
|
||||
- [Tilda](https://tilda.cc/) — создавайте сайт, лендинг или интернет-магазин бесплатно с помощью модулей Tilda и публикуйте в тот же день.
|
||||
- [Wix](https://www.wix.com/) — самый простой и многофункциональный конструктор сайтов, позволяющий создать уникальный сайт.
|
||||
- [Webflow](https://webflow.com/) — создавайте адаптивные сайты прямо в браузере, затем хостите у нас или экспортируйте код для размещения где угодно.
|
||||
|
||||
</article>
|
||||
|
||||
@ -435,22 +405,14 @@ Everyone can learn development but it takes time and effort. If you need a websi
|
||||
|
||||
### Контроль версий дизайна
|
||||
|
||||
<div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/33Q3AC0">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
Разработчики уже давно активно используют инструменты контроля версий, вероятно, начиная с 2005 года (первый релиз Git). Использование системы контроля версий — очевидный выбор для команд разработчиков, в то время как системы контроля версий для дизайнеров появились совсем недавно. Этот рынок быстро развивается, и мы ожидаем увидеть еще больше возможностей в области контроля версий для дизайнеров:
|
||||
|
||||
Developers actively use version control tools for a long time, probably since 2005 (Git first release). Using a version control system is no brainer for dev teams, while the design version control system appeared only recently. This market is rapidly developing and we expect to see even more in version control for designers:
|
||||
|
||||
- [Abstract](https://www.abstract.com/) — a platform for design teams to version, manage and collaborate on Sketch files.
|
||||
- [Folio](http://folioformac.com/) — a simple version control system for design teams based on Git. 
|
||||
- [Kactus](https://kactus.io/) — design version control without changing your tools. Manage changes, document work and keep your team in sync.  
|
||||
- [Plant](https://plantapp.io/) — Mac app and Sketch plugin offering complete version control for designers and teams. 
|
||||
- [Relay for Figma](https://relay.graphics/) — Relay pushes your latest assets from Figma directly to your codebase (not released yet).
|
||||
- [Versions](https://versions.sympli.io) — a version control tool for designers with visual diff, merge and conflict resolution. Works with GitHub, Bitbucket, GitLab and Azure DevOps.
|
||||
- [Abstract](https://www.abstract.com/) — платформа для команд дизайнеров, позволяющая версионировать, управлять и совместно работать с файлами Sketch.
|
||||
- [Folio](http://folioformac.com/) — простая система контроля версий для дизайнерских команд, основанная на Git. 
|
||||
- [Kactus](https://kactus.io/) — контроль версий для дизайна без необходимости менять используемые инструменты. Управляйте изменениями, документируйте работу и поддерживайте синхронность команды.  
|
||||
- [Plant](https://plantapp.io/) — приложение для Mac и плагин Sketch, предоставляющие полный контроль версий для дизайнеров и команд. 
|
||||
- [Relay for Figma](https://relay.graphics/) — Relay передает ваши последние активы из Figma напрямую в кодовую базу (еще не выпущен).
|
||||
- [Versions](https://versions.sympli.io) — инструмент контроля версий для дизайнеров с функциями визуального сравнения, слияния и разрешения конфликтов. Работает с GitHub, Bitbucket, GitLab и Azure DevOps.
|
||||
|
||||
</article>
|
||||
|
||||
@ -458,47 +420,39 @@ Developers actively use version control tools for a long time, probably since 20
|
||||
|
||||
### Инструменты разработки
|
||||
|
||||
This section mentions development tools and browsers. Development browsers have features that help developers and designers create and test websites and apps.
|
||||
Этот раздел упоминает инструменты разработки и браузеры. Браузеры для разработки включают функции, которые помогают разработчикам и дизайнерам создавать и тестировать сайты и приложения.
|
||||
|
||||
- [Blisk](https://blisk.io) — provides a development workspace to develop and test modern web applications twice faster.
|
||||
- [Firefox developer edition](https://www.mozilla.org/en-US/firefox/developer/) — developer edition of the Firefox browser. 
|
||||
- [Litmus](https://litmus.com/) — an email campaign creation platform that, amongst other things, lets you see how HTML emails will appear in a wide variety of email clients.
|
||||
- [Polypane](https://polypane.rocks) — a browser built from the ground up to create and test websites and apps.
|
||||
- [Storybook](https://storybook.js.org/) — an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.  
|
||||
- [Styleguidist](https://github.com/styleguidist/react-styleguidist) — isolated React component development environment with a living style guide.  
|
||||
- [Blisk](https://blisk.io) — предоставляет рабочее пространство для разработки и тестирования современных веб-приложений в два раза быстрее.
|
||||
- [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/) — разработческая версия браузера Firefox. 
|
||||
- [Litmus](https://litmus.com/) — платформа для создания email-кампаний, которая, среди прочего, позволяет увидеть, как HTML-письма будут отображаться в различных почтовых клиентах.
|
||||
- [Polypane](https://polypane.rocks) — браузер, созданный с нуля для разработки и тестирования сайтов и приложений.
|
||||
- [Storybook](https://storybook.js.org/) — инструмент с открытым исходным кодом для разработки UI-компонентов в изоляции для React, Vue и Angular. Делает процесс создания потрясающих пользовательских интерфейсов организованным и эффективным.  
|
||||
- [Styleguidist](https://github.com/styleguidist/react-styleguidist) — изолированная среда разработки компонентов React с живым гайдом по стилям.  
|
||||
|
||||
</article>
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/35I1q9q">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Maze.png" alt="Maze"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<article id="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:
|
||||
Слушать пользователей важно, но еще важнее видеть, как они на самом деле используют ваш продукт. Для этого нужно установить различные аналитические инструменты, программное обеспечение для мониторинга опыта и приложения для анализа поведения пользователей. Просто используйте эти аналитические решения, учитывая данные пользователей:
|
||||
|
||||
- [Amplitude](https://amplitude.com/) — understand your users, rapidly release better product experiences, and grow your business.
|
||||
- [Chalkmark](https://www.optimalworkshop.com/chalkmark) — increase your customer conversion and task-oriented success rates by getting quick feedback on designs before you implement.
|
||||
- [Fathom](https://usefathom.com/) — provides simple, useful websites stats without tracking or storing personal data of your users.
|
||||
- [FullStory](https://www.fullstory.com/) — an app that captures all your customer experience data in one powerful, easy-to-use platform.
|
||||
- [Google Analytics](https://analytics.google.com/analytics/web/) — measure your advertising ROI and track your sites and applications. 
|
||||
- [Heap](https://heapanalytics.com/) — automatically capture every web, mobile, and cloud interaction then retroactively analyze your data without writing code.
|
||||
- [Heatly](https://www.heatlyanalytics.com) — free heatmap tools to understand the website's user experience better. 
|
||||
- [Hotjar](https://www.hotjar.com/) — see how visitors are using your website and collect user feedback.
|
||||
- [Inspectlet](https://www.inspectlet.com/) — record videos of your visitors as they use your site, so you can see everything they do.
|
||||
- [LiveSession](https://livesession.io) - high-quality user's session replay analytics.
|
||||
- [LogRocket](https://www.logrocket.com/) — see what users do on your site, helping you reproduce bugs and fix issues faster.
|
||||
- [Mixpanel](https://mixpanel.com/) — get insights across all of your user-centric data to make smarter decisions and act faster based on how customers use your product or website.
|
||||
- [Mouseflow](https://mouseflow.com/) — record mouse cursor movements.
|
||||
- [Pendo](https://www.pendo.io/) — measure and elevate the customer experience within their applications.
|
||||
- [Smartlook](https://www.smartlook.com) — user session replay and user engagement analytics.
|
||||
- [Usabilla](https://usabilla.com) — build future-proof customer experiences by asking the right questions at the right time.
|
||||
- [Amplitude](https://amplitude.com/) — поймите своих пользователей, быстро создавайте лучшие продуктовые впечатления и развивайте свой бизнес.
|
||||
- [Chalkmark](https://www.optimalworkshop.com/chalkmark) — повышайте конверсию клиентов и успех выполнения задач, получая быстрые отзывы о дизайне до его реализации.
|
||||
- [Fathom](https://usefathom.com/) — предоставляет простую и полезную статистику сайта без отслеживания или хранения персональных данных ваших пользователей.
|
||||
- [FullStory](https://www.fullstory.com/) — приложение, которое собирает все данные о взаимодействии клиентов с вашим продуктом на одной мощной и удобной платформе.
|
||||
- [Google Analytics](https://analytics.google.com/analytics/web/) — измеряйте ROI вашей рекламы и отслеживайте сайты и приложения. 
|
||||
- [Heap](https://heapanalytics.com/) — автоматически фиксируйте каждое взаимодействие в вебе, на мобильных устройствах и в облаке, а затем анализируйте данные ретроспективно без написания кода.
|
||||
- [Heatly](https://www.heatlyanalytics.com) — бесплатный инструмент тепловых карт для лучшего понимания пользовательского опыта на сайте. 
|
||||
- [Hotjar](https://www.hotjar.com/) — посмотрите, как посетители используют ваш сайт, и собирайте отзывы пользователей.
|
||||
- [Inspectlet](https://www.inspectlet.com/) — записывайте видео сессий ваших посетителей, чтобы видеть всё, что они делают на сайте.
|
||||
- [LiveSession](https://livesession.io) — аналитика воспроизведения пользовательских сессий высокого качества.
|
||||
- [LogRocket](https://www.logrocket.com/) — увидьте, что делают пользователи на вашем сайте, что поможет быстрее воспроизводить баги и устранять проблемы.
|
||||
- [Mixpanel](https://mixpanel.com/) — получите инсайты по всем данным, ориентированным на пользователей, чтобы принимать более умные решения и действовать быстрее, основываясь на том, как клиенты используют ваш продукт или сайт.
|
||||
- [Mouseflow](https://mouseflow.com/) — записывайте перемещения курсора мыши.
|
||||
- [Pendo](https://www.pendo.io/) — измеряйте и улучшайте клиентский опыт внутри приложений.
|
||||
- [Smartlook](https://www.smartlook.com) — воспроизведение сессий пользователей и аналитика вовлеченности.
|
||||
- [Usabilla](https://usabilla.com) — создавайте клиентоориентированный опыт, задавая правильные вопросы в нужное время.
|
||||
|
||||
</article>
|
||||
|
||||
@ -506,80 +460,72 @@ Listening to users is important but seeing the real usage is even more crucial.
|
||||
|
||||
### Инструменты работы со шрифтами
|
||||
|
||||
Fonts are commonly used for making the web a more beautiful place. It’s an essential part of any design. In this section, you’ll find fonts generators & font finder tools that allow you to manage and work with fonts:
|
||||
Шрифты часто используются для того, чтобы сделать веб более красивым. Это важнейшая часть любого дизайна. В этом разделе вы найдете генераторы шрифтов и инструменты для поиска шрифтов, которые позволяют управлять ими и работать с ними:
|
||||
|
||||
- [BeFonts](https://befonts.com/) — a Decent collection of free fonts. 
|
||||
- [Behance Free Fonts](https://www.behance.net/search/?search=free%20font) — a list of free fonts uploaded on Behance. 
|
||||
- [DaFont](https://www.dafont.com/) — archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity. 
|
||||
- [Emotype](http://emotype.webflow.io/) — makes it easy to find fonts based on the emotions you want to convey on your website. 
|
||||
- [Fontbase](https://fontba.se/) — font management made easy. 
|
||||
- [FontFabric](https://www.fontfabric.com/) — gorgeous interface and good collection. 
|
||||
- [Fontface Ninja](https://fontface.ninja/) — browser extension to discover what fonts are being used on any website.
|
||||
- [FontPair](https://fontpair.co/) — a simple tool that helps you pair Google Fonts together. 
|
||||
- [Fontown](https://www.fontown.com/en) — a typographic tool with a nonstop growing font catalog which facilitates designer workflow.
|
||||
- [Fonts](https://fonts.adobe.com/fonts) — thousands of beautiful fonts by Adobe. 
|
||||
- [Fonts Arena](https://fontsarena.com/) — curated typography website with high-quality free fonts, done-for-you research articles, free alternatives to premium fonts, news, and more. 
|
||||
- [FontGet](https://www.fontget.com/) — variety of fonts all sorted neatly with tags. 
|
||||
- [FontSelf](https://www.fontself.com) — an extension for Illustrator and Photoshop CC that lets you turn any lettering into OpenType fonts in minutes!
|
||||
- [FontSpark](https://fontspark.app/) — a simple tool to help designers quickly find the best fonts for their projects. 
|
||||
- [Font Squirrel](https://www.fontsquirrel.com/fonts/acherus-grotesque) — download free fonts with wide collections.
|
||||
- [Google Fonts](https://fonts.google.com/) — making the web more beautiful, fast, and open through great typography. 
|
||||
- [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/) — a hassle way to self-host Google Fonts. It‘s free and open-source.  [](https://github.com/majodev/google-webfonts-helper/)
|
||||
- [LostType](http://losttype.com/) — the first Pay-What-You-Want type foundry.
|
||||
- [Measure](https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg) — measure typographic line lengths with this browser extension for Chrome. 
|
||||
- [RightFont](https://rightfontapp.com/) — font managing app, helps preview, sync, install and organize fonts over iCloud, Dropbox or Google Drive. 
|
||||
- [Sans Forgetica](http://sansforgetica.rmit/) — a downloadable font that is scientifically designed to help you remember your study notes. 
|
||||
- [Size Calculator](https://sizecalc.com/) — calculate the perceived size using viewing distance and physical size of the printed typography. 
|
||||
- [Typeface](https://typefaceapp.com/) — font manager that improves your design workflow with live font previews and flexible tagging. 
|
||||
- [Wakamai Fondue](https://wakamaifondue.com/) — the tool that answers the question "what can my font do?". 
|
||||
- [Web Font Preview](https://webfontpreview.com/) — preview Google Font pairings with components and site templates.  [](https://github.com/jonaskay/webfontpreview)
|
||||
- [Webfont](https://webfontapp.com/) — create and maintain custom SVG icon fonts, made a shared library of icons.  
|
||||
- [WordMarkIt](https://wordmark.it/) — displays your written word/phrase with all the fonts which are already installed on your computer. 
|
||||
- [BeFonts](https://befonts.com/) — приличная коллекция бесплатных шрифтов. 
|
||||
- [Behance Free Fonts](https://www.behance.net/search/?search=free%20font) — список бесплатных шрифтов, загруженных на Behance. 
|
||||
- [DaFont](https://www.dafont.com/) — архив шрифтов, доступных для бесплатного скачивания. Сортировка по алфавиту, стилю, автору или популярности. 
|
||||
- [Emotype](http://emotype.webflow.io/) — позволяет легко находить шрифты на основе эмоций, которые вы хотите передать на своем сайте. 
|
||||
- [Fontbase](https://fontba.se/) — простой инструмент для управления шрифтами. 
|
||||
- [FontFabric](https://www.fontfabric.com/) — красивый интерфейс и хорошая коллекция шрифтов. 
|
||||
- [Fontface Ninja](https://fontface.ninja/) — расширение для браузера, которое позволяет определить шрифты, используемые на любом сайте.
|
||||
- [FontPair](https://fontpair.co/) — простой инструмент, помогающий сочетать шрифты Google. 
|
||||
- [Fontown](https://www.fontown.com/en) — типографический инструмент с постоянно растущим каталогом шрифтов, упрощающий рабочий процесс дизайнеров.
|
||||
- [Fonts](https://fonts.adobe.com/fonts) — тысячи красивых шрифтов от Adobe. 
|
||||
- [Fonts Arena](https://fontsarena.com/) — сайт о типографике с качественными бесплатными шрифтами, исследованиями, бесплатными альтернативами премиум-шрифтам и новостями. 
|
||||
- [FontGet](https://www.fontget.com/) — разнообразие шрифтов, аккуратно отсортированных по тегам. 
|
||||
- [FontSelf](https://www.fontself.com) — расширение для Illustrator и Photoshop CC, позволяющее превратить любой текст в шрифт OpenType за считанные минуты!
|
||||
- [FontSpark](https://fontspark.app/) — простой инструмент для быстрого поиска лучших шрифтов для проектов. 
|
||||
- [Font Squirrel](https://www.fontsquirrel.com/fonts/acherus-grotesque) — скачивайте бесплатные шрифты из широких коллекций. 
|
||||
- [Google Fonts](https://fonts.google.com/) — делает веб красивее, быстрее и открытее благодаря отличной типографике. 
|
||||
- [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/) — удобный способ размещения шрифтов Google на собственном сервере. Бесплатно и с открытым исходным кодом.  [](https://github.com/majodev/google-webfonts-helper/)
|
||||
- [LostType](http://losttype.com/) — первая типографика с подходом "плати сколько хочешь".
|
||||
- [Measure](https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg) — измеряйте длину строк текста с этим расширением для Chrome. 
|
||||
- [RightFont](https://rightfontapp.com/) — приложение для управления шрифтами, помогает просматривать, синхронизировать, устанавливать и организовывать шрифты через iCloud, Dropbox или Google Drive. 
|
||||
- [Sans Forgetica](http://sansforgetica.rmit/) — шрифт, который помогает лучше запоминать учебные заметки. 
|
||||
- [Size Calculator](https://sizecalc.com/) — рассчитывает воспринимаемый размер текста с учетом расстояния просмотра и физического размера типографики. 
|
||||
- [Typeface](https://typefaceapp.com/) — менеджер шрифтов, который улучшает рабочий процесс дизайна с помощью живых превью шрифтов и гибкой системы тегов. 
|
||||
- [Wakamai Fondue](https://wakamaifondue.com/) — инструмент, отвечающий на вопрос "что умеет мой шрифт?". 
|
||||
- [Web Font Preview](https://webfontpreview.com/) — предварительный просмотр пар шрифтов Google с компонентами и шаблонами сайтов.  [](https://github.com/jonaskay/webfontpreview)
|
||||
- [Webfont](https://webfontapp.com/) — создавайте и управляйте пользовательскими SVG-иконками-шрифтами, создавая общую библиотеку значков.  
|
||||
- [WordMarkIt](https://wordmark.it/) — отображает написанные вами слова/фразы всеми шрифтами, которые уже установлены на вашем компьютере. 
|
||||
|
||||
<div class="banner banner--yellow">
|
||||
|
||||
You can also handle fonts with Specify, which is mentioned in the [Design System Tools](https://github.com/LisaDziuba/Awesome-Design-Tools#design-system-tools) section.
|
||||
Вы также можете управлять шрифтами с помощью Specify, который упоминается в разделе [Дизайн-системы](#design-system-tools).
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/33Q3AC0">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<article id="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.
|
||||
Градиенты можно увидеть повсюду — в интерфейсе, брендинге, иллюстрациях, типографике. Градиент создается с использованием двух или более разных цветов, которые постепенно переходят друг в друга. Это может выглядеть как запоминающийся, свежий и уникальный цвет. Чтобы создать такой градиент для вашего дизайна, используйте эти палитры градиентных цветов.
|
||||
|
||||
- [Blend](http://www.colinkeany.com/blend/) — create and customize beautiful CSS3 gradients. 
|
||||
- [Colorffy](https://www.colorffy.com/) — get CSS, images, UI previews or create own gradients. 
|
||||
- [Colors & Fonts](https://www.colorsandfonts.com/) — a curated library of colors, gradients and fonts for digital designers and web developers.
|
||||
- [ColorSpace](https://mycolor.space/) — the perfect matching color scheme for your next project! Generate nice color palettes. 
|
||||
- [ColorSpark](https://colorspark.app/gradient) — helps designers find unique colors and striking gradient combinations. 
|
||||
- [Cool Backgrounds](https://coolbackgrounds.io/) — explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites.
|
||||
- [CoolHue](https://webkul.github.io/coolhue/) — handpicked gradient palette and swatch for your next super amazing stuff. 
|
||||
- [CSS Gradient](https://cssgradient.io/) — a free CSS gradient generator tool, this website lets you create a colorful gradient background. 
|
||||
- [Egg Gradients](https://www.eggradients.com/) — a color collection page that includes shades of 12 different colors. 
|
||||
- [Grabient](https://www.grabient.com/) — beautiful and simple UI for generating web gradients. 
|
||||
- [Gradienta](https://gradienta.io/) — multicolor CSS Gradients, JPG Downloads, 100% Free! 
|
||||
- [GradientsList](https://www.gradientslist.com) — a largest crowdsourced collection of gradients, with daily contributions from users on [Gradients Maker for iOS](https://itunes.apple.com/app/apple-store/id1442380225?pt=117877769&ct=gh&mt=8) 
|
||||
- [Gradient Generator](https://colordesigner.io/gradient-generator) — a tool that generates a stepped gradient between two colors. 
|
||||
- [Gradient Hunt](https://gradienthunt.com/) — a free and open platform for color inspiration with thousands of trendy hand-made color gradients.  
|
||||
- [Gradients Guru](http://gradientsguru.com/) — blend mode background images & beautiful background gradients for your UI. 
|
||||
- [HtmlColours](https://htmlcolors.com/) — realize how easy and beautiful it is to create gradients with this gradient generator. 
|
||||
- [UI Gradients](https://uigradients.com/) — handpicked collection of beautiful color gradients for designers and developers. 
|
||||
- [Web Gradients](https://webgradients.com/) — a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. 
|
||||
- [Blend](http://www.colinkeany.com/blend/) — создавайте и настраивайте красивые CSS3 градиенты. 
|
||||
- [Colorffy](https://www.colorffy.com/) — получайте CSS, изображения, превью интерфейсов или создавайте собственные градиенты. 
|
||||
- [Colors & Fonts](https://www.colorsandfonts.com/) — библиотека цветов, градиентов и шрифтов, отобранная для цифровых дизайнеров и веб-разработчиков. 
|
||||
- [ColorSpace](https://mycolor.space/) — идеальная цветовая палитра для вашего следующего проекта! Генерируйте красивые цветовые схемы. 
|
||||
- [ColorSpark](https://colorspark.app/gradient) — помогает дизайнерам находить уникальные цвета и яркие градиенты. 
|
||||
- [Cool Backgrounds](https://coolbackgrounds.io/) — изучите тщательно отобранную коллекцию крутых фонов, которые вы можете добавить на блоги, сайты.
|
||||
- [CoolHue](https://webkul.github.io/coolhue/) — отобранная палитра градиентов для вашего следующего потрясающего проекта. 
|
||||
- [CSS Gradient](https://cssgradient.io/) — бесплатный инструмент генерации CSS-градиентов, который позволяет создавать красочные градиенты. 
|
||||
- [Egg Gradients](https://www.eggradients.com/) — коллекция оттенков 12 разных цветов. 
|
||||
- [Grabient](https://www.grabient.com/) — красивый и простой интерфейс для генерации веб-градиентов. 
|
||||
- [Gradienta](https://gradienta.io/) — многокрасочные CSS-градиенты, JPG-загрузки, 100% бесплатно! 
|
||||
- [GradientsList](https://www.gradientslist.com) — крупнейшая краудсорсинговая коллекция градиентов с ежедневными добавлениями пользователей через [Gradients Maker для iOS](https://itunes.apple.com/app/apple-store/id1442380225?pt=117877769&ct=gh&mt=8). 
|
||||
- [Gradient Generator](https://colordesigner.io/gradient-generator) — инструмент, который генерирует ступенчатые градиенты между двумя цветами. 
|
||||
- [Gradient Hunt](https://gradienthunt.com/) — бесплатная открытая платформа для вдохновения цветами с тысячами модных ручных градиентов.  
|
||||
- [Gradients Guru](http://gradientsguru.com/) — изображения фонов в режиме смешивания и красивые градиенты для вашего интерфейса. 
|
||||
- [HtmlColours](https://htmlcolors.com/) — узнайте, как легко и красиво создавать градиенты с этим генератором градиентов. 
|
||||
- [UI Gradients](https://uigradients.com/) — тщательно отобранная коллекция красивых цветовых градиентов для дизайнеров и разработчиков. 
|
||||
- [Web Gradients](https://webgradients.com/) — бесплатная коллекция из 180 линейных градиентов, которые можно использовать как фоны для контента на любом участке вашего сайта. 
|
||||
|
||||
<div class="banner banner--yellow">
|
||||
|
||||
You can also create and audit gradients with Leonardo, which is mentioned in the [Accessibility Tools section](#accessibility-tools).
|
||||
Вы также можете создавать и проверять градиенты с помощью Leonardo, который упоминается в разделе [Инструменты доступности](#accessibility-tools).
|
||||
|
||||
</div>
|
||||
|
||||
@ -589,51 +535,51 @@ You can also create and audit gradients with Leonardo, which is mentioned in the
|
||||
|
||||
### Инструменты для работы с иконками
|
||||
|
||||
As well as fonts, icons are used in every design. These basic elements support and guide many user actions inside the product. Without a doubt, icons are a vital element in user navigation. While making those small design elements is hard and time-consuming, you can get thousands of vector icons for personal and commercial use.
|
||||
Как и шрифты, иконки используются в каждом дизайне. Эти базовые элементы поддерживают и направляют многие действия пользователей внутри продукта. Без сомнения, иконки являются важным элементом пользовательской навигации. Создание таких небольших элементов дизайна сложно и требует много времени, но вы можете найти тысячи векторных иконок для личного и коммерческого использования.
|
||||
|
||||
- [Animaticons](http://animaticons.co/) — a growing set of beautiful, high-resolution, animated GIF icons that you can customize.
|
||||
- [CoreUI Icons](https://coreui.io/icons/) — premium designed free icon set with marks in SVG, Webfont and raster formats. 
|
||||
- [Digital Nomad Icons](http://digitalnomadicons.com/) — lifestyle icon & emoji pack for your next project. 25 high-resolution flat icons. 
|
||||
- [Essential Glyphs](https://interface.market/essential/basic-pack) — created to cover your needs in perfect-shaped icons. Adapted for small and large sizes. 
|
||||
- [Feather Icons](https://feathericons.com/) — each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.  
|
||||
- [Flaticon](https://www.flaticon.com/) — 1593000+ vector icons in SVG, PSD, PNG, EPS format or as icon font.
|
||||
- [Font Awesome](https://fontawesome.com/) — the web's most popular icon set and toolkit, also it's open source. [](https://github.com/FortAwesome/Font-Awesome)
|
||||
- [Fontello](http://fontello.com/) — tool to build custom fonts with icons, also open source.  [](https://github.com/fontello/fontello)
|
||||
- [Freepik](https://www.freepik.com) — collection of exclusive freebies and all graphic resources that you need for your projects.
|
||||
- [Iconscout](https://iconscout.com/) — get high-quality Icons, Illustrations and Stock photos at one place.
|
||||
- [Iconfinder](https://www.iconfinder.com) — a marketplace for vector icons (SVG). Icon sets available in IconJar format.
|
||||
- [IconJar](https://www.geticonjar.com/) — store all your icons in one icon manager. 
|
||||
- [Iconmonstr](https://iconmonstr.com/) — discover 4412+ free icons in 305 collections.Big and continuously growing source of simple icons. 
|
||||
- [Iconset](https://iconset.io/) — free, cross-platform and fast SVG icon organizer working on Mac and Windows. 
|
||||
- [Icon Store](https://iconstore.co/) — a library of free vector icons for personal and commercial projects, designed by first-class designers. 
|
||||
- [ICONSVG](https://iconsvg.xyz/) — a tool to simplify the process of finding and generating common icons for your project. 
|
||||
- [Icons8](https://icons8.com/icons) — free iOS, Android and Windows styled icons. 
|
||||
- [Ikonate](https://www.ikonate.com/) — customize, adjust and download free vector icons. 
|
||||
- [illustrio](https://illustrio.com/) — a smarter icon library. Build something great with 100% customizable icons. 
|
||||
- [Ionicons](https://ionicons.com/) — beautifully crafted open source icons. 
|
||||
- [Material Design Icons](https://materialdesignicons.com/) — free material design icons made possible by open source contributons.  
|
||||
- [Material Icons Library](https://icons.pixsellz.io/) — free collection of 1000+ icons for popular graphics tools. 
|
||||
- [Motion](https://www.getmotion.io) — free, simple animated icon editor.
|
||||
- [Norde Source](https://norde.io/) — mac, Windows and Linux app to color and customize icon sets to fit your brand. 
|
||||
- [Noun Project](https://thenounproject.com/) — icons for everything.
|
||||
- [Nucleo](https://nucleoapp.com/) — a Mac and Windows app to collect, customize and export all your icons. 
|
||||
- [Orion Icons](https://orioniconlibrary.com/all-icons) — SVG vector icons with an advanced interactive web app.
|
||||
- [Simple Icons](https://simpleicons.org/) — free SVG icons for popular brands. Simply click the icon you want, and the download should start automatically. 
|
||||
- [Share Icon](https://www.shareicon.net/) — more than 300 000 free download icons in different formats. 
|
||||
- [Streamline Emoji](http://emoji.streamlineicons.com/) — a free collection of 850 + vector emoji. The style is inspired by the japanese “Kawaii” (cute) style. 
|
||||
- [Svgsus](http://www.svgs.us/) — SVG icon management tool. 
|
||||
- [SVG Colorizer](https://www.iconshock.com/svg-color/) — a tool to automatically change the entire color palette of any given SVG icon pack intelligently keeping the shades, highlights & shadows. 
|
||||
- [SVGRepo](https://www.svgrepo.com/) — a site with 300.000+ SVG Vectors and Icons.
|
||||
- [Tilda Icons](https://tilda.cc/free-icons/) — download free icons for landing pages. More than 700 vector icons, collected in 43 sets for business. 
|
||||
- [Twemoji](https://twemoji.twitter.com/) — Twitter’s open-source emoji has you covered for all your project's emoji needs. 
|
||||
- [Unicons](https://iconscout.com/unicons) — 1000+ pixel-perfect vector icons for your next project. 
|
||||
- [VisualPharm](https://visualpharm.com/) — free SVG Icons with super-fast search and free Coke. Built for fun by Icons8. 
|
||||
- [Xicons](https://www.xicons.co/) — free vector icons, that update every 10 days. 
|
||||
- [Zwicon](https://www.zwicon.com/) — handcrafted icon set for your next project. 
|
||||
- [Animaticons](http://animaticons.co/) — растущая коллекция красивых анимированных GIF-иконок высокого разрешения, которые можно настроить.
|
||||
- [CoreUI Icons](https://coreui.io/icons/) — премиум набор бесплатных иконок в SVG, Webfont и растровых форматах. 
|
||||
- [Digital Nomad Icons](http://digitalnomadicons.com/) — набор иконок и эмодзи в стиле digital nomad. 25 иконок высокого разрешения. 
|
||||
- [Essential Glyphs](https://interface.market/essential/basic-pack) — идеально подходящие иконки для любых размеров. 
|
||||
- [Feather Icons](https://feathericons.com/) — каждая иконка разработана на сетке 24x24 с акцентом на простоту, согласованность и читаемость.  
|
||||
- [Flaticon](https://www.flaticon.com/) — более 1 593 000 векторных иконок в SVG, PSD, PNG, EPS форматах или как иконный шрифт.
|
||||
- [Font Awesome](https://fontawesome.com/) — самый популярный набор иконок и инструментов для веба, также с открытым исходным кодом. [](https://github.com/FortAwesome/Font-Awesome)
|
||||
- [Fontello](http://fontello.com/) — инструмент для создания собственных шрифтов с иконками, также с открытым исходным кодом.  [](https://github.com/fontello/fontello)
|
||||
- [Freepik](https://www.freepik.com) — коллекция эксклюзивных бесплатных ресурсов и всех графических элементов, необходимых для ваших проектов.
|
||||
- [Iconscout](https://iconscout.com/) — высококачественные иконки, иллюстрации и стоковые фото в одном месте.
|
||||
- [Iconfinder](https://www.iconfinder.com) — маркетплейс векторных иконок (SVG). Наборы иконок доступны в формате IconJar.
|
||||
- [IconJar](https://www.geticonjar.com/) — храните все ваши иконки в одном менеджере. 
|
||||
- [Iconmonstr](https://iconmonstr.com/) — более 4412 бесплатных иконок в 305 коллекциях. Большой и постоянно растущий ресурс. 
|
||||
- [Iconset](https://iconset.io/) — бесплатный, кроссплатформенный и быстрый менеджер SVG-иконок для Mac и Windows. 
|
||||
- [Icon Store](https://iconstore.co/) — библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами. 
|
||||
- [ICONSVG](https://iconsvg.xyz/) — инструмент для упрощения поиска и генерации стандартных иконок для вашего проекта. 
|
||||
- [Icons8](https://icons8.com/icons) — бесплатные иконки в стиле iOS, Android и Windows. 
|
||||
- [Ikonate](https://www.ikonate.com/) — настройка, регулировка и загрузка бесплатных векторных иконок. 
|
||||
- [illustrio](https://illustrio.com/) — умная библиотека иконок. Создавайте что-то великое с полностью настраиваемыми иконками. 
|
||||
- [Ionicons](https://ionicons.com/) — красиво разработанные иконки с открытым исходным кодом. 
|
||||
- [Material Design Icons](https://materialdesignicons.com/) — бесплатные иконки в стиле Material Design, созданные благодаря вкладу сообщества.  
|
||||
- [Material Icons Library](https://icons.pixsellz.io/) — бесплатная коллекция более 1000 иконок для популярных графических инструментов. 
|
||||
- [Motion](https://www.getmotion.io) — бесплатный и простой редактор анимации иконок.
|
||||
- [Norde Source](https://norde.io/) — приложение для Mac, Windows и Linux для раскраски и настройки набора иконок под ваш бренд. 
|
||||
- [Noun Project](https://thenounproject.com/) — иконки для всего.
|
||||
- [Nucleo](https://nucleoapp.com/) — приложение для Mac и Windows для сбора, настройки и экспорта всех ваших иконок. 
|
||||
- [Orion Icons](https://orioniconlibrary.com/all-icons) — векторные SVG-иконки с продвинутым интерактивным веб-приложением.
|
||||
- [Simple Icons](https://simpleicons.org/) — бесплатные SVG-иконки для популярных брендов. Просто нажмите на нужную иконку, и загрузка начнется автоматически. 
|
||||
- [Share Icon](https://www.shareicon.net/) — более 300 000 бесплатных иконок для скачивания в различных форматах. 
|
||||
- [Streamline Emoji](http://emoji.streamlineicons.com/) — бесплатная коллекция из 850+ векторных эмодзи. Стиль вдохновлен японским стилем "Каваий" (милый). 
|
||||
- [Svgsus](http://www.svgs.us/) — инструмент управления SVG-иконками. 
|
||||
- [SVG Colorizer](https://www.iconshock.com/svg-color/) — инструмент для автоматического изменения всей цветовой палитры любого набора SVG-иконок, сохраняя оттенки, блики и тени. 
|
||||
- [SVGRepo](https://www.svgrepo.com/) — сайт с более чем 300 000 SVG-векторов и иконок.
|
||||
- [Tilda Icons](https://tilda.cc/free-icons/) — скачивайте бесплатные иконки для лендингов. Более 700 векторных иконок, собранных в 43 наборах для бизнеса. 
|
||||
- [Twemoji](https://twemoji.twitter.com/) — проект Twitter с открытым исходным кодом, предоставляющий эмодзи для любых нужд. 
|
||||
- [Unicons](https://iconscout.com/unicons) — более 1000 пиксельно-идеальных векторных иконок для вашего проекта. 
|
||||
- [VisualPharm](https://visualpharm.com/) — бесплатные SVG-иконки с супербыстрым поиском. Создано для веселья командой Icons8. 
|
||||
- [Xicons](https://www.xicons.co/) — бесплатные векторные иконки, которые обновляются каждые 10 дней. 
|
||||
- [Zwicon](https://www.zwicon.com/) — вручную созданный набор иконок для вашего проекта. 
|
||||
|
||||
<div class="banner banner--yellow">
|
||||
|
||||
You can also handle icons with Specify, which is mentioned in the [Design System Tools](https://github.com/LisaDziuba/Awesome-Design-Tools#design-system-tools) section.
|
||||
Вы также можете управлять иконками с помощью Specify, который упоминается в разделе [Дизайн-системы](#design-system-tools).
|
||||
|
||||
</div>
|
||||
|
||||
@ -643,31 +589,23 @@ You can also handle icons with Specify, which is mentioned in the [Design System
|
||||
|
||||
### Иллюстрации
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/2VQVTJ8">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
Иллюстрации можно использовать на лендинге, в постах блога, внутри вашего приложения или в email-кампаниях. Они делают ваш дизайн живым и игривым. Хотя создание хороших иллюстраций — это задача для опытного графического дизайнера, вы можете найти бесплатные SVG-изображения и иллюстрации от добрых людей из нашего сообщества:
|
||||
|
||||
Illustrations can be used on your landing page, blog posts, inside your app or email campaign. They make your design live and playful. While drawing good illustration is a task of a skilled graphic designer, you can grab free SVG images & illustrations from very kind people in our community:
|
||||
|
||||
- [Absurd Design](https://absurd.design) — free surrealist illustrations for your projects. 
|
||||
- [Blobmaker](https://www.blobmaker.app/) — create vector blob illustrations in the browser, with varying colour, complexity and contrast. 
|
||||
- [Blush](https://blush.design/) — create, mix and customize illustrations made by artists around the world.  
|
||||
- [Humaaans](https://www.humaaans.com/) — a free library to mix-&-match illustrations of people. 
|
||||
- [Illustration by Pngtree](https://pngtree.com/illustration-design) — over 13142 professionally designed illustrations of different styles.
|
||||
- [IRA Design](https://iradesign.io/) — create amazing illustrations, using hand-drawn sketch components, a cool selection of 5 gradients and ai., svg. or png. formats. 
|
||||
- [JoeSchmoe](https://joeschmoe.io) — an illustrated avatar collection for developers and designers, perfect as placeholders or live sites. 
|
||||
- [LukaszAdam](https://lukaszadam.com/illustrations) — free vector art illustrations and icons. They are available for personal and commercial use. 
|
||||
- [ManyPixels](https://gallery.manypixels.co) — royalty-free illustrations to power up your projects. 
|
||||
- [Mega Doodles Pack](https://github.com/MariaLetta/mega-doodles-pack) — big vector pack with hand-drawn doodles for presentations, social media, blog posts and so on.  
|
||||
- [Open Doodles](https://www.opendoodles.com/) — a set of free illustrations by Pablo Stanley that embraces the idea of Open Design. You can copy, edit, remix, share, or redraw these images for any purpose without restriction under copyright or database law (CC0 license.). 
|
||||
- [Ouch](https://icons8.com/ouch) — vector illustrations to class up your project. Free for both personal and commercial use. 
|
||||
- [Squircley](https://squircley.app/) - all you need to start creating beautiful SVG squircles. 
|
||||
- [unDraw](https://undraw.co) — a collection of beautiful SVG images. 
|
||||
- [Wannapik](https://www.wannapik.com/) — a collection of free illustrations, vector images, photos, and animations for any use. 
|
||||
- [Absurd Design](https://absurd.design) — бесплатные сюрреалистические иллюстрации для ваших проектов. 
|
||||
- [Blobmaker](https://www.blobmaker.app/) — создавайте векторные иллюстрации blob прямо в браузере с возможностью настройки цвета, сложности и контраста. 
|
||||
- [Blush](https://blush.design/) — создавайте, смешивайте и настраивайте иллюстрации, созданные художниками со всего мира.  
|
||||
- [Humaaans](https://www.humaaans.com/) — бесплатная библиотека для создания иллюстраций с людьми путем комбинирования элементов. 
|
||||
- [Illustration by Pngtree](https://pngtree.com/illustration-design) — более 13142 профессионально разработанных иллюстраций различных стилей.
|
||||
- [IRA Design](https://iradesign.io/) — создавайте потрясающие иллюстрации, используя нарисованные от руки компоненты, выбор из 5 градиентов, а также форматы ai., svg. или png. 
|
||||
- [JoeSchmoe](https://joeschmoe.io) — коллекция иллюстрированных аватаров для разработчиков и дизайнеров, идеально подходит в качестве заполнителей или для живых сайтов. 
|
||||
- [LukaszAdam](https://lukaszadam.com/illustrations) — бесплатные векторные иллюстрации и иконки. Доступны для личного и коммерческого использования. 
|
||||
- [ManyPixels](https://gallery.manypixels.co) — бесплатные иллюстрации без роялти для усиления ваших проектов. 
|
||||
- [Mega Doodles Pack](https://github.com/MariaLetta/mega-doodles-pack) — большой векторный набор с нарисованными от руки doodles для презентаций, соцсетей, блогов и других целей.  
|
||||
- [Open Doodles](https://www.opendoodles.com/) — набор бесплатных иллюстраций от Pablo Stanley, поддерживающий концепцию открытого дизайна. Вы можете копировать, редактировать, ремиксовать, делиться или переделывать эти изображения для любых целей без ограничений. Лицензия CC0. 
|
||||
- [Ouch](https://icons8.com/ouch) — векторные иллюстрации для улучшения ваших проектов. Бесплатно для личного и коммерческого использования. 
|
||||
- [Squircley](https://squircley.app/) — всё, что вам нужно, чтобы начать создавать красивые SVG squircle. 
|
||||
- [unDraw](https://undraw.co) — коллекция красивых SVG-изображений. 
|
||||
- [Wannapik](https://www.wannapik.com/) — коллекция бесплатных иллюстраций, векторных изображений, фотографий и анимаций для любых целей. 
|
||||
|
||||
</article>
|
||||
|
||||
@ -675,14 +613,14 @@ Illustrations can be used on your landing page, blog posts, inside your app or e
|
||||
|
||||
### Информационная архитектура
|
||||
|
||||
Information architecture helps designers organize and structure content inside websites, mobile apps, and other software. So users will understand product functionality and will find everything needed. These information architecture tools should allow you to create visual sitemaps and to improve your website content structure:
|
||||
Информационная архитектура помогает дизайнерам организовывать и структурировать контент внутри веб-сайтов, мобильных приложений и другого программного обеспечения. Это помогает пользователям понять функциональность продукта и находить все необходимое. Эти инструменты для информационной архитектуры помогут вам создавать визуальные карты сайта и улучшать структуру контента вашего веб-сайта:
|
||||
|
||||
- [DYNO Mapper](https://dynomapper.com/) — organize website projects using visual sitemaps, content inventory, content audit, content planning, daily keyword tracking, and website accessibility testing.
|
||||
- [Octopus.do](https://octopus.do) — visual sitemap builder. Build your website structure in real-time and rapidly share it to collaborate with your team or clients.
|
||||
- [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — сreate beautiful diagrams and designs with this powerful and easy to use app.
|
||||
- [OptimalSort](https://www.optimalworkshop.com/optimalsort) — card sorting tool that allows you to understand how people categorize content in your UI.
|
||||
- [Treejack](https://www.optimalworkshop.com/treejack) — upload your proposed sitemap to see how a user would move through your site.
|
||||
- [WriteMaps](https://writemaps.com/) — create sitemaps that impress! Plan out the pages and content for your next website project in a visual, fun, and beautiful manner.
|
||||
- [DYNO Mapper](https://dynomapper.com/) — организуйте проекты веб-сайтов с помощью визуальных карт сайта, инвентаризации контента, аудита контента, планирования контента, ежедневного отслеживания ключевых слов и тестирования доступности веб-сайта.
|
||||
- [Octopus.do](https://octopus.do) — визуальный инструмент для создания карт сайта. Создавайте структуру сайта в реальном времени и быстро делитесь ею для совместной работы с вашей командой или клиентами.
|
||||
- [OmniGraffle](https://www.omnigroup.com/omnigraffle/) — создавайте красивые диаграммы и дизайны с помощью этого мощного и простого в использовании приложения. 
|
||||
- [OptimalSort](https://www.optimalworkshop.com/optimalsort) — инструмент для сортировки карточек, который помогает понять, как люди группируют контент в вашем интерфейсе.
|
||||
- [Treejack](https://www.optimalworkshop.com/treejack) — загрузите предложенную карту сайта, чтобы увидеть, как пользователь будет перемещаться по вашему сайту.
|
||||
- [WriteMaps](https://writemaps.com/) — создавайте карты сайта, которые впечатляют! Планируйте страницы и контент для вашего следующего проекта веб-сайта визуально, увлекательно и красиво.
|
||||
|
||||
</article>
|
||||
|
||||
@ -690,7 +628,7 @@ Information architecture helps designers organize and structure content inside w
|
||||
|
||||
### Дизайн логотипов
|
||||
|
||||
A logo is the starting point of your brand identity. It reflects the product mission, functionality and brand message. Ideally, the logo creates a strong connection between your product and the users. Logo design is an art, as well as many other design disciplines. With the right logo design tools, this art can be done right a bit faster.
|
||||
Логотип — это отправная точка вашей бренд-идентичности. Он отражает миссию продукта, его функциональность и послание бренда. Идеальный логотип создает прочную связь между вашим продуктом и пользователями. Дизайн логотипа — это искусство, как и многие другие дисциплины дизайна. С помощью правильных инструментов для дизайна логотипов это искусство можно реализовать немного быстрее.
|
||||
|
||||
- [Design Evo](https://www.designevo.com/) — a large collection of vector icons and shapes help you design custom logos easily. 
|
||||
- [Free Logo Design](https://www.freelogodesign.org/) — create stunning professional logos in seconds. 
|
||||
@ -718,14 +656,6 @@ You can also do your logo design with Adobe Photoshop, GIMP, Inkscape, Krita and
|
||||
|
||||
### Инструменты макетов
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/33KtOpN">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
A mockup is a visual way of representing the product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. These mockup tools that help you create and collaborate on mockups, wireframes, diagrams, and prototypes:
|
||||
|
||||
- [Artboard Studio](https://artboard.studio/) — online graphic design application mainly focused on product mockups.
|
||||
@ -804,14 +734,6 @@ Pixel art is a digital art form where color is applied to individual pixels to c
|
||||
|
||||
</article>
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/33KtOpN">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<article id="prototyping-tools">
|
||||
|
||||
### Инструменты прототипирования
|
||||
@ -852,14 +774,6 @@ You can also do prototyping with Figma, Adobe XD, Sketch and InVision Studio, wh
|
||||
|
||||
### Для создания скриншотов
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/2VQVTJ8">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
Taking screenshots is a typical task in the design & development workflow. So these free and full-featured screenshot apps can help you capture a screen with ease. Some screen captures are macOS only, while others support both OS:
|
||||
|
||||
- [Camtasia](https://www.techsmith.com/video-editor.html) — a screen recorder that comes with a full-blown built-in editor.
|
||||
@ -1006,14 +920,6 @@ If you work with video-content, you will enjoy these high-quality, hand-curated
|
||||
|
||||
</article>
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="https://adobe.ly/33HVSdf">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD%20(1).png" alt="Abobe XD"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<article id="tools-for-learning-design">
|
||||
|
||||
### Изучение дизайна
|
||||
@ -1065,14 +971,6 @@ What are the best UI design tools in 2019? You can pick any of the tools below a
|
||||
|
||||
</article>
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/33KtOpN">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<article id="user-flow-tools">
|
||||
|
||||
### Построение пользовательских потоков
|
||||
@ -1097,14 +995,6 @@ User flow is a series of steps a user takes to achieve a meaningful goal. It's a
|
||||
|
||||
</article>
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="http://bit.ly/35I1q9q">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Maze.png" alt="Maze"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<article id="user-research-tools">
|
||||
|
||||
### Пользовательские исследования
|
||||
@ -1163,14 +1053,6 @@ A wireframe is a visual mockup that outlines the basic structure of the site or
|
||||
- [Whimsical Wireframes](https://whimsical.co/wireframes/) — instant wireframing at your fingertips. Rich library of configurable elements like buttons, inputs, checkboxes.
|
||||
- [1200px Grid System](https://1200px.com/) — helps you build a grid system for much wider website designs than the 960-pixel style.
|
||||
|
||||
<!-- <div class="hidden-in-page">
|
||||
<p align="center">
|
||||
<a href="https://adobe.ly/33HVSdf">
|
||||
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD.png" alt="Abobe XD"/>
|
||||
</a>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
</article>
|
||||
|
||||
<article id="three-d-modeling-software">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user