# Design Resources For Developers

A curated list of FREE design & UI resources for developers including stock photos, templates, frameworks, UI Kits, online tools and much much more.

# 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
UI Design Daily (opens new window) Awesome UI Components of all types
100 Daily UI (opens new window) Free Figma library of products, elements, and screens
Sketch App Sources (opens new window) Sketch UIs, wireframes, icons and much more
Humaaans (opens new window) Cool illustrations of people with the ability to mix and match
Paaatterns (opens new window) Free collection of beautiful patterns for all vector formats
thepatternlibrary (opens new window) Free beautiful background patterns
Drawkit.io (opens new window) Illustrations for designers and startups
Undraw.co (opens new window) Open-source illustrations for any idea you can imagine and create
Illustration.co (opens new window) Open-source illustrations kit
Opendoodles (opens new window) Free sketchy illustrations
Open Peeps (opens new window) Hand drawn illustration library
UI Space (opens new window) Thousands of great UI freebies
Animations.co (opens new window) Beautiful, customizable animated GIF icons
Uplabs (opens new window) High-quality design resources (Free & Premium)
InvisionApp (opens new window) Library of free, high-quality UI kits, icon packs, and mockups
Speckyboy Article (opens new window) The 10 most popular open source frontend web UI kits
Open Doodles (opens new window) A Free Set of Sketchy Illustrations
Avataaars (opens new window) Free sketch library of avatars illustrations by Pablo Stanley
FreebieSketch (opens new window) Free Sketch designs, wireframes, illustrations, and more.
↥ Back To Top

# Fonts

Websites that offer free fonts as well as font based tools

Website                            Description
Google Fonts (opens new window) Library of around 1000 free licensed font families
DaFont (opens new window) Archive of freely downloadable fonts
Use & Modify (opens new window) Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
1001 Free Fonts (opens new window) I think the name speaks for itself 😏
Font Squirrel (opens new window) Font Squirrel scours the internet for high quality, legitimately free fonts
Font Fabric (opens new window) A digital type foundry crafting retail fonts and custom typography for various brands
What Font (opens new window) Tool for finding the fonts of a website without having to search in the devtools
Tiff (opens new window) A type diff tool that visually contrasts the differences between two fonts
Font Flame (opens new window) Tool for pairing fonts to see how they look together
TypeKit Practice (opens new window) Learn about typography practices
Fontjoy (opens new window) Generate font pairing in one click
Golden Ratio (opens new window) Golden Ratio Typography Calculator
FontSpark (opens new window) Discover Better Fonts
FontPair (opens new window) Helps you pair Google Fonts together
Font Space (opens new window) A designer-centered free font website that has quick customizable previews
Abstract Fonts (opens new window) Fonts free for personal and commercial use
Free Typography (opens new window) A list of high quality fonts
Leon Sans (opens new window) A geometric sans-serif typeface made with code
Lexend (opens new window) A variable font empirically shown to significantly improve reading-proficiency
Fonts for Apple Platforms (opens new window) Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps
SFWin (opens new window) San Francisco Fonts for Windows 10 and non-Apple Platform
Font Flipper (opens new window) Preview 800+ Google Fonts on top of your own designs, without having to download the fonts
↥ Back To Top

# Colors

Websites and resources that help with choices related to colors

