Zeplin FTW
- svg icons please
- ids / classes voor stijlbare groepen, dit maakt de svg stijlbaar en herbruikbaar
- wanneer oude browsers (<IE9) moet voor elk icoon ook een .png variant voorzien worden (Zeplin)
- Beperkt en vooral consistent kleuren pallet. Een oplijsting hiervan in Zeplin is het handigst.
- Oplijsting gebruikte fonts
- Consistentie in font-sizes
- Oplijsting font-sizes voor vaste text groottes (base font-size van leestekst, heading 1, heading 2, …)
- Font gebruiken dat ook als webfont beschikbaar is.
- Afbeeldingen retina ready aangeleverd. Resizen naar verschillende versies is perfect te automatiseren.
- Voorkeur voor een Mobile First aanpak. Dit wil zeggen dat we starten met de kleinste versie (bv. mobile) en deze uitbreiden met media queries tot de grootste versie (bv. desktop).
- Wanneer het design voor verschillende schermgroottes te fel verschilt in layout of functionaliteit, is mobile first niet noodzakelijk de beste aanpak.
- In grote applicaties is een oplijsting van alle componenten (zonder layout rondom) zeer waardevol.
- Wij denken in components (BEM). Een component kan variaties hebben, een overzicht van deze variaties is erg handig.
- In een applicatie komen heel wat states voor, het is erg handig als deze states ook mee in de designfase worden uitgedacht en gecommuniceerd aan het development team. Enkele voorbeelden:
- button hovered
- button disabled
- button visited
- component active
- component loading
- validation error
- form successfully submitted
- ...
- Hoe aangeven welke transities bedoeld worden?
- Verschillende states met tekstuele beschrijving?
- Video?
- Framer.js?