Entwicklung & Design

Die 7 goldenen Regeln des UI-Designs

Seite 2 / 3

Regel 4: Lerne, wie man Text auf Bilder legt

Es gibt nur wenige Arten, wie man Text zuverlässig und schön über ein Bild laufen lässt. Hier sind fünf – und eine Bonus-Methode.

Wenn du ein guter UI-Designer sein willst, solltest du lernen, wie du Text ansprechend über ein Bild legen kannst. Eine Sache, die jeder gute UI-Designer gut macht und jeder schlechte abgrundtief schlecht – oder eben bleiben lässt. In diesem Fall kannst du nach diesem Absatz erst mal die Beine hochlegen.

Methode Null: Schreib den Text direkt auf das Bild

Ich zögere, das auch nur zu erwähnen, aber es ist technisch möglich, Text so auf ein Bild zu schreiben, dass es okay aussieht.

Otter Surfboards. Hip und Instagram-like, aber ein bisschen schwierig zu entziffern. Screenhot http://www.ottersurfboards.co.uk/

Otter Surfboards. Hip und Instagram-like, aber ein bisschen schwierig zu entziffern. (Screenshot: Otter Surfboards)

Es gibt alle möglichen Probleme und Fallstricke bei dieser Methode:

  1. Das Bild sollte dunkel sein und nicht zu viele kontrastreiche Kanten besitzen.
  2. Der Text muss weiß sein – oder finde ein Gegenbeispiel, das clean und simpel ist. Wirklich. Nur eins.
  3. Teste es mit jeder Bildschirm- und Fenstergröße, um sicherzugehen, dass es lesbar ist.

Klappt alles? Super. Wenn du dein Hintergrundbild oder den Text jetzt nie mehr veränderst, ist ja alles klar.

Ich glaube nicht, dass ich jemals bei einem professionellen Projekt Text direkt auf einem Bild gesetzt habe, und es ist hier wirklich nur als „Kontroll“-Methode erwähnt. Dennoch kann man damit sehr coole Effekte erzielen – aber sei vorsichtig.

Die Aquatilis-Website – auf jeden Fall einen Besuch wert.

Die Aquatilis-Website – auf jeden Fall einen Besuch wert. (Screenshot: Aquatilis)

Methode 1: Überlagere das ganze Bild

Das Bild als Hintergrund zu verwenden, ist vielleicht die einfachste Methode, Text auf ein Bild zu legen. Wenn das Original-Bild nicht dunkel genug ist, kannst du es vollflächig mit einem transparenten Schwarz-Layer überlagern.

Hier ist ein modernes Start-Bild mit einem dunklen Overlay.

Die Website von Upstart hat einen 35-Prozent-transparenten Schwarzfilter. (Screenshot: Upstart)

Die Website von Upstart hat einen 35-Prozent-transparenten Schwarzfilter. (Screenshot: Upstart)

Wenn du Firebug öffnest und den Overlay abschaltest, siehst du, dass das Original-Bild zu hell war und zu viele Kontraste besaß, um den Text lesbar zu machen. Aber mit dem dunklen Overlay ist es kein Problem.

Diese Methode funktioniert auch super mit Thumbnails und kleinen Bildern.

Thumbnails der Seite charity:water. (Screenshot: charity:water)

Thumbnails der Seite charity:water. (Screenshot: charity:water)

Und obwohl ein schwarzer Overlay am einfachsten und universellsten ist, lassen sich sicher auch farbige Overlays finden.

Methode 2: Text-in-a-Box

Das ist kinderleicht und sehr zuverlässig. Zieh ein leicht transparentes schwarzes Rechteck auf und platziere darauf ein wenig weißen Text. Wenn der Overlay ausreichend blickdicht ist, kannst du nahezu jedes Bild darunter setzen und der Text bleibt lesbar.

„Modern Honolulu“-iPhone-Konzept von Miguel Olivia Márquez

