Skip to content

Latest commit

 

History

History
executable file
·
532 lines (465 loc) · 38.9 KB

readme.md

File metadata and controls

executable file
·
532 lines (465 loc) · 38.9 KB

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.

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 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
Undraw.co Open-source illustrations for any idea you can imagine and create.
Illustration.co Open-source illustrations kit
Opendoodles Free sketchy illustrations
Open Peeps Hand drawn illustration library
UI Space Thousands of great UI freebies
Animations.co Beautiful, customizable animated GIF icons
Uplabs High-quality design resources (Free & Premium)
InvisionApp Library of free, high-quality UI kits, icon packs, and mockups.
Speckyboy Article The 10 most popular open source frontend web UI kits
Open Doodles A Free Set of Sketchy Illustrations
Avataaars 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 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 😏
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
What Font Tool for finding the fonts of a website without having to search in the devtools
Tiff A type diff tool that visually contrasts the differences between two fonts.
Font Flame Tool for pairing fonts to see how they look together
TypeKit Practice Learn about typography practices
Fontjoy Generate font pairing in one click
Golden Ratio Golden Ratio Typography Calculator
FontSpark Discover Better Fonts
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

Icons

Resources for Icons including font based, png, svg and more

Website                            Description
Font Awesome The web's most popular icon set and toolkit.
Material Icons Material design icon library
Shapedfonts Iconclub 8000+ free icons
Feather Icons Beautiful, customizable open source icons
Tabler Icons 470+ highly customizable open source SVG icons
Simple Icons 1307 Free SVG icons for popular brands
Zurb Foundation Icons Customizable Foundation icons
Linear Icons 1000+ Ultra crisp vector icons
Entypo 411 carefully crafted premium pictograms by Daniel Bruce
Icons8 Free icons, photos, vectors and tools
Flat Icon The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats.
Fontisto Icons Fontisto the iconic font and css toolkit · 616+ free icons.
The Noun Project Over 2 Million curated icons, created by a global community
Iconsout Free Download Icons illustrations stock photos at one place.
Boxicons Boxicons is a free collection of carefully crafted open source icons.
Nucleo App Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid)
Colors & Fonts A curated library of colors, fonts and resources.
Icon-icons.com Free Icons PNG, ICO, ICNS and Vector file SVG.
Bootstrap Icons Free Icons built for Bootstrap but they'll work in any project.
Remix Icon Simply Delightful Icon System
Iconfinder Free and premium vector icons in SVG, PNG, CSH and AI format.
Vivid.js Ready to use Free and Open Source SVG Icons Pack JavaScript Library.
Material Palette Free to pick palettes, icons and colors for Material Design]
iconmonstr Discover 4496+ free icons in 313 collections

Stock Photos

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

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

Stock Videos

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

Website                            Description
Coverr.co Beautiful free stock video footage
Videezy Free HD stock footage & 4K videos
Mix Kit Stock video clips & music
Life Of Vids Free video clips and loops
Videvo Free and premium stock videos

Vectors & Clip Art

Free vectors, clipart, illustrations, patterns and more

Website                            Description
Vecteezy Find and download free vector art
Freepik Free vectors, stock photos, PSD and icons
Free Vectors Community of vector lovers who share free vector graphics
PNGTree png, backgrounds, templates, text effects
Vector4Free Free vector graphics
Retro Vectors Vintage vectors and graphics
Freeble Vectors, patterns, mockups and more
Lukaszadam Free Vector atrworks
Illlustrations Beautiful 100 Illustrations - png, svg
Clipart 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 Create stunning product mockups (free & premium)
Shot Snap Create beautiful device mockup images for your app or website design
Screely Instantly turn your screenshot into a mockup
Screen Peak Create a mockup from a URL
Mockup World The biggest source of free photo-realistic Mockups online
Collab Shot Real-time screen grabs and image sharing
Facebook Devices Images and Sketch files of popular devices.

HTML & CSS Templates

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

