fbpx

Style guide.

Een overzicht van de branding.

Kleuren

Wit (kleurcode : #fff) : Zal de kleur zijn die je op de website vooral zal zien. Deze is namelijk de achtergrond kleur bij de meeste delen en is de kleur van de tekst bij de delen waar er een andere achtergrondkleur is (bv. de hoofdtitel).

Blauwe overgang (#5b86e5 -> #36d1dc) : Deze overgang van twee tinten blauw zal je vaak kunnen terugvinden op de site. Het bovenste deel van de pagina’s heeft deze bijvoorbeeld altijd als achtergrond. Ook de achtergrond van ‘call to actions’ (elementen die de gebruiker tot actie moet aanzetten) gebruiken deze overgang.

Blauwe kleur 1 (#5b86e5) : Is een deel van de blauwe overgang. Deze kleur zal je heel af en toe kunnen terug vinden als kleur van enkele kleine elementen. De illustraties op de site gebruiken ook deze kleur als basis.

Blauwe kleur 2 (#36d1dc) : Is ook een deel van de blauwe overgang maar wordt voor de rest nergens gebruikt op de website of doorheen de branding.

Zwart (#000) : Komt vaak voor maar enkel als kleur van tekst op een witte achtergrond.

Oranje (#ff7052) : Wordt gebruikt in de knoppen op de website die de aandacht van de bezoeker moeten opeisen. Hiervoor was oranje een goede keuze aangezien deze kleur opvallend is en een groot contrast biedt ten opzichte van de andere kleuren.

#fff

#5b86e5 -> #36d1dc

#5b86e5

#000

#ff7052

Typografie

Voor de typografie van het merk wordt er gebruikt gemaakt van het vertrouwde lettertype ‘Montserrat’. Dit lettertype heb ik gekozen om zijn eenvoud en inzetbaarheid. Dit lettertype wordt op verschillende manieren ingezet doorheen de branding.

Heading 1

Heading 2

Heading 3

Paragraaf

Illustraties

Zelf ben ik geen geweldige illustrator, maar ik wou toch graag illustraties gebruiken op mijn website. Daarom ben ik op zoek gegaan naar illustraties die goed bij de branding aansluiten. Deze heb ik gevonden bij ‘ManyPixels’. Zij hebben een gallerij met illustraties die gratis te gebruiken zijn. Hierbij heb ik de donkerste kleur blauw van de branding (#5b86e5) ingesteld als hoofdkleur om zo de illustraties goed bij de rest laten aanleunen. Hieronder enkele voorbeeldillustraties.

Responsive webdesign

Elementen

Buttons

Button style 1 en 2 zijn knoppen die de aandacht moeten trekken van gebruikers. Button style 1 wordt gebruikt bij een witte achtergrond (heeft oranje rand bij hover) en button style 2 bij een kleuren achtergrond. Button style 3 is voor knoppen die niet direct de aandacht moeten opeisen maar eerder voor ondersteunende knoppen.

Border & drop shadow

Sommige secties hebben een ‘drop shadow’ in combinatie met een ’rounded border’. De ‘drop shadow’ heeft de kleur zwart met een ‘opacity’ van 25% en een blur van 25 pixels. 

De ‘border radius’ bij deze elementen staat op 10 pixels.

Mockups

Een aantal mockups van de branding op fysieke objecten.