Bei einer Website verhält es sich, wie mit dem Kennenlernen neuer Personen: unterbewusst wird in den ersten Sekunden der erste Eindruck gefestigt. Und dieser erste Eindruck entscheidet sofort darüber, ob du eine Website gut findest oder nicht. Dieser erste Eindruck basiert auf einem subjektiven und intuitiven Empfinden. Entsprechend schwierig ist es, objektive Kriterien zu definieren, die ein gutes Design bestimmen. Dennoch gibt es einige Grundprinzipien guter Webdesigns, die uns dabei helfen, eine Website zu erstellen, die harmonisch wirkt und einen positiven ersten Eindruck erzeugt.
Was ist gutes Webdesign?
Der Webdesignprozess ist ein kompliziertes und komplexes Vorhaben. Mit der Anzahl an Möglichkeiten, wächst gleichzeitig auch die Wahrscheinlichkeit, sich im Prozess zu verrennen und sich im Designdschungel zu verlaufen. Die Wahl der Elemente, Farben, Kontraste, Schriften und Struktur sowie des Layouts spielen eine extrem wichtige Rolle. Deswegen ist ein überlegtes Vorgehen unter Umständen schon entscheidend dafür, ob das Design einer Website später gelingt oder nicht.
Symmetrische und asymmetische Designs
Das Layout einer Website spielt eine wichtige Rolle bei der Frage, wie der User die Seite wahrnimmt. Bei symmetrischen Webdesigns sind die Inhalte gleichmäßig verteilt. Das schafft ein ruhiges Layout und eine einfache und rationale Struktur. Das wirkt aufgeräumt, aber teilweise langweilig. Asymmetrische Webdesigns hingegen brechen die einheitlichen Strukturen auf und wirken sehr dynamisch. So können beispielsweise Inhalte mit besonderer Gewichtung hervorgehoben werden und die Blickrichtung sehr gezielt steuern. Das kann allerdings auch dazu führen, dass die Seite unruhig oder gar chaotisch auf den User wirkt. Beim Webdesign muss man sich also zwangsweise die Frage stellen, ob mit dem Layout einzelne Inhalte interessanter und präsenter dargestellt werden sollen oder ob die Inhalte gleichmäßig verteilt und gewichtet sein sollen. Bei der Darstellung zweier Personen eignet sich zum Beispiel ein symmetrisches Layout besser. Bei der Frage zum Layout geht es aber auch um Whitespace sowie den Goldenen Schnitt.
Farbpaletten und ihre Wirkung
Einer der wichtigsten Punkte bei der Erstellung von Websites ist die Wahl der Farbpalette. Sofern vorhanden, wird die Website an dem bestehenden Corporate Design eines Unternehmens gekoppelt. Doch was, wenn ein solches Corporate Design noch gar nicht existiert? In diesem Fall, können die Farben frei gewählt werden und an dem Konzept der Seite und den Merkmalen des Unternehmens ausgerichtet werden.
Welche Farbschemata gibt es?
Um eine wirkungsvolle Farbpalette zu erstellen, kannst du dich an den verschiedenen Arten von Farbschemata orientieren. Diese helfen dir, eine bestimmte Wirkung zu erzielen und bestimmte Teile der Website hervorzuheben.
- Analoge Farbschemata bestehen aus einer Primärfarbe und zwei Farben, die im Farbkreis direkt neben der Hauptfarbe liegen. Zusätzlich zu den drei Farben kann die jeweils äußere Farbe um eine weitere Farbe außerhalb der jeweils zweiten Farbe gewählt werden. Dieses Farbschema ist sehr harmonisch, aber kontrastarm. Es eignet sich gut für Bilder, aber weniger für Akzente.
- Monochromatische Farbschemata bestehen aus einer Primärfarbe und weiteren Schattierungen und Tönungen dieser Hauptfarbe. Auch dieses Schema ist kontrastarm, eignet sich gut für Grafiken, aber weniger für die Hervorhebung von einzelnen Bestandteilen einer Website.
- Triadische Farbschemata bestehen aus drei Farben, die die gleiche Helligkeit aufweisen. Es empfiehlt sich, eine der Farben als Hauptfarbe zu wählen und zwei weitere Farben als Sekundär- und Akzentfarben zu wählen. Dieses Schema ist kompliziert in der Anwendung, eignet sich aber hervorragend für die Ausweisung verschiedener Inhalte auf der Website und hohe Kontraste.
- Komplementäre Farbschemata bestehen aus zwei Farben, die im Farbkreis direkt gegenüber liegen. Dieses Schema eignet sich perfekt für die Wahl einer Primärfarbe und einer weiteren Akzentfarbe und wirkt sehr kontrastreich.
- Komplementäre Farbschemata können variiert und geteilt werden. Hier werden zusätzlich zu den gegenüberliegenden Farben zwei weitere Farben direkt neben der jeweiligen Komplementärfarbe gewählt. Das schwächt den hohen Kontras etwas ab. Diese Form ist in der Anwendung extrem flexibel, aber gleichermaßen kompliziert zu erstellen.
Tools für Farbpaletten
Um die oben genannten Farben zu identifizieren, gibt es zahlreiche Tools, die bei der Findung der Palette behilflich sind und die unterschiedlichen Arten von Farbpaletten bereits automatisch berücksichtigen. Diese Tools sind besonders hilfreich, wenn du bisher noch keine Berührungspunkte mit der Wahl von zueinander passenden Farben sammeln konntest.
- Adobe Color: hier kannst du basierend auf einer Farbe eine passende Farbpalette erstellen oder sogar eine Palette basierend auf einem Bild extrahieren.
- Adobe Illustrator: der Illustrator generiert automatisch eine Farbpalette auf Basis einer gewählten Farbe und schlägt zusätzlich eine Reihe an Schattierungen und Tönungen vor
- Material Design Color Tool: Dieses Tool erstellt dir einen Wireframe anhand zwei selbstgewählter oder vordefinierter Farben und setzt diese als Primär- und Sekundärfarbe beispielhaft um
- Microsoft Office: klingt banal, aber Microsoft stellt in seinen Office Produkten eine Auswahl an vordefinierten Farben bereit. Diese sind zwar absolut Basic, können aber gerade bei kleinen und schnellen Projekten einen guten Ansatz für die Farbpalette bieten.
Kontrast und Whitespace
Als Whitespace wird der Raum zwischen den Inhalten bezeichnet. Die Whitespace (oft auch Negative Space genannt) ist dabei nicht zwingend weiß. Er kann unterschiedliche Farben annehmen. Eine Website mit viel Whitespace wirkt sehr aufgeräumt, ordentlich und minimalistisch. Die Blickrichtung des Users kann damit sehr gezielt gesteuert werden. Wenig Whitespace kommt hingegen oft in Blogartikeln oder Nachrichtenseiten zum Einsatz.
Typografie
Die Wahl der richtigen Schrift ist auf einer Website mindestens genauso wichtig, wie die Wahl der richtigen Farbe. Mit der richtigen Typographie kann der User inhaltlich gelenkt werden. Außerdem schaffen unterschiedliche Schriftgrößen, -Arten und Zeilen- sowie Zeichenabstände für eine Strukturierung und Gewichtung der Inhalte. Meist werden die unterschiedlichen Schriftarten vorher für bestimmte Inhaltsarten vergeben (z.B. Headline 1, Headline 2, Text, Hervorgehobener Text). Bei der Wahl ist insbesondere auch darauf zu achten, dass sie auf verschiedenen Endgeräten und Browser gut aussieht und entsprechend barrierefrei ist.
Hierarchie der Website
Mit all den genannten Mitteln lässt sich eine gewisse Hierarchie im Webdesign erzeugen. So kann eine einheitliche Form für Bilder dafür sorgen, dass diese gleichmäßig gewichtet werden. Stellt man zum Beispiel bestimmte Bilder in einer anderen Form dar, heben sich diese vom restlichen Bildmaterial ab. Genauso verhält es sich mit Schriftarten und Größen. Hat ein Text beispielsweise eine größere Headline, als andere Inhalte, wird dieser Inhalt stärker wahrgenommen, sofern er nicht von anderen gestalterischen Mitteln eingeschränkt wird.