commit e0d67d604f361c862c6f4d3e9bb89148275e7a28 Author: Brad Traversy Date: Wed May 6 10:47:55 2020 -0400 Initial commit diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b123100 --- /dev/null +++ b/LICENSE @@ -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. \ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..c707641 --- /dev/null +++ b/readme.md @@ -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