top of page

Seitenvorlage

in Farbcode #2E4D85

Wenn du auf meinen umliegenden Bereich klickst, siehst du dass ich in einem "Streifen" drin bin. Streifen sind super für die Ordnung und das Layout der Seite. Bitte verwende immer (ausser für Titel) Streifen, das macht das Leben einfacher.

Mittlerweile hast du dich sicher schon gefragt, wie der Text hier formatiert wurde. Die Schrift ist nach unserem Corporate Design gewählt. Die Schriftart ist Helvetica Neue LT Com 55 Roman. Wichtig ist, dass du immer darauf achtetst, dass der Zeichenabstand bei "0.05" liegt und der Zeilenabstand bei "1.5"!

Fliesstext hat in der Regel eine Schriftgrösse von 16, auf Mobile hingegen 14.

Weiter ist für Mobile wichtig, dass man einfache Zeilenumbrüche vermeidet. Das heisst, dass man einen Umbruch wie diesen

vermeidet. Solche einfachen Umbrüche sollen entweder entfernt werden oder mit einem "doppelten" Umbruch ersetzt werden.

Sodass auch auf Mobile eine klare Trennung sichtbar wird. (Das ist zumindest aktuell die beste Lösung)

Die Titel Schriftart ist "Lulo Clean W 01 ONe Bold"

Streifen erlauben es auch mehrere Spalten zu machen, diese erlauben ein schönes Design, welches auch auf Mobile nicht zerschossen wird.

HS20 Vor Ort.png

Sei dir bei diesen Streifen und im generellen bewusst, dass mit einer kompletten Ausnützung der gesamten Breite zur Folge hat, dass auf kleineren Displays der Inhalt bis an den Geräterand gehen kann. Dies ist unschön - es sollte also immer ein genügend breiter Abstand zu den Seiten gelassen werden.

Gerne kannst du auf die Mobile Version wechseln um den Unterschied zu sehen.

Seitenrand 1

Seitenrand 2

Sei dir bei diesen Streifen und im generellen bewusst, dass mit einer kompletten Ausnützung der gesamten Breite zur Folge hat, dass auf kleineren Displays der Inhalt bis an den Geräterand gehen kann. Dies ist unschön - es sollte also immer ein genügend breiter Abstand zu den Seiten gelassen werden.

Gerne kannst du auf die Mobile Version wechseln um den Unterschied zu sehen.

Links

Generell unterscheiden wir zwei verschiedene Arten Links in den Text einzubauen. Die wohl häufigste Methode ist das Verlinken im Text selber. Dies der Text mit Hyperlink wird automatisch Unterstrichen und muss wieder entfernt werden, damit die Leserlichkeit hoch bleibt. Die Farbe muss nachträglich gewählt werden. Der Farbcode lautet ​#008AFC

Die zweite Art funktioniert über ein etwas mühsames Designelement. Die folgende Kombination kannst du die als eigenes Element auf deinem Account abspeichern. Wichtig dabei ist, dass der Link zweimal eingefügt werden muss: sowohl im Pfeil als auch auf dem Text. (Der Text bleibt hier nicht unterstrichen)

Hilfslinien

Screenshot 2020-08-21 at 19.15.31.png
bottom of page