„Modern Honolulu“-iPhone-Konzept von Miguel Olivia Márquez (Foto: Miguel Olvia Márquez)

Du kannst auch ein wenig Farbe ins Spiel bringen – aber sei wie immer vernünftig.

Now in Pink. Von Mark Conlan. (Screenshot: Mark Colan)

Now in Pink. Von Mark Conlan. (Screenshot: Mark Colan)

Methode 3: Zeichne das Bild weich

Ein überraschend guter Weg, überlagernden Text lesbar zu gestalten ist es, Teile des darunter liegenden Bilds weichzuzeichnen.

Jede Menge weiche Hintergrundbilder auf Snapguide. Beachte, dass die weichgezeichneten Bereiche auch dunkler gemacht wurden. (Screenshot: Snapguide)

Jede Menge weiche Hintergrundbilder auf Snapguide. Beachte, dass die weichgezeichneten Bereiche auch dunkler gemacht wurden. (Screenshot: Snapguide)

iOS7 hat weiche Hintergrundbilder ganz nach vorne gebracht, obwohl auch Windows Vista es für tolle Effekte eingesetzt hat.

Weiche Hintergrundbilder kennen wir vor allem von iOS7, aber auch bei Vista wurde dieses Feature schon eingesetzt. (Schreenshots: Erik D. Kennedy)

Weiche Hintergrundbilder kennen wir vor allem von iOS7, aber auch bei Vista wurde dieses Feature schon eingesetzt. (Screenshots: Erik D. Kennedy)

Du kannst auch den Bereich außerhalb des Bildfokus weichzeichnen. Aber sei auf der Hut – diese Methode ist nicht so dynamisch. Wenn dein Bild jemals ausgetauscht wird, musst du sichergehen, dass sich dein Text immer über den weichgezeichneten Bereichen befindet.

Teehan + Lax (Screenshot: Teehan + Lax)

Teehan + Lax (Screenshot: Teehan + Lax)

Versuch einfach mal, die Unterzeile im folgenden Screenshot zu entziffern.

Bei aller Liebe – wer hat das freigegeben?

Bei aller Liebe – wer hat das freigegeben? (Screenshot: Google Wallet)

Methode 5: Floor Fade

„Floor Fade“ bedeutet, dass du ein Bild verwendest, das allmählich nach unten ins Schwarz abblendet, und dann darauf weißen Text schreibst. Das ist eine geniale Methode – ich habe keinen Schimmer, ob das vor Medium jemand eingesetzt hat, aber dort habe ich es zuerst gesehen.

Medium wendet einen Trick an, damit die weiße Schrift auf den Kollektionsbildern lesbar bleibt. (Screenshot: Medium)

Medium wendet einen Trick an, damit die weiße Schrift auf den Kollektionsbildern lesbar bleibt. (Screenshot: Medium)

Für den zufälligen Betrachter sieht es so aus, als würden die Medium-Kollektionen von mit weißem Text überklebten Bildern angeteasert – aber das stimmt nicht! Alle Bilder haben einen leichten Verlauf von der Mitte (schwarz mit 0 Prozent Deckkraft) zum unteren Rand (schwarz mit geschätzten 20 Prozent Deckkraft). Schwer zu sehen, aber definitiv vorhanden und definitiv die Lesbarkeit verbessernd.

Beachte auch, dass die Medium-Kollektions-Thumbnails einen leichten Textschatten verwenden, um die Lesbarkeit noch weiter zu verbessern. Diese Leute haben’s drauf!

Unter dem Strich kann Medium so beliebigen Text auf ein beliebiges Bild legen und erzielt ein lesbares Ergebnis.

Oh, und noch was – warum blendet das Bild gerade zum unteren Bildrand aus? Die Antwort darauf findest du unter Regel Nr. 1 – Licht kommt immer von oben. Damit es für deine Augen möglichst natürlich aussieht, muss das Bild unten etwas dunkler sein, genau wie alles andere, was wir sehen.