Website                            Description
Colormind.io (opens new window) Color palette generator
ColorCurves.app (opens new window) Color palette generator that uses curves to generate color palettes
Coolors (opens new window) Color schemes generator
Coolors (opens new window) Trending color palettes
Colors & Fonts (opens new window) A curated library of colors, fonts and resources
Material Palette (opens new window) Free to pick palettes, icons and colors for Material Design
ColorSpace (opens new window) Generate nice color palettes from one color
FlatUIColors (opens new window) Beautiful set of color palettes in various flavours
Adobe Color (opens new window) Create color palettes, extract gradients from images, etc
Colorsinspo (opens new window) All-in-one resource for finding everything about colors
Happyhues (opens new window) 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 (opens new window) Discover current color trends in different industries from the creative communities on Behance and Adobe Stock
Color Hunt (opens new window) A free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Gradient Hunt (opens new window) A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients
Web Gradients (opens new window) A free website to find good css gradients
ColorBox (opens new window) A free website to produce color set
CSS gradient (opens new window) A free website to make custome gradient and some examples of gradient
gradienta (opens new window) A pure css and jpg gradients
UI Gradients (opens new window) UI gradients color generator
Palette Generator (opens new window) Generate new color palette with every spacebar press
Material Palettes (opens new window) 1000+ Material Design palettes
Grabient (opens new window) Gradient Selector
ShadeSwash (opens new window) Quickly generate shades of any color
ColorSpace (opens new window) Generate color palettes from one color
Material Design Palette Generator (opens new window) Generate theme and color palette Material Design-like
↥ Back To Top

# Icons

Resources for Icons including png, svg and more

Website                            Description
Shapedfonts Iconclub (opens new window) 8000+ free icons
Feather Icons (opens new window) Beautiful, customizable open source icons
Tabler Icons (opens new window) 470+ highly customizable open source SVG icons
Simple Icons (opens new window) 1307 Free SVG icons for popular brands
Linear Icons (opens new window) 1000+ Ultra crisp vector icons
Entypo (opens new window) 411 carefully crafted premium pictograms by Daniel Bruce
Icons8 (opens new window) Free icons, photos, vectors and tools
Flat Icon (opens new window) The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats
The Noun Project (opens new window) Over 2 Million curated icons, created by a global community
Iconsout (opens new window) Free Download Icons illustrations stock photos at one place
Nucleo App (opens new window) Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid)
Icon-icons.com (opens new window) Free Icons PNG, ICO, ICNS and Vector file SVG
Bootstrap Icons (opens new window) Free Icons built for Bootstrap but they'll work in any project
Remix Icon (opens new window) Simply Delightful Icon System
Iconmonstr (opens new window) Discover 4496+ free icons in 313 collections
Vivid.js (opens new window) Ready to use Free and Open Source SVG Icons Pack JavaScript Library.
Iconfinder (opens new window) Free and premium vector icons in SVG, PNG, CSH and AI format
Lordicon (opens new window) 50 free animated interactive icons
UseAnimations (opens new window) Free Animated Icons in SVG and Json Format(for lottie)
css.gg (opens new window) 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
SVGPorn (opens new window) 1000+ high-quality SVG logos
Payment System Logos (opens new window) Logos for payment systems available in png and svg
Browser Logos (opens new window) High resolution web browser logos
IconBros (opens new window) 7843+ free icons grouped in 182 collections
LogoHub (opens new window) Generate and download your logo for free in PNG and SVG format
Material Design Icons (opens new window) A icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
Heroicons (opens new window) Free, open source icons from the creators of Tailwind CSS.
Zondicons (opens new window) A set of free premium SVG icons for you to use on your digital products.
↥ Back To Top

# Icon Fonts

Resources for Icon Fonts

Website                            Description
Font Awesome (opens new window) The web's most popular icon set and toolkit
Line Awesome (opens new window) Swap in replacement of Font Awesome with modern line icons
Material Icons (opens new window) Material design icon library
IonIcons (opens new window) Beautifully crafted open source icons from Ionic team
Zurb Foundation Icons (opens new window) Customizable Foundation icons
Fontisto Icons (opens new window) Fontisto the iconic font and css toolkit · 616+ free icons
Boxicons (opens new window) Boxicons is a free collection of carefully crafted open source icons
Icofont (opens new window) 2100+ free icons to spice up your creative designs
Material Palette (opens new window) Free to pick palettes, icons and colors for Material Design]
Material Design Iconic Font (opens new window) Material design icon font
Vscode Codicons (opens new window) The icon font from Visual Studio Code
Devicon (opens new window) Devicon is a set of icons representing programming languages, designing & development tools
PaymentFont (opens new window) A sleek webfont for payment operators and methods. Featuring 116 icons
Weather Icons (opens new window) Weather Icons is the only icon font with 222 weather themed icons
Stroke 7 (opens new window) 202 thin stroke icons inspired by iOS 7
Jam Icons (opens new window) 890+ handcrafted icons to make your web app awesome
↥ Back To Top

