Design Guide

Voor Online Activaties

Guide voor designers

Deze pagina is een guide voor het opzetten van een design voor online activaties. Voor onze white label online activaties dien je gebruik te maken van de Photoshop design templates die je hieronder kunt downloaden. Uiteraard ben je als designer volledig in controle en ben je vrij in de invulling van deze templates. De templates bevatten alle pagina’s en een share image van de betreffende online activatie. Selecteer hieronder de gewenste online activatie om de juiste Photoshop design template (PSD) te kunnen downloaden.

 
 

Grid Systeem

Een online activatie heeft, net als een huis, geen vaste afmetingen. Toch kunnen we de afmetingen wel afkaderen in een systeem. Daarvoor gebruiken we de grid structuur van Bootstrap. De grid structuur werkt met rijen en kolommen. De kolommen in een rij worden op desktop naast elkaar getoond en voor tablet en mobiel kun je aangeven of deze naast elkaar moeten blijven staan of moeten afbreken op kleinere schermen. Wat belangrijk is om als designer rekening mee te houden is dat een kolom een percentage is van de breedte van de rij waar het in zit. Bij een rij met 2 gelijke kolommen zijn beide kolommen 50% breed en daarmee even breed. Het grid systeem van Bootstrap heeft maximaal 12 kolommen. Daarmee kun je variëren in de breedtes, zoals bijvoorbeeld:

12/12
6/12
6/12
4/12
4/12
4/12
3/12
3/12
3/12
3/12
6/12
3/12
3/12
6/12
3/12

Breakpoints

De meest gestelde vraag over het design van een online activatie is:

Hoe breed mag de online activatie eigenlijk zijn? Is er een maximale breedte waarop we het moeten ontwerpen?

Op de bovenstaande vraag is geen eenduidig antwoord. Maar omdat wij gebruik maken van Bootstrap werken we met de vaste breakpoint formaten van Bootstrap. Deze breakpoints zijn gebaseerd op de gemiddelde desktop, tablet en smartphone resoluties. De standaard Bootstrap breakpoint is kleiner dan 576 pixels (portrait mobiel). De andere breakpoints vind je hieronder:

Small >= 576px
tablet
Medium >= 768px
mdium
Large >= 992px
desktop
Extra Large >= 1200

Breedte van pagina, header en tekst

We geven het advies om de pagina en header van de online activatie af te kaderen op een maximale breedte van 1200 pixels. Op een pagina van 1200 pixels breed worden teksten lang. Hierdoor gaat de leesbaarheid achteruit. Daarom is het verstandig om de tekst in een smallere container te zetten van bijvoorbeeld 540 pixels of 768 pixels breed.

Hoogte van pagina en header

Aan de hoogte van een pagina van een online activatie zitten geen restricties. Het is voor de laadtijd en de performance van de online activatie aan te raden om niet al te veel content op een enkele pagina in te laden. Een oplossing is om verschillende onderwerpen op te delen over verschillende pagina’s.

Een andere vraag die ons regelmatig gesteld wordt is:

Hoe hoog mag een header beeld zijn? Is er een maximale hoogte waarop de header altijd zichtbaar is?

Ook op de vraag wat de hoogte van een header moet zijn, is weer geen eenduidig antwoord. Als je wilt dat de header gehele pagina vult, kun je aangeven dat deze net zo hoog moet zijn als 100% van de hoogte van het scherm van de bezoeker. Zoals je weet, is elk scherm anders en daarmee dus ook de hoogte en de manier waarop bezoekers jouw header zien.

Tip: Hou de hoogte van de header beperkt, zo voorkom je dat een deel van de (belangrijke) content onder ‘de fold’ valt.

Responsive header

Het beeld in de header is elke keer anders als ik mijn scherm groter en kleiner maak. Hoe kan dat?

Als de online activatie een responsive header heeft met een vaste hoogte (bijvoorbeeld 50% van de hoogte), maar wel helemaal doorloopt over gehele breedte van de website, dan zal het beeld in de header automatisch uitgevuld moeten worden. Dat doen doe we door het beeld met css als een achtergrond cover in te laden. Het beeld in de header wordt vanuit het midden meegeschaald, zodat het de volledige breedte en de hoogte uitvult. Omdat elk scherm een andere breedte en hoogte heeft, zul je altijd een andere uitvulling zien van het beeld.

Tip: We raden bij responsive headers over de gehele breedte aan om alleen sfeerbeeld te gebruiken zonder tekst. De tekst kan uit het beeld worden gecropped als de website geschaald wordt.

 

Webfonts

We adviseren om gebruik te maken van maximaal 2 verschillende webfonts. Als je meer fonts gebruikt, doe dat in overleg met het team van Red Button Digital, want deze keuze heeft invloed op de performance van de online activatie.

De webfonts kunnen verschillen van de fonts die je gebruikt voor bijvoorbeeld Word of Photoshop. Vaak zijn deze verschillen miniem, en komen tot uiting in de letter-spacing en rendering (crisp of smooth). Op het web werken we alleen met WOFF en WOFF2 font files. De WOFF webfonts worden door alle bekende browsers ondersteund. Je kunt bij ons ook een TTF aanleveren, die wij omzetten naar WOFF. Dat dient dan wel afgekocht te zijn. Of er moet gebruik worden gemaakt van een open-source font, zoals deze te vinden zijn via Google Fonts.

 

Afbeeldingen

Een afbeelding moet geschikt zijn voor web. Hou er rekening mee dat het design altijd in RGB is opgemaakt en een resolutie heeft van 72dpi. Het is voor web niet nodig om een resolutie van 300dpi en een color profile in CMYK aan te houden.

Daarnaast hebben vector afbeeldingen (AI / SVG) bij ons prioriteit omdat deze schaalbaar zijn zonder kwaliteitsverlies. Dat is vooral bruikbaar bij beelden met weinig kleuren, zoals logo’s en iconen.

 

Design aanleveren

Voor het aanleveren van het design via ons onboarding proces, geven we de voorkeur aan Photoshop. In een enkele gevallen accepteren we InDesign of PDF files. We werken met het ‘desktop first’ principe. De reden hiervoor is dat een desktop design eenvoudiger te vertalen is naar mobiel, dan omgekeerd.

Tip: Werk netjes in lagen en geef elke laag een duidelijke naam, zodat we weten waarvoor de laag dient. En gebruik geen blendmodes. Die kunnen we niet overnemen voor het web.

 

Vragen over het design van online activaties?

Mocht je na het lezen van deze guide nog vragen hebben over het ontwerpen van een online activatie? Neem dan gerust contact met ons op. We staan klaar om al je vragen te beantwoorden.