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. "Klickibunti" - 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.

Suchen Dir eine Schrift aus. Hier geht es zu Google Fonts.

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 wir 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.

Mobilfreundliches
„responsives“ Webdesign

85% aller Deutschen surften 2023 mit Mobilgeräten durchs Netz (Quelle), sicherlich auch deine Kundinnen.

45% aller Webseiten wurden in Deutschland im August 2024 über Smartphones aufgerufen (Quelle). Läuft Deine Webseite nicht auf mobilen Geräten, ist sie weniger als die Hälfte wert. Denn auch Google listet nur mobilfreundliche Webseiten oben.

Kurzum: Webseiten müssen wir heute für Smartphones anpassen. Da aber 53% aller Webseiten auf (großen) PCs, Macs und Laptops sowie 2% auf Tablets abgerufen werden, müssen wir die Seiten auch dafür anpassen.

Das ist kein Widerspruch, sondern „responsives Design“. Der Fachbegriff bezeichnet Webseiten, die sich flexibel unterschiedlichen Bildschirmen und Displays anpassen. Responsive Seite breiten sich auf großen Monitoren aus und falten sich auf dem Mobiltelefon zusammen.

Auf dem Smartphone klappt sich die breite Navigation zusammen, Textblöcke gruppieren sich untereinander statt nebeneinander. Bilder passen ihre Größe an.

das muss sein

Impressum
Datenschutzerklärung

der-siebte-webdesigner.de

Jürgen Scholz (Diplom-Ökonom)
Fischenbeck 50a, 45472 Mülheim / Ruhr
Tel. 01577 / 34 16 597
js@juergen-scholz-online.de

Technisches

Webseiten baue ich mit WordPress (als Content Management System) oder - so wie diese - mit dem wundervollen HTML & CSS Baukasten von Bootstrap.