Een goed grafisch ontwerp heeft..

1. Een doel en doelgroep
Zonder een doel kom je nergens. Zoals de stoel waar je nu op zit als doel heeft om jou billen en rug een fijn gevoel te geven, zo heeft jou website ook een doel. Wil je informeren, communiceren of verkopen? Zorg dat elke pixel op je website dit doel heeft. Let wel op dat je het niet wilt opdringen. De gebruiker is koning, sla deze niet om de oren met schreeuwerige acties en aanbiedingen.

Ook je doelgroep is belangrijk. Probeer je hippe jonge mensen te bereiken of de wetenschappelijk opgeleide tweeverdieners? Pas je ontwerp hierop aan in kleurkeuze, beeldmateriaal, etc.

2. Een functioneel ontwerp
Nu je weet wat je doelgroep is, begin je met nadenken over je inhoud. Je bedenkt welke pagina's en interactieve onderdelen er nodig zijn om de website compleet te maken. Beperk je tot maximaal 7 items voor je navigatie.

Bedenk ook hoe je interactieve onderdelen gaan verlopen. Heb je een login nodig, zoja, plaats je deze achter een linkje of als formulier op elke pagina? Denk vanuit je gebruiker! Wat is praktisch, waar komt deze voor.

Bedenk ook dat een groot deel van je bezoekers terugkerende bezoekers zijn. Bij bedrijfswebsites kun je uitgaan van een stukje voorkennis van de bezoeker, of deze nu via Google of via het bedrijf komt. "Welkom bij fitnesscentrum SnelFit" is een dooddoener.


3. Een wireframe
Nu je je doel, doelgroep en functioneel ontwerp klaar hebt, kun je beginnen met je eerste schetsen. Ik noem dit voor het gemak even een wireframe. Pak een pen en papier en begin aan de hand van je functioneel ontwerp alle wat op je voorpagina moet komen op te schrijven. Dit kan er zo uitzien:

Logo, drie acties, introductie, navigatie [7], zoeken, inloggen, nieuws, footer, visual, copyright, contactgegevens

Begin nu met groeperen, bijvoorbeeld:

a) Logo, navigatie
b) Zoeken, inloggen
c) Introductie, nieuws
d) Drie acties, visual
e) Footer, copyright, contactgegevens.

Bovenstaande groepen werk je uit op een nieuwe A4 met een zwarte stift. Teken in vlakken uit hoe je indeling wordt. Wat is het belangrijkst? Wat mag onderaan, hoe groot word je visual?

4. Een sfeerbeeld
Voor je Photoshop opstart is het belangrijk een beeld te hebben bij wat je gaat maken. Surf naar concurrenten of vergelijkbare websites, surf naar inspiratiewebsites (google naar "css gallery"). Zoek op iStock.com, SXC.hu of flickr.com naar mooie beelden die je tegen betaling of gratis mag gebruiken.

Bedenk welke kleuren en vormen bij je doelgroep passen. Kleurvol en rond, sober en strak? Mag het glimmen en knallen? Leef je opnieuw in in je bezoeker.

5. Het ontwerp zelf!
Eindelijk! Je hebt het beeld van je website in je hoofd. Nu mag je Photoshop openen, je dikke joint aansteken (of niet ;-)) en je creativiteit laten vloeien. Mijn tips:

- Mapjes aanmaken voor je verschillende layers! Groepeer ze, hou het makkelijk beheerbaar
- Gebruik guids en grids! Je website moet strak in elkaar zitten. Hou een breedte van 900 of 960px aan (http://960.gs/) en deel je website op in vlakken van 1/3 of 1/4.
- Marge, marge, marge. Tekst en beelden willen ademen. 20 - 40px tussen je elementen houdt het netjes en overzichtelijk.
- Rust! Mooi wit is niet lelijk, schroom niet om daar flink gebruik van te maken. Idem dit voor zwart of donkergrijs.
- Gebruik max twee lettertypes. Één voor je koppen, één voor je teksten. Eventueel in je actievisuals nog een derde.
- Line-height! Je tekst wil nog wat meer adem, tussen regels mag best wat ruimte zitten.
- Tenzij je op wikipedia of een nieuwssite zit, hebben weinig mensen zin om te lezen. Hou je (dummy) teksten kort en bondig!
- Verwerk kleine elementjes door je website heen. Geen ronde en vierkante hoekjes door elkaar, sla ook niet te ver door. Heb je een leuk logo vormpje, laat dit dan terugkomen als watermerk of in de vorm van elementen.
- Niet te veel vlakken en borders! Alleen functioneel, je wilt geen vlakkerig geheel wanneer dat niet nodig is. Laat je ontwerp ademen!
- Niet teveel kleuren! Visuals brengen genoeg kleur in je pagina, je wilt geen zes verschillende kleuren blokjes alleen omdat je niet kiezen kunt. Varieer in tinten, gebruik zwart en wit ook goed en niet meer dan 3 kleuren in je ontwerp!

6. Maak het AF
Elke ontwerper is een perfectionist. Niets wordt de eerste keer perfect, maak het ontwerp dus af en wees er voorlopig tevreden mee. Nadat deze online is kunnen er altijd nog verbeteringen plaatsvinden.

7. Reflectie en feedback
Pak punt 1tm4 erbij. Heb je je aan je eerdere beslissingen gehouden? Zonee, waarom niet? Leg je ontwerp voor aan andere mensen. Vraag wat ze er niet goed aan vinden, of juist wel. Vraag uitleg. Doe een kliktest.

Slaap er één of twee nachtjes over en bekijk het ontwerp opnieuw. Stap een meter van je beeldscherm af. Hoe ziet het beeld eruit als je de tekst niet lezen kunt?

-----------------------------------------

Tot zover mijn werkwijze. Ik hoop dat het jullie wat geholpen heeft! Commentaar en feedback altijd welkom. Succes met het ontwerpen!

kan je enkele ontwerpen laten zien welke je ECHT mooi vind, je top5 ofzo

http://www.housingworks.org/
http://tapbots.com/weightbot/
http://digitalmash.com/
http://twodecember.com/en/products/
http://www.miaandmaggie.com/