Unschärfe- und Graustufentest

Methode // Testen und Prüfen

Sie kennen Ihren Entwurf zu gut.

Was sieht jemand, der ihn zum ersten Mal sieht?

Unscharf und grau bleibt nur, was Gewicht hat.

Ohne lesbaren Text und ohne Farbe zählen Größe, Helligkeit, Fläche und Position. Das ist Ihre Hierarchie.

Wer einen Entwurf gebaut hat, kennt jedes Element. Man liest die Headline, weil man weiß, dass sie da ist, und findet den Button, weil man ihn selbst gesetzt hat. Was ein fremder Blick zuerst sieht, kann man am eigenen Entwurf kaum noch beurteilen.

Der Test nimmt dem Auge die Details: Ohne lesbaren Text und ohne Farbe bleibt nur, was wirklich Gewicht hat. Größe, Helligkeit, Fläche, Position. Genau das bestimmt die Hierarchie.

Die Methode verbindet zwei Prüfungen: unscharf (Was hat Gewicht, wenn man nichts lesen kann?) und grau (Trägt die Hierarchie auch ohne Farbe? Farben gleicher Helligkeit verschmelzen in Grau, siehe Farbe und Lesbarkeit).

Hintergrund

Der Unschärfetest ist eine alte Praxis aus Grafikdesign und Malerei: Augen zusammenkneifen (»squint test«) oder ein paar Schritte zurücktreten. Wathan und Schoger empfehlen in »Refactoring UI« (2018, Kapitel »Starting from Scratch«), zuerst in Graustufen zu gestalten: Wer Hierarchie ohne Farbe hinbekommt, braucht Farbe nur noch als Ergänzung. Der Graustufenschritt ist derselbe wie in der Methode Kontrast prüfen.

Scharf und farbig de.duolingo.com, Screenshot 2026 — Scharf und farbig
de.duolingo.com, Screenshot 2026

Unscharf und grau

Startseite von Duolingo, unscharf und in Graustufen

1. Illustration

2. Button »Anfangen«

3. Headline

Ziel: anfangen. Der Button trägt, aber vor allem über Farbe.

In fünf Schritten

1. Screenshot: ganzer Screen, echte Inhalte

2. Unscharf machen: bis kein Text mehr lesbar ist

3. Grau stellen: Farbe weg, Helligkeit bleibt

4. Reihenfolge notieren: Was sehen Sie zuerst, als Zweites, als Drittes?

5. Abgleichen und korrigieren: Passt das zum Ziel? Dann erneut testen.

Werkzeuge

Schritt	In Figma	Ohne Werkzeug
Unscharf	Effekt »Layer Blur«, etwa 8 bis 16	Augen zusammenkneifen, zurücktreten
Grau	schwarze Fläche, Ebenenmodus »Color«	Mac: Bedienungshilfen, Farbfilter, Graustufen

1. Screenshot: der ganze Screen in Originalgröße, mit echten Inhalten, nicht mit Lorem ipsum. Bilder gehören dazu, sie verändern die Hierarchie oft am stärksten.

2. Unscharf machen: so stark, dass man keinen Text mehr lesen kann. In Figma: Screenshot oder Frame kopieren, Effekt »Layer Blur«, Wert etwa 8 bis 16. Ohne Werkzeug: Augen zusammenkneifen oder zwei, drei Meter zurücktreten.

3. Grau stellen: In Figma ein schwarzes Rechteck mit dem Ebenenmodus »Color« über den Frame legen (wie bei Kontrast prüfen). Am Mac für den ganzen Bildschirm: Systemeinstellungen, Bedienungshilfen, Anzeige, Farbfilter, Graustufen.

4. Reihenfolge notieren: 1, 2, 3. Was sehen Sie zuerst? Besser noch: jemand anderen fragen, der den Entwurf nicht kennt.

