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
Moodboards
Bildsammlung, um die Inspiration und Ideen zur visuellen Ausrichtung unseres Projekts festzuhalten.






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
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.