Design-Ressourcen, die jeder Entwickler kennen sollte

Viele Projekte haben keinen Designer. Das ist keine Entschuldigung für eine Oberfläche, die nach Zufall aussieht.

Diese Werkzeuge decken die Entscheidungen ab, die meist schiefgehen: Farbe, Kontrast, Abstände, Bilder und Typo-Skala.

Farbe

Realtime Colors

Teste eine Palette an einem echten Layout statt an fünf nichtssagenden Quadraten.

realtimecolors.com

Farbe

Coolors

Paletten schnell erzeugen und fixieren, dann als CSS-Variablen exportieren.

coolors.co

Barrierefreiheit

WebAIM Contrast Checker

Zwei Minuten hier verhindern das Grau auf Grau, das jedes Audit reißt.

webaim.org/resources/contrastchecker

Typografie

Type Scale

Baut eine konsistente Überschriftenskala, damit Schriftgrößen nicht mehr willkürlich sind.

typescale.com

Illustration

unDraw

Kostenlose Illustrationen, die du vor dem Download in deiner Markenfarbe einfärbst.

undraw.co

Bilder

Squoosh

Bilder im Browser komprimieren und den Qualitätsverlust sehen, bevor du ihn akzeptierst.

squoosh.app

Hintergründe

Haikei

Erzeugt SVG-Blobs, Wellen und Verläufe für Hero-Bereiche in wenigen Klicks.

haikei.app

Design-Tool

Figma

Auch wenn du nie darin zeichnest: Du brauchst es, um zu öffnen, was echte Designer schicken.

figma.com

Wenn nur zwei, dann Kontrastprüfer und Typo-Skala: Sie beheben die Probleme, die Nutzer wirklich bemerken.

Soll es gebaut werden, nicht nur ausgewählt?

Web-Apps, APIs, Infrastruktur und Interfaces. Freelance aus Barcelona, Kunden weltweit.

Kontakt aufnehmen


Kommentare

Leave a Reply

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