10 Beispiele für gute 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
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
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
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
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
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
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
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
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
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
Was fällt ins Auge? Richtig: Contact. Durch die sehr aggressive Farbe hebt sich der Button extrem vom Rest der Seite ab.
NeX
19. April 2009 um 20:58 Uhrschön erklärt. Respekt.
Lennart Prange
19. April 2009 um 21:00 UhrDanke!
Bernd Artmüller
19. April 2009 um 23:04 Uhrdanke für diese vorstellung dieser 10 websites…
sehen richtig super aus
mfg, bernd
Ronny Graupner
20. April 2009 um 12:34 UhrDafür das KFZ Karsten Kühn ein template ist und nur das Bild geshootet wurde gehts schon
Linktip von mir: http://www.mariohartmann.com/
Marvin
21. April 2009 um 10:43 UhrDas 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
Kevin
24. April 2009 um 12:32 UhrKlasse Beitrag!
Webworker Karsten
25. Mai 2009 um 12:09 UhrHallo, 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 UhrDanke. Ich hoffe, dass der Beitrag dir geholfen hat
Unique-Network
2. Juni 2010 um 04:49 UhrIch 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.