Kapitel 04

Farben, Schriften und Komponenten

Jedes Template hat ein eigenes Design System. Farben, Schriften und Bausteine sind zentral als Stile und Komponenten angelegt. Änderst du sie dort, ändert sich die ganze Website.

Farben

Die Farben liegen als Farbstile im Bereich „Assets“ (links im Editor). Jeder Farbstil hat eine Rolle, zum Beispiel Hintergrund, Text, Akzent oder Linie.

Öffne Assets und dort die Farben.
Klicke auf einen Farbstil und wähle deine Farbe.
Hat der Stil einen Wert für hell und einen für dunkel, passe beide an. Der dunkle Wert gilt, wenn Besucher ihr Gerät auf dunkle Darstellung gestellt haben.

Schriften

Schriften stecken in den Textstilen, ebenfalls unter Assets. Jeder Textstil hat eigene Grössen für Desktop, Tablet und Phone.

Öffne einen Textstil, zum Beispiel den für grosse Überschriften.
Wähle eine andere Schrift oder Grösse.
Prüfe die Grössen für Tablet und Phone. Grosse Überschriften brauchen auf dem Handy meist deutlich kleinere Werte.
Sieh dir das Ergebnis in der Vorschau auf allen drei Breiten an.

Eigene Schriften deiner Marke kannst du in Framer hochladen. Achte darauf, dass deine Lizenz die Nutzung im Web erlaubt.

Komponenten

Wiederkehrende Bausteine wie Navigation, Produktkarte, Knöpfe oder Footer sind Komponenten. Eine Änderung an der Komponente wirkt überall, wo sie vorkommt.

Inhalt einer einzelnen Stelle ändern: Komponente auf der Seite auswählen. Rechts erscheinen ihre Eigenschaften (Text, Link, Variante). Diese Änderung gilt nur hier.
Aussehen überall ändern: Doppelklick auf die Komponente öffnet ihre Vorlage. Dort änderst du Form, Abstände und Varianten für alle Stellen gleichzeitig.
Varianten sind Zustände derselben Komponente, zum Beispiel „Standard“, „Hover“ und „Gedrückt“ oder die Fassung für Phone.

Komponenten und Stile sind nach dem Muster Ordner/Name benannt, zum Beispiel Shop/Product Card. So findest du sie in Assets schnell wieder.

Desktop, Tablet und Phone

Jede Seite hat drei Breiten (Breakpoints). Prüfe nach grösseren Änderungen alle drei: oben im Editor zwischen den Breiten wechseln oder in der Vorschau das Fenster schmaler ziehen.