Design resources every developer should bookmark

Plenty of projects have no designer. That is not an excuse for an interface that looks accidental.

These tools cover the decisions that usually go wrong: colour, contrast, spacing, imagery and type scale.

Colour

Realtime Colors

Try a palette on a real layout instead of on five squares that tell you nothing.

realtimecolors.com

Colour

Coolors

Generate and lock palettes quickly, then export them as CSS variables.

coolors.co

Accessibility

WebAIM Contrast Checker

Two minutes here prevents the grey-on-grey text that fails every audit.

webaim.org/resources/contrastchecker

Typography

Type Scale

Builds a consistent heading scale so your font sizes stop being arbitrary.

typescale.com

Illustration

unDraw

Free illustrations you can recolour to your brand before downloading them.

undraw.co

Images

Squoosh

Compress images in the browser and see the quality loss before you commit to it.

squoosh.app

Backgrounds

Haikei

Generates SVG blobs, waves and gradients for hero sections in a few clicks.

haikei.app

Design tool

Figma

Even if you never draw in it, you will need it to open what real designers send you.

figma.com

If you only use two, make them the contrast checker and the type scale: they fix the problems users actually notice.

Need it built, not just chosen?

Web apps, APIs, infrastructure and interfaces. Freelance from Barcelona, working with clients anywhere.

Get in touch


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *