Style Guide

De Domein Groot Besselink stijlgids, waarin we de belangrijkste stijlelementen voor de website verkennen.

De basis hiervan is een CSS framework waarin alle variabelen worden vastgelegd om zo een consistent ontwerp te behouden. Al deze variabelen hebben een wiskundige basis en zijn schaalbaar tussen verschillende schermformaten.

Bedrijfsgegevens

Domein Groot Besselink
Lage Lochemseweg 31 C
7218 PA Almen

0575 234 234 
info@grootbesselink.nl

Moodboard

Verzameling afbeeldingen om de inspiratie en ideeën van de visuele richting van ons project vast te leggen.

Logo

Richtlijnen voor logogebruik van Domein Groot Besselink.

Logo Donker

Voor gebruik op lichte achtergrond

Logo Licht

Voor gebruik op donkere achtergrond

Color Pallete

Richtlijnen voor kleuren en -gebruik om Domein Groot Besselink effectief te vertegenwoordigen.

Brand Colors

‘Brand colors’ zijn 1 of meer specifieke kleuren die jouw merk vertegenwoordigen en gebruikt worden in alle visuele communicatie. Deze kleuren zijn zorgvuldig gekozen om een herkenbare en consistente merkidentiteit op te bouwen. Het gebruik van vaste kleuren helpt een merk om visueel op te vallen en een emotionele connectie met het publiek te creëren, door associaties en waarden over te brengen die passen bij het imago van jouw merk. Gebruik van 1 kleur geeft vaak rust, meer kleuren een meer eclectische uitstraling.

Primary

Secondary

Tertiary

Accent

Primary

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Secondary

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Tertiary

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Accent

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Neutral colors

‘Neutral colors’ zijn kleuren die geen sterke emotionele lading of associatie hebben en meestal dienen als achtergrond of basis in ontwerpen. Ze worden vaak gebruikt om andere, meer opvallende kleuren te balanceren en te ondersteunen, en zorgen voor een rustige, harmonieuze uitstraling in visuele ontwerpen. 

Base

Neutral

Base

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Neutral

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Semantic Colors

‘Semantic colors’ zijn kleuren die een specifieke betekenis overbrengen binnen de context van een ontwerp of gebruikersinterface. Ze worden vaak gebruikt om een bepaalde functie of status te communiceren, zoals rood voor fouten of waarschuwingen, groen voor successen, blauw voor informatie en geel voor aandacht of waarschuwingen. In webontwikkeling en UI-design helpen semantische kleuren gebruikers intuïtief te begrijpen wat er gebeurt op een website of applicatie, doordat de kleur direct verband houdt met de actie of boodschap die wordt overgebracht.

Success

Danger

Warning

Info

Success

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Danger

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Warning

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Info

Ultra Light

Light

Semi Light

Semi Dark

Dark

Ultra Dark

Typography

Richtlijnen voor typografiestijlen en -gebruik om Domein Groot Besselink effectief te vertegenwoordigen.

Font Families

Net als bij merkkleuren dragen lettertypes bij aan de visuele identiteit van jouw merk en versterken ze de boodschap die je wil overbrengen. Ze worden toegepast in logo’s, websites, advertenties, en andere vormen van branding om eenheid en herkenbaarheid te waarborgen. Gekozen kan worden voor 1 lettertype of een fontpair.

Headings: Teacher

Body: Outfit

Headings

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)
Heading 6 (H6)

Body Text

Dit is voorbeeld tekst. Geen zorgen, dit zal vervangen worden bij de afronding van je website. Zo gauw alle informatie aanwezig is, zal deze voorbeeld tekst vervangen worden door de juiste teksten.

Soms is het nodig om tijdelijke tekst te plaatsen om een idee te krijgen hoe de tekst op de website eruit ziet.

Van oudsher gebruikt onze branche Lorem Ipsum, een voorbeeld tekst geschreven in het Latijn. Helaas is niet iedereen bekend met Lorem Ipsum en dat kan tot verwarring leiden. Ik kan je niet vertellen hoe vaak klanten me hebben gevraagd waarom hun website in een andere taal is!

Er zijn andere voorbeeld teksten zoals Hipster Ipsum, Zombie Ipsum, Bacon Ipsum en nog veel meer. Soms grappig, deze voorbeeld tekst passages kan ook leiden tot verwarring.

Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.

Weight

Verschillende lettertypegewichten voor tekstuele inhoud.

Aa

Light 300

Aa

Regular 400

Aa

Bold 700

Aa

Italic Light 300

Aa

Italic Regular 400

Aa

Italic Bold 700

Buttons

Richtlijnen voor knopstijlen om een consistente look en feel te behouden.