Styleboards

In een styleboard moet veel besloten worden:

  1. Kleuren van je ontwerp
  2. Lijnvoering:
    • Wel of niet lijnen?
    • Hoe dik zijn deze?
    • Welke vorm hebben deze?
      • Recht en ononderbroken
      • Gestippeld
      • Hand getekend
      • Een afbeelding (bloemenrandje bijvoorbeeld)
      • ….
    • Zijn ze afgerond of niet? Met name bij dikke lijnen kun je de uiteinden afronden (dit kan in Illustrator ingesteld worden)
  3. Formaat
  4. Textuur (patroon / motiefje):
    • Wel of geen textuur?
    • In welke kleur?
    • Hoe intensief (subtiel of heftig aanwezig?)
    • Waar komt deze textuur? Over de hele pagina of alleen aan de zijkanten?
    • En dan een aantal opties voor het “plaatje” zelf; in kleur, zwart / wit etc.
  5. Witruimte:
    • ZEER BELANGRIJK!
    • Hoeveel ruimte zit er om de afbeeldingen heen?
    • Hoeveel ruimte zit er om tekstvlakken heen?
    • Vuistregel voor beginners: je voegt meestal te weinig witruimte toe dus… aanpassen.
  6. Harmonie, balans en contrast in je website.
  7. Ritme; hierbij kun je bekijken of je een grid wilt gebruiken voor de website en zo ja wat voor grid. Nb: dit is zeker aan te raden, het zorgt er voor dat tussenruimtes in je ontwerp overal gelijk zijn.
  8. Lettertypes
    • Kies in de eerste plaats een lettertype wat goed leest voor de platte tekst (de paragraaf tekst). Kijk wel of het lettertype een uitstraling heeft wat past bij het onderwerp. Zo zal een moderne website rondere letters hebben dan een ouderwets aanvoelende website.
    • Breng verschil aan tussen gewone tekst en linkjes.
    • Hou linkjes onderstreept; mensen zijn dit gewend.
    • Beslis of er sommige teksten vetgedrukt moeten zijn of dat je hier een ander lettertype voor kiest (een heading).
    • Kies vervolgens een lettertype voor headings. Dit mag een ander font zijn.
    • Kies niet teveel fonts op je website. Begin met 2 en als je weet wat je doet kun je er meer kiezen.

Een leuk voorbeeld van hoe een styleguide terug komt in een website is te zien op http://styletil.es/

style tiles styleboard

style tiles ontwerp

Styletil.es biedt ook een Photoshop template ter download aan zodat je meteen kunt beginnen met je styleboard:

style template

Wanneer je werkt voor een klant dan kunnen styleboards gemixt worden omdat een klant nu eenmaal de voorkeur heeft voor een element van ieder styleboard.

Een definitief styleboard zal dan gemaakt worden. Dit is dan in feite een hybride styleboard. De afbeeldingen hieronder komen uit een artikel van industrialbrand.com.

francl styleboardHybride styleboard

 

francl wireframeHet wireframe

 

francl ontwerpUiteindelijk ontwerp

Een opmerking over het artikel over Frankl http://www.industrialbrand.com/styleboards-saving-clients-time-money-and-headaches-through-the-web-design-process : de kleur grijs is behoorlijk overheersend als achtergrond links voor de tekst. Dit haal ik niet uit het styleboard. Blijkbaar is er het een en ander aangepast in de ontwerpfase.