Für Fortgeschrittene: Misch das Weichzeichnen mit dem Floor Fade – der „Floor Blur“.

Der „Floor Blur“ auf SnapGuide. Look, Mom, no Overlay!

Der „Floor Blur“ auf SnapGuide. Look, Mom, no Overlay! (Screenshot: Snapguide)

Bonus-Methode: Diffusor

Wie schafft es das Elastica Blog, stets eine lesbare Headline auf einem dynamischen Bild zu platzieren? Die Bilder sind:

  • nicht wirklich dunkel
  • kontrastreich

Es ist schon schwierig, zu erklären, warum der Text so gut zu lesen ist. Schau mal hier:

Trotz kontrastreicher Hintergrundbilder ist die Überschrift der Blogbeiträge auf Elastica stets lesbar. (Screenshots: Elastica)

Trotz kontrastreicher Hintergrundbilder ist die Überschrift der Blogbeiträge auf Elastica stets lesbar. (Screenshots: Elastica)

Die Antwort lautet: der Diffusor!

Ein Diffusor ist eine Apparatur fürs Fotografieren, die das Licht weicher macht. Heutzutage ist es auch eine Technik des Visual Designs, um ein Bild abzusoften, damit überlagernder Text lesbarer wird.

Wenn wir mit dem Browser aus der Ansicht des Elastica Blogs herauszoomen, können wir besser erkennen, was dort geschieht.

Das blaue Hintergrundbild verrät, wie die Macher von Elastica die gute Lesbarkeit des Textes garantieren.

Das blaue Hintergrundbild verrät, wie die Macher von Elastica die gute Lesbarkeit des Textes garantieren. (Screenshot: Elastica)

Um die Headline „145,000 Salesforce Users Come out to Celebrate …“ herum wurde ein Rechteck mit einem Deckkraft-Verlauf gelegt. Man sieht es besser vor dem durchgehend blauen Hintergrund als bei den kontraststarken Fotos weiter oben.

Dies ist vermutlich die subtilste Art, zuverlässig Text auf Bildern zu platzieren, und ich habe das noch nie woanders gesehen (aber es ist sehr raffiniert). Merk’s dir also. Du weißt nie, wofür du es mal brauchen kannst.

Regel 5: Lass Text auf- und ab-poppen

Text so zu gestalten, dass er schön und angemessen wirkt, ist oft eine Sache von kontrastierendem Styling – zum Beispiel größer, aber dünner.

Meiner Meinung nach ist eine der härtesten Disziplinen beim Erstellen einer schönen Bedienoberfläche das Styling von Text – und das sage ich nicht, weil ich mich mit den verschiedenen Möglichkeiten nicht auskenne. Wenn du die Grundschule geschafft hast, dann hast du bestimmt schon jede existierende Methode verwendet, Aufmerksamkeit auf oder weg von einem Text zu lenken:

  • Schriftgröße (größer oder kleiner)
  • Farbe (mehr Kontrast oder weniger; helle Farben ziehen den Blick auf sich)
  • Schriftstärke (fetter oder dünner)
  • Groß-/Kleinschreibung (kleinbuchstaben, GROSSBUCHSTABEN und Title Case)
  • Schriftlage (kursiv)
  • Zeichenabstand (oder – für die Fachleute – Spatien!)
  • Außenabstand (technisch gesehen keine Eigenschaft von Text, aber man kann ihn verwenden, um Aufmerksamkeit zu erzeugen, also passt er auf die Liste)
Massiver Gebrauch von Farbe und Großschreibung. Von @workjons Kind. Folge ihm auf Twitter, seine Texte über Design sind fantastisch.

Massiver Gebrauch von Farbe und Großschreibung. Von @workjons Kind. Folge ihm auf Twitter, seine Texte über Design sind fantastisch. (Foto: @workjon)

