Webdesign – Vorbereitung

Webdesign - Vorbereitung

Nachdem im vorangegangenen Schritt die Identität deiner Marke beschrieben wurde kann dies nun endlich in ein Design überführt werden.

Facebook
Twitter
LinkedIn
Reddit

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.

Webseite für Fotograf

Flach. Minimalistisch.

Räumlich. Harte Kanten.

Webdesign für Restaurant

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. 

Schriftstärke

Schriftgröße

Kontrast

Facebook
Twitter
LinkedIn
Reddit

Weiter in der Designberatung

Wir freuen uns auf Ihre Nachricht