# Stock Photos

Websites that offer free stock photos of all kinds for your websites and apps

Website                            Description
Pexels (opens new window) Free stock photos shared by talented creators
Unsplash (opens new window) The internet’s source of freely usable images
Pixabay (opens new window) Over 1.7 million+ high quality stock images and videos
Magdeleine (opens new window) Gallery & free high res photo everyday
Picspree (opens new window) Royalty free images, stock photos, illustrations, and vectors
Burst (opens new window) Free stock photos collections
Life of Pix (opens new window) Free high resolution photography
Stock Snap (opens new window) Hundreds of high quality photos added weekly
Morguefile (opens new window) Over 350,000 free stock photos for commercial use
Kaboom Pics (opens new window) Stock photography and color palettes. Good for product images
New Old Stock (opens new window) Stock vintage photos
Pic Jumbo (opens new window) Good collections of different types of photos
Public Domain Pictures (opens new window) Public domain images of all types
Find A Photo (opens new window) Searches multiple stock photo websites
Stockvault (opens new window) Categorized stock photos
Placeholder (opens new window) A free image placeholder service for the web. You can specify image size and format
Realistic Shots (opens new window) Free high resolution stock photos
Negative Space (opens new window) High-Resolution Free Stock Photos
SkitterPhoto (opens new window) Free high resolution photography
PicoGraphy (opens new window) Gorgeous, High-Resolution, Free Photos
Wunder Stock (opens new window) Stunningly amazing free photos
PxHere (opens new window) Free Images & Free stock photos - PxHere
Piqsels (opens new window) Royalty Free Stock Photos
FoodiesFeed (opens new window) Food photo stock
↥ Back To Top

# Stock Videos

Websites that offer free stock videos of all kinds for your websites and apps

Website                            Description
Coverr.co (opens new window) Beautiful free stock video footage
Videezy (opens new window) Free HD stock footage & 4K videos
Mix Kit (opens new window) Stock video clips & music
Life Of Vids (opens new window) Free video clips and loops
Videvo (opens new window) Free and premium stock videos
↥ Back To Top

# Stock Music & Sound Effects

Websites that offer free stock music and/or sound effects

Website                            Description
Free Stock Music (opens new window) Royalty free stock music for YouTube videos, podcasts, etc
Bensound (opens new window) Download Royalty Free Music for free and use it in your project
Mixkit (opens new window) Free music for your projects
Freesound (opens new window) Free stock music and sounds
Free Music Archive (opens new window) Collaborative database of creative-commons licensed sound for musicians and sound lovers
Musopen (opens new window) An online copyright free classical music library
Unminus (opens new window) Free Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube.
↥ Back To Top

# Vectors & Clip Art

Free vectors, clipart, illustrations, patterns and more

Website                            Description
Vecteezy (opens new window) Find and download free vector art
Freepik (opens new window) Free vectors, stock photos, PSD and icons
Free Vectors (opens new window) Community of vector lovers who share free vector graphics
PNGTree (opens new window) png, backgrounds, templates, text effects
Vector4Free (opens new window) Free vector graphics
Retro Vectors (opens new window) Vintage vectors and graphics
Freeble (opens new window) Vectors, patterns, mockups and more
Lukaszadam (opens new window) Free Vector atrworks
Illlustrations (opens new window) Beautiful 100 Illustrations - png, svg
Clipart (opens new window) Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection!
Growwwkit illustrations (opens new window) A set of 8 simple, black & white, stylish illustrations
↥ Back To Top