Website                            Description
HTML5Up Very modern, unique responsive HTML5/CSS3 themes
Templatemo Minimal, resume, gallery themes and more
Templated.co Tons of minimalistic HTML5/CSS3 themes
FreeHTML5 Free & premium HTML5 and Bootstrap themes
StyleShout Brilliantly crafted free website templates
Start Bootstrap Bootstrap starter themes
Zerotheme HTML5, Bootstrap, Prestashop templates
HTML5xCSS3 Collection of wonderful templates in different categories
Colorlib Almost any category of theme you can think of
Free CSS Huge collection of free templates
Hubspot Templates, infographics, banners and much more
Mobirise Great looking HTML5/CSS3 templates
Bootswatch Free themes for Bootstrap
Onepagelove One page websites, templates and resources
Themes For App Free Bootstrap themes and landing pages

CSS Frameworks

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

Website                            Description
Tailwind CSS Low level, utility-first framework
Bootstrap Popular UI framework with tons of components that use both CSS and JS
Materialize A modern responsive front-end framework based on Material Design
Material Design Lite Light framework based on Material Design. No JS dependency
Bulma Modern CSS framework with no JS
Skeleton Extremely light framework for basic UI elements
Semantic UI Empowers designers and developers by creating a shared vocabulary for UI.
Foundation Mobile first framework with clean markup
Pure CSS A set of small, responsive CSS modules
UIKit Lightweight and modular front-end framework
Susy Lightweight, grid-layout engine for Sass
Milligram.io Minimalist CSS framework
Vanilla Framework Simple, extensible CSS framework written in Sass
Spectre CSS Lightweight, modern CSS framework
Picnic CSS Lightweight and beautiful library
Wing A beautiful CSS framework designed for minimalists.
Chota A micro (~3kb) CSS framework.
Blueprint CSS A lightweight layout library for building great responsive mobile first UIs that work everywhere.
W3.CSS 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 A design system for building faithful recreations of old UIs.
NES CSS NES-style CSS Framework.
Shoelace.css Lightweight, forward-thinking CSS library built with future CSS syntax

CSS Animations

CSS animations to build awesome animations for websites and applications

Website                            Description
Animate.css Just-add-water CSS animations
Bounce.js Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.
Anime.js 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 Animations has been one of the most impressive animation libraries available.)
Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
CSShake CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page.
Hover.css Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website.
AniJS AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure.
Sequence.js Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications.
Animista Css Animations On Demand
TypeIt JS The most versatile animated typing utility on the planet.
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.

UI Components & Kits

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

Website                            Description
UILang a minimal, ui-focused programming language for web designers
Medialoot CSS Components Calendars, price grids and other UI components
Froala Design Blocks Over 170 responsive design blocks ready to be used in your web or mobile apps
Material Design For Bootstrap Open source toolkit for building material design with Bootstrap
Photonkit Desktop UI library for Electron
Flat UI Minimal free user interface kit
Shards A free and modern UI toolkit for web makers based on Bootstrap.
Creative Tim All types of UI libraries and kits including JS frameworks like React
Brumm Shadow Maker An online tool to make css shadows
SpinKit Simple CSS Spinners
Moving Letters Animated Text with JavaScript and anime.js
CSS Layout A collection of popular web layouts and patterns in pure CSS
Codyhouse Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components.

React UI

UI and component libraries for the React JavaScript framework

Website                            Description
Material UI React components for faster and easier web development, based on Material Design
Chakra UI Build accessible React apps & websites with speed. Openchakra
React Bootstrap Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript
ReactStrap Another Bootstrap UI library for React
React Admin A frontend Framework for building admin applications. Supports API's out of the box
BlueprintJS React-based UI toolkit for the web
React Semantic UI UI components based off of the Semantic UI framework
Shards React React UI kit featuring a modern design system with dozens of custom components.
React Virtualized UI set for data. Includes tables, lists, sorting, etc
React Toolbox Material design UI library for React
Elastic UI Distributes UI React components and static assets for use in building web layouts
React Desktop Desktop styled components in React. Includes MacOS and Windows based components
Onsen React Distributes Components for hybrid mobile apps with React and Onsen UI
Evergreen Design system for React
Rebass React primitive UI components built with styled system
Grommet mobile first UI component library
Rimble React design kit, library and guides
Landing Page Template Open source landing page template for react
Ant Design Open source design React ui library.
KendoReact UI for React Developers.
PRIMEREACT The ultimate collection of design-agnostic, flexible and accessible React UI Components.
Elemental UI A UI Toolkit for React.js Websites and Apps.

Vue UI

UI and component libraries for the Vue JavaScript framework

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

