Inleiding
In dit deel gaan we het design van een website behandelen.
Wat is belangrijk, en waar moet je op letten.
Naast de algemene dingen zal ik hier en daar ook praktische tips en voorbeelden geven.

1. Een design... waar begin ik?
Een design maken is voor elke site anders. Je moet bij het maken van een design dan ook rekening houden met heel veel dingen.
Ten eerste moet je er voor zorgen dat het design precies goed is voor jouw soort website en onderwerp.

1. De indeling (layout)
Als eerste gaan we bepalen wat voor jouw website de beste indeling (layout) is n.a.v. de content die er in moet komen, hoe je deze het meest overzichtelijk weer kan geven.

Om dit te bepalen kan je bij andere (soortgelijke) sites kijken hoe die het hebben gedaan. Vraag je af hoe het misschien beter kan, en onthoud dat. Ben je een site tegen gekomen die volgens jou de meest optimale layout heeft voor jouw onderwerp, en kan jij geen verbetering bedenken, schroom dan niet die methode dan ook daadwerkelijk toe te passen. Het is namelijk niet echt nuttig om het wiel een tweede keer uit te gaan vinden met daarbij de kans dat je plank ooknog eens falikant mis slaat.
Zie dit niet als kopieëren of stelen. Er zijn tenslotten nog genoeg andere punten waarmee je jouw site kunt onderscheiden van de rest.

1.1 Header, content en footer

• Header
• Content
• Footer
  

Dit is veruit de meest gebruikte indeling voor een website pagina. Daarmee is dit ook direct dé aanbevolen indeling.
"Waarom?" Omdat dit het meest gebruikt word.
"Maar dat is toch geen reden?" Toch wel. Omdat deze indeling door de meeste sites word gehanteert,is de gemiddelde internetter hier aan gewent. Dat betekent dat een site die een andere algemene indeling hanteert al snel 'onoverzichtelijk' over komt voor een gebruiker.

1.2 Het F-patroon
Uit onderzoek is gebleken dat mensen pagina's op internet niet lezen, maar 'scannen'. Dat wil zeggen dat ze de belangrijkste dingen 'lezen', zoals titels, kopjes, afbeeldingen en andere opvallende woorden/zinnen. De lest word pas gelzegen als de gebruiker heeft bepaald dat die titels e.d.interessant genoeg waren.
Dat scannen gebeurt in het zogeheten F-patroon, zo bleek uit dat dat onderzoek. Daar mat men de oogbewegingen van mensen die aan het surfen waren.

   
Heatmaps van meest bekeken plekken van een pagina.
V.l.n.r.: Een "over ons"-pagina van een bedrijf, Een product pagina, Zoek resultaten.

Het is dus belangrijk dat je dit 'gedrag' in je achterhoofd houd bij het designen van je website, en er alleen afstand van doet als het echt niet anders kan of als een andere aanpak duidelijk beter is.

1.3 De header
De header is een belangrijk onderdeel van een site.
In de header komt de hele site samen. Je geeft je site er een identiteit mee met je logo en zorgt voor de navigatie d.m.v. je menu en je zoekfunctie.
Belangrijk dus dat je je header weloverwogen indeelt en vormgeeft.
Maak het uitnodigend en mooi, maar vooral ook overzichtelijk.

Belangrijk is dat het niet te druk word. Je logo, je menu, het zoekveld en wellicht een reclame banner is meer dan genoeg om in je header te hebben. Als je druk/groot logo hebt en/of van plan bent een 'druk' plaatje te gebruiken in je achtergrond is het misschien aan te raden om je zoekveld en/of je banner ergens anders op de pagina te plaatsen.

1.3 De content
Het indelen van de content kan je het beste doen a.d.v. het soort content.

• Bied jouw site een service, bestaande uit 3 stappen,kan je bijvoorbeeld kiezen voor 3 kolommen.
• Een content kolom van ongeveer 70% breed, en een sidebar van ongeveer 30% is weer meer logisch voor een weblog.
• 1 kolom van 100% breed voor een forum.
• 2 kolommen van respectievelijk 30% en 70% voor een handleiding achtige content waar de smalle kolom de inhouds-opgave bevat, en de brede kolom de informatie.
• enz...
  

Dit ligt dus volledig aan het geen je op je site/pagina wilt plaatsen.

1.4 De footer
De footer... Meestal de plaats van een juridisch niet zo sterks zijnde copyright melding.
Hier kan je heel mooi de overige gegevens kwijt omtrent jouw site zoals contact gegevens en een beknopte sitemap/simplistische kopie van het hoofdmenu.
Maar nogmaals: Hou 't overzichtelijk.

2. Logo en kleuren
Zoals ik al een paar keer heb gezegt,en ik nog wel een paar keer zal zeggen: hou het simpel.
Dat is niet alleen het motto van "Web 2.0" maar (gelukkig) ook een trend die de laatste jaren is ontstaan omdat men tegenwoordig steeds meer aandacht besteed aan usability. Web 2.0 is eigenlijk een gevolg hier van.

