Ontwerpproces 1 - de voorbereiding

29 Maart 2009 | Door Thijs Visser | RSS feed

Visie en doelen

ThijsVisser.nl is eigenlijk een herontwerp van mijn vorige portfolio Thyevi.com. Omdat alleen ik weet hoe je Thyevi uitspreekt, heb ik er voor gekozen om deze naam achter te laten en verder te gaan onder de naam ThijsVisser.nl.
Als je mijn naam weet, weet je ook gelijk het adres naar mijn website.

Het oude ontwerp was donker, had matige teksten en was in het engels geschreven.
Een donkere achtergrond houdt het oog van de lezer niet lang vast en de competitie aangaan met de internationale markt is voor een jonge webdesigner niet het slimste wat hij kan doen. Mijn nieuwe site moest daarentegen meer rust, licht en professionaliteit uitstralen.

De nieuwe website heeft 2 doelen:

• Het laten zien van mijn professionaliteit en vaardigheden op het gebied van webdesign.
• Het trekken van mogelijke klanten. Mijn ideale klant is een internetbureau of een webdeveloper.

Elke pagina op de website moet een van beide doelen ondersteunen, of leiden naar een pagina die een van beide doelen ondersteund.
Mijn vernieuwde portfolio is nu in het Nederlands. Ik denk dat ik op deze manier meer potentiële klanten op zal leveren. Ook hoop ik hiermee een hechtere groep volgers van mijn blog op te bouwen.

Thyevi.com werd niet ondersteund met een Content Management Systeem. Mijn nieuwe site kan ik nu gemakkelijk onderhouden met behulp van het CMS ExpressionEngine.

Inspiratie

Maanden voordat ik begon met het ontwerp van de site was ik al bezig met het verzamelen va allerlei stukjes inspiratie voor een moodboard.
Inspiratie opdoen in dit stadium is gevaarlijk, zeker als je nog helemaal geen wireframes, schetsjes of sitemaps hebt. Je kan dan heel gemakkelijk verzeild raken in een allerlei toffe sites die vind via cssgalleries, waarbij je niet alleen de stijl jat maar ook ideeën voor de indeling van de site. Om dat te vermijden kan je het beste een aantal richtlijnen aanhouden:

• Bepaal van te voren wat voor look je zoekt, voordat je begint met het verzamelen van inspiratie. Schrijf steekwoorden op die de look en feel van de website omschrijven. Op deze manier wordt je niet in verleiding gebracht om stijlen van mooie website over te nemen, alleen maar omdat ze er tof uitzien. De stijl van de nieuwe website moet de identiteit van het bedrijf / persoon uitstralen waarvoor jij de website ontwerpt.
• Als je de tijd hebt, ga dan niet op zoek naar inspiratie, maar laat inspiratie jouw vinden. Vaak kom je dan inspiratie tegen die veel beter past bij jouw idee hoe de website eruit moet komen te zien.
• Beperk je niet tot het internet. Veel website lijken erg op elkaar, omdat mensen veel te veel van elkaar af kijken. Als je je laat inspireren door andere bronnen kan je ervoor zorgen dat je website er minder standaard uit ziet.
• Als je iets leuks tegenkomt knip of kopieer dan een klein gedeelte van het hele ontwerp. Bijvoorbeeld alleen de navigatie, artikel kop of reactie blokje. Kan je niet een speciaal element binnen de ontwerp aanwijzen dat je aanspreekt, neem dan de afbeelding niet mee. Je begrijpt het ontwerp dan waarschijnlijk niet en je zal in dat geval dan het ontwerp kopiëren in plaats van dat je het idee achter het ontwerp meeneemt.

Ik heb zowel voor de layout als de achtergrond gezocht naar inspiratiebronnen.
Voor beide heb aan de hand van de gevonden afbeeldingen een moodboard gemaakt.

Schets

Voordat ik in Photoshop duik maak ik altijd eerst een paar schetsen. Met potlood en papier ben ik veel flexibeler dan in Photoshop en doe ik sneller ideeën op voor innovatieve layouts. Wanneer ik in photoshop zou beginnen zou ik waarschijnlijk blijven hangen in het typische layout: 3 kolommen en logo bovenaan.

Schets1

1. Het logo heeft vanaf de eerste schets zijn plekje weten te behouden. Alleen de naam is veranderd van Thyevi naar ThijsVisser.
2. Omdat dit element geen inhoud had, heb ik deze laten vervallen.
3. Mijn eerste idee was om de navigatie met vertraging te laten meebewegen, zoals te zien is op de website van Edwin Tofslie.
4. De subnavigatie zou alleen de actieve pagina weergeven indien de gebruiker niet met de cursor over de navigatie zou bewegen.
5. Ik verwijs hier naar de gouden ratio, tussen de portfolio afbeelding en de omschrijving. Vanwege de vele iteraties voor de portfolio pagina, heeft dit deel van het eerste ontwerp het niet overleeft.

Schets2

1. De subnavigatie klapt open en de gebruiker klikt een item aan
2. De portfolio wordt geladen en de cursor bevindt zich nog boven de subnavigatie
3. De cursor beweegt van de subnavigatie vandaan en de niet geselecteerde items in de lijst verdwijnen. Het geselecteerde item wordt verticaal uitgelijnd aan de supernavigatie.
4. Hier heb ik staan “Use the url for navigation, without reloading the page”. ExpressionEngine zorgt voor schone URLs, maar dit is zonder herladen niet mogelijk.

Schets3

1. Navigatie tussen portfolio afbeeldingen met behulp van pijlen aan de zijkant en bovenkant van de afbeelding. Dit idee heb ik al snel achtergelaten, omdat het de gebruiker geen geheel beeld geeft van het project. De gebruiker moet te veel klikken om het project te kunnen doorgronden.
2. Vergelijkbaar met nummer 1, waarbij de navigatie-elementen dichter bij elkaar geplaatst voor gemakkelijkere navigatie.
3. De portfolio afbeeldingen onder elkaar weergegeven.
4. Omschrijving van het project wordt zichtbaar wanneer de gebruiker zijn cursor over de afbeelding beweegt.

Heel wat van de schetsen worden niet gebruikt voor het uiteindelijke ontwerp. Dit is niet erg, je bent immers op zoek naar het beste ontwerp. Het uiteindelijke ontwerp komt zelden uit je eerste schets. Het schets proces is goed om mee te beginnen, maar dat betekend niet dat je dat alleen in de beginfase hoeft te gebruiken.
Wanneer je een schets uitwerkt kan blijken dat deze toch niet goed werkt omdat details het succes van ontwerp in de weg zitten.
Het schets proces is er vooral om 1. ideeën op te doen voor een ontwerp. 2. te kijken of een ontwerp, zoals je die in je hoofd hebt, goed zal werken. Je kunt door het analyseren van een schets vaak al bepalen of het ontwerp succesvol zal zijn.
Het doel is dan om alle slechte ontwerpen zo snel mogelijk te elimineren.

In de volgende 2 delen duik ik Photoshop in en zal ik de schetsen tot het uiteindelijke ontwerp uitwerken en in deel 4 zal ik iets van de technische kant van de site uit de doeken doen.

Ook leuk om te lezen:

• Veerle verteld over het nieuwe ontwerp van Duoh.
• Tim van Damme heeft tips voor je ontwerpproces.

Geplaatst in Proces