Wireframe:
Nu we de structuur (wireframe), de stijlelementen (styleguide) en de teksten van de website hebben bepaald, gaan we deze samenvoegen in het effectieve webdesign.
Dupliceer het artboard van je wireframe door op de naam van je artboard linksboven te klikken. Terwijl je 'alt' ingedrukt houdt, klik en sleep je deze naam om een duplicaat onder of naast je wireframe te plaatsen. Op basis van deze kopie gaan we de stijl opbouwen.
Ga naar 'view' > 'show layout grid'. Lijn nu alle elementen uit op dit grid. Zorg ervoor dat de meeste tekst en foto's binnen het layout grid vallen.
Het kan een designkeuze zijn om bepaalde elementen, zoals kleurvlakken/achtergrondfoto's, net wél buiten dat grid (ook container genoemd) te laten komen, bijvoorbeeld tot aan de rand van je browservenster. Zo creëer je overloop in je ontwerp, wat een dynamische/moderne toets aan je site geeft. Maar wees hier ook spaarzaam mee.
Pas de lettertypes en lettergroottes uit je styleguide nu toe op je ontwerp.
Vervang de fotoplaatsaanduidingen nu door echte foto's die je voorlopig van het internet haalt. Later gaan we deze foto's zelf maken en aanpassen in ons ontwerp.
Pas de kleuren die je bepaald hebt in je styleguide nu toe op je ontwerp. Gebruik voor de lopende tekst een donkergrijs. Voor je titels kan je eventueel voor andere kleuren kiezen. Maak gebruik van kleurvlakken om contrast te creëren binnen je ontwerp. Speel ook met positief en negatief kleurcontrast. Zo kan je er bijvoorbeeld voor kiezen om een sectie van je site een donkere achtergrondkleur te geven. Als de donkergrijze tekst hierop niet leesbaar is, kan je opteren voor witte tekst.
Zorg ervoor dat het geen kleurboek wordt! Laat je gevoel voor design spreken. Gebruik voldoende wit; dit zorgt ervoor dat je ontwerp kan "ademen" en dat de gebruikte kleuren en foto's beter naar voren komen. Soms is het beter om kleur spaarzaam toe te passen.
Laat je inspireren door bestaande websites van steden en gemeentes (bekijk bijvoorbeeld de projecten op karakters.be).