Skip to content

Instantly share code, notes, and snippets.

@hoetmaaiers
Last active March 7, 2016 20:46
Show Gist options
  • Save hoetmaaiers/5f70bfddeec56842ce92 to your computer and use it in GitHub Desktop.
Save hoetmaaiers/5f70bfddeec56842ce92 to your computer and use it in GitHub Desktop.

Design developer friendly

Zeplin FTW

Icons

  • 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)

Kleuren

  • Beperkt en vooral consistent kleuren pallet. Een oplijsting hiervan in Zeplin is het handigst.

Fonts

  • 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

  • Afbeeldingen retina ready aangeleverd. Resizen naar verschillende versies is perfect te automatiseren.

Responsiveness

  • 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.

Componenten

  • 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.

State

  • 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
    • ...

Transities / animaties

  • Hoe aangeven welke transities bedoeld worden?
    • Verschillende states met tekstuele beschrijving?
    • Video?
    • Framer.js?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment