Wenn Gestaltung kommuniziert: Beispiele und Tipps
Gute Gestalter können dafür sorgen, dass der Besucher sofort weiß worum es geht, ohne auch nur eine Zeile Text zu lesen. Sie können auch Stimmung erzeugen und den Inhalt der Seite so optimal unterstützen.
Wieder bin ich an einer Stelle angelangt, die mir sagt, dass es beim Webdesign immer um den Inhalt geht. Dieser Beitrag sammelt Tipps zum Thema und zeigt natürlich auch wieder einige Beispiele.
Kommentare und Social Bookmarks (laut Seitwert muss ich da noch nachlegen) würden mich sehr freuen.
Wieso, weshalb, warum?
Fast jede Internetseite hat eine Zielgruppe und einen Inhalt. Wir haben die Aufgabe, die Zielgruppe anzusprechen und den Inhalt bestmöglich zu unterstützen. Dieser Beitrag behandelt eine wichtige Seite davon. Es ist nur sinnvoll, den Inhalt durch die Gestaltung wiederzugeben. Denn Bilder sagen mehr als 1000 Worte und mit der richtigen Gestaltung kann man sofort kommunizieren, worum es bei der Seite geht. Das sagt dem Benutzer auf den ersten Blick, ob er etwas findet, was ihn interessiert. Er wird auf der Seite bleiben, falls das Thema ihn anspricht. Die kurze Zeitspanne, die man hat, bevor der durchschnittliche Internetnutzer Seiten verlässt, ist so kein Problem mehr.
Es ist extrem gut, wenn man als Gestalter eine Stimmung beim Betrachter hervorrufen kann. Man kann ihn so vielleicht sogar eher dazu bringen, zum Kunden zu werden.
Tipps
Es gibt mehrere Mittel, um beim Betrachter Gefühle zu erzeugen. Es gibt Wege, um die Zielgruppe sofort anzusprechen. Ein paar Tipps bekommt ihr hier. Ich würde mich über Ergänzungen freuen.
- Farbe – Farben haben bestimmte Wirkungen und sind eines der wichtigsten Mittel um eine Stimmung beim Betrachter hervorzurufen. Unpassende Farben machen schnell eine ganze Seite vollkommen kaputt.
Wer mehr über die Wirkung von Farben wissen will, findet hier Infos. - Bilder – Gute Fotos sind natürlich ein sehr schönes Mittel, um Stimmung zu erzeugen und den Inhalt zu vermitteln.
Bedenkt dabei die vielen Möglichkeiten, die euch Photoshop bietet. Schwarz/Weiß, Sepia usw. sind interessante Mittel. - White Space – White Space ist ein sehr wichtiges und oft unterschätztes Gestaltungsmittel. Viel Platz wirkt häufig edel und teuer. Ist alles dicht aneinander, spricht das Design meist eher Schnäppchenjäger an.
- Formen – Eckig oder rund – Eine Kernfrage, die man sich wohl bei jedem Design stellt. Eckige Gestaltung wirkt geschäftlicher und weniger kreativ. Das Gegenteil dazu ist rund. Auch die Wahl der Formen ist etwas, das viele vergessen. Sie ist aber auch etwas, das nicht entscheidend ist.
- Typographie – Ich habe hier kürzlich viele Tipps zu dem Thema gegeben und bitte euch, sie nicht zu ignorieren. Eine nicht so gute Schriftwahl fällt Besuchern eventuell nicht so stark negativ auf, aber eine gute Schriftwahl kann das Design abrunden und die Wirkung verstärken.
Nike
Grün mit weißen Linien im Hintergrund: Fußball, Sport. Das ist Nikes Kerngeschäft und das soll so sofort vermittelt werden. Die Verwendung von großen Hintergrundfotos zeigt sich hier sehr wirkungsvoll. Die Marke will sich aber nicht billig präsentieren sondern mit Stil und Eleganz rüberkommen. Was hätten sie besser machen können? Momentan sind die weißen Linien total gerade und dadurch wenig dynamisch und sportlich.
Webdesignerwall
Ich bin anders, ich bin kreativ, ich bin ein Künstler – das schreit die Website schon fast. Warum das so ist, brauche ich wohl kaum anzusprechen: Die farbenfrohe Illustration im Hintergrund, die super Sidebar (die allerdings beim Poll etwas schwächelt) und die extrem passende Typografie sein ein paar der vielen Gründe.
New York Times
Könnte das eine Zeitung sein? Ja. Die New York Times zeigt sich im Internet mit einem komplexen Raster. Das kennt man aus dem Print Bereich. Die vielen Spalten, welche mit Informationen vollgestopft sind, die Serifenschrift, die sparsame Verwendung von Bildern – all das trägt dazu bei, dass man die Internetseite sofort als Website einer seriösen Zeitung identifizieren kann.
Ed Hardy
Jeder, der die Klamotten von Ed Hardy mag, wird diese Website mögen. Die Illustrationen im Header und die riesige in der Mitte der Website sorgen dafür. Wenn einem die Illustrationen nicht gefallen, wird man die Website wahrscheinlich wieder verlassen, aber das ist ja egal. Die Zielgruppe wird sofort gefesselt.
Media Markt
Billig, billiger, am billigsten. Das will Media Markt sofort vermitteln. Hier gibt es keinen edlen White Space. Das aggressive Rot tut in den Augen weh. Der Newsticker und die Preisansage sind animiert. Mir gefällt das Ganze natürlich gar nicht. Ich empfinde das Rot als viel zu heftig (klar, CI, aber muss es wirklich so großflächig sein) und mir sieht es einfach zu billig aus. Ziel erreicht.
Porsche
Hier ist das Gegenteil zu MediaMarkt. Elegant durch viel freien Platz und durch das große Bild sportlich und aktiv wirkend präsentiert sich die Porsche Website. Die Seite hat Stil und zeigt, welche Zielgruppe sie hat: Die Oberklasse.
Apple
Fast jeder hat heute einen iPod. Jedenfalls habe ich das Gefühl, wenn ich durch die Straßen gehe und überall weiße Kopfhörer sehe. Trotzdem will die Marke exklusiv, edel und stilvoll sein. Dementsprechend präsentiert sich die Website. Viel Platz, große Bilder und wenig Text lassen die Startseite recht edel und “teuer” wirken.
South East MTB Co
Absolut jeder sieht sofort, dass es um Mountainbiking geht. Das verwischte Hintergrundbild mit dem dreckigen Reifen sollte schon genug sein. Die Slideshow zeigt Bilder, die keinen Zweifel am Thema der Website lassen. Gut gemacht!
Live Africa
Das Logo, der Hintergrund, die Farben und die Slideshow harmonieren. Vor allem zeigen sie aber allesamt ganz deutlich, worum es geht und schaffen eine Atmosphäre die richtig zu Afrika passt.
Saturized
Orange ist die Farbe, welche am meisten für Kreativität steht. Leider ist sie nicht wirklich einfach einzusetzen. Häufig ist sie zu aggressiv. Hier sehe ich da aber überhaupt kein Problem. Die großflächige Verwendung der Farbe passt perfekt. Klar, dezent ist der Hintergrund nicht, ablenken tut er aber auch nicht. Abgerundete Ecken werden auch gerne mit Kreativität assoziiert.
Mario
16. Juli 2009 um 12:11 UhrSchöner Artikel mit guten Erklärungen zu jedem Punkt. Gefällt mir sehr gut. Da kommt mir grade die Idee, dass ich nach meinem Urlaub mal einen Artikel über Farben und deren Wirkung im Webdesign schreibe. Der RT folgt auch gleich 😉
mydarktime
16. Juli 2009 um 12:24 Uhrfehlt nur noch ein artikel über corporate design, dann hast du bald irgendwann alles mit artikeln abgedeckt 😉 sehr schön zu lesen. thx
Manko10
16. Juli 2009 um 12:25 UhrHi,
endlich mal eine sinnvolle und schön kommentierte Galerie.
Bei Media Markt kann ich nur zustimmen: sowohl die Internetseite als auch die Fernsehwerbung halte ich für beleidigend für das Auge und den – auch wenn das vielleicht etwas hochnäsig klingen mag – Intellekt. Auf so etwas soll man hereinfallen. Ich habe einmal einen PC dort gekauft, ich werde es nie wieder tun. Die Werbung ist perfekt. Sie beschreibt genau das, was man da bekommt: Ware auf BILD-Niveau. Billig, aufgemotzt aber alt, schlecht verarbeitet und kaum zu gebrauchen. Billig, billig, billig!
WebdesignerWall hat mich auch früher schon beeindruckt, auch wenn die aufwendige und verspielte Gestaltung schon fast ein wenig zu viel Aufmerksamkeit auf sich sieht (was sie an sich auch soll), dafür den Inhalt aber ein wenig degradiert. Hier muss man halt schauen, wo man die Prioritäten setzt oder ob man beide gleichberechtigt existieren lässt.
Porsche hat mich nicht überzeugt. Klares Design, professionelle Aufmachung, schöner Whitespace, aber irgendwie zu unkreativ. Das hätte genauso gut die Seite von BMW sein können. Außerdem ist sie zu kurz. Da fehlt irgendetwas nach unten hin. Das Design sieht irgendwie nicht ganz vollständig aus.Sicherlich auch ein Stilmittel aber meiner Meinung nach keines, dass für das angestrebte Image förderlich ist.
Lennart Prange
16. Juli 2009 um 15:23 UhrDanke für deine Kommentare zu den Seiten. Super 🙂
Alex B.
16. Juli 2009 um 14:47 UhrWas MediaMarkt angeht muss ich dir und Manko10 völlig zustimmen. Selbst die Werbung ist total daneben. Ich schalte nach Möglichkeit sofort weg. Ich frage mich was MM den Personen in der Werbung zahlt… Ich kann mir echt nicht vorstellen, das mal zu machen. Einfach zu demütigend.
Anja
16. Juli 2009 um 14:56 UhrHey,
vielen Dank, auch wenn man es ja eigentlich wissen sollte … es hilft doch immer wieder bei der Ideenfindung, so einen Beitrag durchzulesen! Danke!
LG Anja
P.S.: Inhaltlich hab ich da nicht viel auszusetzen … 😉 Mir gefällt besonders Live Africa. Das ist aus meiner Sicht rundherum stimmig.
Lennart Prange
16. Juli 2009 um 15:22 UhrLive Africa finde ich auch besonders gelungen. Schön, dass dir der Artikel gefällt 🙂
Manuel
16. Juli 2009 um 15:15 UhrSchön neben einer wahren Bildflut auch Kommentare zu lesen und so zu verstehen, warum das Beispiel aufgenommen und was dabei gedacht wurde.
Dein kreativ-schöpferisches Loch scheint der Qualität deiner Artikel keinen Abbruch zu tun. Schön zu wissen 🙂
Lennart Prange
16. Juli 2009 um 15:21 UhrDanke 🙂
Ohrflieger
16. Juli 2009 um 16:55 UhrKann mich meinem Vorredner nur anschließen. Deine Kommentare und Gedanken zu den einzelnen Seiten helfen zu verstehen, warum Du die Seite aufgenommen hast. Das machst Du häufig in deinen Artikeln, was in anderen Blogs häufig nicht der Fall ist.
Danke für den schönen Artikel! 🙂
Hendrik
16. Juli 2009 um 16:58 UhrEigentlich ist es alles so logisch…..so einfach.
Trotzdem denkt man über sowas kaum nach. Außer man wird dazu animiert, wie du es in diesem Artikel tust.
Wenn man sich Gedanken über die Aussage machen würde, dann würde mal wohl auch selbst drauf kommen.
Der Abschnitt “Orange ist die Farbe, welche am meisten für Kreativität steht. Leider ist sie nicht wirklich einfach einzusetzen. Häufig ist sie zu aggressiv.” hat meine Neugier geweckt.
Mich würde mal interessieren, wie mein Blogdesign (http://www.dmht.de) mit dem Orange auf dich wirkt.
Ist es eventuell sogar zu agressiv?
Schonmal danke für die Beurteilung
Lennart Prange
17. Juli 2009 um 12:34 UhrDein Orange ist nicht zu aggressiv. Es ist eher zu blass. Würde ich jedenfalls so sagen. Da fehlt etwas die Kraft. Vergleich es mal mit Saturized.
torsten
16. Juli 2009 um 21:23 UhrDanke für den Beitrag. Zu Ed Hardy muss ich loswerden, dass die Grafiken nicht nur zielgruppengerecht sondern unglaublich groß sind. Teilweise deutlich größer als 250k. (Sowas würde ich nicht als Beispiel nehmen) Ausser für das Bild an sich 🙂
Patrick Offczorz
16. Juli 2009 um 23:12 UhrSchöner Artikel. Allerdings muss ich an dieser Stelle einmal sagen, das die Beispiele nicht gerade Unbekannte Kandidaten sind. Die oben gezeigten Marken sind schon so in unseren Köpfen verankert, das es meißt ausreichen würde, eine Sekunde Werbespot zu sehen um die Marke identifizieren zu können. Live Africa ist wohl hier am besten als Beispiel geeignet.
Gruß
Patrick
Dominik
17. Juli 2009 um 04:38 UhrSchöner Artikel. Media Markt finde ich auch allerletzte Unterschicht. Mag ich überhaupt nicht. Als ich damals auf der Webseite mal was nachgucken wollte habe ich auf die Information verzichtet und bin sofort wieder weg.
Rata
17. Juli 2009 um 07:05 UhrSiehste 😉
Geht doch!
Lieber Gruß
Rata
Torsten
19. Juli 2009 um 18:08 UhrSuper Artikel. Danke dafür.
Muss Patrick allerdings auch recht geben. Das sind bekannte Webseiten bzw. Firmen bei denen allein eine Sek. ausreicht und man weiss wodrum es geht. Diese Firmen investieren natürlich viel Geld um sich so im Netz zu präsentieren. Jedoch hast du hier eine sehr schöne Auswahl getroffen mit guten Beispielen.
Zu MM sag ich mal lieber nix!
Carsten
21. Juli 2009 um 10:33 UhrToller Artikel! Den Vorrednern muss ich jedoch recht geben. Die Auswahl ist vielleicht nicht zu 100% repräsentativ.
Ansonsten sehr gut erklärt. Gefällt mir gut!
Julia
20. Februar 2010 um 12:25 UhrHallo,
ich versuche stets meine Seiten attraktiv zu gestallten. Siehe http://www.juliaco.com.
Aber „Webdesignerwall“ haut mich um! Wow!!