# Product & Image Mockups

Create mockups of devices and other products

Website                            Description
Smart Mockups (opens new window) Create stunning product mockups (free & premium)
Shot Snap (opens new window) Create beautiful device mockup images for your app or website design
Screely (opens new window) Instantly turn your screenshot into a mockup
Screen Peak (opens new window) Create a mockup from a URL
Mockup World (opens new window) The biggest source of free photo-realistic Mockups online
Collab Shot (opens new window) Real-time screen grabs and image sharing
Facebook Devices (opens new window) Images and Sketch files of popular devices
Threed.io (opens new window) Generate 3D mockups right in your browser.
↥ Back To Top

# HTML & CSS Templates

Websites that offer free beautiful website templates and themes of all types

Website                            Description
HTML5Up (opens new window) Very modern, unique responsive HTML5/CSS3 themes
Templatemo (opens new window) Minimal, resume, gallery themes and more
Templated.co (opens new window) Tons of minimalistic HTML5/CSS3 themes
FreeHTML5 (opens new window) Free & premium HTML5 and Bootstrap themes
StyleShout (opens new window) Brilliantly crafted free website templates
Start Bootstrap (opens new window) Bootstrap starter themes
Zerotheme (opens new window) HTML5, Bootstrap, Prestashop templates
HTML5xCSS3 (opens new window) Collection of wonderful templates in different categories
Colorlib (opens new window) Almost any category of theme you can think of
Free CSS (opens new window) Huge collection of free templates
Hubspot (opens new window) Templates, infographics, banners and much more
Mobirise (opens new window) Great looking HTML5/CSS3 templates
Bootswatch (opens new window) Free themes for Bootstrap
Onepagelove (opens new window) One page websites, templates and resources
Themes For App (opens new window) Free Bootstrap themes and landing pages
BootstrapTaste (opens new window) Premium & Free Bootstrap Templates
BootstrapMade (opens new window) Elegant, clean and beautiful free templates using Bootstrap.
W3Layouts (opens new window) W3Layouts: 3784+ Free Website Templates for 2020
↥ Back To Top

# CSS Frameworks

CSS/UI frameworks to help build great looking websites and applications

Website                            Description
Tailwind CSS (opens new window) Low level, utility-first framework
Bootstrap (opens new window) Popular UI framework with tons of components that use both CSS and JS
Materialize (opens new window) A modern responsive front-end framework based on Material Design
Material Design Lite (opens new window) Light framework based on Material Design. No JS dependency
Bulma (opens new window) Modern CSS framework with no JS
Skeleton (opens new window) Extremely light framework for basic UI elements
Semantic UI (opens new window) Empowers designers and developers by creating a shared vocabulary for UI
Fomantic UI (opens new window) A community fork of Semantic-UI
Foundation (opens new window) Mobile first framework with clean markup
Pure CSS (opens new window) A set of small, responsive CSS modules
UIKit (opens new window) Lightweight and modular front-end framework
Susy (opens new window) Lightweight, grid-layout engine for Sass
Milligram.io (opens new window) Minimalist CSS framework
Vanilla Framework (opens new window) Simple, extensible CSS framework written in Sass
Spectre CSS (opens new window) Lightweight, modern CSS framework
Picnic CSS (opens new window) Lightweight and beautiful library
Wing (opens new window) A beautiful CSS framework designed for minimalists
Chota (opens new window) A micro (~3kb) CSS framework
Blueprint CSS (opens new window) A lightweight layout library for building great responsive mobile first UIs that work everywhere
W3.CSS (opens new window) A modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library
98.css (opens new window) A design system for building faithful recreations of old UIs
NES CSS (opens new window) NES-style CSS Framework
Shoelace.css (opens new window) Lightweight, forward-thinking CSS library built with future CSS syntax
MVP.css (opens new window) A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done
Blaze.css (opens new window) Open source modular CSS toolkit providing great structure for building websites quickly
Turret CSS (opens new window) Turret CSS is a styles framework for development of responsive websites.
Cutestrap (opens new window) A strong, independent CSS Framework.
↥ Back To Top

