design-resources-for-developers README

The project's README from github.com/bradtraversy/design-resources-for-developers. As one markdown file: README.md.

Repository Banner

Special thanks to:

Warp sponsorship

Warp, the intelligent terminal for developers Available for MacOS, Linux, & Windows

Please read contributing guidelines before submitting new resources.

Table of Contents

UI Graphics

Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI

Website                            Description
SVG sine waves Export perfect sine waves as SVG for your front-end projects
UI Design Daily Awesome UI Components of all types
100 Daily UI Free Figma library of products, elements, and screens
Sketch App Sources Sketch UIs, wireframes, icons and much more
Humaaans Cool illustrations of people with the ability to mix and match
Paaatterns Free collection of beautiful patterns for all vector formats
Drawkit.io Illustrations for designers and startups
Absurd.design Free surrealist illustrations for designers and developers
Undraw.co Open-source illustrations for any idea you can imagine and create
Manypixels.co Monochromatic, Isometric high-quality illustrations
Open Peeps Hand drawn illustration library
InvisionApp Library of free, high-quality UI kits, icon packs, and mockups
Open Doodles A Free Set of Sketchy Illustrations
Avataaars Free sketch library of avatars illustrations by Pablo Stanley
Blush Free customizable illustrations with Figma Plugin
Hero Patterns A collection of repeatable SVG background patterns
BEAUBUS Patterns A set of 150+ free SVG patterns (backgrounds)
IRA Design An open-source gradient illustrations collection by creative tim.
Transparent Textures A collection of transparent textures background patterns.
icons8.com/illustrations Vector illustrations to class up your project
Patternico Seamless Pattern Maker
Pixeltrue Illustrations Free Animated Illustrations
Abstract User Avatar API API to create simple yet flexible user avatars from user names or emails
sketchvalley Download free PNG, SVG or AI file .
PatternPad Free and unlimited unique pattern designs.
Dimensions Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces
Freebiesbug Hand-picked resources for web designers and developers, constantly updated.
Flexiple One new high-quality, open-source illustration each day.
Cool Text Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work
illustration kit Premium open source illustrations added daily
Doodad Pattern Generator Create unique, seamless, royalty-free patterns.
Pattern Monster A simple online pattern generator to create repeatable SVG patterns
Exemplar Free Avatar Library for Figma and Sketch
UIBundle Thousands of Free Design Resources like UI Kits, Mockups, Illustrations, Icons, Fonts, 3D assets, Templates and more.
openby.design Custom crafted free UI design resources, for personal and commercial projects. No attribution is required.
Design Stripe Create beautiful illustrations, no design skills needed.
HOLA SVG! An SVG playground to share SVG stuff.
symu.co Free templates, UI kits, icon, PSD
Mesh Gradient Generate & download beautiful mesh gradients.
CSS Shadow Gradients Generate CSS Gradients For Shadows.
Creatica Generate unique beautiful and unique Backgrounds and patterns.
Boring Avatars SVG random, cutely avatars collections
Html to Design Convert any website into fully editable Figma designs
fffuel collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds
Mesher A Free tool to create beautiful mesh gradients only with CSS code. Use your own colors or randomly generated ones to build the trendiest CSS gradients
Square Face Avatar Generator Generate square-face avatars & icons online
↥ Back To Top

Fonts

Websites that offer free fonts as well as font-based tools

Website                            Description
Google Fonts Library of around 1000 free licensed font families
DaFont Archive of freely downloadable fonts
Use & Modify Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
1001 Free Fonts I think the name speaks for itself :smirk:
Font Squirrel Font Squirrel scours the internet for high quality, legitimately free fonts
Font Fabric A digital type foundry crafting retail fonts and custom typography for various brands
Just Free Fonts A hand-curated collection of freeware, open-source, and public domain fonts intended for commercial use
Tiff A type diff tool that visually contrasts the differences between two fonts
TypeKit Practice Learn about typography practices
Fontjoy Generate font pairing in one click
Golden Ratio Golden Ratio Typography Calculator
FontGet Has a variety of fonts available to download and sorted neatly with tags
FontPair Helps you pair Google Fonts together
Font Space A designer-centered free font website that has quick customizable previews
Abstract Fonts Fonts free for personal and commercial use
Free Typography A list of high quality fonts
Leon Sans A geometric sans-serif typeface made with code
Lexend A variable font empirically shown to significantly improve reading-proficiency
Fonts for Apple Platforms Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps
SFWin San Francisco Fonts for Windows 10 and non-Apple Platform
Font Flipper Preview 800+ Google Fonts on top of your own designs, without having to download the fonts
Fonts Arena Free curated fonts
Befonts High quality fonts for free
Arabic fonts Arabic fonts for free
FontDrop Simple and easy way to view the contents of font files
Open Foundry FREE platform for curated open-source typefaces
Glyphter Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded
Google Webfonts Helper A Hassle-Free Way to Self-Host Google Fonts
Rough Font Awesome When RoughJS meets Font Awesome
FFonts Stylish fonts for free
Malayalam Fonts Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC)
Dev Fonts Find and use the coding fonts for free
Font M Free font you can download for material coding and design
W Fonts Download Free fonts
Modern fluid typography editor Fluid typography is a modern way of approaching responsive typography.
UrbanFonts A collection of over 8000 free fonts and dingbats
Typespiration Inspirational font combinations and color palettes
Fontsource Self-host Open Source fonts in neatly bundled NPM packages.
FontBolt Discover and generate your favorite fonts from pop culture.
FontsWiki Free typography resource with font downloads, pairing guides, and font-in-use references for logos, films, games, and design projects.
Fontshare Fontshare is a free fonts service from the Indian Type Foundry (ITF), making quality fonts accessible to all.
Bunny Fonts Privacy-focused Google Fonts alternative, GDPR compliant with faster CDN
↥ Back To Top

