Style Guide

De Domein Groot Besselink Styleguide, in dem wir die wichtigsten Stilelemente für die Website erläutern.

Grundlage hierfür ist ein CSS-Framework, in dem alle Variablen definiert werden, um ein einheitliches Design zu gewährleisten. Alle diese Variablen haben eine mathematische Grundlage und sind zwischen verschiedenen Bildschirmgrößen skalierbar.

Impressum

Domein Groot Besselink
Lage Lochemseweg 31 C
7218 PA Almen

0575 234 234 
info@grootbesselink.nl

Moodboards

Bildsammlung, um die Inspiration und Ideen zur visuellen Ausrichtung unseres Projekts festzuhalten.

Logo

Richtlinien zur Logo-Nutzung von Domein Groot Besselink.

Logo Dunkel

Zur Verwendung auf hellem Hintergrund

Logo Licht

Zur Verwendung auf dunklem Hintergrund

Farbpalette

Richtlinien für Farben und Verwendung zu Domein Groot Besselink wirksam darzustellen.

Markenfarben

„Markenfarben“ sind eine oder mehrere bestimmte Farben, die Ihre Marke repräsentieren und in der gesamten visuellen Kommunikation verwendet werden. Diese Farben wurden sorgfältig ausgewählt, um eine erkennbare und konsistente Markenidentität aufzubauen. Die Verwendung von Volltonfarben trägt dazu bei, dass sich eine Marke optisch abhebt und eine emotionale Verbindung zum Publikum herstellt, indem sie Assoziationen und Werte vermittelt, die zu Ihrem Markenimage passen. Die Verwendung einer Farbe sorgt oft für Ruhe, mehrere Farben erzeugen einen vielseitigeren Look.

primär

Sekundär

Tertiär

Accent

primär

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Sekundär

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Tertiär

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Accent

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Neutrale Farben

„Neutrale Farben“ sind Farben, die keine starke emotionale Ladung oder Assoziation haben und normalerweise als Hintergrund oder Basis in Designs dienen. Sie werden häufig als Ausgleich und Unterstützung anderer, auffälligerer Farben eingesetzt und sorgen bei optischen Gestaltungen für eine ruhige, harmonische Optik. 

Basis

Neutral

Basis

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Neutral

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Semantische Farben

„Semantische Farben“ sind Farben, die im Kontext eines Designs oder einer Benutzeroberfläche eine bestimmte Bedeutung vermitteln. Sie werden häufig verwendet, um eine bestimmte Funktion oder einen bestimmten Status zu kommunizieren, beispielsweise Rot für Fehler oder Warnungen, Grün für Erfolge, Blau für Informationen und Gelb für Achtung oder Warnungen. In der Webentwicklung und im UI-Design helfen semantische Farben den Benutzern dabei, intuitiv zu verstehen, was auf einer Website oder in einer Anwendung passiert, indem sie die Farbe direkt mit der übermittelten Aktion oder Nachricht in Verbindung bringen.

Erfolg

Achtung

Warnung

Info

Erfolg

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Achtung

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Warnung

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Info

Ultraleicht

Light

Halbleicht

Halbdunkel

Dunkel

Ultra Dark

Typografie

Richtlinien für Typografiestile und -verwendung für Domein Groot Besselink wirksam darzustellen.

Schriftfamilien

Genau wie Markenfarben tragen Schriftarten zur visuellen Identität Ihrer Marke bei und verstärken die Botschaft, die Sie vermitteln möchten. Sie werden in Logos, Websites, Anzeigen und anderen Formen des Brandings verwendet, um Einheitlichkeit und Wiedererkennbarkeit zu gewährleisten. Sie können 1 Schriftart oder ein Schriftartenpaar auswählen.

Rubriken: Lehrer

Körper: Outfit

Rubriken

Position 1 (H1)

Position 2 (H2)

Position 3 (H3)

Position 4 (H4)

Position 5 (H5)
Position 6 (H6)

Hauptteil

Dies ist ein Beispieltext. Keine Sorge, dies wird ersetzt, wenn Ihre Website fertig ist. Sobald alle Informationen vorliegen, wird dieses Beispiel zu ersetzender Text durch die richtigen Texte.

Manchmal ist es notwendig, temporären Text zu platzieren, um eine Vorstellung davon zu bekommen, wie der Text auf der Website aussehen wird.

Traditionell nutzt unsere Branche Lorem Ipsum, ein Beispieltext in Latein. Leider ist nicht jeder mit Lorem Ipsum vertraut, was zu Verwirrung führen kann. Ich kann Ihnen gar nicht sagen, wie oft Kunden mich gefragt haben, warum ihre Website in einer anderen Sprache ist!

Gibt es weitere Beispieltexte wie Hipster Ipsum, Zombie Ipsum, Bacon Ipsum und viele mehr. Diese Beispieltextpassagen sind mitunter lustig, können aber auch zur Verwirrung führen.

Falls Sie neugierig sind, dies ist die Website Ipsum. Es ist speziell für den Einsatz auf Entwicklungswebsites konzipiert. Website Ipsum ist nicht nur weniger verwirrend als andere Ipsums, sondern auch in Mustern formatiert, die eher dem eines echte Kopie wird heute im Internet formatiert.

Gewicht

Verschiedene Schriftstärken für Textinhalte.

Aa

Licht 300

Aa

Regulärer 400

Aa

Bold 700

Aa

Kursiv Leicht 300

Aa

Kursiv Normal 400

Aa

Kursiv fett 700

Tasten

Richtlinien für den Button-Stil, um ein einheitliches Erscheinungsbild beizubehalten.