Es gibt noch ein paar andere Möglichkeiten, mit denen man die Aufmerksamkeit auf sich ziehen kann, die aber nicht wirklich verwendet oder empfohlen werden:

  • Unterstreichungen. Damit markiert man heutzutage Links und man sollte nicht versuchen, damit irgendetwas anderes anzudeuten, wenn ihr mich fragt.
  • Hintergrundfarbe. Nicht so üblich, aber die Website von 37signals hat das eine Weile als Link-Style verwendet.
  • Durchstreichungen. Weiche zurück, du 90er-Jahre CSS-Zauberer!

Wenn ich für ein Textelement mal nicht das richtige Styling finden kann, dann liegt das meiner Erfahrung nach nicht daran, dass ich vergessen habe, Kapitälchen oder eine dunklere Farbe auszuprobieren, sondern daran, dass die beste Lösung meist eine Kombination von gegensätzlichen Eigenschaften ist.

Auf-poppen und ab-poppen

Man kann alle Arten von Textstyling in zwei Kategorien aufteilen:

  • Styles, die die Sichtbarkeit des Textes erhöhen. Groß, fett, Großbuchstaben etc.
  • Styles, die die Sichtbarkeit des Textes vermindern. Klein, wenig Kontrast, wenig Abstand etc.

Wir werden sie „Auf-pop“- und „Ab-pop“-Styles nennen, zu Ehren des Lieblingsadjektivs von Designern in puncto UI-Design. Wir sagen nicht „visuelles Gewicht“, weil das langweilig ist.

Titelzeile der Fallstudie von hugeinc.com.

Titelzeile der Fallstudie von hugeinc.com. (Screenshot: hugeinc.com)

Viel Auf-poppen passiert in der Überschrift von „Material Design“. Sie ist groß. Sie hat starken Kontrast. Sie ist sehr fett.

Fußzeile der Fallstudie von hugeinc.com. (Screenshot: hugeinc.com)

Fußzeile der Fallstudie von hugeinc.com. (Screenshot: hugeinc.com)

Die Elemente am Fuß der Seite sind im Gegensatz dazu, ab-gepoppt. Sie sind klein, kontrastarm und weniger fett.

Jetzt kommt der wichtigste Teil.

Seitentitel sind die einzigen Elemente, die immer Auf-pop-Styles brauchen. Für alles andere brauchst du Auf- und Ab-poppen.

Wenn ein Seitenelement hervorgehoben werden soll, verwende Auf-pop- und Ab-pop-Stile. Damit verhinderst du, dass die Dinge aufdringlich werden, aber gibst unterschiedlichen Elementen das visuelle Gewicht, das sie verlangen.

Das Gleichgewicht von visuellem Stil (Screenshot: Blu Homes)

Das Gleichgewicht von visuellem Stil (Screenshot: Blu Homes)

Die makellos designte Website von Blu Homes hat große Überschriften, aber das hervorgehobene Wort ist kleingeschrieben – zu viel Betonung würde überladen wirken.

7rules_bluhomes2

Visuell ansprechend durch ein Wechselspiel von Betonung und Zurückhaltung. (Screenshot: Blu Homes)

Die Ziffern auf der Blu-Homes-Site ziehen deinen Blick mit ihrer Größe, Farbe und Anordnung an – aber achte mal darauf, wie sie zugleich abgewertet werden mit einer sehr dünnen Schriftstärke und einer kontrastärmeren Farbe als das dunkle Grau darunter. Die kleinen Labels unter den Zahlen sind hingegen zwar grau und klein, aber dafür großgeschrieben und sehr fett.

Es ist alles eine Frage der Balance.

Contents Magazine spielt gekonnt mit dem Auf und Ab von Stilen. (Screenshot: Content Magazine)

Contents Magazine spielt gekonnt mit dem Auf und Ab von Stilen. (Screenshot: Content Magazine)

