Verwenden von Orientierungspunkten Macht das Seitenlayout einfach
Ein Design kann Auswirkungen haben. Es kann Stil haben. Aber diese zu haben ist nicht genug.
Um gut zu funktionieren, muss ein Design Elemente haben, die die Stärken des anderen ausspielen. Glücklicherweise hat jedes Stück Inhalt inhärente Richtlinien.
Layout oder die Anordnung von Inhalten auf einer Webseite ist entscheidend für den Erfolg eines Designs. Das Layout priorisiert unter anderem Inhalte, um Personen von einem Element zum nächsten zu führen.
Wenn es richtig gemacht wird, werden die Leute so an dem Inhalt interessiert sein, dass sie nichts anderes bemerken werden.
Lesen Sie weiter für weitere Details und Tipps zum Erstellen von Layouts, die in Ihren Designs funktionieren.
Im folgenden Beispiel werden die meisten Leute zuerst das Foto oder die Überschrift, dann den Text und schließlich die Links sehen.
Sie bemerken möglicherweise nicht, dass die Überschrift, der Text und das Gesicht des Modells jeweils ein Drittel und zwei Drittel in die Seite gesetzt sind (unter Einhaltung der Drittelregel) oder dass die Überschrift und die Links in Farben geschrieben sind, die den Lippen des Models entnommen wurden Ihre Schulterkurve führt den Blick auf die Handlungsaufforderungen.
Text, Foto und Überschrift bilden eine Komposition. Wenn einer fehl am Platz ist, versagt das ganze Stück.
Arrangement auf der Grundlage gegenseitigen Respekts
Wo legen wir Sachen hin? Lass es uns sagen. Die Macken von Grafiken, Fotos und Textstücken werden sichtbar, wenn sie sich auf einer Seite treffen. Manche arbeiten besser zusammen als andere, und manche arbeiten nur, wenn sie auf eine bestimmte Weise platziert sind. Zum Beispiel funktioniert unser Layout technisch auf zwei Arten:
Abbildung 1 zeigt das Layout in unserem Beispiel oben. Graue Blöcke repräsentieren die Überschrift, das Foto und den Text.
Abbildung 2 zeigt, wie die gleichen Prinzipien für die Inversion gelten würden: ein großes Element, das durch zwei kleinere Elemente ausgeglichen wird. Dieses bestimmte Foto sieht jedoch auf der rechten Seite besser aus.
Unser Modell schaut nach links. In Abbildung 1 sieht sie sich den Text an. In Abbildung 2 sieht sie weg von dem Text. Das hätte vielleicht funktioniert, wenn sie in die Kamera geschaut hätte, aber weil sie wegschaut, verliert sie etwas an Wirkung. Nicht viel, aber genug, um eine Rolle zu spielen.
Das Modell zeigt abwechselnd Interesse an dem Text und ignoriert ihn, wenn er invertiert wird. Die Anordnung der Elemente ergibt entweder eine positive oder eine negative Einstellung.
Ausrichtung basierend auf Orientierungspunkten
Manchmal gibt das Ding, das Elemente auf eine bestimmte Art funktioniert, auch Hinweise auf Raum und Ausrichtung. Wir haben bemerkt, wie die Augen des Modells nach links zeigen, aber das Foto und der Text enthalten andere visuelle Hinweise.
Implizierte Linien zwischen Landmarken in der Typografie und dem Bild sind in dieser Komposition reichlich vorhanden:
- Das Auge und die Lippen des Modells und die Nase treffen auf den Rand der rechten Textsäule.
- Die linke Spalte des Textes trifft den linken Rand der Überschrift. Es erreicht fast die Haargrenze des Modells, fällt aber nicht aus, um mit der rechten Spalte übereinzustimmen.
- Das Gesicht des Modells (insbesondere die Augen und der Mund) definiert den vertikalen Raum der Überschrift.
- Der untere Teil des Fotos markiert das untere Drittel der Komposition (in der Drittelregel).
- Die Augen des Modells sind ein Drittel von der Oberseite der Komposition entfernt.
- Die Mitte des Gesichts des Modells und die rechte Kante der Überschrift treffen sich bei den Terz- und Zweidrittelpunkten der Breite der Komposition.
Einige Orientierungspunkte haben mehr Macht als andere. Designer und Fotografen könnten zum Beispiel darüber diskutieren, ob die Augen des Modells einflussreicher sind als ihre Silhouette. Ein Layout, das auf beliebigen Orientierungspunkten basiert, ist jedoch besser als ein Layout, das sie ignoriert.
Verwenden von Funktionen zum Erstellen von Harmonie
Nicht-Designer, die ihre Layouts ausprobieren, ordnen Elemente manchmal so an, wie sie auf die Seite passen. Platz sollte respektiert werden, aber es führt nicht immer zum besten Design.
Abbildung 5 richtet Elemente auf den Seitenraum aus und richtet alles auf die Grenzen der Zeichenfläche aus.
Abbildung 6 basiert jedoch auf den Brennpunkten im Foto. Das Ergebnis ist ein schlankeres Erscheinungsbild.
Abbildung 5 ist ineffizient, weil die Zuschauer zwischen den Fokuspunkten hin- und herspringen: zur Überschrift, zum Gesicht, bis zum Text. Die einfachste Linie ist gerade. So führt Abbildung 6 den Blick des Betrachters leicht von links nach rechts, von einem Element zum nächsten. Der Kern des zweiten Layouts ist ein schmales Band, das entlang der Überschrift-Fläche-Text-Ausrichtung verläuft.
In diesen Bildern werden die Leser zu dem Gesicht, der Überschrift und dem Text des Modells hingezogen - normalerweise in dieser Reihenfolge. Das sind drei verschiedene Bereiche, die man sich ansehen sollte. Wenn Sie sie ausrichten, erhalten Sie den Fokus des Layouts.
Die richtige Antwort
Alle drei Layouts verwenden die gleichen Überschrift-, Foto- und Textelemente:
Das erste Layout hat den meisten "atmenden Raum". Der zweite respektiert den Text. Das dritte Layout verwendet negativen Raum, um das Gleichgewicht zu erreichen. Alle drei verwenden Landmarken, aber auf unterschiedliche Weise. Ist einer der Beste?
Die Suche nach einer Antwort kann uns blind machen für das Offensichtliche: dass mehrere Lösungen gleichermaßen gültig sein können, wenn die Elemente zusammenarbeiten. Visuelle Landmarken sind Gelegenheiten, keine Regeln. Sehen Sie sich das erste Design noch einmal an.
Je mehr die Elemente den implizierten Linien entsprechen, desto mehr wird ein nicht konformes Element herausstechen. Hier bricht der Designer das Wort "Landmarks" von der vertikalen Ausrichtung des anderen Textes und betont damit das Schlüsselwort.
Es gibt keinen Zweifel darüber, was die Seite fördert. Erfolg wird nicht daran gemessen, wie streng die Elemente den Designprinzipien entsprechen, sondern wie gut die Seite ihre Botschaft kommuniziert.
Geschrieben exklusiv für Webdesigner Depot von Ben Gremillion. Ben ist ein freiberuflicher Schriftsteller und Designer Wer löst Kommunikationsprobleme mit besserem Design?
Wie folgst du Orientierungspunkten auf deinen Entwürfen? Was funktioniert am besten für dich und was nicht?