Essential Design Resources for Developers

darnocer

Darian Nocera

Posted on December 14, 2020

Essential Design Resources for Developers

Do you have so many bookmarks that you actually don't use any of them? There are a million free design resources out there. And a million and one resources compiling those resources. If you're overwhelmed by all of the options, then here's some more! πŸ˜‰

These are my personal essentials.

Images

Free Photos and Background Images

Take and Edit Screenshots

TIP: There may be a better way to do this, but I sometimes use this screenshot tool to estimate the size or aspect ratio an image needs to be. I have "Capture Region" configured to use the PrtSc hot key. You can then select a region and it gives you the dimensions.)

image.png

Illustrations

Free Vector Illustrations

TIP: You can select the hex code for the illustrations

image.png

More Free Ilustrations

Icons

Free .svg Icons of Popular Brands

image.png

Free Vector Font Icons

Fonts

Heading & Body Fonts That Look Good Together

Identify a Font

Colors

Simple, Flat Color Palettes

Generate a Color Palette From an Image

Generate the CSS for Gradients

Identify HTML Hex Codes of a Pixel Anywhere

image.png

TIP: Once downloaded, setup your hotkeys. I like to use Alt+Q to easily bring up the eyedropper.


Thanks for reading. I hope these are helpful for you! Feel free to connect with me on LinkedIn!

πŸ’– πŸ’ͺ πŸ™… 🚩
darnocer
Darian Nocera

Posted on December 14, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related