Contents Magazine ist ein gutes Anschauungsobjekt in Sachen Auf- und Ab-poppen.

  • Die Artikel-Überschriften sind normalerweise die einzigen nicht-kursiven Seitenelemente. In diesem Fall erregt gerade das Nicht-kursiv-Sein die Aufmerksamkeit (vor allem in Kombination mit der fetten Schriftstärke).
  • Der Autorenname in der Unterzeile ist fettgeschrieben – das setzt ihn vom normalgeschriebenen Wort „by“ ab
  • Das kleine, konstrastarme „ALREADY OUT“ steht separat – aber durch die Großbuchstaben, den großen Zeichen- und Außenabstand fällt es ins Auge, sobald man danach sucht.

Styles für Auswahl und Hover

Ausgewählte Elemente und Hover-Effekte sind eine weitere Runde im gleichen Spiel – allerdings eine etwas kompliziertere. Normalerweise führt eine Änderung der Schriftgröße oder -stärke dazu, dass sich die Fläche verändert, die der Text einnimmt, was zu unschönen, größenverändernden Hover-Effekten führen kann.

Welche Möglichkeiten bleiben dann?

  • Schriftfarbe
  • Hintergrundfarbe
  • Schatten
  • Unterstreichungen
  • Leichte Animationen – Anhebung, Absenkung etc.

Eine brauchbare Methode: Versuch mal, die weißen Elemente farbig zu machen oder die farbigen Elemente weiß, aber den Hintergrund darunter abzudunkeln.

Das ausgewählte Icon ändert sich von farbig zu weiß, behält aber seinen starken Kontrast zum Hintergrund. (Screenshot (Erik D. Kennedy)

Das ausgewählte Icon ändert sich von farbig zu weiß, behält aber seinen starken Kontrast zum Hintergrund. (Screenshot (Erik D. Kennedy)

Mein Fazit: Text-Styling ist schwierig. Aber jedes Mal, wenn ich dachte „Vielleicht kann dieser Text einfach nicht gut aussehen“, lag ich falsch. Um ihn besser zu machen, musste ich nur weiter rumprobieren.

Also kann ich dir zum Trost nur dies mitgeben: Wenn es nicht gut aussieht, dann mach dich nicht verrückt – es könnte, wenn du besser wärst. Aber hey, lass uns weiter üben und uns verbessern.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

21 Kommentare
Saenic
Saenic

Direkt mal in Pocket gespeichert, hier kann man immer mal nachschlagen :)
Ich bin auch ein Entwickler, der sich das Design selber beigebracht bzw. von anderen „inspiriren lassen“ hat. Wenn ich etwas entwickle, dann schaue ich zuerst auf das GUI, denn was anderes werden die Benutzer nicht sehen.

Antworten
kelkes
kelkes

Danke für den Artikel! Als Entwickler versuch ich mir schon länger vernünftiges UI/UX beizubringen damit ich nicht ständig auf einen Designer angewiesen bin und vor allem die guten Designer von den Schlechten trennen kann…

Antworten
Alex Nowak

Super ausführlich behandelt und gut geschrieben. Vielen Dank dafür!

Antworten
Ich
Ich

Vielen Dank für diesen tollen Artikel!!

Antworten
dazzle
dazzle

Schöner Artikel.

Ich finde gut, dass du dich nicht als Voll-Profi ausgibst, sondern z.B. zugibst, selbst Elemente zu klauen. Und ich habe bisher nur die erste Seite gelesen, aber mir ist kein Rechtschreibfehler aufgefallen. Finde ich beides für t3n-Verhältnisse sehr bemerkenswert.

Antworten
kujulian
kujulian

Der Artikel ist ganz ganz groß! Super cool, locker geschrieben und kein mahnender Besserwisser-Zeigefinger der die ganze Zeit auf angebliche Ästhetikgrundlagen der Gestaltung hinweist. Meiner Meinung nach sollte ein erfolgreicher Guide für Design-Richtlinien genau so geschrieben sein, wie dieser hier ist: Nach Gefühl. Denn im Endeffekt kommt es bei der Betrachtung ja genau darauf an. Für mich hat der Artikel jedenfalls einen evernote-Platz ergattert. Weiter so!

Antworten
Steven

Da gebe ich kujulian Recht! Der Artikel ist wirklich schön und locker geschrieben. So bekommt man Lust auf’s Lesen.

Antworten
John Doe

Danke für den Artikel Erik. Hinweis: Deine E-Mail Adresse ist nicht richtig verlinkt ganz am Ende.

Antworten
Marcus Woy

Ja ist denn heut schon weihnachten??
Danke für das lesbare Geschenk :)

