Wenn wir über Design sprechen, müssen wir Text aus der Perspektive eines Designers betrachten. Der Text muss lesbar und lesbar sein, wobei er gut zum Stil der Website passt. Es muss sich aber auch auf eine inhaltliche Hierarchie beziehen.
Aufbau von Hierarchien ist das "große Bild". der Zusammensetzung einer Website. Wenn Sie sich jedoch mit der Typografie beschäftigen, müssen Sie auch Hierarchien erstellen, die sich auf bestimmten Text auf der Seite beziehen. In diesem Beitrag erklären wir, wie Sie Beziehungen zu Ihren Kopfzeilen erstellen und wie Sie Leerzeichen verwenden, um lange Absätze visuell verdaulich zu machen.
Überschriften & Abstände
Webinhalte konzentrieren sich normalerweise nur auf ein paar verschiedene Textelemente. Die Überschriften reichen von H1-H6, die meisten Websites verwenden jedoch höchstens H1-H4. Unabhängig davon, wie viele Überschriftenstile verwendet werden, ist es Ihre Aufgabe als Designer, sie so zu gestalten, dass die Hierarchie eindeutig festgelegt ist.
Der Abstand zwischen Text ist wichtig, da der Inhalt der Seite selbst definiert werden kann. Wenn Benutzer einen neuen Header finden, erwarten sie zu erkennen, ob Inhalt zu einem neuen Betreff wechselt oder ob er sich innerhalb eines vorhandenen Betreffs befindet. Die richtige Kombination aus Größe, Farbe und Stil des Überschriftentextes hilft dabei, die richtigen Erwartungen für die Benutzer zu wecken.
Negativer Abstand zwischen Text zeigt, wie der Seiteninhalt zusammenhängt. Header mit viel Platz werden als dominanter wahrgenommen, während Header, die sich näher an Absätzen befinden, über Kontext als verwandt betrachtet werden. Die unteren Ränder nach Absätzen zeigen die Beziehung zwischen den Textzeilen und ihrer Position in der Hierarchie. Alles bezieht sich auf die Erstellung einer Hierarchie von Inhalten, um visuell zwischen Text auf der Seite zu unterscheiden.
Überschrift Beziehungen
Jede Überschrift sollte einen eigenen Stil haben, der auch andere Textstile auf der Seite ergänzt. Das Erstellen brillanter Überschriften wird mit der Übung einfacher, aber Leerzeichenwerte sollten sich im Allgemeinen unabhängig von den Überschriftenstilen gleich verhalten.
Square verwendet ein traditionelles Startup-Layout mit vielen Bildern und Textblöcken. Überschriften sind ein besonders interessantes Segment des Designs, da sie von übergroßen bis unendlich kleinen reichen. Die Größe ist jedoch weniger wichtig als die Beziehung zu anderem Text auf der Seite.
Beachten Sie im obigen Screenshot, wie große Überschriften einen zusätzlichen Abstand oberhalb und unterhalb des Textes erfordern. Diese Abschnittsüberschriften vermitteln visuell das Gefühl, "allein" zu sein. aber natürlich auch in größere Blöcke von Unterüberschriften und Absätzen zusammenfassen.
Jeder innere Block verwendet einen viel kleineren Unterheader-Text. Diese internen Überschriften haben ungefähr die gleiche Größe wie Absatztext, zeichnen sich jedoch durch fetten Text und eine dunklere Farbe aus. Visuell ist klar, dass diese fettgedruckten Textzeilen immer noch Überschriften sind (nur unterhalb des visuellen Totems).
Der Abstand zwischen Kopfzeilen und Absätzen legt außerdem fest, welche Absätze zu welchen Kopfzeilen gehören. Ebenso sollten Sie viel Platz zwischen kleineren Kopfzeilen und größeren Kopfzeilen einfügen. Negativer Raum definiert die Hierarchie sowohl in der visuellen Gestaltung als auch in der Typografie.
Beachten Sie beim Erstellen von Seitenköpfen die folgenden Punkte, wie im kostenlosen Leitfaden für bewährte Web-UI-Designentwürfe beschrieben:
- Eine visuelle Hierarchie sollte durch die Verwendung von Raum, Größe, Farbe und / oder Textstil sichtbar werden. Dies sollte auch sichtbar sein, wenn Sie sich 5 bis 5 Meter vom Monitor entfernt befinden. Sie können auch den 5-Sekunden-Gaußschen Unschärfetest verwenden, um die Hierarchie zu überprüfen.
- Halten Sie jeden Subheader in der Nähe des ersten untergeordneten Abschnitts.
- Platzieren Sie Markenköpfe in unmittelbarer Nähe, um Ideen schneller und deutlicher zu vermitteln.
Lange Absätze
Beim kontextuellen Leerraum stellt sich die Frage, wie man den gemeinsamen Absatz gestalten soll. Fest, zuverlässig und fast überall zu finden, ist der Absatz das Rückgrat der Content-Strategie jeder Website.
Wie der Inhalt geschrieben wird, hängt jedoch davon ab, wie der Inhalt gestaltet wird. Beispielsweise verwendet ein Online-Nachrichtenmagazin andere Absatzstile als ein kleineres Garten-Blog. Die Menge des Inhalts, die Länge des Inhalts und der Detaillierungsgrad spielen beim Gestalten von Absätzen eine Rolle.
Versuchen Sie, den Text so groß zu gestalten, dass er gut 3 Meter vom Bildschirm entfernt lesbar ist. Die Textgröße ist der weißen Fläche sehr ähnlich, da es normalerweise besser ist, größer als kleiner zu gestalten. Jedoch Mäßigung und Zurückhaltung üben.
Wenn die Textgröße zu groß ist, nimmt dies nur mehr Platz auf dem Bildschirm ein und erfordert mehr Bildlauf. Wenn es zu klein ist, ist es möglicherweise nicht lesbar, oder der vertikale Rhythmus wird für die Besucher schwierig, wenn sie ihren Blick von Linie zu Linie bewegen.
Zwei wichtige Punkte, die zu beachten sind, sind Absatzränder und Zeilenhöhe (der Abstand zwischen den einzelnen Zeilen). Die Größe des Textes in Ihren Absätzen bestimmt beide Werte, da der Leerraum von der Größe abhängt.
Medium ist eine Online-Blogging-Plattform, die das Design von Absätzen richtig macht. Der Text ist klar, lesbar und perfekt verteilt. Wie das Absatzdesign zeigt, müssen die Zeilenhöhenwerte groß genug sein, um eine Verbindung mit der nächsten Zeile herzustellen, ohne sich übermäßig zu fühlen.
Wie im E-Book zu Web Design Trends 2016 empfohlen, sind hier einige gute Daumenregeln zu beachten:
- Vermeiden Sie es, die Zeilenhöhe größer als eine typische Textzeile zu machen.
- Die em font-Einheit ist ideal für die Erstellung einheitlicher Größen für alle Browser.
- Die Zeilenhöhe sollte oft etwas größer als die Schriftgröße sein.
- Versuchen Sie eine Schriftgröße von 1em in Kombination mit einer Zeilenhöhe von 1.5em-1.75em.
Der Absatzabstand kann schwierig sein, ist aber insbesondere für textlastige Websites ein wichtiges Thema. Der untere Absatzrand sollte viel größer als eine typische Textzeile sein. Die unteren Absatzränder sollten groß genug sein, um visuell bestimmen zu können, wann ein Absatz beendet ist.
Wenn Sie die Textgröße einer Website herausgefunden haben, wird es viel einfacher, mit Zeilenhöhenwerten zu spielen und Ränder für den Abstand zu ermitteln.Ziel ist hier Klarheit und Struktur. Jeder neue Absatz sollte ohne Zweifel offensichtlich sein. Der Schlüssel ist proportionaler Abstand zwischen jedem Textblock.
Wie bereits erwähnt, ist es generell sicherer, zu viel zu haben. Leerraum eher als nicht genug. Vermeiden Sie es, kolossale Flächen zu verwenden, da sonst eine sehr geringe Inhaltsdichte entsteht. Behalten Sie genug Inhalt auf der Seite, um interessant zu sein, aber nicht so sehr, dass es überwältigend ist.
Weitere Informationen zum Entwerfen von Inhalten in Webschnittstellen finden Sie in diesem Abschnitt, wie Sie den perfekten Absatz entwerfen.
Wegbringen
Der negative Raum in der Typografie wirkt sich direkt auf die gesamte Komposition und gleichzeitig auf kleinere Seitenelemente aus. Bei der Gestaltung von Typografie ist der Kontext König.
Auf der Seite gefundene Absätze benötigen möglicherweise größere Ränder als in der Seitenleiste gefundene Absätze. Links im Header könnten mit zusätzlicher Polsterung weicher aussehen, Links in der Fußzeile könnten jedoch mit sehr wenig Polsterung sauberer aussehen. Es gibt keine festen Regeln, nur bewährte Vorgehensweisen.
Denken Sie auch daran, dass die Typografie ebenso wie die Seitenstruktur mit einer eigenen Hierarchie folgt. Viel Übung ist die beste Möglichkeit, Ihre Augen zu verbessern, um räumliche Werte zu erkennen, die am besten in ein bestimmtes Webprojekt passen.
Wenn Sie mit Raum gestalten möchten, denken Sie daran, dass Raum als ästhetische Qualität den Raum als Gestaltungswerkzeug in den Hintergrund stellt. Der Raum schafft Beziehungen, definiert Hierarchien und betont den Inhalt - denken Sie immer daran, wenn Sie sich überlegen, wie Sie das Bildrauschen reduzieren.
In dem kostenlosen Web Design Trends 2016-eBook von UXPin können Sie mehr umsetzbare Designtechniken erlernen. In dem 185-seitigen Handbuch werden 10 Best Practices ausführlich erläutert. Sie finden 165 analysierte Beispiele von heutigen Top-Unternehmen.
Minimalistisches Grafikdesign
Minimalistisches Grafikdesign ist eine Philosophie, bei der jedes Element einen Zweck erfüllt. Es ist einfach, sauber und schön. Es ist sehr brauchbar. Unser Feature erforscht verschiedene Ansätze und Techniken für minimalistisches Grafikdesign (mit vielen inspirierenden Beispielen!)