Huisstijl
Wat heb ik minimaal nodig om van een huisstijl een website te maken?
- Logo en varianten in .png en .svg
- Kleurenpalet in RGB mode (niet CMYK!) in hex notatie en optioneel RGB.
- Fonts in .woff2 formaat met font-sizes min en max per element (p, h1-h6).
- Afbeeldingen in .jpg minimaal 1920px breed, liefst gecomprimeerd (60-70 quality).
- Een ‘officiele’ styleguide in bijvoorbeeld Figma is super handig.
Optioneel:
- Buttons – die dynamisch met kleurenpalet gevuld worden (dus: color & background-color).
- Stijlfiguren in .svg of .png. en enige uitleg hoe dat op de pagina valt.
Aanleveren SVG
- Een SVG moet uit pure vectors bestaan (path, object, circle, etc) om er meer mee te kunnen dan een simpele PNG.
- Als er geanimeerd moet worden is het fijn als de figuren ook werkelijk losstaande figuren zijn.
- Fill of stroke het liefst “currentColor” ipv een hex of rgb code, als dat werkt voor het figuur.
- Let op dat de viewbox klopt met de maximale breedte en hoogte.
- Witruimtes om het figuur weglaten.
Voorbeeld:
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="svg-icon" xmlns="http://www.w3.org/2000/svg">
<path d="...."/>
</svg>Ik haal in principe alle aangeleverde SVG’s door Inkscape en zorg dat alles goed staat. Een kleine afwijking kan er voor zorgen dat de SVG niet meer wil laden in iOS (width=”16px” bijv.).