Gestaltung Deiner Webseite | Persönliches Webdesign und Entwicklung

Gestaltung von Webseiten

Meine erste Webseite habe ich 2001 gestaltet. Aus heutiger Sicht war die Seite gestalterisch indiskutabel. Zudem habe ich jeden, wirklich jeden Anfängerfehler in die Seite gebastelt (aber ich glaube, der Inhalt war wirklich gut...). Über Farbgestaltung oder visuelle Harmonieregeln habe ich nicht nachgedacht. Allerdings sahen 2001 die meisten Werbseiten arg verwegen aus. Wer auf sich hielt, baute eine grell blinkende Laufschrift oder ein animiertes Bildchen einer explodierenden Tomate ein.

Inzwischen habe ich dazu gelernt und behaupte, etwas Geschick im Umgang mit Formen und Farben erworben zu haben.

Farben

"Da kriege ich den Augenkasper", sagte meine Mutter, wenn etwas deutlich zu grell und bunt war. "Klickbunti" - ist das abschätzige Attribut für übertrieben farbenfrohe Webseiten. Farben sollen Besuchern der Webseite gefallen, sie sollen die Betreiber der Webseite repräsentieren und sollen zu deren Business passen.

Daher wählen wir Farben, die miteinander harmonieren sowie dem Thema und Inhalt der Webseite entsprechen. Mitunter liegen die Farben auf der Hand ("orange war immer meine Lieblingsfarbe und meine Webseite wird natürlich auch orange").

Wenn die Farben noch nicht feststehen, helfen Tools im Netz, mit denen wir passende Farbpaletten zusammenstellen. Das Farbmuster im Hintergrund hat solch ein Tool zusammengestellt. Die Farben finden sich auch sonst auf dieser Webseite.

Harmonische Farben müssen nicht wischi-waschi aussehen. Auch Kontraste sind reizvoll. Beispielsweise werden gern türkis und orange kombiniert. Das heißt dann "teal and orange", - hier sind Beispiele.

Formen

"Das wichtigste Gestaltungsmittel ist der leere Raum", dozierte ein früherer Chef häufig. Da stimme ich ihm zu. Achte mal auf Webseiten, bei denen alles direkt aneinander gepackt ist. Gefällt Dir das? Technisch ist es sehr einfach, Abstände einzubauen: "p-5" an der richtigen Stelle in den Code getippt, fertig. Also spare ich nicht mit dem "p-5" und lasse einfach mal ein paar hundert Pixel frei. Wir haben nämlich wirklich viel Platz auf einer Webseite und brauchen nichts zu quetschen.

Ansonsten achte ich auf visuelle Harmoniregeln: Drittelregel oder "Goldener Schnitt" nach der Fibonacci-Folge. Die Grafik nebenan (auf dem Smartphone oben) stellt die daraus abgeleitete "Goldene Spirale" dar. Die Spirale findet sich in der Natur etwa bei Schneckenhäusern oder aufgrollten Farnblättern. Deren Teilungsverhältnis empfinden die meisten Menschen als harmonisch oder einfach "schön".

Aufgeräumte, klare horizontale und vertikale Linien und Blöcke sorgen ebenfalls für Harmonie und Übersicht. Seiten, auf denen alles irgendwie ineinander verschwimmt, gefallen mir nicht, - und den meisten Deiner Kunden vermutlich auch nicht.

Schriften

„Roboto Slab“ heißt die Schriftart für die Überschriften dieser Seite. Fließtexte erscheinen in „Open Sans“. Ein paar weitere Namen von Schriftarten, die ich auf verschiedenen Webseiten einsetzte, habe ich hier aufgeführt. Die Schriftarten bekommen wir kostenlos bei „Google Fonts“. Falls Du bei „Google“ wegen des Datenschutzes zusammenzuckst, gibt es Entwarnung: Inzwischen können wir die Schriften von Google konform zur DSGVO einbinden.

Bilder

Das Foto meiner Hündin Biene am Strand habe ich hier gewählt, weil ich a) Biene liebe, b) Tiere sich immer gut machen und c) die Farben des Fotos mit den anderen Farben dieser Seite harmonieren. Fotos bearbeite ich mit der Profisoftware, deren Namen aus Werbezwecken nicht genannt werden darf (sollen wie sie vielleicht "Voldemoort" nennen?). Damit habe ich Biene in den Golden Schnitt gerückt und die Farben etwas angepasst.

Fotos von Bilderdiensten im Netz ("Stockfotos") sind eine Notlösung. Du kennst sicherlich die ewig gleichen grinsenden Mitarbeiter vermeintlich erfolgreicher Unternehmen. Das bist nicht Du und das ist nicht Dein Business.

Wir sollten authentische, eigene Bilder nutzen. Buche eine Fotografin oder wir fotografieren selbst. Einige meiner Fotos schmücken die Webseiten meiner Kunden.

Gestaltung von Webseiten

Farben

Formen

Schriften

Bilder

das muss sein

der-siebte-webdesigner.de

Technisches