GitHub/design-resources-for-developers
1
0
Fork 0
mirror of https://github.com/bradtraversy/design-resources-for-developers.git synced 2025-03-28 05:00:32 +08:00
Code Issues Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Brad Traversy 2020-05-06 10:47:55 -04:00
commit e0d67d604f
2 changed files with 340 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
LICENSE Normal file
View File

@ -0,0 +1,20 @@
MIT License
Copyright (c) 2020 Brad Traversy
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

320
readme.md Normal file
View File

@ -0,0 +1,320 @@
# 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.
- [UI Graphics](#ui-graphics)
- [Fonts](#fonts)
- [Icons](#icons)
- [Stock Photos](#stock-photos)
- [Stock Videos](#stock-videos)
- [Vectors & Clipart](#vectors-and-clipart)
- [Product & Image Mockups](#product-and-image-mockups)
- [HTML & CSS Templates](#html-css-templates)
- [CSS Frameworks](#css-frameworks)
- [CSS Components & Kits](#css-components)
- [React UI Libraries](#react-ui)
- [Vue UI Libraries](#vue-ui)
- [Angular UI Libraries](#angular-ui)
- [Design Systems & Style Guides](#design-systems-and-style-guides)
- [Online Design Tools](#online-design-tools)
- [Downloadable Design Software](#downloadable-design-software)
- [UI & Design Inspiration](#ui-inspiration)
- [Adding To This Repo](#adding-to-this-repo)
## 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 |
| [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. |
| [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. |
| [animations.co](http://animaticons.co/) | Beautiful, customizable animated GIF icons |
| [animations.co](http://animaticons.co/) | Beautiful, customizable animated GIF icons |
| [Speckyboy Article](https://speckyboy.com/open-source-front-end-ui-kits/) | The 10 most popular open source frontend web UI kits |
## 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 |
## 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 |
| [Simple Icons](https://simpleicons.org/)| 1307 Free SVG icons for popular brands |
| [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. |
| [The Noun Project](https://thenounproject.com/)| Over 2 Million curated icons, created by a global community |
## 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 palletes. 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 |
## 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 |
## 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](hhttps://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 |
## Product and 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 Wolrd](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 |
## 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|
## 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. |
| [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 |
## UI and CSS Components & Kits
Not quite "frameworks", but tools for creating user interfaces with comoponents 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 |
## 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 |
| [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 |
## 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. |
## 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 |
|
## Design Systems and 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 |
| [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 |
## Online Design Tools
All kinds of online tools for design, from photo editors to wireframing, color generators 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 |
| [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 |
| [Colors](https://coolors.co/)| Color schemes generator |
| [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 |
| [CTA Button Maker](https://www.clickminded.com/button-generator/)| Create call to action buttons |
## 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 |
## UI and 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 |
| [Dribble](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 |
## 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