Der erste Eindruck zählt! Was nicht nur beim Bewerbungsgespräch und vielen anderen Situation in unserem Leben zählt, gilt auch für das Design einer Website. Binnen Sekunden wird entschieden ob das Design ansprechend, harmonisch ist oder eher zum Verlassen der Seite bewegt.
Um solche Vorfälle zu vermeiden werden im Folgenden nun einige Designprinzipien zur Orientierung vorgestellt.
Was ist eine gelungene Website?
Gutes Webdesign verlangt mehr als nur ein gutes Auge für Typographie und einen Sinn für ansprechende visuelle Gestaltung. Die zahllosen kreativen Ausdrucksmöglichkeiten im Design sind oftmals Fluch und Segen zugleich. Einerseits stehen viele Gestaltungsmöglichkeiten zur Verfügung, andererseits besteht die Gefahr sich im Designprozess zu verrennen und so, trotz bester Vorsätze, ein Design zu kreieren, was als „schlecht“ empfunden wird.
Eine gute Website vermittelt Informationen klar gegliedert und effizient, sodass sich der Besucher intuitiv zurechtfindet. Eine benutzerorientierte Website besticht durch das Zusammenspiel von Typographie, interaktiven Elementen und einem ausgeprägten visuellen Feinschliff. Dazu gehört beispielsweise auch, die Berücksichtigung der Corporate Identity eines Kunden.
Webdesign ist im Prinzip eine gesunde Balance zwischen UX-, UI und Grafikdesign, der CI sowie den aktuellen Trends unter Berücksichtigung der technischen Gegebenheiten.
Kontrast, Farbe und Negative Space
Mit der Auswahl der Primärfarbe ergeben sich meist schon die zu verwendenden Kontraste. In Kombination mit dem Negative Space oder auch Whitespace genannt, ergeben sich erste, visuelle Eindrücke des Designgerüsts. Der Negative Space beschreibt die intentionalen Freiräume zwischen den Elementen einer Seite. Durch sie gewinnt eine Website an Struktur und wirkt in der Regel aufgeräumter und klarer.
Bei der Planung von Kontrast und Farbe, sollte zusätzlich berücksichtigt werden, dass Menschen mit einer Sehschwäche bei der Farberkennung den gezeigten Inhalt unter Umständen nicht wahrnehmen können.
Hilfe bei der Farbauswahl
Die Frage nach der richtigen Farbe ist beim Entwurf eines neuen Designs manchmal gar nicht so leicht. Kommt man auch mithilfe der Corporate-Identity-Farben auf keinen Nenner, bieten dafür mehrere Tools, wie das Adobe Color Wheel, die Möglichkeit verschiedene Farbkombinationen im Vorfeld zu testen.
Auch spielen hierbei natürlich die Grundlagen der Farbenlehre eine Rolle. Der Branche entsprechend, sollte eine Farbe mit passender psychologischer Wirkung verwendet werden. So hat es seinen Grund das seriöse Branchen, wie Versicherungen und Banken, oftmals auf die Farbe Blau setzen, denn sie steht im Allgemeinen für Vertrauen und wirkt beruhigend.
Die 60-30-10 Regel
Die goldene Regel zur Anwendung von Farbpaletten. Das Prinzip besagt, dass die angewandte Hauptfarbe 60% des Layouts und die gewählte Komplementärfarbe 30% des Layouts ausmachen sollen. Eine dritte Farbe setzt mit 10% die Highlights einer Seite. Diese Zusammensetzung gilt als besonders ausbalanciert und sollte im Hinblick auf den Besucher grundsätzlich eingehalten werden.
Symmetrisches oder Asymmetrisches Design?
Beim symmetrischen Ansatz werden Elemente ähnlicher Geltung zusammen angeordnet, wohingegen der asymmetrische Ansatz prominente Elemente bewusst neben unauffälligere Inhalte stellt.
Das Layout kann dabei Clean gehalten werden. Elemente werden klar voneinander getrennt, wie z.B. bei Couro Azul. Durch eine leicht dezentrierte Platzierung wird den schwächeren Elementen mehr Raum gegeben, die so zur Balance beitragen.
Das gleiche Prinzip, jedoch mit einer freieren Anordnung ist bei Zero zu finden. Den eleganten und zeitgemäßen Eindruck gewinnt die Seite durch den vermehrten Einsatz von Negative Spaces.
Dieser Ansatz bietet sich auf Geräten mit einem größeren Display (ab Tabletgröße) an. Smartphones profitieren hingegen von klar getrennten, untereinander angeordneten Elementen.
Schwerpunkte setzen
Ausgangspunkt jeglicher Designüberlegungen ist die zu kommunizierende Message. Sobald sie klar umrissen ist, geht es darum diese durch den Einsatz von Farbe und/oder Typographie zu betonen. Aber auch Bilder können dabei helfen, die Message in den Fokus zu rücken.
Visuelle Hierarchie
In den meisten Fällen befindet sich das Navigationsmenü einer Website ganz oben. Das hat seinen Grund. Eine Website wird von oben nach unten betrachtet. Weil das Navigationsmenü sozusagen das Inhaltsverzeichnis einer Website ist, sollte es dem Benutzer direkt als Erstes ins Auge fallen.
Aus diesem einfachen Grund sollten die wichtigsten Inhalte möglichst weit oben platziert werden. Mit abnehmender Bedeutung können sie dann nach unten fortgeführt werden.
Ein weiterer Punkt ist das Eye-Movement-Prinzip. Dabei wird der Inhalt einer Seite so abgestimmt, dass das Auge hindurchgeführt wird. Das Portfolio auf abbystolfo.com ist ein anschauliches Beispiel, wie das Auge mithilfe von Form und Anordnung durch den Inhalt geführt wird.
Dabei spielen auch Proportionen eine Rolle. Durch Elemente in gleicher Größe, Farbe und Form, wird Zusammengehörigkeit vermittelt. Vor allem bei interaktiven Elementen ist dies von Bedeutung.
Schlussbemerkungen
Die hier vorgestellten Grundprinzipien sind abgewandelte Formen wissenschaftlicher / psychologischer Recherchen, die auf unsere aktuellen Kommunikationsmedien übertragen worden sind.
Zwar werden gewisse Regeln häufig bereits intuitiv umgesetzt, jedoch erweist sich die Kenntnis der zugrunde liegenden Theorien und Methoden oft als vorteilhaft.
Gerade bei eigenen Projekten kann es an einem gewissen Punkt nötig sein, Distanz einzunehmen und das entwickelte Design anhand objektiver Maßstäbe einzuschätzen.