5. Abgleichen und korrigieren: Passt die Reihenfolge zum Gestaltungsziel? Wenn nicht, mit Größe, Helligkeit, Weißraum und Position nachsteuern. Oft reicht es, das Konkurrierende zurückzunehmen (Betonen durch Zurücknehmen). Danach erneut testen.

Und jetzt Sie.

Drei Screens, zu zweit, zehn Minuten

Screenshot, unscharf und in Graustufen — Screen A: Was sehen Sie zuerst, als Zweites, als Drittes?

Auflösung

Jetzt scharf und in Farbe. Stimmt Ihre Reihenfolge? Was will die Seite, und kommt das an?

Screen A: Stimmt Ihre Reihenfolge? Und passt sie zum Ziel der Seite? netflix.com/de, Screenshot 2026 — Screen A: Stimmt Ihre Reihenfolge? Und passt sie zum Ziel der Seite?
netflix.com/de, Screenshot 2026

Screen B: Stimmt Ihre Reihenfolge? Und passt sie zum Ziel der Seite? ikea.com/de, Screenshot 2026 — Screen B: Stimmt Ihre Reihenfolge? Und passt sie zum Ziel der Seite?
ikea.com/de, Screenshot 2026

Screen C: Stimmt Ihre Reihenfolge? Und passt sie zum Ziel der Seite? th-koeln.de, Screenshot 2026 — Screen C: Stimmt Ihre Reihenfolge? Und passt sie zum Ziel der Seite?
th-koeln.de, Screenshot 2026

Und Ihr eigener Entwurf?

Testen Sie Ihr Ergebnis aus dem Workshop. Am besten mit jemandem, der es noch nicht kennt.

Mini-Übung (ca. 10 Minuten)

Drei Screens, erst unscharf und grau. Zu zweit für jeden Screen die Rangfolge 1, 2, 3 notieren, je etwa eine Minute. Danach die Auflösung scharf und in Farbe. Diskussion: Was ist das Ziel der Seite? Passt die Rangfolge dazu?

Erwartbar (aus dem eigenen Test, bitte live gegenprüfen):

A, Netflix: 1. Headline, 2. Eingabe und Button, 3. Login oben rechts. Das dunkle Plakatraster tritt zurück. Ziel ist die Anmeldung, das passt. Der rote Button verliert in Grau deutlich, hier trägt die Headline.
B, IKEA: 1. das große Foto links, 2. die dunklen Teaser rechts, 3. die Headline »Willkommen«. Die Fotos dominieren. Gewollt? Für einen Shop, der inspirieren will, vielleicht ja.
C, TH Köln: 1. das dunkle Foto im Slider, 2. die Kästen darunter, 3. Logo und Navigation. Die farbigen Kästen (Rot, Pink) verlieren in Grau ihre Kraft und konkurrieren miteinander. Gute Diskussion: Was soll man auf der Hochschulseite zuerst sehen?

Alternative: Statt der drei Screens das eigene Ergebnis aus dem letzten Workshop testen und mit der Nachbarin oder dem Nachbarn tauschen.

Typische Fehler

Zu wenig Unschärfe: Wer noch lesen kann, sieht nicht

Den eigenen Entwurf im Kopf mitlesen, statt jemand anderen zu fragen

Fotos übersehen: Große Bilder schlagen fast jede Headline

Nur unscharf, nicht grau: Hierarchie, die nur über Farbe läuft, bleibt unentdeckt

Reihenfolge notieren, aber nicht mit dem Ziel abgleichen

Nur einmal testen, ganz am Ende

Wo die Methode wiederkommt

Im Workshop: jedes Ergebnis vor dem Upload

Im Crit: »Was sehen Sie unscharf zuerst?«

Im Projekt: jeder Screen, vor allem Startseite und Formulare

In Typografie und Layout: Lesestufen, Grauwert, Gleichgewicht

Merksatz

Unscharf und grau: Was dann noch zuerst auffällt, ist Ihre Hierarchie. Passt sie zum Ziel? Siehe Hierarchie und Kontrast prüfen.

Danke für's Mitmachen

https://christiannoss.de