Frames
De rounded en 'wonky' rectangles vormen een belangrijk deel van onze huisstijl. We gebruiken ze als kleurvlakken en als frames voor afbeeldingen.
'Wonky' rectangles
Te gebruiken als frame voor afbeeldingen - niet voor kleurvlakken. De scheve zijde oogt speels, de afgeronde hoeken vriendelijk.
Helling: er zijn twee 'hellings-hoeken' mogelijk: 4.5° en 9°. Zo zorgen we voor consistentie in onze ontwerpen. Welke je gebruikt, hangt af van de grootte van het frame (groot frame → kleine helling). In principe is er altijd maar één scheve zijde. Anders oogt het al snel rommelig. Voor kleine ontwerpen - zoals op mobiel - kan je wel meerdere schuine zijdes gebruiken.
Afgeronde hoeken: hiervoor gebruiken we de gouden '8-pt' standaard. De twee meest voorkomende zijn een border-radius van 8px en 16px. Welke je gebruikt, hangt af van de grootte van het frame (groter frame → grotere border-radius).
Te gebruiken als frame voor afbeeldingen - niet voor kleurvlakken. De scheve zijde oogt speels, de afgeronde hoeken vriendelijk.
Helling: er zijn twee 'hellings-hoeken' mogelijk: 4.5° en 9°. Zo zorgen we voor consistentie in onze ontwerpen. Welke je gebruikt, hangt af van de grootte van het frame (groot frame → kleine helling). In principe is er altijd maar één scheve zijde. Anders oogt het al snel rommelig. Voor kleine ontwerpen - zoals op mobiel - kan je wel meerdere schuine zijdes gebruiken.
Afgeronde hoeken: hiervoor gebruiken we de gouden '8-pt' standaard. De twee meest voorkomende zijn een border-radius van 8px en 16px. Welke je gebruikt, hangt af van de grootte van het frame (groter frame → grotere border-radius).
Te gebruiken als frame voor afbeeldingen - niet voor kleurvlakken. De scheve zijde oogt speels, de afgeronde hoeken vriendelijk.
Helling: er zijn twee 'hellings-hoeken' mogelijk: 4.5° en 9°. Zo zorgen we voor consistentie in onze ontwerpen. Welke je gebruikt, hangt af van de grootte van het frame (groot frame → kleine helling). In principe is er altijd maar één scheve zijde. Anders oogt het al snel rommelig. Voor kleine ontwerpen - zoals op mobiel - kan je wel meerdere schuine zijdes gebruiken.
Afgeronde hoeken: hiervoor gebruiken we de gouden '8-pt' standaard. De twee meest voorkomende zijn een border-radius van 8px en 16px. Welke je gebruikt, hangt af van de grootte van het frame (groter frame → grotere border-radius).
Gemakkelijk masked images maken
Tool om snel afbeeldingen in de juiste 'wonky rectangle' mask te zetten.
Gemakkelijk masked images maken
Tool om snel afbeeldingen in de juiste 'wonky rectangle' mask te zetten.
Gemakkelijk masked images maken
Tool om snel afbeeldingen in de juiste 'wonky rectangle' mask te zetten.
Rounded rectangles
Te gebruiken als frame voor teksten (en afbeeldingen als een wonky rectangle niet goed past). Kleurvlakken brengen leven en speelsheid in onze ontwerpen. Ook zorgen ze voor duidelijke scheiding tussen type informatie.
Kleur: gebruik de lichte kleurtinten voor grotere kleurvlakken met teksten. Als iets écht moet opvallen (call to actions zoals QR codes), gebruiken we de primaire kleuren.
Afgeronde hoeken: ook hiervoor gebruiken we de gouden '8-pt' standaard. Meestal gebruiken we een border-radius van 8px. Welke je gebruikt, hangt af van de grootte van het frame (groter frame → grotere border-radius).
Te gebruiken als frame voor teksten (en afbeeldingen als een wonky rectangle niet goed past). Kleurvlakken brengen leven en speelsheid in onze ontwerpen. Ook zorgen ze voor duidelijke scheiding tussen type informatie.
Kleur: gebruik de lichte kleurtinten voor grotere kleurvlakken met teksten. Als iets écht moet opvallen (call to actions zoals QR codes), gebruiken we de primaire kleuren.
Afgeronde hoeken: ook hiervoor gebruiken we de gouden '8-pt' standaard. Meestal gebruiken we een border-radius van 8px. Welke je gebruikt, hangt af van de grootte van het frame (groter frame → grotere border-radius).
Te gebruiken als frame voor teksten (en afbeeldingen als een wonky rectangle niet goed past). Kleurvlakken brengen leven en speelsheid in onze ontwerpen. Ook zorgen ze voor duidelijke scheiding tussen type informatie.
Kleur: gebruik de lichte kleurtinten voor grotere kleurvlakken met teksten. Als iets écht moet opvallen (call to actions zoals QR codes), gebruiken we de primaire kleuren.
Afgeronde hoeken: ook hiervoor gebruiken we de gouden '8-pt' standaard. Meestal gebruiken we een border-radius van 8px. Welke je gebruikt, hangt af van de grootte van het frame (groter frame → grotere border-radius).
Pagina-brede kleurvlakken
Te gebruiken om pagina's op te delen in verschillende delen. Ook zo zorgen we voor een duidelijke scheiding tussen type informatie.
Kleur: gebruik de lichte kleurtinten voor grotere kleurvlakken met teksten. Met als enige uitzondering de primaire kleur paars (#5E455E). Deze kleur heeft een groot contrast met de doorgaans witte achtergronden, terwijl het wel rustig oogt. Gebruiken we bijvoorbeeld voor een CTA sectie op de website.
Grootte: de kleurvlakken beslaan altijd de gehele breedte van de pagina. Bij drukwerk moet het kleurvlak altijd tegen óf de bovenkant, óf de onderkant van de pagina staan - dus geen 'banden' aan kleur.
Te gebruiken om pagina's op te delen in verschillende delen. Ook zo zorgen we voor een duidelijke scheiding tussen type informatie.
Kleur: gebruik de lichte kleurtinten voor grotere kleurvlakken met teksten. Met als enige uitzondering de primaire kleur paars (#5E455E). Deze kleur heeft een groot contrast met de doorgaans witte achtergronden, terwijl het wel rustig oogt. Gebruiken we bijvoorbeeld voor een CTA sectie op de website.
Grootte: de kleurvlakken beslaan altijd de gehele breedte van de pagina. Bij drukwerk moet het kleurvlak altijd tegen óf de bovenkant, óf de onderkant van de pagina staan - dus geen 'banden' aan kleur.
Te gebruiken om pagina's op te delen in verschillende delen. Ook zo zorgen we voor een duidelijke scheiding tussen type informatie.
Kleur: gebruik de lichte kleurtinten voor grotere kleurvlakken met teksten. Met als enige uitzondering de primaire kleur paars (#5E455E). Deze kleur heeft een groot contrast met de doorgaans witte achtergronden, terwijl het wel rustig oogt. Gebruiken we bijvoorbeeld voor een CTA sectie op de website.
Grootte: de kleurvlakken beslaan altijd de gehele breedte van de pagina. Bij drukwerk moet het kleurvlak altijd tegen óf de bovenkant, óf de onderkant van de pagina staan - dus geen 'banden' aan kleur.
Tips & tricks
Tips & tricks
Tips & tricks
Gebruik je kleurvlakken? Zorg er dan voor dat de andere gekleurde elementen op de pagina / in de sectie gebaseerd zijn op dezelfde primaire kleur.
Is bepaalde erg belangrijk? Gebruik dan rounded rectangles met de primaire kleur. Door de 'pop' aan kleur en het contrast met de witte achtergrond, springen die direct in het oog.
Afbeelding plaatsen? De voorkeur gaat uit naar een wonky rectangle. Past dat niet goed in je ontwerp? Gebruik dan een rounded rectangle.
Gebruik je kleurvlakken? Zorg er dan voor dat de andere gekleurde elementen op de pagina / in de sectie gebaseerd zijn op dezelfde primaire kleur.
Is bepaalde erg belangrijk? Gebruik dan rounded rectangles met de primaire kleur. Door de 'pop' aan kleur en het contrast met de witte achtergrond, springen die direct in het oog.
Afbeelding plaatsen? De voorkeur gaat uit naar een wonky rectangle. Past dat niet goed in je ontwerp? Gebruik dan een rounded rectangle.
Gebruik je kleurvlakken? Zorg er dan voor dat de andere gekleurde elementen op de pagina / in de sectie gebaseerd zijn op dezelfde primaire kleur.
Is bepaalde erg belangrijk? Gebruik dan rounded rectangles met de primaire kleur. Door de 'pop' aan kleur en het contrast met de witte achtergrond, springen die direct in het oog.
Afbeelding plaatsen? De voorkeur gaat uit naar een wonky rectangle. Past dat niet goed in je ontwerp? Gebruik dan een rounded rectangle.
Frames
De rounded en 'wonky' rectangles vormen een belangrijk deel van onze huisstijl. We gebruiken ze als kleurvlakken en als frames voor afbeeldingen.