2.1 Het logo
Wat was 't ook alweer? Owja, simpel houden.
Als je 'moet' werken met een al bestaand logo, en die is niet zo simpel, probeer het dan te compenseren met een verder rustig design.
Voor inspiratie om een logo te maken kan je o.a. hier kijken:
LogoPond
LogoSauce

2.1 Kleurkeuze
Kies je kleuren zorgvuldig. Zorg ervoor dat de kleuren het onderwerp ondersteunen, maar toch verschillen met de kleuren van de concurentie.
Zorg dat de kleuren bij het logo passen.
Zorg dat de gekozen kleuren niet vloeken met elkaar. Behalve als dat echt de bedoeling is. Maar toch, probeer dat te vermijden. Dat is namelijk niet echt fijn voor de oogjes.
Als laatste moet je ook goed op letten dat je de juiste kleuren voor tekst en achtergrond kiest, zadatalles goed telezen is. Hoe hoger het contrast tussen de 2 kleuren, hoe beter. (Zwart op wit is natuurlijk het beste)
Hier een paar sites waar je gemakkelijk kleuren bij elkaar kan zoeken:
Adobe Kuler
(meer resources volgen van de week alsik weer bij mijn eigen bookmarks kan)

3. (Achtergrond-)Afbeeldingen
Afbeeldingen kan een site echt een feest voor het oogmaken,maar het kan er ookvoor zorgen dat het onoverzichtelijk word, en daardoor de boodschap die niet goed over komt.
Gebruik afbeeldingen daarom met mate.
Dit ligt trouwens ook aan de soort site die je maakt.
Wat wel altijd geldt is het volgende: Zorg er voor dat de (achtergrond-)afbeeldingen iets toevoegen aan je site, en er geen afbraak aan doen!

4. Inspiratie
Geen inspiratie voor een mooi design of gewoon weg niet zo goed daar in? Geen nood!
Er zijn genoeg sites waar je heel goed inspiratie op kan doen.
Hier een paar van die sites:
WebCreme
(meer resources volgen van de week alsik weer bij mijn eigen bookmarks kan)

Tot zo ver de algemene zaken waar je rekening mee moet houden bij het designen van een website.
In het volgende deel (Een website maken - deel 2.2: Het design (Continued)) zal ik wat voorbeelden laten zien, en wat meer praktische tips geven bij het designen van een website (in PhotoShop).
Dus, binnen kort meer!

Nogmaals: Opmerkingen/tips? Post ze! Wellicht kan ik ze in de tutorial integreren.

Kijk, dat zijn ze hoor! Hele mooie stukjes literatuur waar je echt wat mee kan. Topwerk!

http://www.screenspire.com
http://www.cssmania.com

Nette tutorial! Denk dat mensen hier zeker wat aan hebben!
Je kon nog niet bij je bookmarks, maar noem toch maar voor de zekerheid deze site:
http://www.colourlovers.com
Erg handig, heeft ook patronen. Enige nadeel is dat ie een beetje sloom is.

Dank u, zal het meenemen.
Ik zag zelf ook nog wat typfoutjes, en vergeten spaties,maar dat komt omdat ik op een niet zo'n fijn toetsenbord moet typen nu.
Ik zal dat morgen ofzo wel even veranderen.

Citaat:(Een website maken - deel 2.2: Het design (Continued)) zal ik wat voorbeelden laten zien, en wat meer praktische tips geven bij het designen van een website (in PhotoShop).
Dus, binnen kort meer!

ik wacht op het volgende deel

Maar vast punt ++

Ziet er goed uit! +
Ik ben wel geinteresseerd naar wat linkjes om inspiratie op te doen over portals / intranet sites

mooie uitleg maar, hier en daar wat spellingsfoutjes. Ik had ook wat meer codes verwacht bv basis scriptjes met de uitleg er bij wat ze doen misschien kan je dit doen aan de hand van spoilers.

kidcool schreef:Ik had ook wat meer codes verwacht

Zoals de titel al doet vermoeden, zijn bovenstaande alleen richtlijnen voor het design zelf. Slicing is de volgende stap. Misschien zal Richard deze reeks nog wel eens uitbreiden als hij tijd heeft.

jsanders schreef:Ziet er goed uit! +
Ik ben wel geinteresseerd naar wat linkjes om inspiratie op te doen over portals / intranet sites

Hmm, zal daar eens over denken. Deze reeks is natuurlijk wel zeer algemeen, dus wil niet te veel op details in gaan. Dan kan ik net zo goed een heel boek schrijven.

kidcool schreef:mooie uitleg maar, hier en daar wat spellingsfoutjes.

Klopt, dat had ik nog moeten verbeteren... is er bij in geschoten.

kidcool schreef:Ik had ook wat meer codes verwacht bv basis scriptjes met de uitleg er bij wat ze doen misschien kan je dit doen aan de hand van spoilers.

Zoals A-B al zegt, dit is niet het laatste deel. Er komt nog meer, maar idd. nu even druk. Hoop z.s.m. met nieuwe delen te komen.