Webdesign zu erstellen, ist gerade für Neulinge keine einfache Aufgabe. Neben verschiedenen Grafikdesign-Theorien und den ästhetischen Grundsätzen, spielt vor allem die logische Führung des Nutzers über die Website eine große Rolle. Mit welchen Design-Werkzeugen Sie das perfekte Design erstellen, erfahren Sie in diesem Beitrag! 

Visuelle Hierarchie bestimmt, was die Menschen in welcher Reihenfolge wahrnehmen

Die visuelle Hierarchie ist ein Eckpfeiler des Grafikdesigns. Sie bestimmt welche Inhalte mehr und welche weniger Aufmerksamkeit bekommen. Mit der Anpassung der visuellen Hierarchie können Designer und Designerinnen dabei einen Einfluss darauf nehmen, in welcher Reihenfolge die einzelnen Elemente wahrgenommen werden. Dabei spricht man vom so genannten “Visuellen Fluss”. 

Gerade im Webdesign spielt dieser Punkt eine noch größere Rolle. So muss Elementen wie bestimmten Navigationstools, CTA, User Controls eine hohe Priorität eingeräumt werden. Anderen weniger wichtigen Elementen hingegen, können so gestaltet werden, dass diese nicht von den wichtigeren Elementen ablenken. Dabei entscheiden vor allem drei Hauptfaktoren, wie diese Wahrgenommen werden:

• Größe: 
  Große Elemente erregen mehr Aufmerksamkeit als kleine. Diese fallen somit dem Nutzer schneller ins Auge. Wollen Sie also bestimmte also hervorheben, können Sie z.B. andere Elemente also auch kleiner machen.  
• Farbe: 
  Helle und leuchtende Farben werden schneller wahrgenommen als gedecktere Farben. Mit Farbkontrasten kann dabei dieser Effekt noch weiter verbessert werden. 
• Platzierung: 
  Der Lesefluss in Europa ist nahezu ausschließlich von links nach rechts und von oben nach unten. Dementsprechend werden Elemente, die oben links platziert sind als Erstes wahrgenommen. 

User sollten nicht überlegen müssen

Dieser Ansatz wurde vom Auto und Computerwissenschaftler Steve Krug entwickelt. In seinem Buch “Don’t make me think”, welches als Beginn der User Experience-Bewegung gilt, stellt er den Ansatz auf, dass Nutzer nicht darüber nachdenken sollten, wie Sie bestimmte Aufgaben erledigen können. Vielmehr sollte der Designer etwas erschaffen, was dem Nutzer die beste Lösung präsentiert. Krugs Idee hebt dabei, den menschlichen Trieb hervor sich für die erste Lösung zu entschieden und nicht unbedingt die beste.  

Für ein kleines Beispiel ist das Suchfeld auf Webseiten optimal. Damit Nutzer dieses nicht lange suchen müssen, hat sich etabliert dies oben rechts in der Ecke zu platzieren oder noch häufiger angewendet mit einer Lupe zu kennzeichnen.  

Kontrast und Bewegung erregen Aufmerksamkeit 

Kontraste sind ein beliebtes Mittel für Designer und Designerinnen, um sich die starken Unterschiede bei Farben oder auch Größen zunutze zu machen. Gegensätzliche Farben oder Größen nebeneinander zu platzieren ist dabei ein guter Weg, um die Sichtbarkeit von CTA-Buttons zu erhöhen.  

Auch Bewegung spielt einen großen Faktor im Bereich der Aufmerksamkeit. Selbst kleine Animationen für spezielle Elemente oder ein hüpfendes Symbol bei einer Mitteilung kann einen großen Effekt haben. Jedoch sollte bei dem ganzen darauf geachtet werden, dass sich auf dem Bildschirm nicht zu viele Elemente bewegen, da sonst die Konzentration der Nutzer gesenkt werden kann und die Effektivität der Maßnahme reduziert wird. 

Weißraum kontrolliert den visuellen Fluss 

Der Weißraum oder auch Negativraum ist ein beliebtes stilistisches Mittel, welches oftmals von erfahrenen Designern genutzt wird. Dabei werden vor allem leere Räume oder Teile des Bildschirms ohne visuelle Elemente genutzt, um das Gleichgewicht zwischen den verschiedenen Designelementen herzustellen. 

Darüber hinaus kann Weißraum vor allem um bestimmte Elemente herum dafür sorgen, dass diese bestimmten Elemente mehr Aufmerksamkeit bekommen als andere. Allerdings ist Weißraum auch dafür verantwortlich, um bestimmte Inhalte visuell voneinander zu trennen oder zu gruppieren. 

Zu viele Informationen überfordern den Nutzer 

Eine weitere maßgebliche Grundlage des Webdesigns ist es, die Menge an Informationen zu limitieren. Das menschliche Gehirn kann nur eine gewisse Menge an Informationen verarbeiten, vor allem das Kurzzeitgedächtnis ist davon betroffen. Es empfiehlt sich daher, die Informationen in kleinere Portionen aufzuteilen. 

Damit die zu vermittelnden Informationen bestmöglich aufgenommen werden können, empfiehlt es sich die sogenannte Technik des “Chunkings” anzuwenden. Dabei werden zusammengehörige Informationen in Chunks (zu Deutsch: Bündeln) gruppiert, um die Informationen besser aufnehmen zu können.  

Zwischenfazit – Grundlagen zusammengefasst 

Neben der visuellen Hierarchie ist die Aufgabe des Designers vor allem dem Nutzer die Arbeit, durch die User-Guidance (Nutzerführung) zu nehmen. Nutzer sollen auf Webseiten nicht damit beschäftigt sein, sich mit der Bedienung dieser auseinanderzusetzten, sondern vielmehr die Inhalte zu konsumieren. Neben den Designelementen wie Kontrast und animierte Elemente finden vor allem auch Weißräume einen gerechtfertigten Anwendungspunkt, um Inhalte zu gruppieren und zu trennen. Dabei dreht sich neben der Vermittlung von Informationen auch die User-Guidance um die Blickführung. In welcher Reihenfolge nehmen die Nutzer Ihre Informationen wahr und wie viele Informationen können die Nutzer in dieser Zeit aufnehmen. 

Wie im Grafikdesign spielt auch im Webdesign die Komposition aus den verschiedenen Elementen eine Wichtige Rolle. Am Ende muss ein stimmiges Bild entstehen, welches den Nutzer fesselt und den Zweck des Designs/Website widerspiegelt. In unserem Teil II des Beitrages, gehen wir auf die Interaktiven Bereiche, die Typografie, sowie die Komposition und Einheitlichkeit genauer ein. Freuen Sie sich darauf!

Falls Sie Unterstützung bei der Erstellung Ihres Webdesigns benötigen, kontaktieren Sie uns gerne!