10 Beispiele für gute Hervorhebung

  • von Lennart Prange

hervorhebung Wisst ihr, wie man die Aufmerksamkeit der Besucher auf ein bestimmtes Element zieht? Diese 10 Webseiten zeigen, wie es geht.
Die Situation hat ein Webdesigner eigentlich bei jedem Projekt: Es gibt immer ein Element, dass besonders wichtig ist. Ein Element, dass die Nutzer sofort bemerken sollen, wenn sie auf die Seite kommen. Sei es der Jetzt kaufen Button oder ein Menüpunkt.
Es gibt verschiedene gestalterische Mittel um eben dies zu erreichen.

Kommentare und Social Bookmarks würden mich wirklich freuen. Viel Spaß mit dem Artikel.

10 Beispiele für gute Hervorhebung

Visualelixir

visualelixir

Der Webdesigner hat genau erkannt, wie man eine gute Seite erstellt. Das Art & Design fällt sofort ins Auge. Das liegt zum einen an der Größe und zum anderen auch an der Positionierung in der Mitte des Bildschirms.
Warum diese Seite dadurch gut ist? Ein Besucher erkennt sofort, wo er ist. Viele tendieren dazu, dass Logo stattdessen hervorzuheben, aber was hätte dem Besucher Visual Elixir gesagt? Nichts. Deshalb ist es genau richtig, den Zweck der Seite so hervorzuheben.

Hongkiat

hongkiat

Es ist offensichtlich, dass der Designer unbedingt erreichen will, dass der Leser seinen Artikel verbreitet. Das „Share it!“ Ist groß, Fett und mit einem Ausrufezeichen verstärkt. Nachdem die Leser am Ende des Artikels angekommen sind, scrollen sie häufig weiter zu den Kommentaren. Das Share It! fällt aber selbst beim Scrollen sehr gut auf.

KFZ Karsten Kühn

kfz-sv-kuehn

Wohin fällt euer Blick zu erst? Auf das schöne Auto? Danach registriert ihr den Menschen mit einem Klemmbrett daneben? Ich denke, dass der Designer genau das wollte. Wieder erkennt man sofort worum es bei der Website geht: Um Autos. Zugegeben, das ist noch recht vage. Hinzu kommt allerdings das Klemmbrett. Dadurch wird schon deutlich, dass es um die Kontrolle von Autos geht.

Der Porsche bricht hier aus dem Rahmen heraus und erzeugt dadurch einen 3-D Effekt. Die Farbe Gelb, welche sich komplett vom Rest der Seite unterscheidet, zieht das Auge geradezu an. Die Seite zeigt also gleich mehrere Mittel der Hervorhebung: Kontrast, Proportion und ungewöhnliche grafische Effekte.

Fliggo

fliggo

Hier wurde wieder das Mittel des Kontrastes angewendet. Der Get Started Button ist grün. Der Rest der Seite blau. Klar, dass er ins Auge fällt.

Clearspring

clearspring

Hier brauche ich nicht lange zu reden. Gutes Design. Erstens wird die blaue Box hervorgehoben. Das liegt einfach an ihrer Farbe. Die restliche Seite ist eher hell. Dann scannt das Auge schnell: Your Content. Everywhere.“ ist mit der größten Schriftgröße dargestellt. Das fällt auf. Der orange Hintergrund von Free! ist extrem auffällig. Das gleiche gilt für den grünen Button.

Glue

glue

Der mittlere Teil ist ganz klar hervorgehoben. Out of the Border Effekte und Animationen mit ständig wechselndem Hintergrund machen das Element unübersehbar. Der Text „Glue is an…“ beschreibt mal wieder den Zweck der Website und ist groß dargestellt. Er geht aber etwas unter, da die Box ihm ein wenig die Schau stiehlt.

BuzzDing

buzzding

Klar, was der Designer will: Try it und das Logo und die Beschreibung darunter stehen im Vordergrund. Die wesentlichen Informationen wurden gut hervorgehoben und mit einem kurzem Text wurde das Ganze schnell erklärt. Das ist Kommunikation im Web.

Bright Black

brightblack

Die Lichtstrahlen sind direkt in der Mitte und durch die Helligkeit fällt der Blick schnell darauf. Sie wirken wie Pfeile und leiten das Auge zum ersten Werk. Ein sehr schönes Mittel der Hervorhebung, welches ich sonst noch nirgends entdeckt habe.

Practise Cafe

practisecafe

Die Frau im Angestellten-Dress fällt ins Auge. Der Grund dafür ist, dass sie vom Content isoliert wurde. Isolation ist ein weiteres Mittel zur Hervorhebung von Elementen.

TopherMick

tophermick

Was fällt ins Auge? Richtig: Contact. Durch die sehr aggressive Farbe hebt sich der Button extrem vom Rest der Seite ab.

12 Kommentare

  1. NeX
    19. April 2009 um 20:58 Uhr

    schön erklärt. Respekt.

  2. Lennart Prange
    19. April 2009 um 21:00 Uhr

    Danke!

  3. Bernd Artmüller
    19. April 2009 um 23:04 Uhr

    danke für diese vorstellung dieser 10 websites…
    sehen richtig super aus

    mfg, bernd

  4. Ronny Graupner
    20. April 2009 um 12:34 Uhr

    Dafür das KFZ Karsten Kühn ein template ist und nur das Bild geshootet wurde gehts schon 🙂

    Linktip von mir: http://www.mariohartmann.com/

  5. Marvin
    21. April 2009 um 10:43 Uhr

    Das erste Beispiel find ich sehr gelungen. Zentriert und gute Farbgebung. Beste Bedingungen für einen vernünftigen Eyecatcher 😉

    Marvins letzter Beitrag..Ein Herz für Blogs

  6. Kevin
    24. April 2009 um 12:32 Uhr

    Klasse Beitrag!

  7. Webworker Karsten
    25. Mai 2009 um 12:09 Uhr

    Hallo, sehr gelungener kleiner Workshop. man kann beim Layouten schon flott mal de Blick für das Wichtige verlieren, sloche Beiträge helfen, den Blick zu schärfen und die Website-Usability zu verbessern.

    Webworker Karstens letzter Beitrag..Twitter Suchmaschine besser als Google?

    • Lennart Prange
      25. Mai 2009 um 15:41 Uhr

      Danke. Ich hoffe, dass der Beitrag dir geholfen hat 🙂

  8. Unique-Network
    2. Juni 2010 um 04:49 Uhr

    Ich habe selten so gute Designs gesehens. Besonders das „Fliggo“-Design gefällt mir gut. Solche Zusammenstellungen sollte es öfter im Netz geben, dann würde ich mir viel Zeit sparen, die ich auf der Suche nach Qualität vergeude.

    Bleibt zu hoffen, dass diese Toparbeiten keine Bugs in der Programmierung haben (alles schon erlebt). Wenn die Programmierung stimmt kann man aber wirklich nicht meckern.

  9. Achim
    26. August 2011 um 17:20 Uhr

    Ein paar wirklich schöne Beispiele für gutes Webdesign. Design betrifft ja nicht nur das Aussehen, mit dem Design rückt man ja, wie Ihr das auch beschrieben habt, Elemente in den Vordergrund bzw. lenkt die Blicke auf das Wesentliche.
    Kannte diese Seite noch nicht, ist jetzt gebookmarkt. 🙂

Trackbacks/Pingbacks