4 Prinzipien für sauberes und schönes Webdesign

In diesem Artikel werden diese 4 Prinzipien im Hinblick auf Webdesign erläutert. Wenn Sie diese vier Prinzipien im Hinterkopf behalten, können Sie übersichtlichere und schönere Webseiten gestalten.

1. Kontrasteffekt

Ein gutes Design mit Kontrasteffekt kann bei Benutzern einen hervorragenden ersten Eindruck hinterlassen. Wenn das Auge des Benutzers keinen Brennpunkt hat, verliert sich seine Aufmerksamkeit in einer Benutzeroberfläche, die mit Elementen gleicher Größe und Typografie gefüllt ist. Designer müssen sehr offensichtliche und auffällige visuelle Elemente entwerfen, um das Benutzererlebnis zu steuern. Durch die Wahl von Bildern, Farben, Schriftarten etc. können Sie einen guten Kontrasteffekt erzielen.

Bildkontrast

Diese Methode eignet sich gut, wenn Sie eine große Illustration hinter vielen kleineren Elementen anzeigen müssen. Also, ich meine zum Beispiel:

Die Rechnungsmaschine

Diese Seite verwendet ein großes Bild, um die Aufmerksamkeit des Benutzers zu erregen. Gleichzeitig sorgen die natürlichen monochromen Farben des Webs dafür, dass die wenigen blauen Anwendungen eine bessere Wirkung erzielen.

Instabox

Was fällt Ihnen als Erstes auf, wenn Ihr Blick auf diese Seite fällt? Am wahrscheinlichsten ist der Stern auf der Schachtel. Wie The Invoice Machine erzeugen beide durch die Verwendung eines großen Bildes und minimaler Farben einen Blickfang.

Farbkontrast

Eine weitere effektive Möglichkeit, auf einer Webseite optische Kontraste zu erzeugen, besteht darin, kleine Farbmengen gezielt einzusetzen. Sie können in der Kopfzeile und im Text einer Webseite unterschiedliche Farben verwenden oder diese auf die Farben eines Bildes oder einer Illustration anwenden.

Fatburgr

Diese Website ist ein hervorragendes Beispiel für die Anwendung aller Designprinzipien . Um einen Farbkontrast zu erzielen, betrachten wir die große gelbe Überschrift und den kleinen hellgrauen Text. Die Prinzipien der Anordnung, des Bildkontrasts, der Wiederholung und der Klassifizierung werden alle sorgfältig umgesetzt.

Ich liebe Typografie

Wie großartig wäre es, wenn eine Website, die Typografie präsentiert, uns einen hervorragenden Typografie-Effekt in ihrer eigenen Kopfzeile zeigen könnte! Mir gefällt die verwendete Schriftart und die gelungene Farbkombination aus Blaugrün und Dunkelgrau.

Schriftkontrast

Wenn Sie durch Schriftarten Kontrast erzeugen möchten, sollten Sie die Verwendung von zwei Schriftarten vermeiden, die sich in Aussehen und Größe sehr ähneln. Ähnlich aussehende Schriftarten können Verwirrung stiften und das Design verwischen. Es kann jedoch sehr wirkungsvoll sein, die Schriftgröße stark zu variieren oder die hellste und die fetteste Version der Schriftart miteinander zu kombinieren. Wenn Sie beispielsweise zwei Schriftarten nebeneinander platzieren, die sehr unterschiedlich aussehen, werden Sie von der visuellen Wirkung überrascht sein. Setzen Sie eine serifenlose Schriftart ein und Ein Beispiel hierfür ist eine handschriftliche Schriftart.

Fixie-Beratung

Wow, mir gefallen die Typografie und die Farben dieser Website wirklich gut. Achten Sie auf die Größe und Strichstärke ihrer Slogans. Ich habe die Wassereffekte und die Verwendung von etwas Blau auf der Seite sehr geschätzt.

