One-pager voor mijn dorp/stad

PROJECT WEBSITE-ONTWERP:

4. Webdesign gebaseerd op het wireframe

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.

  1. Maak een kopie van je artboard

    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.

  2. Zorg voor rust in je ontwerp door je elementen uit te lijnen op het layout grid

    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.

  3. Voeg overloop toe aan je ontwerp, maar wees spaarzaam

    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.

  4. Zet je tekst om in het juiste lettertype en lettergrootte

    Pas de lettertypes en lettergroottes uit je styleguide nu toe op je ontwerp.

  5. Plaats logo en foto's

    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.

  6. Voeg kleur toe aan je 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).