# CSS Animations

CSS animations to build awesome animations for websites and applications

Website                            Description
Animate.css (opens new window) Just-add-water CSS animations
Bounce.js (opens new window) Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations
Anime.js (opens new window) Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects
Magic Animations (opens new window) Animations has been one of the most impressive animation libraries available
Zdog (opens new window) Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
CSShake (opens new window) CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page
Hover.css (opens new window) Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website
AniJS (opens new window) AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure
Animista (opens new window) CSS Animations On Demand
Tachyons-animate (opens new window) Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need
Sequence.js (opens new window) Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications
Infinite (opens new window) These animations, like rotations and pulses, that are specifically designed to run and repeat forever
OBNOXIOUS.CSS (opens new window) Animations for the strong of heart, and weak of mind
MOTION UI (opens new window) A Sass library for creating flexible CSS transitions and animations
↥ Back To Top

# Javascript Animation Libraries

javascript animations libraries to build awesome animations for websites and applications

Website                            Description
Greensock (opens new window) A JavaScript library for building high-performance animations that work in every major browser
lax.js (opens new window) Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll!
Rellax.js (opens new window) A buttery smooth, super lightweight, vanilla javascript parallax library
three.js (opens new window) An easy to use, lightweight, 3D library with a default WebGL renderer.
wow.js (opens new window) Reveal Animations When You Scroll.
chocolat.js (opens new window) Free lightbox plugin.
↥ Back To Top

# UI Components & Kits

Not quite "frameworks", but tools for creating user interfaces with components or UI kits

Website                            Description
UILang (opens new window) A minimal, ui-focused programming language for web designers
Medialoot CSS Components (opens new window) Calendars, price grids and other UI components
Froala Design Blocks (opens new window) Over 170 responsive design blocks ready to be used in your web or mobile apps
Material Design For Bootstrap (opens new window) Open source toolkit for building material design with Bootstrap
Photonkit (opens new window) Desktop UI library for Electron
Flat UI (opens new window) Minimal free user interface kit
Shards (opens new window) A free and modern UI toolkit for web makers based on Bootstrap
Creative Tim (opens new window) All types of UI libraries and kits including JS frameworks like React
Brumm Shadow Maker (opens new window) An online tool to make css shadows
AdminLTE (opens new window) Best open source admin dashboard & control panel theme
SpinKit (opens new window) Simple CSS Spinners
Moving Letters (opens new window) Animated Text with JavaScript and anime.js
CSS Layout (opens new window) A collection of popular web layouts and patterns in pure CSS
Codyhouse (opens new window) Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components
Tailwind Starter Kit (opens new window) Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source
Tailwindtoolbox (opens new window) Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project.
tailwindcomponents (opens new window) A free repository for community components using TailwindCSS
sweetalert (opens new window) SweetAlert makes popup messages easy and pretty.
sweetalert2 (opens new window) A beautiful,responsive,customizable,accessible replacement for javascript's popup boxes
↥ Back To Top

# React UI

UI and component libraries for the React JavaScript framework

