https://github.com/sidikry/Design-Resource-for-Developer-bradtraversy
https://github.com/bradtraversy/design-resources-for-developers
https://github.com/sidikry/Design-Resource-for-Developer-bradtraversy
Last synced: 6 months ago
JSON representation
https://github.com/bradtraversy/design-resources-for-developers
- Host: GitHub
- URL: https://github.com/sidikry/Design-Resource-for-Developer-bradtraversy
- Owner: sidikry
- License: mit
- Created: 2020-05-09T00:55:51.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-16T07:53:24.000Z (almost 2 years ago)
- Last Synced: 2024-08-13T07:04:16.245Z (10 months ago)
- Size: 245 KB
- Stars: 204
- Watchers: 26
- Forks: 54
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - sidikry/Design-Resource-for-Developer-bradtraversy - https://github.com/bradtraversy/design-resources-for-developers (Others)
README
# 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](#ui-graphics)
- [Fonts](#fonts)
- [Colors](#colors)
- [Icons](#icons)
- [Stock Photos](#stock-photos)
- [Stock Videos](#stock-videos)
- [Stock Music & Sound Effects](#stock-music--sound-effects)
- [Vectors & Clipart](#vectors--clip-art)
- [Product & Image Mockups](#product--image-mockups)
- [HTML & CSS Templates](#html--css-templates)
- [CSS Frameworks](#css-frameworks)
- [CSS Animations](#css-Animations)
- [Javascript Animations](#javascript-animation-libraries)
- [UI Components & Kits](#ui-components--kits)
- [React UI Libraries](#react-ui)
- [Vue UI Libraries](#vue-ui)
- [Angular UI Libraries](#angular-ui)
- [Svelte UI Libraries](#svelte-ui)
- [Design Systems & Style Guides](#design-systems--style-guides)
- [Online Design Tools](#online-design-tools)
- [Downloadable Design Software](#downloadable-design-software)
- [Design Inspiration](#Design-inspiration)
- [Image Compression](#Image-compression)
- [Others](#others)
## 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](https://uidesigndaily.com/) | Awesome UI Components of all types |
| [100 Daily UI](https://100dailyui.webflow.io/) | Free Figma library of products, elements, and screens |
| [Sketch App Sources](https://www.sketchappsources.com/) | Sketch UIs, wireframes, icons and much more |
| [Humaaans](https://www.humaaans.com/) | Cool illustrations of people with the ability to mix and match |
| [Paaatterns](https://products.ls.graphics/paaatterns/) | Free collection of beautiful patterns for all vector formats |
| [thepatternlibrary](http://thepatternlibrary.com/) | Free beautiful background patterns |
| [Drawkit.io](https://www.drawkit.io/) | Illustrations for designers and startups |
| [Undraw.co](https://undraw.co/) | Open-source illustrations for any idea you can imagine and create |
| [Illustration.co](https://illlustrations.co/) | Open-source illustrations kit |
| [Opendoodles](https://www.opendoodles.com/) | Free sketchy illustrations |
| [Open Peeps](https://www.openpeeps.com/) | Hand drawn illustration library |
| [UI Space](https://uispace.net/) | Thousands of great UI freebies |
| [Animations.co](http://animaticons.co/) | Beautiful, customizable animated GIF icons |
| [Uplabs](https://www.uplabs.com/) | High-quality design resources (Free & Premium) |
| [InvisionApp](https://www.invisionapp.com/inside-design/design-resources/) | Library of free, high-quality UI kits, icon packs, and mockups |
| [Speckyboy Article](https://speckyboy.com/open-source-front-end-ui-kits/) | The 10 most popular open source frontend web UI kits |
| [Open Doodles](https://www.opendoodles.com/) | A Free Set of Sketchy Illustrations |
| [Avataaars](https://avataaars.com/) | Free sketch library of avatars illustrations by Pablo Stanley |
## Fonts
>Websites that offer free fonts as well as font based tools
| Website | Description |
| ----------------------- | ------------------ |
| [Google Fonts](https://fonts.google.com/)| Library of around 1000 free licensed font families |
| [DaFont](https://www.dafont.com/)| Archive of freely downloadable fonts |
| [Use & Modify](https://usemodify.com/)| Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces |
| [1001 Free Fonts](https://www.1001freefonts.com/)| I think the name speaks for itself :smirk: |
| [Font Squirrel](https://www.fontsquirrel.com/)| Font Squirrel scours the internet for high quality, legitimately free fonts |
| [Font Fabric](https://www.fontfabric.com/free-fonts/)| A digital type foundry crafting retail fonts and custom typography for various brands |
| [What Font](http://www.chengyinliu.com/whatfont.html)| Tool for finding the fonts of a website without having to search in the devtools |
| [Tiff](https://tiff.herokuapp.com/)| A type diff tool that visually contrasts the differences between two fonts |
| [Font Flame](http://app.fontflame.com/)| Tool for pairing fonts to see how they look together |
| [TypeKit Practice](https://practice.typekit.com/)| Learn about typography practices |
| [Fontjoy](https://fontjoy.com/)| Generate font pairing in one click |
| [Golden Ratio](https://grtcalculator.com/)| Golden Ratio Typography Calculator |
| [FontSpark](https://fontspark.app/) | Discover Better Fonts |
| [FontPair](https://fontpair.co/) | Helps you pair Google Fonts together
| [Font Space](https://www.fontspace.com/)| A designer-centered free font website that has quick customizable previews |
| [Abstract Fonts](http://www.abstractfonts.com/)| Fonts free for personal and commercial use |
| [Free Typography](https://freetypography.com/)| A list of high quality fonts |
| [Leon Sans](https://github.com/cmiscm/leonsans/)| A geometric sans-serif typeface made with code |
| [Lexend](https://www.lexend.com/)| A variable font empirically shown to significantly improve reading-proficiency |
| [Fonts for Apple Platforms](https://developer.apple.com/fonts/)| Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps |
| [SFWin](https://github.com/blaisck/sfwin/)| San Francisco Fonts for Windows 10 and non-Apple Platform |
| [Font Flipper](https://fontflipper.com/)| Preview 800+ Google Fonts on top of your own designs, without having to download the fonts |
## Colors
>Websites and resources that help with choices related to colors
| Website | Description |
| ----------------------- | ------------------ |
| [Colormind.io](http://colormind.io)| Color palette generator |
| [ColorCurves.app](https://colorcurves.app)| Color palette generator that uses curves to generate color palettes |
| [Coolors](https://coolors.co/generate)| Color schemes generator |
| [Coolors](https://coolors.co/palettes/trending)| Trending color palettes |
| [Colors & Fonts](https://www.colorsandfonts.com/)| A curated library of colors, fonts and resources |
| [Material Palette](https://www.materialpalette.com/)| Free to pick palettes, icons and colors for Material Design|
| [ColorSpace](https://mycolor.space/)| Generate nice color palettes from one color |
| [FlatUIColors](https://flatuicolors.com)| Beautiful set of color palettes in various flavours |
| [Adobe Color](https://color.adobe.com/create)| Create color palettes, extract gradients from images, etc |
| [Colorsinspo](https://colorsinspo.com/) | All-in-one resource for finding everything about colors |
| [Happyhues](https://www.happyhues.co/) | 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](https://color.adobe.com/trends)| Discover current color trends in different industries from the creative communities on Behance and Adobe Stock|
| [Color Hunt](https://colorhunt.co/)| A free and open platform for color inspiration with thousands of trendy hand-picked color palettes |
| [Gradient Hunt](https://gradienthunt.com/)| A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients |
| [Web Gradients](https://webgradients.com/)| A free website to find good css gradients |
| [ColorBox](https://www.colorbox.io)| A free website to produce color set |
## Icons
>Resources for Icons including font based, png, svg and more
| Website | Description |
| ----------------------- | ------------------ |
| [Font Awesome](https://fontawesome.com/)| The web's most popular icon set and toolkit |
| [Material Icons](https://material.io/resources/icons/)| Material design icon library |
| [Shapedfonts Iconclub](https://shapedfonts.com/iconclub/)| 8000+ free icons |
| [Feather Icons](https://feathericons.com/)| Beautiful, customizable open source icons |
| [Tabler Icons](https://tablericons.com/)| 470+ highly customizable open source SVG icons |
| [Simple Icons](https://simpleicons.org/)| 1307 Free SVG icons for popular brands |
| [IonIcons](http://ionicons.com/)| Beautifully crafted open source icons from Ionic team |
| [Zurb Foundation Icons](https://zurb.com/playground/foundation-icon-fonts-3)| Customizable Foundation icons |
| [Linear Icons](https://linearicons.com/)| 1000+ Ultra crisp vector icons |
| [Entypo](http://www.entypo.com/)| 411 carefully crafted premium pictograms by Daniel Bruce |
| [Icons8](https://icons8.com/)| Free icons, photos, vectors and tools |
| [Flat Icon](https://www.flaticon.com/)| The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats |
| [Fontisto Icons](https://fontisto.com/)| Fontisto the iconic font and css toolkit · 616+ free icons |
| [The Noun Project](https://thenounproject.com/)| Over 2 Million curated icons, created by a global community |
| [Iconsout](https://iconscout.com/)| Free Download Icons illustrations stock photos at one place |
| [Boxicons](https://boxicons.com/)| Boxicons is a free collection of carefully crafted open source icons |
| [Nucleo App](https://nucleoapp.com/)| 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](https://icon-icons.com/)| Free Icons PNG, ICO, ICNS and Vector file SVG |
| [Bootstrap Icons](https://icons.getbootstrap.com/)| Free Icons built for Bootstrap but they'll work in any project |
| [Remix Icon](https://remixicon.com/)| Simply Delightful Icon System |
| [Iconmonstr](https://iconmonstr.com/) | Discover 4496+ free icons in 313 collections |
| [Vivid.js](https://webkul.github.io/vivid/)| Ready to use Free and Open Source SVG Icons Pack JavaScript Library. |
| [Iconfinder](https://www.iconfinder.com/)| Free and premium vector icons in SVG, PNG, CSH and AI format |
| [Vivid.js](https://webkul.github.io/vivid/)| Ready to use Free and Open Source SVG Icons Pack JavaScript Library |
| [Material Palette](https://www.materialpalette.com/icons)| Free to pick palettes, icons and colors for Material Design]|
| [Lordicon](https://lordicon.com/free-icons) | 50 free animated interactive icons |
| [UseAnimations](https://useanimations.com/) | Free Animated Icons in SVG and Json Format(for lottie) |
| [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/index.html) | Material design icon font |
| [Vscode Codicons](https://microsoft.github.io/vscode-codicons/dist/codicon.html) | The icon font from Visual Studio Code |
| [css.gg](https://css.gg/) | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API |
| [SVGPorn](https://svgporn.com) | 1000+ high-quality SVG logos |
| [Payment System Logos](https://github.com/mpay24/payment-logos/) | Logos for payment systems available in png and svg |
| [Browser Logos](https://github.com/alrra/browser-logos/) | High resolution web browser logos |
| [IconBros](https://www.iconbros.com) | 7843+ free icons grouped in 182 collections |
| [LogoHub](https://logohub.io/) | Generate and download your logo for free in PNG and SVG format |
| [Devicon](https://konpa.github.io/devicon/) | Devicon is a set of icons representing programming languages, designing & development tools |
## Stock Photos
>Websites that offer free stock photos of all kinds for your websites and apps
| Website | Description |
| ----------------------- | ------------------ |
| [Pexels](https://www.pexels.com/)| Free stock photos shared by talented creators |
| [Unsplash](https://unsplash.com/)| The internet’s source of freely usable images
| [Pixabay](https://pixabay.com/)| Over 1.7 million+ high quality stock images and videos |
| [Magdeleine](https://magdeleine.co/)| Gallery & free high res photo everyday |
| [Picspree](https://picspree.com)| Royalty free images, stock photos, illustrations, and vectors |
| [Burst](https://burst.shopify.com/)| Free stock photos collections |
| [Life of Pix](https://www.lifeofpix.com/)| Free high resolution photography |
| [Stock Snap](https://stocksnap.io/)| Hundreds of high quality photos added weekly |
| [Morguefile](https://morguefile.com/)| Over 350,000 free stock photos for commercial use |
| [Kaboom Pics](https://kaboompics.com/)| Stock photography and color palettes. Good for product images |
| [New Old Stock](https://nos.twnsnd.co/)| Stock vintage photos |
| [Pic Jumbo](https://picjumbo.com/)| Good collections of different types of photos |
| [Public Domain Pictures](https://www.publicdomainpictures.net/en/)| Public domain images of all types |
| [Find A Photo](https://www.chamberofcommerce.org/findaphoto/)| Searches multiple stock photo websites |
| [Stockvault](http://www.stockvault.net/)| Categorized stock photos |
| [Placeholder](https://placeholder.com/)| A free image placeholder service for the web. You can specify image size and format |
| [Realistic Shots](https://realisticshots.com/)| Free high resolution stock photos |
| [Negative Space](https://negativespace.co/)| High-Resolution Free Stock Photos |
| [SkitterPhoto](https://skitterphoto.com/)| Free high resolution photography |
| [PicoGraphy](https://picography.co/)| Gorgeous, High-Resolution, Free Photos |
| [Wunder Stock](https://wunderstock.com/)| Stunningly amazing free photos |
| [PxHere](https://pxhere.com/)| Free Images & Free stock photos - PxHere |
## Stock Videos
>Websites that offer free stock videos of all kinds for your websites and apps
| Website | Description |
| ----------------------- | ------------------ |
| [Coverr.co](https://coverr.co/)| Beautiful free stock video footage |
| [Videezy](https://www.videezy.com/)| Free HD stock footage & 4K videos |
| [Mix Kit](https://mixkit.co/)| Stock video clips & music |
| [Life Of Vids](https://www.lifeofvids.com/)| Free video clips and loops |
| [Videvo](https://www.videvo.net/stock-video-footage/)| Free and premium stock videos |
## Stock Music & Sound Effects
>Websites that offer free stock music and/or sound effects
| Website | Description |
| ----------------------- | ------------------ |
| [Free Stock Music](https://www.free-stock-music.com/)| Royalty free stock music for YouTube videos, podcasts, etc |
| [Bensound](https://www.bensound.com/)| Download Royalty Free Music for free and use it in your project |
| [Mixkit](https://mixkit.co/free-stock-music/)| Free music for your projects |
| [Freesound](https://freesound.org/)| Free stock music and sounds |
| [Free Stock Music](https://www.free-stock-music.com/)| Royalty free stock music for YouTube videos, podcasts, etc |
| [Free Music Archive](https://freemusicarchive.org/)| Collaborative database of creative-commons licensed sound for musicians and sound lovers |
| [Musopen](https://musopen.org/music/)| An online copyright free classical music library |
## Vectors & Clip Art
>Free vectors, clipart, illustrations, patterns and more
| Website | Description |
| ----------------------- | ------------------ |
| [Vecteezy](https://www.vecteezy.com/)| Find and download free vector art |
| [Freepik](https://www.freepik.com)| Free vectors, stock photos, PSD and icons |
| [Free Vectors](https://www.freevectors.net/)| Community of vector lovers who share free vector graphics |
| [PNGTree](https://pngtree.com/free-vectors)| png, backgrounds, templates, text effects |
| [Vector4Free](https://www.vector4free.com/)| Free vector graphics |
| [Retro Vectors](http://retrovectors.com/)| Vintage vectors and graphics |
| [Freeble](http://freebbble.com/)| Vectors, patterns, mockups and more |
| [Lukaszadam](https://lukaszadam.com/)| Free Vector atrworks |
| [Illlustrations](https://illlustrations.co/)| Beautiful 100 Illustrations - png, svg |
| [Clipart](https://www.clipart.email/)| Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! |
## Product & Image Mockups
>Create mockups of devices and other products
| Website | Description |
| ----------------------- | ------------------ |
| [Smart Mockups](https://smartmockups.com/)| Create stunning product mockups (free & premium) |
| [Shot Snap](https://shotsnapp.com/)| Create beautiful device mockup images for your app or website design |
| [Screely](https://www.screely.com/)| Instantly turn your screenshot into a mockup |
| [Screen Peak](https://screenpeek.io/)| Create a mockup from a URL |
| [Mockup World](https://www.mockupworld.co/)| The biggest source of free photo-realistic Mockups online |
| [Collab Shot](https://www.collabshot.com/)| Real-time screen grabs and image sharing |
| [Facebook Devices](https://facebook.design/devices)| Images and Sketch files of popular devices |
| [Threed.io](https://threed.io)| Generate 3D mockups right in your browser. |
## HTML & CSS Templates
>Websites that offer free beautiful website templates and themes of all types
| Website | Description |
| ----------------------- | ------------------ |
| [HTML5Up](https://html5up.net/)| Very modern, unique responsive HTML5/CSS3 themes |
| [Templatemo](https://templatemo.com/)| Minimal, resume, gallery themes and more |
| [Templated.co](https://templated.co/)| Tons of minimalistic HTML5/CSS3 themes |
| [FreeHTML5](https://freehtml5.co/)| Free & premium HTML5 and Bootstrap themes |
| [StyleShout](https://www.styleshout.com/free-templates/)| Brilliantly crafted free website templates |
| [Start Bootstrap](https://startbootstrap.com/)| Bootstrap starter themes |
| [Zerotheme](https://www.zerotheme.com/)| HTML5, Bootstrap, Prestashop templates |
| [HTML5xCSS3](https://www.html5xcss3.com/)| Collection of wonderful templates in different categories |
| [Colorlib](https://colorlib.com/wp/templates/)| Almost any category of theme you can think of |
| [Free CSS](https://www.free-css.com/free-css-templates)| Huge collection of free templates |
| [Hubspot](https://www.hubspot.com/resources)| Templates, infographics, banners and much more|
| [Mobirise](https://mobirise.com/html-templates/)| Great looking HTML5/CSS3 templates|
| [Bootswatch](https://bootswatch.com/)| Free themes for Bootstrap|
| [Onepagelove](https://onepagelove.com/)| One page websites, templates and resources|
| [Themes For App](https://themesfor.app/)| Free Bootstrap themes and landing pages|
| [BootstrapTaste](https://bootstraptaste.com/)| Premium & Free Bootstrap Templates|
| [BootstrapMade](https://bootstrapmade.com/)| Elegant, clean and beautiful free templates using Bootstrap. |
| [W3Layouts](https://w3layouts.com/)| W3Layouts: 3784+ Free Website Templates for 2020 |
## CSS Frameworks
>CSS/UI frameworks to help build great looking websites and applications
| Website | Description |
| ----------------------- | ------------------ |
| [Tailwind CSS](https://tailwindcss.com/)| Low level, utility-first framework |
| [Bootstrap](https://getbootstrap.com/)| Popular UI framework with tons of components that use both CSS and JS |
| [Materialize](https://materializecss.com/)| A modern responsive front-end framework based on Material Design |
| [Material Design Lite](https://getmdl.io/)| Light framework based on Material Design. No JS dependency |
| [Bulma](https://bulma.io/)| Modern CSS framework with no JS |
| [Skeleton](http://getskeleton.com/)| Extremely light framework for basic UI elements |
| [Semantic UI](https://semantic-ui.com/)| Empowers designers and developers by creating a shared vocabulary for UI |
| [Fomantic UI](https://fomantic-ui.com/)| A community fork of Semantic-UI |
| [Foundation](https://get.foundation/)| Mobile first framework with clean markup |
| [Pure CSS](https://purecss.io/)| A set of small, responsive CSS modules |
| [UIKit](https://getuikit.com/)| Lightweight and modular front-end framework |
| [Susy](https://www.oddbird.net/susy/)| Lightweight, grid-layout engine for Sass |
| [Milligram.io](https://milligram.io/)| Minimalist CSS framework |
| [Vanilla Framework](https://vanillaframework.io/)| Simple, extensible CSS framework written in Sass |
| [Spectre CSS](https://picturepan2.github.io/spectre/)| Lightweight, modern CSS framework |
| [Picnic CSS](https://picnicss.com/)| Lightweight and beautiful library |
| [Wing](https://kbrsh.github.io/wing/)| A beautiful CSS framework designed for minimalists |
| [Chota](https://jenil.github.io/chota/)| A micro (~3kb) CSS framework |
| [Blueprint CSS](https://blueprintcss.dev/)| A lightweight layout library for building great responsive mobile first UIs that work everywhere |
| [W3.CSS](https://www.w3schools.com/w3css/) | 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](https://jdan.github.io/98.css/)| A design system for building faithful recreations of old UIs |
| [NES CSS](https://nostalgic-css.github.io/NES.css/)| NES-style CSS Framework |
| [Shoelace.css](https://www.shoelace.style/)| Lightweight, forward-thinking CSS library built with future CSS syntax |
| [MVP.css](https://andybrewer.github.io/mvp/) | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done |
| [Blaze.css](http://blazecss.com/) | Open source modular CSS toolkit providing great structure for building websites quickly |
## CSS Animations
>CSS animations to build awesome animations for websites and applications
| Website | Description |
| ----------------------- | ------------------ |
| [Animate.css](https://animate.style/)| Just-add-water CSS animations |
| [Bounce.js](http://bouncejs.com/)| Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations |
| [Anime.js](https://animejs.com/)| 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](https://www.minimamente.com/project/magic/)| Animations has been one of the most impressive animation libraries available |
| [Zdog](https://zzz.dog/)| Round, flat, designer-friendly pseudo-3D engine for canvas & SVG |
| [CSShake](http://elrumordelaluz.github.io/csshake/)| CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page |
| [Hover.css](http://ianlunn.github.io/Hover/)| Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website |
| [AniJS](http://anijs.github.io/)| AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure |
| [Animista](http://animista.net/)| CSS Animations On Demand |
| [Tachyons-animate](https://github.com/anater/tachyons-animate)| 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](https://www.sequencejs.com/)| Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications |
| [Infinite](https://tilomitra.github.io/infinite/)| These animations, like rotations and pulses, that are specifically designed to run and repeat forever |
| [OBNOXIOUS.CSS](http://tholman.com/obnoxious/)| Animations for the strong of heart, and weak of mind |
| [MOTION UI](https://zurb.com/playground/motion-ui)| A Sass library for creating flexible CSS transitions and animations |
## Javascript Animation Libraries
>javascript animations libraries to build awesome animations for websites and applications
| Website | Description |
| ----------------------- | ------------------ |
| [Greensock](https://greensock.com/)| A JavaScript library for building high-performance animations that work in every major browser |
| [lax.js](https://github.com/alexfoxy/laxxx)| Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! |
| [Rellax.js](https://github.com/dixonandmoe/rellax)| A buttery smooth, super lightweight, vanilla javascript parallax library |
| [three.js](https://github.com/mrdoob/three.js/)| An easy to use, lightweight, 3D library with a default WebGL renderer. |
## UI Components & Kits
>Not quite "frameworks", but tools for creating user interfaces with components or UI kits
| Website | Description |
| ----------------------- | ------------------ |
| [UILang](http://uilang.com/)| A minimal, ui-focused programming language for web designers |
| [Medialoot CSS Components](https://medialoot.com/free-themes/css-components/)| Calendars, price grids and other UI components |
| [Froala Design Blocks](https://froala.com/design-blocks)| Over 170 responsive design blocks ready to be used in your web or mobile apps |
| [Material Design For Bootstrap](https://fezvrasta.github.io/bootstrap-material-design/)| Open source toolkit for building material design with Bootstrap |
| [Photonkit](http://photonkit.com/)| Desktop UI library for Electron |
| [Flat UI](https://designmodo.github.io/Flat-UI/)| Minimal free user interface kit|
| [Shards](https://designrevision.com/downloads/shards/)| A free and modern UI toolkit for web makers based on Bootstrap |
| [Creative Tim](https://www.creative-tim.com/)| All types of UI libraries and kits including JS frameworks like React |
| [Brumm Shadow Maker](https://brumm.af/shadows)| An online tool to make css shadows|
| [SpinKit](https://tobiasahlin.com/spinkit/)| Simple CSS Spinners|
| [Moving Letters](https://tobiasahlin.com/moving-letters/)| Animated Text with JavaScript and anime.js|
| [CSS Layout](https://csslayout.io/)| A collection of popular web layouts and patterns in pure CSS |
| [Codyhouse](https://codyhouse.co/)| Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components |
| [Tailwind Starter Kit](https://github.com/creativetimofficial/tailwind-starter-kit)| Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source |
| [Tailwindtoolbox](https://www.tailwindtoolbox.com/)| Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. |
| [tailwindcomponents](https://tailwindcomponents.com/)| A free repository for community components using TailwindCSS |
## React UI
>UI and component libraries for the React JavaScript framework
| Website | Description |
| ----------------------- | ------------------ |
| [Material UI](https://material-ui.com/)| React components for faster and easier web development, based on Material Design |
| [Chakra UI](https://chakra-ui.com/)| Build accessible React apps & websites with speed. [Openchakra](https://openchakra.app/) |
| [React Bootstrap](https://react-bootstrap.github.io/)| Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript |
| [ReactStrap](https://reactstrap.github.io/)| Another Bootstrap UI library for React |
| [React Admin](https://marmelab.com/react-admin/)| A frontend Framework for building admin applications. Supports API's out of the box|
| [BlueprintJS](https://blueprintjs.com/)| React-based UI toolkit for the web |
| [React Semantic UI](https://react.semantic-ui.com/)| UI components based off of the Semantic UI framework |
| [Shards React](https://designrevision.com/downloads/shards-react/)| React UI kit featuring a modern design system with dozens of custom components |
| [React Virtualized](https://bvaughn.github.io/react-virtualized)| UI set for data. Includes tables, lists, sorting, etc. |
| [React Toolbox](http://react-toolbox.io/#/)| Material design UI library for React |
| [Elastic UI](https://elastic.github.io/eui/#/)| Distributes UI React components and static assets for use in building web layouts |
| [React Desktop](http://reactdesktop.js.org/)| Desktop styled components in React. Includes MacOS and Windows based components |
| [Onsen React](https://onsen.io/react/)| Distributes Components for hybrid mobile apps with React and Onsen UI |
| [Evergreen](https://evergreen.segment.com/)| Design system for React |
| [Rebass](https://rebassjs.org/)| React primitive UI components built with styled system |
| [Grommet](https://v2.grommet.io/)| mobile first UI component library |
| [Rimble](https://rimble.consensys.design/)| React design kit, library and guides |
| [Landing Page Template](https://github.com/cruip/open-react-template/)| Open source landing page template for react |
| [KendoReact](https://www.telerik.com/kendo-react-ui/)| UI for React Developers |
| [PRIMEREACT](https://www.primefaces.org/primereact/)| The ultimate collection of design-agnostic, flexible and accessible React UI Components |
| [Elemental UI](http://elemental-ui.com/)| A UI Toolkit for React.js Websites and Apps |
| [Ant Design](https://ant.design/)| Open source design React ui library. |
| [KendoReact](https://www.telerik.com/kendo-react-ui/)| UI for React Developers. |
| [PRIMEREACT](https://www.primefaces.org/primereact/)| The ultimate collection of design-agnostic, flexible and accessible React UI Components |
| [Primer Components](https://primer.style/components/)| Primer Components are React components which implement GitHub's Primer Design System |
| [Orbit](https://orbit.kiwi/)| Design system and React UI components for travel projects. |
| [Base Web](https://baseweb.design/)| Base Web provides a robust suite of components out of the box |
## Vue UI
>UI and component libraries for the Vue JavaScript framework
| Website | Description |
| ----------------------- | ------------------ |
| [Vuetify](https://vuetifyjs.com/en/)| Material design component framework |
| [Bootstrap Vue](https://bootstrap-vue.org/)| Use Bootstrap components with Vue |
| [Buefy](https://buefy.org/)| Lightweight UI components based on Bulma |
| [Quasar](https://quasar.dev/)| Build high-performance VueJS user interfaces in record time |
| [Element](https://element.eleme.io/#/en-US)| Desktop UI library for Vue |
| [Fish UI](https://myliang.github.io/fish-ui/#/components/index)| Vue UI toolkit for the web |
| [Keen UI](https://josephuspaye.github.io/Keen-UI)| VueUI library with a simple API, inspired by Google's Material Design |
| [Onsen Vue](https://onsen.io/vue/)| Distributes Components for hybrid mobile apps with Vue and Onsen UI |
| [Vuejsexamples](https://vuejsexamples.com)| A nice collection of useful vuejs UI components |
| [Inkline](https://inkline.io)|Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications |
| [Vuesax](https://vuesax.com/)|Unique and reusable UI components |
## Angular UI
>UI and component libraries for the Angular JavaScript framework
| Website | Description |
| ----------------------- | ------------------ |
| [Material Angular](https://material.angular.io/)| UI library for Angular based on Material design |
| [NG Bootstrap](https://ng-bootstrap.github.io/#/home)| UI library for Angular based on the Bootstrap framework |
| [PrimeNG](https://www.primefaces.org/primeng/#/)| Powerful UI component library for Angular |
| [Onsen Angular](https://onsen.io/angular2/)| Hybrid mobile and PWA UI library for Angular and Onsen UI |
| [NG Lightning](https://ng-lightning.github.io/ng-lightning/#/)| Native Angular components & directives for Lightning Design System |
| [NG Semantic](https://ng-semantic.herokuapp.com/)| UI library for Angular based on Semantic UI |
| [Nebular](https://akveo.github.io/nebular/)| Customizable UI Kit, Auth & Security for Angular |
| [Alyle UI](https://alyle.io/)| Minimal components set for Angular |
| [NGX Bootstrap](https://valor-software.com/ngx-bootstrap/#/)| Another UI library for Angular based on the Bootstrap framework |
| [NG Zorro](https://ng.ant.design/)| UI library for Angular based on Ant Design |
## Svelte UI
>UI and component libraries for the Svelte Javascript compiler
| Website | Description |
| ----------------------- | ------------------ |
| [Svelte Material UI](https://sveltematerialui.com/)| UI library for Svelte based on Material Design |
| [SvelteStrap](https://bestguy.github.io/sveltestrap/)| UI library for Svelte based on the Bootstrap framework |
| [Svelte Flat UI](https://svelteui.js.org/#/checkbox)|UI library for Svelte based on Flat Design |
## Design Systems & Style Guides
>Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
| Website | Description |
| ----------------------- | ------------------ |
| [Material Design](https://material.io/)| Google's Material Design |
| [Ant Design](https://ant.design/)| Design system for enterprise-level products |
| [Apple Design Resources](https://developer.apple.com/design/resources/)| Guides and templates for using Apple design and UI |
| [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta/index.html)| Oracle's design system and toolkit |
| [Pulse](https://pulse.heartbeat.ua/)| Design system, guides and React component library |
| [Bolt](https://boltdesignsystem.com/)| Robust Twig and web component powered UI components |
| [Clarity Design System](https://clarity.design/)| UX guidelines, HTML/CSS framework, and Angular components |
| [AtlasKit](https://atlaskit.atlassian.com/)| Atlassian's official UI library, built according to the Atlassian Design Guidelines |
| [Audi Design Resources](https://www.audi.com/ci/en/guides/user-interface/introduction.html)| Audi UI design system and toolkit |
| [Carbon Design Systems](https://www.carbondesignsystem.com/)| Carbon is IBM’s open-source design system for products and experiences |
| [Yelp Style Guide](https://www.yelp.com/styleguide)| Yelp style guide, components and toolkit |
| [Comet](https://comet.discoveryeducation.com/)| Scalable design system of visual language, components, and design assets |
| [ETrade Design System](https://etrade.design/)| Guides and toolkits that blend finance with simplicity and ease of use |
| [Fundamental Library](https://sap.github.io/fundamental-styles/)| Open source and community driven project for consistent user interfaces|
| [Infor Design](https://design.infor.com/)| Guidelines and resources to create meaningful experiences for Infor’s products |
| [Lexicon](https://liferay.design/lexicon/)| An experience language for crafting beautiful UI |
| [Mailchimp UI/UX](https://ux.mailchimp.com/patterns/color)| Style guide and components from Mailchimp |
| [Marvel Style Guide](https://marvelapp.com/styleguide/overview/introduction)| Set of design principles and components |
| [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)| Collection of UX frameworks from Microsoft |
| [Pluralsight Design System](https://design-system.pluralsight.com/)| Design guide with components for designing with Pluralsight |
| [Polaris](https://polaris.shopify.com/)|Design system that creates great experiences for all of Shopify’s merchants |
| [Mozilla Protocol](https://protocol.mozilla.org/)| Protocol is a design system for Mozilla and Firefox websites |
| [SendGrid Style Guide](http://styleguide.sendgrid.com/)| UI library for developing consistent UI/UX at SendGrid |
| [VTEX Styleguide](https://styleguide.vtex.com/)| Reusable patterns, components and assets related to product design in VTEX |
| [Rizzo](https://rizzo.lonelyplanet.com/styleguide/design-elements)| Style guide with UI components, JS components, widgets, etc |
| [Atomize](https://atomizecode.com/)| UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly |
| [StyleGuides.io](http://styleguides.io/)| A directory of 500+ styleguides |
## Online Design Tools
>All kinds of online tools for design, from photo editors to wireframing, and more
| Website | Description |
| ----------------------- | ------------------ |
| [Figma](https://www.figma.com/graphic-design-tool/)| Online graphic design tool (Free & paid options) |
| [Vectr](https://vectr.com/)| Free vector graphics software|
| [Canva](https://www.canva.com/)| Create beautiful designs (Free & Paid) |
| [Wireframe.cc](https://wireframe.cc/)| Wireframing tool (free & paid) |
| [Fotor](https://www.fotor.com/)| Photo editor and design maker |
| [Pixlr](https://www.pixlr.com/)| Online photo editor |
| [Animoto Video Maker](https://animoto.com/apps/online-video-maker)| Make videos online |
| [RemoveBG](https://www.remove.bg/)| Remove image backgrounds |
| [Photo Creator](https://photos.icons8.com/creator)| Create your own photos instead of searching for stock |
| [Visme](https://www.visme.co/)| Create presentations, infographics and more |
| [Infogram](https://infogram.com/)| Create infograms |
| [ChartGo](https://www.chartgo.com/)| Create charts and graphs online |
| [Cartoon Photo](https://cartoon.pho.to/)| Turn photos into cartoons |
| [Logo Maker](https://logomakr.com/)| Create custom logos |
| [Whimsical](https://whimsical.com/)| Wireframes, diagrams and more (4 free) |
| [Whiteboard](https://witeboard.com/)| Online drawing tool |
| [Octopus](https://octopus.do/)| Sitemap builder |
| [Favicon Generator](http://tools.dynamicdrive.com/favicon/)| Generate favicon ico files for your website |
| [RealFaviconGenerator](https://realfavicongenerator.net/)| Generate icons for all platforms (Windows, iOS, Android) |
| [FontIcon](https://gauger.io/fonticon/)| Generate favicons and images from Font Awesome icons |
| [CTA Button Maker](https://www.clickminded.com/button-generator/)| Create call to action buttons |
| [Blobmaker](https://www.blobmaker.app/)| Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes. |
| [Personas](https://personas.draftbit.com/)| A playful avatar generator for the modern age. |
| [SoftUI](https://www.softui.io)| A Soft UI (neumorphism) CSS generator. |
| [Photopea](https://www.photopea.com)| A Online Photoshop editor. |
| [Excalidraw](https://excalidraw.com/)| Virtual whiteboard for sketching hand-drawn like diagrams. |
| [Diagrams](https://www.diagrams.net/)| Diagram software and Flowchart maker. |
| [MapInSeconds](http://mapinseconds.com/)| Simple way to visualize your data with a map. |
| [Grid Malven](http://grid.malven.co/)| A css grid cheatsheet to reference when creating a css grid. |
| [Blobmaker](https://www.blobmaker.app/)| Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes |
| [Personas](https://personas.draftbit.com/)| A playful avatar generator for the modern age |
| [SoftUI](https://www.softui.io)| A Soft UI (neumorphism) CSS generator |
| [Photopea](https://www.photopea.com)| A Online Photoshop editor |
| [Excalidraw](https://excalidraw.com/)| Virtual whiteboard for sketching hand-drawn like diagrams |
| [Diagrams](https://www.diagrams.net/)| Diagram software and Flowchart maker |
| [MapInSeconds](http://mapinseconds.com/)| Simple way to visualize your data with a map |
| [Grid Malven](http://grid.malven.co/)| A css grid cheatsheet to reference when creating a css grid |
| [Smart Upscaler](https://icons8.com/upscaler) | Upscale images by 2-4x resolution |
| [GetAvataaars](https://getavataaars.com/) | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library |
| [Webflow](https://webflow.com/) | Break the code barrier, Build better business websites, faster. Without coding. |
| [Trace](https://stickermule.com/trace) | Instantly remove the background from your photos |
## Downloadable Design Software
>Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop
| Website | Description |
| ----------------------- | ------------------ |
| [Gimp](https://www.gimp.org/)| Free & open source image editor similar to Photoshop |
| [Gravit Designer](https://www.designer.io/en/)| Free full-featured vector graphic design app that works on ALL platforms |
| [Blender](https://www.blender.org/download/)| Open source, free animation, 3D modeling, etc. |
| [Raw Therapee](https://rawtherapee.com/)| Cross-platform raw image processing program |
| [Be Funky](https://www.befunky.com/features/graphic-designer/)| Online design program |
| [Krita](https://krita.org/en/download/krita-desktop/)| Sketching and painting program designed for digital artists |
| [Pencil Project](https://pencil.evolus.vn/)| GUI prototyping software |
| [Inkscape](https://inkscape.org/)| Powerful free design tool |
| [Adobe XD](https://www.adobe.com/products/xd.html)| Free design tool from Adobe |
| [Shapes.so](https://shape.so/pricing)| Icons that can be used as code in your projects |
| [Lunacy](https://icons8.com/lunacy) | Sketch for Windows |
| [InVision Studio](https://www.invisionapp.com/studio)| Free screen designing tool from InVision |
## Design Inspiration
>Here are some websites to get inspiration for design and UI
| Website | Description |
| ----------------------- | ------------------ |
| [Behance](https://www.behance.net/)| Design projects featured by different creators |
| [Dribbble](https://dribbble.com/)| Design projects featured by different creators |
| [Httpster](https://httpster.net/2020/apr/)| Showcases websites made by people from all over the world |
| [Microcopy Inspirations](https://www.microcopyinspirations.com/)| Curated collection of UX writing examples, microcopy examples and copywriting examples |
| [Inspofinds](https://inspofinds.com/)| Latest design work from designers and the design community |
| [Design Notes](https://www.designnotes.co/)| Free online resource library for product designers |
| [Land Book](https://land-book.com/)| Displays a large collection of websites to help find inspiration |
| [Frontend Mentor](https://www.frontendmentor.io/)| Real-world UI Challenges using HTML, CSS and Javascript |
| [Awwwards](https://www.awwwards.com/)| A website that rate and collects the best websites in the world in UI |
| [Codrops](https://tympanus.net/codrops/)| A website that collects the best UI ideas and patterns and make tutorials of it|
| [SaaS Landing Page](https://saaslandingpage.com/)| Discover the best landing page examples created by top-class SaaS companies |
| [Pages.xyz](https://www.pages.xyz/)| Curate and discover the best designed web pages |
| [UI Movement](https://uimovement.com/)| UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs |
## Image Compression
>Websites that allow you to compress large images
| Website | Description |
| ----------------------- | ------------------ |
| [TinyPNG](https://tinypng.com/)| Smart PNG and JPEG compression
| [Optimizilla](https://imagecompressor.com/)| Online JPEG and PNG optimizer / compressor with settings and archive download
| [Compressor.io](https://compressor.io/)| JPEG, PNG, GIF, SVG Compression |
| [Squoosh.app](https://squoosh.app/)| Image compression from Google Chrome Labs |
| [BulkResizePhotos](https://bulkresizephotos.com/)| Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline) |
| [iLoveIMG](https://www.iloveimg.com/)| The fastest free web app for easy image modification |
| [SvgOMG](https://jakearchibald.github.io/svgomg/)| Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.|
| [CompressJPEG](https://compressjpeg.com/)| Compress JPEG images with size even greater than 5MB |
| [CompressNow](https://compressnow.com/)| JPEG,
GIF,PNG Compression |
## Others
>Uncategorized Stuff
| Website | Description |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [everysize.kibalabs.com](https://everysize.kibalabs.com/) | Check your awesome responsive webpage looks great in every size |
| [Devhints.io](https://devhints.io/) | This is a modest collection of cheatsheets on Internet |
| [The Web Toolbox](https://thewebtoolbox.cc/)| A collection of handy, free-to-use tools for web developers, programmers and designers. |