Colors

Websites and resources that help with choices related to colors

Website                            Description
PaletteForge Generate beautiful color palettes from different categories.
Colorlab Create color palette, gradients, color scales, check contrast all in one place.
Color Brewer 2 The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest.
Huetone A tool to create accessible color systems.
Colormind.io Color palette generator
ColorCurves.app Color palette generator that uses curves to generate color palettes
ColorGradient A free tool to create simple and complex CSS Gradients visually
Coolors Create the perfect palette or get inspired by thousands of beautiful color schemes
UI Colors Tailwind CSS color palette generator
HTML Color Codes Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names
Colors & Fonts A curated library of colors, fonts and resources
Palette List Pick 2 colors you like and the tool generates thousands of palettes for you.
Google Material Color Tool Official Google Material Color Palette Tool
Material Palette Free to pick palettes, icons and colors for Material Design
ColorSpace Generate nice color palettes from one color
FlatUIColors Beautiful set of color palettes in various flavors
Adobe Color Create color palettes, extract gradients from images, etc.
Colorsinspo All-in-one resource for finding everything about colors
ColorsWall Place to store your color palettes and generate palette in one click
Happyhues Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child
Adobe Trends Discover current color trends in different industries from the creative communities on Behance and Adobe Stock
Color Hunt A free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Gradient Hunt A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients
Web Gradients A free website to find good CSS gradients
ColorBox A free website to produce color set
CSS gradient A free website to make custom gradient and some examples of gradient
gradienta A pure css and jpg gradients
UI Gradients UI gradients color generator
Palette Generator Generate new color palette with every spacebar press
Material Palettes 1000+ Material Design palettes
Grabient Gradient Selector
ShadeSwash Quickly generate shades of any color
BrandColors The biggest collection of official brand color codes
BRAND PALETTES Logo Color Codes and Palettes
Material Design Palette Generator Generate theme and color palette Material Design-like
Colorate Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work.
0to255 A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more.
Color Blender A tool that shows the midpoint colors between two colors
Gradient Buttons Ready to use copy/paste gradient buttons
Khroma Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
whocanuse A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
Colorable Color combination contrast tester
Color Hex Picker Tool to get hex code along with name of the color.
Saruwakakun The stunning color scheme for website & App Designs with previews
Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well.
Colorzilla A powerful online Photoshop-like CSS gradient editor
CSS Gradient Editor You may only need this tool for creating CSS gradient backgrounds and patterns.
Image Color Picker Image color picker and palette generator
CombineCOLORS Color mixing tool
Color Lovers It will show the color schemes which are popular in the outside world.

design-resources-for-developers (bradtraversy/design-resources-for-developers)

Searching Database…

67.2K ·GitHub
Design-resources-for-developers
Что это такое?Подборка дизайнерских ресурсов и ресурсов для интерфейсов для разработчиков: стоковые фото, шаблоны, CSS-фреймворки, UI-библиотеки, иконки, шрифты, инструменты для работы с цветом и многое другое.
Это инструмент или просто список ссылок?Это просто markdown-список ссылок на внешние сайты и инструменты, разбитый по категориям, без кода для установки или запуска.
Как устроен список, чтобы я мог найти нужное?Ресурсы сгруппированы под заголовками тем: UI-графика, Шрифты, Цвета, Иконки, CSS-фреймворки, UI-компоненты и наборы, Дизайн-системы, Онлайн-инструменты для дизайна и другие. Под каждым заголовком есть таблица в формате markdown с названием сайта и коротким описанием.
Записи проверяются или просто добавляются без разбора?От участников просят соблюдать правила перед добавлением новых ресурсов, но список очень большой и охватывает много категорий, поэтому качество и актуальность различаются от раздела к разделу, а не отбираются строго для каждой ссылки.
Какие ресурсы есть помимо UI-наборов и шаблонов?Помимо UI-графики и шаблонов, там есть шрифты, инструменты для работы с цветом, иконки, логотипы, фавиконы, стоковые фото, видео и музыка, библиотеки для анимаций и графиков, библиотеки UI-компонентов под конкретные фреймворки (React, Vue, Angular, Svelte, React Native), сайты с идеями для дизайна, инструменты для сжатия изображений, расширения для браузеров и ИИ-инструменты для графического дизайна.
С чего начинающему стоит начать?Начните с оглавления и перейдите к нужной категории, например «CSS-фреймворки» или «UI-компоненты и наборы», если вы создаёте веб-интерфейс. В каждой таблице есть описание в одну строку, чтобы быстро просмотреть варианты.
Его до сих пор обновляют?В репозиторий принимают вклады от сообщества через pull request по правилам участия, что говорит о том, что его активно поддерживают и расширяют, хотя точный график обновлений не указан.
What are similar projects?tabler-icons, awesome-design, material-design-icons, awesome-redux, MaterialDesign, Project-Ideas-And-Resources, galaxy, free-programming-books-zh_CN
Which topics is it in?fonts, font, ui-design, icons, angular, react-native, design, vue, ui-components, css, ui, awesome-list
Creator
bradtraversy
Size
5.2 MB
Stars
67.2K
Updated
CommitOct 18
Age
6y
Commits · 90 Days