Website                            Description
Material UI (opens new window) React components for faster and easier web development, based on Material Design
Chakra UI (opens new window) Build accessible React apps & websites with speed. Openchakra (opens new window)
React Bootstrap (opens new window) Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript
ReactStrap (opens new window) Another Bootstrap UI library for React
React Admin (opens new window) A frontend Framework for building admin applications. Supports API's out of the box
BlueprintJS (opens new window) React-based UI toolkit for the web
React Semantic UI (opens new window) UI components based off of the Semantic UI framework
Shards React (opens new window) React UI kit featuring a modern design system with dozens of custom components
React Virtualized (opens new window) UI set for data. Includes tables, lists, sorting, etc.
React Toolbox (opens new window) Material design UI library for React
Elastic UI (opens new window) Distributes UI React components and static assets for use in building web layouts
React Desktop (opens new window) Desktop styled components in React. Includes MacOS and Windows based components
Onsen React (opens new window) Distributes Components for hybrid mobile apps with React and Onsen UI
Evergreen (opens new window) Design system for React
Rebass (opens new window) React primitive UI components built with styled system
Grommet (opens new window) mobile first UI component library
Rimble (opens new window) React design kit, library and guides
Landing Page Template (opens new window) Open source landing page template for react
KendoReact (opens new window) UI for React Developers
PRIMEREACT (opens new window) The ultimate collection of design-agnostic, flexible and accessible React UI Components
Elemental UI (opens new window) A UI Toolkit for React.js Websites and Apps
Ant Design (opens new window) Open source design React ui library.
KendoReact (opens new window) UI for React Developers.
PRIMEREACT (opens new window) The ultimate collection of design-agnostic, flexible and accessible React UI Components
Primer Components (opens new window) Primer Components are React components which implement GitHub's Primer Design System
Orbit (opens new window) Design system and React UI components for travel projects.
Base Web (opens new window) Base Web provides a robust suite of components out of the box
Backpack UI (opens new window) Backpack is the Lonely Planet toolset that we use to build front end apps.
Reaviz (opens new window) Data visualization library for React based on D3
↥ Back To Top

# Vue UI

UI and component libraries for the Vue JavaScript framework

Website                            Description
Vuetify (opens new window) Material design component framework
Bootstrap Vue (opens new window) Use Bootstrap components with Vue
Buefy (opens new window) Lightweight UI components based on Bulma
Quasar (opens new window) Build high-performance VueJS user interfaces in record time
Element (opens new window) Desktop UI library for Vue
Fish UI (opens new window) Vue UI toolkit for the web
Keen UI (opens new window) VueUI library with a simple API, inspired by Google's Material Design
Onsen Vue (opens new window) Distributes Components for hybrid mobile apps with Vue and Onsen UI
Vuejsexamples (opens new window) A nice collection of useful vuejs UI components
Inkline (opens new window) Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications
Vuesax (opens new window) Unique and reusable UI components
Antdv (opens new window) UI library for Vue based on Ant Design
↥ Back To Top

# Angular UI

UI and component libraries for the Angular JavaScript framework

Website                            Description
Material Angular (opens new window) UI library for Angular based on Material design
NG Bootstrap (opens new window) UI library for Angular based on the Bootstrap framework
PrimeNG (opens new window) Powerful UI component library for Angular
Onsen Angular (opens new window) Hybrid mobile and PWA UI library for Angular and Onsen UI
NG Lightning (opens new window) Native Angular components & directives for Lightning Design System
NG Semantic (opens new window) UI library for Angular based on Semantic UI
Nebular (opens new window) Customizable UI Kit, Auth & Security for Angular
Alyle UI (opens new window) Minimal components set for Angular
NGX Bootstrap (opens new window) Another UI library for Angular based on the Bootstrap framework
NG Zorro (opens new window) UI library for Angular based on Ant Design
↥ Back To Top

# Svelte UI

UI and component libraries for the Svelte Javascript compiler

Website                            Description
Svelte Material UI (opens new window) UI library for Svelte based on Material Design
SvelteStrap (opens new window) UI library for Svelte based on the Bootstrap framework
Svelte Flat UI (opens new window) UI library for Svelte based on Flat Design
↥ Back To Top

# Design Systems & Style Guides

Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites

Website                            Description
Material Design (opens new window) Google's Material Design
Ant Design (opens new window) Design system for enterprise-level products
Apple Design Resources (opens new window) Guides and templates for using Apple design and UI
Alta UI (opens new window) Oracle's design system and toolkit
Pulse (opens new window) Design system, guides and React component library
Bolt (opens new window) Robust Twig and web component powered UI components
Clarity Design System (opens new window) UX guidelines, HTML/CSS framework, and Angular components
AtlasKit (opens new window) Atlassian's official UI library, built according to the Atlassian Design Guidelines
Audi Design Resources (opens new window) Audi UI design system and toolkit
Carbon Design Systems (opens new window) Carbon is IBM’s open-source design system for products and experiences
Yelp Style Guide (opens new window) Yelp style guide, components and toolkit
Comet (opens new window) Scalable design system of visual language, components, and design assets
ETrade Design System (opens new window) Guides and toolkits that blend finance with simplicity and ease of use
Fundamental Library (opens new window) Open source and community driven project for consistent user interfaces
Infor Design (opens new window) Guidelines and resources to create meaningful experiences for Infor’s products
Lexicon (opens new window) An experience language for crafting beautiful UI
Mailchimp UI/UX (opens new window) Style guide and components from Mailchimp
Marvel Style Guide (opens new window) Set of design principles and components
Microsoft Fluent UI (opens new window) Collection of UX frameworks from Microsoft
Pluralsight Design System (opens new window) Design guide with components for designing with Pluralsight
Polaris (opens new window) Design system that creates great experiences for all of Shopify’s merchants
Mozilla Protocol (opens new window) Protocol is a design system for Mozilla and Firefox websites
SendGrid Style Guide (opens new window) UI library for developing consistent UI/UX at SendGrid
VTEX Styleguide (opens new window) Reusable patterns, components and assets related to product design in VTEX
Rizzo (opens new window) Style guide with UI components, JS components, widgets, etc
Atomize (opens new window) UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
StyleGuides.io (opens new window) A directory of 500+ styleguides
Done Design System (opens new window) Open source design system, guides & components
↥ Back To Top

# Online Design Tools

All kinds of online tools for design, from photo editors to wireframing, and more

Website                            Description
Figma (opens new window) Online graphic design tool (Free & paid options)
Vectr (opens new window) Free vector graphics software
Canva (opens new window) Create beautiful designs (Free & Paid)
Wireframe.cc (opens new window) Wireframing tool (free & paid)
Fotor (opens new window) Photo editor and design maker
Pixlr (opens new window) Online photo editor
Animoto Video Maker (opens new window) Make videos online
RemoveBG (opens new window) Remove image backgrounds
Photo Creator (opens new window) Create your own photos instead of searching for stock
Visme (opens new window) Create presentations, infographics and more
Infogram (opens new window) Create infograms
ChartGo (opens new window) Create charts and graphs online
Cartoon Photo (opens new window) Turn photos into cartoons
Logo Maker (opens new window) Create custom logos
Whimsical (opens new window) Wireframes, diagrams and more (4 free)
Whiteboard (opens new window) Online drawing tool
Octopus (opens new window) Sitemap builder
Favicon Generator (opens new window) Generate favicon ico files for your website
RealFaviconGenerator (opens new window) Generate icons for all platforms (Windows, iOS, Android)
FontIcon (opens new window) Generate favicons and images from Font Awesome icons
CTA Button Maker (opens new window) Create call to action buttons
Blobmaker (opens new window) Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes
Personas (opens new window) A playful avatar generator for the modern age
SoftUI (opens new window) A Soft UI (neumorphism) CSS generator
Photopea (opens new window) A Online Photoshop editor
Excalidraw (opens new window) Virtual whiteboard for sketching hand-drawn like diagrams
Diagrams (opens new window) Diagram software and Flowchart maker
MapInSeconds (opens new window) Simple way to visualize your data with a map
Grid Malven (opens new window) A css grid cheatsheet to reference when creating a css grid
Smart Upscaler (opens new window) Upscale images by 2-4x resolution
GetAvataaars (opens new window) Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library
Webflow (opens new window) Break the code barrier, Build better business websites, faster. Without coding.
Trace (opens new window) Instantly remove the background from your photos
Neumorphism.io (opens new window) Generate Soft-UI CSS shadow code
DB Designer (opens new window) Design your database for free online
Ui Bakery (opens new window) Create full-fledged web apps visually
Faux (opens new window) Turn real code into faux code
↥ Back To Top

