My personal curated list of design resources.
- Unsplash - The internet’s source of freely useable images.
- How to use: No direct links but ability to download high res photos so long as you credit the photographer
- Place Kitten - A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code.
- How to use: Just add an image width & height at the end of the URL to generate a placement image
- Coolors.co - The super fast color schemes generator!
- -How to use: Click on Generate to start up the app. Once you are on the app click you space bar to generate new random color. In order to keep a color, click on the lock button on the color column. You can also test for color blindness and ajust color values.
- Pletton - A designer tool for creating color combinations that work together well.
- How to use: Online color wheel where you can move around to find different color combinations (mono, triad, etc)
- ColorKoala - A quick lightweight palette generator
- How to use: Select the type of colors you want (Light, Dark, Bright) and type of hue (random, red, blue, green, mono, etc) and colors will generate. You can also download your paletter in a
.scssfile.
- How to use: Select the type of colors you want (Light, Dark, Bright) and type of hue (random, red, blue, green, mono, etc) and colors will generate. You can also download your paletter in a
- Web Gradients - A free collection of 180 linear gradients that you can use as
content backdrops in any part of your website
- How to use: Scroll around to find a gradient that you want to use. The color codes will be given under each gradient as well as the
background-imagevalue with it'slinear-gradientkey under "Copy CSS"
- How to use: Scroll around to find a gradient that you want to use. The color codes will be given under each gradient as well as the
- Undraw - Open-source illustrations for every project you can imagine and create
- How to use: Click on "Illustration* to view the library. You can change the color of the SVGs using the top color picker as well as us the serach feature to find your wanted illustration.
- Open Doodles - A free set of sketchy illustrations
- How to use: Individually download illustrations as SVGs or PNGs or use Generate to download as a pack and alter the color, accent, and background of each illustration.
- Hero Patterns - A collection of repeatable SVG background patterns for you to use on your web projects.
- How to use: Select your forground, backgrouns, and transparentcy level for the backgrounds. For your selected background click on the pattern to wither download the unstyled SVG or use their CSS code which gives the values for
background-colorandbackground-image.
- How to use: Select your forground, backgrouns, and transparentcy level for the backgrounds. For your selected background click on the pattern to wither download the unstyled SVG or use their CSS code which gives the values for
- Feather - Simply beautiful open source icons
- How to use: Simply select icons you want to download as SVGs. Option to download the entire library is available.
- Flaticon - The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
- How to use: Search and select free icons and down load them as SVGs, PNGs, etc. You mush credit the author for a free download.
- Material Design Icons - Material icons for common actions and items.
- How to use: Search and click to download icons as SVGS. Can choose from themes like: filled, outlined, rounded, two-tone, sharp.
- Illustrations - Large set of open source illustrations
- How to use: Individually download illustrations as SVG or PNG. Option to download entire collection via zip file. Support illustrators though donation link.
- Type Anything - A free and awesome typography tool to create and test font combinations for your projects
- How to use: Test HTML headings and paragraphs's font families, size, weight, line height, spacing, margin and more. Also gives the options to get the
cssstyles and respective fonts.
- How to use: Test HTML headings and paragraphs's font families, size, weight, line height, spacing, margin and more. Also gives the options to get the
- Femmebot's Google Type - Ongoing project that pairs different Google Fonts with Unsplash images and passages form Project Gutenberg
- How to use: Top of each section gives the fonts used for each typogrpahy piece.
- Google Fonts - free and open fonts by Google
- How to use: Select font and see embeded popup to get either and HTML
<link>tag for their stylesheet, or a CSS@importto use.
- How to use: Select font and see embeded popup to get either and HTML
- Font Squirrel - 100% free fonts for commercial use
- How to use: Download selected font and use as your site's webfonts. For more info on using webfonts, they offer a guide.
- Better Webtype - A free web typography course for web designers & web developers.
- How to use: Sign up for the newsletter and receive dailf 5 -10 min lessons on web typography with further reading and resources given. Also get access to Better Type's Slack channel upon signing up.
- Free Typography - A blog about the best free fonts, typefaces and typography for free download.
- How to use: Downloaded selected fonts via exclusive link provided. Offers more fonts through their free email newsletter.
- Dribbble - large community of differnet types of design
- UI Movement - sharing and discussing unique UI designs
- Type Wolf - see what's trending in type
- CSS Winner - web design award gallary
- Site Inspire - web design award gallary
- Awwwards - web design award gallary