Antworten
Chris
Chris

Was für ein guter guter Artikel, so gut, dass dies meiner aller erster Kommentar unter einem Artikel ist. Danke!

Antworten
Werner
Werner

Ein verdammt guter Artikel – inhaltlich ein absoluter Gewinn und sprachlich eine Freude. Ich bin seit 25 Jahren freiberuflicher Designer sowie Dozent für Grafikdesign und habe bisher noch nie das Thema UI und Gestaltung im allgemeinen so gut und kurzweilig auf den Punkt gebracht gelesen.

Antworten
andi

muss es statt
‚dass völlig graue Flächen in der realen Welt nie vorkommen‘
nicht
‚dass völlig schwarze Flächen in der realen Welt nie vorkommen‘
heißen?

Grüße

Antworten
Srrs
Srrs

Grandioser Artikel! Ein Artikel der einen auch mal zum Lachen bringt. Wunderbar! Vielen Dank.

Antworten
AdamHN
AdamHN

Ganz schönes Loblied…Muss ja wirklich wenig Talent haben

Antworten
AdamHN
AdamHN

Keine Use Cases, Task Analyse, Wire Frames, Informationsarchitektur, Animation, Transition und mentale Modelle (Grad beim angesprochenen FlatDesign). Anordnung, Begründung für das Aussehen gibt es nicht. Zum Zeitgeist imitieren reicht das aber

Antworten
ThomasLedermann
ThomasLedermann

Nicht nur für UI Design hilfreich! Danke für den tollen Beitrag und die klaren Statements.

Antworten
SYD
SYD

An alle, die dankbar für den Artikel sind: 1) Ihr tut mir ein bisschen leid und 2) Gerade Regel Nr. 7 „Alles nur geklaut“ führt dazu, dass Vieles gleich aussieht. Das Gros hat eben keine (tiefgründige) Ahnung. Wahrscheinlich gibt es deswegen so viele schlechte UIs – damit meine ich nicht ästhetisch schlecht – wie es grauenhaft „programmierte“ Apps oder Websites gibt. Es ist und bleibt Gesetz: 1) form follows function UND 2) Schuster, bleib bei deinen Leisten. Eins noch zur Aussage „[…] eigenen Stil finden und neue Trends erfinden.“: Nur wer die Regeln kennt, kann sie brechen. Kinder, Kinder …

Antworten
Samarpan

Super toller Artikel, vielen herzlichen Dank für die Weitergabe von so viel Erfahrung. Mir wurden viele Fragen endlich beantwortet.

Antworten
Iris
Iris

Super interessant, danke! Wir haben die Trends von 2015 was Webdesign betrifft hier zusammengefasst: https://www.1min30.com/de/internetseitenerstellung/webdesign-trends-fur-2015-teil-12-18113

Antworten
Kürsat Cifci
Kürsat Cifci

Unglaublich!!! Dieser Artikel ist so genial!!! Vielen lieben Dank fürs übersetzen! Ich würde mich sehr freuen, wenn ihr öfters solche Inhalte produziert.

Antworten
muschko
muschko

Ein wirklich guter Artikel! Danke!

Falls du weitere Infos für die besten Tools bekommen möchtest, lies doch hier nach:
https://medium.com/@muschko/freelance-ui-ux-designer-diese-tools-solltest-du-nutzen-59eb715ceb73

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.