Webdesign - Vorbereitung
Nachdem im vorangegangenen Schritt die Identität deiner Marke beschrieben wurde kann dies nun endlich in ein Design überführt werden.
Webdesign spielt sich in verschiedenen Dimensionen ab. All diese Dimensionen müssen aufeinander abgestimmt werden und die gleiche Identität beschreiben. Mit Dimensionen ist die Anordnung, die Formsprache, die Farbpalette und die Schriftart gemeint. Während ein One-Page Design den gesamten Inhalt auf nur einer Seite darstellt, ist ein Multi-Page Design eher aufgebaut wie ein Katalog.
Anordnung/ Layout definieren
Hier wird festgelegt, wie die einzelnen Abschnitte miteinander verbunden werden.
Kanten
Harte Kanten
Weiche Kanten
Räumlichkeit
Räumliches Design
Flaches Design
Informationsdichte
Klarer Fokus
Alles im Blick
Übergänge
Klare Trennung
Fließend
Fotos oder Text im Fokus
Bildergeschichte
Textinhalt
Fließende Übergänge.
Rahmenlos.
Flach. Minimalistisch.
Räumlich. Harte Kanten.
Weiche Kanten.
Einzelne Boxen.
Formsprache bezieht sich darauf, ob Elemente abgerundet werden oder eckig bleiben.
Formsprache
Je nachdem was deine Marke verkörpert werden bei der Formsprache eher kantige oder runde Formen bevorzugt.
Eckige Formen sind eher seriös und steril
Formsprache bezieht sich darauf, ob Elemente abgerundet werden oder eckig bleiben.
Leicht abgerundete Ecken machen es freundlicher
Formsprache bezieht sich darauf, ob Elemente abgerundet werden oder eckig bleiben.
Runde Ecken sind liebevoll und weich
Formsprache bezieht sich darauf, ob Elemente abgerundet werden oder eckig bleiben.
Schatten & Schatteneffekte
Je nachdem ob ein räumliches Design oder ein flächiges bevorzugt wird kann der Schattenwurf angepasst werden. Fahre mit der Maus oder dem Finger über eins der Elemente um die Schatten-Effekte zu sehen.
Bei einem Flachen Design werden keine Schatten geworfen
Mit Schatten kann ein räumlicher Eindruck vermittelt werden
Schatten nach innen müssen mit Vorsicht verwendet werden
Mit Schatten kann ein räumlicher Eindruck vermittelt werden
Schatten nach außen heben das Element hervor
Mit Schatten kann ein räumlicher Eindruck vermittelt werden
Farbige Schatten lassen das Element leuchten
Mit Schatten kann ein räumlicher Eindruck vermittelt werden
Die Auswahl der Farben ist eine Kunst für sich. Üblicherweise stellt eine Farbpalette zusammen, die auf der gesamten Webseite konsistent verwendet wird. Es gibt viele Studien zu den emotionalen Reaktion auf bestimmte Farben, doch da es weitestgehend subjektiv ist gibt es keine falschen Farben. Wichtig ist, dass sie sich für dich richtig anfühlen. Beim Webdesign sollte man jedoch einige grundlegenden Regeln mit Farben beachten.
Farbauswahl
Die Auswahl den Farben folgt Regeln aus der Farblehre. Komplementärfarben maximieren zum Beispiel den Kontrast und geben ein harmonisches Bild. Auswahlmethoden beziehen sich stets auf den Farbkreis und sind Komplementär, Monochromatisch, Analog, Komplementärteilung, Triadisch oder Tetraedrisch. Die ausgewählten Farben können in ihrer Helligkeit und Sättigung variiert werden. Bei einer monochromatischen Farbauswahl wird nur die Sättigung verändert.
60:30:10 Regel der Farben
Bei der Auswahl der Farben geht man von einer Hauptfarbe, die den Hintergrund füllt aus. Des weiteren wird eine sekundäre Farbe gewählt, die genutzt wird um Inhalte hervorzuheben. Die Akzentfarbe tut genau das – sie setzt Akzente.
Ein Farbschema von melt Design (Analoge Farbauswahl)
Ein Beispiel für ein Farbschema (Monochromatische Farbauswahl)
Wenn alles wichtig ist ist nichts wichtig, deshalb muss es auch im Design eine klare Unterscheidung geben, die es dem Leser vereinfacht zu unterscheiden, welches Element wie wichtig ist.
Regel der Wichtigkeit
Die Auffälligkeit eines Elements kann mit der Schriftstäkre, Schriftgröße und dem Kontrast zum Hintergrund variiert werden.