DEV Community

Cover image for Essential Design Resources for Developers
Darian Nocera
Darian Nocera

Posted on • Updated on • Originally published at blog.darnocer.io

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!

Discussion (0)