Hint visueel scherm ontwerp – werkwijze of stappenplan op basis van wireframes;

1. Wat is het interactie concept? Noem karakteristieken, beschrijf het kort.
2. Wat zijn de vaste onderdelen in je wireframes (bijvoorbeeld een logo, een minimale ruimte voor een afbeelding) en waar kun je op varieren (bijvoorbeeld kolombreedte voor tekst)?
3. Wat zijn deze formaten van de vaste onderdelen? Laat dit zien in je wireframes door er afstanden in px bij te zetten.
4. Kies op basis van deze vaste formaten een geschikt basisgrid. Kies een afstand die als basis kan dienen voor je lay-out. Denk zowel aan de ruimte die je nodig hebt voor de navigatie als voor de content. Voor de content kan het zijn dat afbeeldingen leidend zijn maar je kunt ook uitgaan van de interlinie. Probeer dan een interlinie als basis te kiezen voor de meest voorkomende teksten, meestal de body-tekst.
5. Maak vervolgens op je basisgrid een stramien met verticale hulplijnen waar alle schermen zich aan houden. Pas ook horizontale stramienlijnen toe als je ontwerp dat nodig heeft, dit werkt vaak niet omdat de content dynamisch is en teksten varieren in lengte.
6. Bepaal vaste afstanden voor alle elementen die voorkomen in het basisontwerp. Bepaal de afstand bijvoorbeeld tussen een lijn en het begin van een tekst, tussen lijnen onderling en bepaal de baisi interlinie.
7. Zoek naar de kleinste mogelijke tekst en de grootste tekst en bepaal de hierarchie in stijlen, kies niet meer dan 3 verschillen in opmaak (font, stijl, grootte, interlinie, liever nog geen kleur behalve als dit bepalend is voor de huisstijl) de meest voorkomende teksten.
8. Leg je fontkeuze vast nadat je verschillende opties uitgeprobeerd hebt. Laat dit proces zien.
9. Binnen de gekozen lay-out experimenteer je nu met kleur, probeer kleurgebruik uit nav de inspiratie die je hebt vastgelegd in je moodboard (zoals het voorbeeld dat in de opdracht wordt genoemd).
10. Laat wederom de variaties zien en maak een keuze. Herhaal dit proces met het gebruik van fotografie en iconen. Schets eerste de onderdelen voordat je een definitief voorstel doet. Isoleer fotografie of iconen terwijl je dit ontwikkelt. Maak verschillende combinaties van palet/beeldgebruik of andere grafische elemeneten en ontworpen iconen. Presenteer deze combinaties als ontwerpvoorstellen.

In je moodboard en wireframes borg je je het gewenste karakter van je product. In je schetsen detailleer je de interface.