Diese Seite hilft dir beim Aufbau deines Designs. Hier werden alle zu gestaltenden Elemente exemplarisch dargestellt.
Aufbauseite
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 zu greifen.
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
- Stelle hier den Stil für eine Aufzählung ein
- Dazu gehören Abstände und die Aufzählungsart
- 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