[web] 2e jaar – periode 1

Redesign van een bestaande website

Structuur aanbrengen in je ontwerpproces
Het ontwerpproces vormt het hoofdbestanddeel van deze opdracht. Werk de onderstaande onderdelen uit en maak hiervan een verslag. Hierin verwerk je ook je schetsen en alle andere niet-tekstuele onderdelen. Dit verslag en je site lever je in. Je kiest zelf welke technieken je gebruikt.

1. Informatie verzamelen

De eerste stap in elk designproject is achterhalen voor wie je gaat ontwerpen.
Ben je met een persoonlijk project bezig, dan is dat direct duidelijk. Maar als
je voor een klant werkt, zul je een aantal belangrijke vragen moeten
stellen: bepaal wat het doel van de site is, op wie deze gericht is, welke
beperkingen er zijn (bepaalde kleurschema’s, lettertypes en ‘verplichte’
afbeeldingen (voor bepaalde beeldmerken)) enz. Het is van groot belang dat
je je klant en het bedrijf goed begrijpt, dit heeft grote invloed op de
ontwerpoverwegingen.
Opdracht: verzamel informatie over de klant/de sector/het bedrijf

2. Je doelen bepalen

Als je weet wie je klant is kun je gaan bepalen voor wie de website bedoeld is.
In de meeste gevallen zal je klant de site willen gebruiken om bepaalde
functies te vervullen. Bv verhogen van de verkopen, opbouwen van (zakelijke)
relaties, communicatie met klanten of het aanbieden van (technische)
documenten. Als je deze doelstellingen scherp hebt zul je een goed beeld
hebben die de site gaan gebruiken/bezoeken.
Opdracht: Bepaal de doelen van de site

3. Persona’s opstellen

Je moet jezelf afvragen hoe de gebruiker op elk aangedragen
ontwerpelement zal reageren. Om deze informatie helder en objectief te
krijgen moet je een serie gebruikers persona’s maken. Een persona is een
karakterschets van een typische gebruiker uit de beoogde doelgroep.
Ontwikkel een persona voor alle grote elementen binnen de doelgroep. Geef
ze allemaal een naam en wat brede karakteristieken, zoals leeftijd, geslacht,
inkomensgroep, opleiding en houding.

Opdracht: stel drie persona’s op
Voorbeeld (pdf)

4. Teken een sitemap

Als je weet voor wie je gaat ontwerpen en wat de doelen zijn kunnen we weer
een volgende stap maken. We beginnen nu aan de informatie architectuur
van de website. Dus hoe de content en site informatie logisch gerangschikt
wordt. Een veel gebruikte aanpak hiervoor is het maken van een sitemap. Dit
is een visuele voorstelling van de verschillende pagina’s waaruit de site
bestaat. Denk na over het relatief belang van elk stuk informatie. (houd de
doelen en persona’s in het oog).
Opdracht: Maak een sitemap

5. Moodboard

Je bent nu in een fase gekomen dat je ideeën moet ontwikkelen voor je
ontwerpen. Het gaat erom zoveel mogelijk materiaal te verzamelen waardoor
je geïnspireerd raakt. Verzamel op een manier die je zelf wil: met knipsels uit
tijdschriften, screenshots van het web.
Opdracht: verzamel zoveel mogelijk beeldmateriaal

6. Schetsen.

Neem alle voorgaande producten bij de hand en maak op basis daarvan een
serie kleine schetsen met een ontwerpoplossing waarin al deze elementen in
een enkele lay-out samen komen. Elke ontwerpbeslissing is gekoppeld aan
de informatie die je in de vorige stappen hebt verzameld.
Opdracht: Maak een aantal schetsen op papier

7. Reflecteren

Dit is misschien wel de allerbelangrijkste stap in het designproces. Je moet
de tijd nemen en even een stapje terug doen. Reflecteer op het werk dat je
gedaan hebt, kijk naar de ontwerpoplossing die je bedacht hebt en wat dit
betekent voor usability en de (bedrijfs) doelstellingen. Bedenk hoe de
gebruikers zouden reageren. Is het ontwerp toepasselijk voor het bedrijf en de
doelstellingen? Je zou naar de mening van anderen kunnen vragen.
Opdracht: kijk of je oplossing overeenkomt met je eerdere onderzoek.

8. Ontwerpaanpak kiezen

Als je tevreden bent over je schetsen dan ga je deze eerst uitwerken in een
eerste digitale mockup(is een visuele presentatie van een ontwerp van een
website of pagina layout die in grote lijnen duidelijk maakt hoe het
uiteindelijke resultaat er uit zal zien). Je kunt dat in Photoshop, Fireworks,
Illustrator doen. Ga uit van een schermbreedte van 1024px. Kies de
ondersteunende afbeeldingen bewust en grijp vaak terug naar je moodboard
voor de juiste associaties en kleuren te bereiken. Spendeer nog niet teveel tijd
aan details. (je kunt stockfoto’s gebruiken van http://www.sxc.hu/home , ook
tutorials) Voor kleurschema’s: http://kuler.adobe.com
Opdracht: maak een aantal digitale mockups

9. Ontwerpprototype

Je hebt nu een aantal verschillende pagina’s ruw opgemaakt. Je moet nu
testen of je ontwerpen effectief zijn. Communiceren ze waarvoor ze bedoeld
zijn, zijn alle onderdelen aanwezig etc… . Zijn alle elementen die je ziet
logisch, is de navigatie duidelijk. Laat een ander er naar kijken. Stel vragen
over de onderdelen.

10. Uitvoeren

Als de klant tevreden is met het ontwerp ga je het ontwerp uitvoeren