Gelb und Webdesign: 20 Beispiele und Tipps

Heute geht es um die Farbe Gelb. Dieser Artikel erklärt ihre Bedeutung und Verwendung. Außerdem enthält er 20 inspirierende Beispiele.

  • von Lennart Prange

Heute soll es endlich mal wieder um Farbe gehen. Auch in den nächsten Wochen möchte ich das Thema gerne öfters aufgreifen, da ich finde, dass man an dieser Stelle im Web noch vieles verändern/verschönern könnte.

Für diesen Beitrag habe ich mir eine Farbe ausgesucht, die ich ehrlich gesagt eher selten im Internet sehe: Gelb. Ich werde euch nicht nur mit vielen Beispielen versorgen, sondern auch die Bedeutung der Farbe, ihre Verwendung und mehr mit euch besprechen.

Viel Spaß mit dem Beitrag. Ich freue mich natürlich wie immer sehr über Kommentare.

Gelb

Gelb ist eine Farbe (bis jetzt gibt es hoffentlich keinen Widerspruch?!) mit einer hohen Eigenhelligkeit. Deswegen funktioniert sie nicht als Schriftfarbe auf weißem Grund. Mit einem schwarzen Hintergrund ist der Kontrast dafür umso besser.

Gelb als Signalfarbe auf schwarzem Hintergrund

Gelb zieht die Aufmerksamkeit auf sich, das erleben wir auch immer wieder im Alltag: Telefonzellen sind gelb, Briefkästen und Taxis auch. Dieser Effekt ist sehr wichtig und ein cleverer Webdesigner kann damit arbeiten.

Sehr gefährlich ist die Veränderung des neutralen Gelbes (#ffff00, oder?). Bereits kleine Modifizierungen können die Farbe komplett wandeln, sie zum Beispiel ins Giftig-Grüne kippen lassen. An dieser Stelle muss man sehr vorsichtig sein. Es kommt noch erschwerend hinzu, dass nicht alle Monitore Farben gleich anzeigen. Ein winziger Blaustich kann schon verheerend sein und das Gelb richtig eklig werden lassen.

Bedeutung der Farbe

Ich gehe an dieser Stelle davon aus, dass es sich um ein einigermaßen „anständiges“ Gelb ohne großartige Verunreinigungen handelt.

Gelb ist eine optimistische Farbe. Viele verbinden sie mit der Sonne, Sonnenblumen, Gold und Optimismus. Sie ist sehr angenehm und trotz ihrer Signalwirkung nicht zu aufdringlich. Als Farbe des Lichtes und des Stroms geht von ihr natürlich viel Energie aus.

Teilweise wird Gelb auch als die Farbe des Neides und der Gier gesehen. Außerdem es auch störend sein und sehr bedrückend wirken.

Verwendung

Gelb ist sehr hell und deswegen auf Dauer nicht unbedingt angenehm für das Auge, falls es großflächig verwendet wird. Ich würde also davon abraten, es als Hintergrundfarbe für eine content-intensive Webseite zu verwenden, auf der Besucher längere Zeiten lesen sollen. Es ist auch einfach zu ablenkend. Die Beispiele unten werden zeigen, dass Gelb auch als Hintergrund funktioniert. Aber wenn ihr euch auf diesen Seiten längere Zeit aufhaltet, wird die anfängliche Begeisterung bestimmt schnell verfliegen. Jedenfalls war es bei mir so.

Da Gelb sich aber wunderbar abhebt und das Auge anzieht, eignet es sich hervorragend, um wichtige Elemente einer Webseite hervorzuheben. Gelb ist für mich persönlich außerdem ein „Mittelding“ zwischen dem sehr kalten und ruhigen Blau und dem extrem aktiven und aufdringlichen Rot. Es muss nicht so sparsam wie Rot verwendet werden, sollte meiner Meinung nach aber auch nicht so großflächig wie Blau benutzt werden.

Ich kann mich nicht daran erinnern, Gelb je in einem Design benutzt zu haben, habe mir jetzt aber vorgenommen, es zu probieren. Zum Beispiel als Link und Button Farbe. Vielleicht auch für Überschriften o.ä. Es eignet sich einfach sehr schön dafür, Akzente zu setzen und ist nicht überall (so wie Rot und Blau).

Beispiele

http://www.splitcolors.com/

http://ryankeiser.net/

http://kettlenyc.com/

http://helbbo.com/

http://www.helveticons.ch/

http://foodtease.com/

http://ismaelburciaga.com/

http://www.roome.co.uk/

http://www.creativespark.co.uk/

http://www.theteasr.com/articles/the_awkward_introduction

http://www.grinstead.me/

http://www.madebywater.com/

http://www.projektowanie.org/

http://riotindustries.com/

http://www.wilkintie.com/

http://www.creativeunited.dk/

http://www.garethdickey.com/

http://www.heckhausen.net/

http://maxtillich.com/

http://www.bennyroth.de/

11 Kommentare

  1. Mediaroo
    12. Oktober 2010 um 08:12 Uhr

    Stimmt, gelbe Webseiten sieht man relativ selten. Find’s auch eher gewöhnungsbedürftig fürs Auge 🙂
    Wenn der Farbton dann in ein dunkleres Gelb und fast schon Orange (so wie ungefähr beim mittleren Beispiel) geht ist’s doch angenehmer für das Auge…

    Trotzdem sehr schöne Inspirationen dabei 🙂

    lg

  2. Christian
    12. Oktober 2010 um 10:56 Uhr

    Danke für den spannenden Beitrag. Was mir zu gelb bei Fotos immer wieder sofort einfällt ist das klassische Raps-Foto vor blauem Himmel. Gerade im Hinblick auf Optimismus vereinigt so ein Foto alles in sich, was Du genannt hast. Sommer, Sonne, Wärme.
    Zum Thema Telefonzelle, da erlaube ich mir mal wie folgt zu verlinken: http://rohweder.org/foto/2010/09/30/sos/ 🙂

  3. Icke
    13. Oktober 2010 um 09:18 Uhr

    Gute Beispiele das Gelb schön sein kann, aber auch extrem anstrengend. Was aus meiner Sicht gar nicht geht ist gelb zusammen mit blau. Und das nicht NUR weil eine liberale Partei die Kombination nutzt.

  4. Tim Heckhausen
    13. Oktober 2010 um 15:24 Uhr

    Vielen Dank, dass Du meine Seite mit als BSP aufgenommen hast. Freut mich, dass das Design gefallen findet.
    Tim

  5. Valentin
    15. Oktober 2010 um 14:31 Uhr

    Ich denke Gelb wird sehr selten benutzt weil sie zu grell ist. Ein milderes Gelb, dass daher eher in die Richtung Orange geht, gefällt mir aber sehr gut!

  6. Michael rinstead
    8. November 2010 um 17:29 Uhr

    Hi, thank you for posting my site. Can I ask which browser & OS were you using to capture the screen shot? Seems the @fontface (via Typekit) does not seem to be working!

    Thanks

    • Lennart Prange
      8. November 2010 um 17:34 Uhr

      They were taken by a tool… automatically. And I have know idea which browser he used, sorry.

  7. Luca Manning
    14. Januar 2011 um 10:48 Uhr

    Interessantes Thema! Zu viel Gelb ist nicht gut, meine ich. Zu grell lenkt bestimmt die Aufmerksamkeit auf die Webseite, aber macht auch die Augen schneller müde.

Trackbacks/Pingbacks