Styleboards

Wanneer u werkt voor een klant dan kunnen styleboard gemixt worden omdat een klant nu eenmaal de voorkeur heeft voor een element van ieder styleboard. Een definitief styleboard zal dan gemaakt worden welke in feite hybride is. De afbeeldingen hieronder komen uit een artikel van industrialbrand.com welke ook in de reader gebruikt wordt.

francl styleboardHybride styleboard

 

francl wireframeHet wireframe

 

francl ontwerpUiteindelijk ontwerp

 

Mijn opmerking over Frankl http://www.industrialbrand.com/styleboards-saving-clients-time-money-and-headaches-through-the-web-design-process : de kleur grijs is behoolijk overheersend als achtergrond links voor de tekst. Dit haal ik niet uit het styleboard. De kleur wordt dan wel aangedragen maar daarin lijkt wit de keuze voor vlakken te zijn. Dit zijn zaken die tijdens de ontwerpfase dus nog aan te passen zijn.

In een styleboard moet veel besloten worden:

  1. Kleur (zie straks meer)
  2. Lijn:
    • 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 kunt u de uiteinden afronden (dit kan in Illustrator ingesteld worden)
  3. Formaat –> heeft u denk ik al bepaald in het wireframe
  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 (in de) of alleen aan de zijkanten als opvulling?
    • En dan een aantal opties voor het “plaatje” zelf.
  5. Ruimte. Hiermee wordt witruimte bedoeld.
    • ZEER, ZEER BELANGRIJK!
    • Hoeveel ruimte zit er om de afbeeldingen heen?
    • Hoeveel ruimte zit er om tekstvlakken heen?
    • Een en ander zou al tot uiting moeten zijn gekomen tijdens het schetsen van de wireframes
    • Vuistregel voor beginners: je voegt meestal te weinig witruimte toe dus… aanpassen.
  6. Harmonie, balans en contrast.
  7. Ritme; hierbij kunt u nadenken of u een grid wilt gebruiken voor de website en zo ja wat voor grid. Nb: dit is zeker aan te raden. Zorg er voor dat tussenruimtes overal gelijk zijn.
  8. Lettertypes
    • Kies in de eerste plaats een lettertype wat goed leest voor de platte tekst (de). 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 u hier een ander lettertype voor kiest (een heading).
    • Kies vervolgens een lettertype voor headings. Dit mag een ander font zijn.
    • Kies niet meer dan 2 fonts op de website. Als u weet wat u doet kunt u er meer kiezen.
    • Meer over typografie in de serie lessen in mei.

Leuk voorbeeld van hoe een styleguide verwerkt wordt in de website kunt u vinden op http://styletil.es/ In het voorbeeld hieronder is te zien hoe het styleguide de basis heeft gelegd voor het ontwerp.

style tiles styleboard

style tiles ontwerp

Zij biedt ook een Photoshop template ter download aan, om te beginnen met het styleboard:

style template

 

Lettertypes

u kunt een Photoshop of Illustrator lettertype kiezen (deze zijn dan standaard geinstalleerd op uw systeem) maar u kunt ook op internet een ander lettertype zoeken en deze downloaden.
Een font zoeken: http://www.fontsquirrel.com/ (veelal gratis) of http://www.google.com/fonts (ook veelal gratis). Fonts van beide website zijn straks goed in uw HTML te integreren.