# Downloadable Design Software

Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop

Website                            Description
Gimp (opens new window) Free & open source image editor similar to Photoshop
Gravit Designer (opens new window) Free full-featured vector graphic design app that works on ALL platforms
Blender (opens new window) Open source, free animation, 3D modeling, etc.
Raw Therapee (opens new window) Cross-platform raw image processing program
Be Funky (opens new window) Online design program
Krita (opens new window) Sketching and painting program designed for digital artists
Pencil Project (opens new window) GUI prototyping software
Inkscape (opens new window) Powerful free design tool
Adobe XD (opens new window) Free design tool from Adobe
Shapes.so (opens new window) Icons that can be used as code in your projects
Lunacy (opens new window) Sketch for Windows
InVision Studio (opens new window) Free screen designing tool from InVision
Darktable (opens new window) Free & Open source photography workflow application and raw developer
Inpixio photo Editor (opens new window) Free Photo Editor: For windows only
↥ Back To Top

# Design Inspiration

Here are some websites to get inspiration for design and UI

Website                            Description
Behance (opens new window) Design projects featured by different creators
Dribbble (opens new window) Design projects featured by different creators
Httpster (opens new window) Showcases websites made by people from all over the world
Microcopy Inspirations (opens new window) Curated collection of UX writing examples, microcopy examples and copywriting examples
Inspofinds (opens new window) Latest design work from designers and the design community
Design Notes (opens new window) Free online resource library for product designers
Land Book (opens new window) Displays a large collection of websites to help find inspiration
Frontend Mentor (opens new window) Real-world UI Challenges using HTML, CSS and Javascript
Awwwards (opens new window) A website that rate and collects the best websites in the world in UI
Codrops (opens new window) A website that collects the best UI ideas and patterns and make tutorials of it
SaaS Landing Page (opens new window) Discover the best landing page examples created by top-class SaaS companies
Pages.xyz (opens new window) Curate and discover the best designed web pages
UI Movement (opens new window) UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs
Freefrontend (opens new window) Free front end design from css html and javascript. latest work some design part
Webframe (opens new window) Discover and be inspired by beautiful webapp designs
Collect UI (opens new window) Daily inspiration collected from daily ui archive and beyond. Hand picked, and updating daily.
↥ Back To Top

# Image Compression

Websites that allow you to compress large images

Website                            Description
TinyPNG (opens new window) Smart PNG and JPEG compression
Optimizilla (opens new window) Online JPEG and PNG optimizer / compressor with settings and archive download
Compressor.io (opens new window) JPEG, PNG, GIF, SVG Compression
Squoosh.app (opens new window) Image compression from Google Chrome Labs
BulkResizePhotos (opens new window) Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline)
iLoveIMG (opens new window) The fastest free web app for easy image modification
SvgOMG (opens new window) Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.
CompressJPEG (opens new window) Compress JPEG images with size even greater than 5MB
CompressNow (opens new window) JPEG, GIF, PNG Compression
Promo Image Resizer (opens new window) Free Image and Photo Resizer
↥ Back To Top

# Others

Uncategorized Stuff

Website                            Description
everysize.kibalabs.com (opens new window) Check your awesome responsive webpage looks great in every size
Devhints.io (opens new window) This is a modest collection of cheatsheets on Internet
The Web Toolbox (opens new window) A collection of handy, free-to-use tools for web developers, programmers and designers.
css-tricks (opens new window) Free CSS tricks and some unique ideas for beginners and advanced
Material Design Resizer (opens new window) An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet.
↥ Back To Top
最后编辑时间: 5/11/2020, 9:14:29 AM