Aufbau


Beispiel Seite

Diese Seite hilft dir beim Aufbau deines Designs. Hier werden alle zu gestaltenden Elemente exemplarisch dargestellt.

Branding

Heller Bereich

Die erste Schriftart wird standardmäßig für die gesamte Seite festgelegt.

Wenn eine zweite Schriftart gewählt ist, wird diese auf alle Überschriften angewendet.

Dunkler Bereich

Achte auf gute Kontrastwerte deiner Farben zueinander und definiere genügend Abstufungen, um später darauf zurück greifen zu können.

Typografie

Headline H1

Wähle für die Texte eine Schriftart aus, die gut lesbar und am besten für Bildschirme optimiert ist. So gewährleistest du, dass deine Inhalte auch auf kleinen Bildschirmgrößen gut lesbar sind.

Headline H2

Um die Abstände besser bewerten zu können, sind die Überschriften direkt in den Kontext zu Texten gesetzt.

Headline H3

Viele Auszeichnungsschriften, die als Headlines sehr gut aussehen, eignen sich für Fließtexte nur bedingt. Teste  die Lesbarkeit der gewählten Schrift doch einfach selbst, indem du diesen längeren Text liest.

Dabei kannst du auch Werte wie Zeilenhöhe und Absatzabstände überprüfen. Verrutscht das Auge häufig in der Zeile? Kommt man in einen Lesefluß oder stockt man noch zu sehr?

Headline H4

Auch schmalere Absätze sollten gut lesbar sein. Automatische Trennstriche sind im Web nur bedingt zuverlässig.

H1 als Titel

H3 als Unterüberschrift

Überschriften stehen auch oft in Bezug zueinander, also zum Beispiel direkt untereinander.

H2 als Kapitel­überschrift

H4 als mittellange Unterüberschrift

Auch schmalere Absätze sollten gut lesbar sein. Automatische Trennstriche sind im Web nur bedingt zuverlässig.

Headline H5
  • Stelle hier den Stil der normalen Bullet-Points ein
  • dazu gehören Abstände und das Standardzeichen
  • Individuelle Icons kannst du später hinzufügen
Headline H6
  1. Stelle hier den Stil für eine Aufzählung ein
  2. Dazu gehören Abstände und die Aufzählungsart
  3. Auch hier kannst du individuelle Icons später hinzufügen

Des weiteren gibt es noch die Möglichkeit, einen Stil für eine sogenannte „Blockquote“ einzurichten:

Dieses Absatzformat wird meist für einen kleinen Einschub oder ein Zitat verwendet.

Es handelt sich dabei um ein Standard HTML-Element, welches in allen Browsern unterstützt wird und problemlos in Beiträge eingebaut werden kann.

Schaltflächen

Buttons

Links

Links können in Texten vorkommen, aber auch losgelöst für sich stehen:

Sucheingaben

Kontaktformular

[contact-form-7 id=“36″]