2. Wiederholungsprinzip

Das Prinzip der Wiederholung kommt im Buchdesign häufiger vor als im Webdesign , ist aber in beiden Bereichen gleichermaßen wirksam. Durch die Wiederholung von Designelementen kann eine Seite stimmig erscheinen und Ihre Marke gestärkt werden. Eine Möglichkeit im Webdesign , dies zu erreichen, besteht darin, Elemente in der Kopf- und Fußzeile der Seite zu wiederholen. Schauen Sie sich die folgenden Beispiele an.

Ten24 Medien

Ten24 Media verwendet sowohl im Header als auch im Footer kreative Illustrationen.

Silberrücken

Diese Website ist einfach fantastisch! Ich könnte dies definitiv als gutes Beispiel im Abschnitt „ Kontrast “ oben verwenden, aber es ist auch ein gutes Beispiel im Abschnitt „Wiederholung“, da es sowohl im Schnittstellenstil als auch im Branding klar angewendet wird. Wenn Sie genau hinsehen, werden Sie feststellen, dass am Anfang der Liste eine Banane als Symbol verwendet wird und dass sich am Kopf- und Fußende Waldillustrationen befinden.

3. Gestaltungsgrundsätze

Ausrichtungsprinzipien spielen eine komplexe Rolle dabei, ob Ihre Website amateurhaft oder professionell aussieht . In letzter Zeit bin ich ein großer Befürworter der Verwendung von Rastern beim Entwurf von Webseiten. Dadurch bleibt Ihr Design sauber und bietet gleichzeitig einen schönen Designrahmen. Wenn Sie mehr über Rasterdesign erfahren möchten , lesen Sie meinen neuesten Beitrag (ich gebe nur ein bisschen an), Entwerfen Sie ein neues Blog-Theme auf dem 960-Raster

Weingut Black Estate

Diese Site wird auf der 960 Grid-Website vorgestellt. Sein Layout ist stimmig und auffällig. Mir gefällt, dass der Hauptinhalt sauber auf der linken Seite bleibt, obwohl einige der großen Überschriften diese Regel verletzen und in die linke Seitenleiste übergehen. Der großzügige Einsatz von Weißraum sowie der Einsatz von Schriftkontrast und -größe sind beide sehr gut.

Eine Liste   Auseinander

Eine Liste für sich Das verwendete visuelle Raster ist sehr markant. Die Spalten im Inneren sind gut gestaltet , sodass der gesamte Inhalt leicht zu lesen ist. Studien haben gezeigt, dass zu breite Spalten zu erheblichen Leseschwierigkeiten führen können. Beim Verfolgen des Textes in einer so breiten Spalte ermüden Ihre Augen. Eine Liste für sich

4. Klassifizierungsgrundsätze

Das letzte Prinzip ist die Klassifizierung . Dieses Prinzip wird nur beim Gruppieren verwandter Elemente und beim Trennen nicht verwandter Elemente verwendet. Wenn Sie alles im selben Textblock zusammenfassen, wird das Benutzererlebnis völlig ruiniert. Aus diesem Grund ist die Verwendung von Header-Tags und die richtigen Abstände so wichtig.

Envato

Die Site leistet hervorragende Arbeit bei der übersichtlichen Organisation ihrer Inhalte in drei Hauptkategorien, die klar und deutlich definiert sind.

Paradigma neu geboren

Diese Website ist gut strukturiert. Der Kopf ist schlicht und einfach. Der Weißraum wird gut belassen und die Inhalte sind sehr logisch getrennt.

Abschließende Gedanken

Wenn Sie diese vier Grundprinzipien beachten, werden Sie unglaubliche Verbesserungen in Ihren Designs feststellen. Es gibt sicherlich noch viele andere Dinge zu bedenken, aber Ihr Design wird viel bewirken, wenn Kontrast, Wiederholung, Anordnung und Klassifizierung die Grundlage bilden.