Angular UI

UI and component libraries for the Angular JavaScript framework

Website                            Description
Material Angular UI library for Angular based on Material design
NG Bootstrap UI library for Angular based on the Bootstrap framework
PrimeNG Powerful UI component library for Angular
Onsen Angular Hybrid mobile and PWA UI library for Angular and Onsen UI
NG Lightning Native Angular components & directives for Lightning Design System
NG Semantic UI library for Angular based on Semantic UI
Nebular Customizable UI Kit, Auth & Security for Angular
Alyle UI Minimal components set for Angular

Svelte UI

UI and component libraries for the Svelte Javascript compiler

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

Online Design Tools

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

Website                            Description
Figma Online graphic design tool (Free & paid options)
Vectr Free vector graphics software
Canva Create beautiful designs (Free & Paid)
Wireframe.cc Wireframing tool (free & paid)
Fotor Photo editor and design maker
Pixlr Online photo editor
Animoto Video Maker Make videos online
RemoveBG Remove image backgrounds
Photo Creator Create your own photos instead of searching for stock
Visme Create presentations, infographics and more
Infogram Create infograms
ChartGo Create charts and graphs online
Cartoon Photo Turn photos into cartoons
Coolors Color schemes generator
ColorSpace Generate nice color palettes from one color
FlatUIColors Beautiful set of color palettes in various flavours
Adobe Color Create color palettes, extract gradients from images, etc.
Logo Maker Create custom logos
Whimsical Wireframes, diagrams and more (4 free)
Whiteboard Online drawing tool
Octopus Sitemap builder
Favicon Generator Generate favicon ico files for your website
RealFaviconGenerator Generate icons for all platforms (Windows, iOS, Android)
FontIcon Generate favicons and images from Font Awesome icons
CTA Button Maker Create call to action buttons
Blobmaker Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.
Personas A playful avatar generator for the modern age.
SoftUI A Soft UI (neumorphism) CSS generator.
Photopea A Online Photoshop editor.
Excalidraw Virtual whiteboard for sketching hand-drawn like diagrams.
Diagrams Diagram software and Flowchart maker.
MapInSeconds Simple way to visualize your data with a map.
Colorsinspo All-in-one resource for finding everything about colors.
Grid Malven A css grid cheatsheet to reference when creating a css grid.
Smart Upscaler Upscale images by 2-4x resolution

Downloadable Design Software

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

Website                            Description
Gimp Free & open source image editor similar to Photoshop
Gravit Designer Free full-featured vector graphic design app that works on ALL platforms.
Blender Open source, free animation, 3D modeling, etc
Raw Therapee Cross-platform raw image processing program
Be Funky Online design program
Krita Sketching and painting program designed for digital artists
Pencil Project GUI prototyping software
Inkscape Powerful free design tool
Adobe XD Free design tool from Adobe
Shapes.so Icons that can be used as code in your projects.
Lunacy Sketch for Windows

Design Inspiration

Here are some websites to get inspiration for design and UI

Website                            Description
Behance Design projects featured by different creators
Dribbble Design projects featured by different creators
Httpster Showcases websites made by people from all over the world
Microcopy Inspirations Curated collection of UX writing examples, microcopy examples and copywriting examples
Inspofinds Latest design work from designers and the design community.
Design Notes Free online resource library for product designers
Land Book Displays a large collection of websites to help find inspiration.
Frontend Mentor Real-world UI Challenges using HTML, CSS and Javascript
Awwwards A website that rate and collects the best websites in the world in UI
Codrops A website that collects the best UI ideas and patterns and make tutorials of it
Adobe Trends Discover current color trends in different industries from the creative communities on Behance and Adobe Stock.
Pages.xyz Curate and discover the best designed web pages
UI Movement UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs.

Image Compression

Sites that allows you to compress large images

Website                            Description
TinyPNG Smart PNG and JPEG compression
Optimizilla Online JPEG and PNG optimizer / compressor with settings and archive download
Compressor.io JPEG, PNG, GIF, SVG Compression
Squoosh.app Image compression from Google Chrome Labs

Adding To This Repo

Feel free to make a pull request and add more resources to this repo. The only requirements are that anything you add has to be FREE and put in the correct category. Also, please make sure your resource is not already here or in a PR. New resources are getting added all of the time.