Het grafisch proces

, # Webdesign

De sleutel tot een goed grafisch ontwerp ligt voor een groot deel bij het proces. Zowel beginnende als ervaren ontwerpers kunnen voordeel halen uit het optimaliseren van dit proces.

1. Begin met een goede briefing

Begin door een duidelijke beschrijvende briefing aan de klant te vragen. Stel eventueel zelf een vragenlijst op die de klant kan invullen. Probeer zoveel mogelijk concrete zaken te verzamelen. Wanneer de klant een vaag buikgevoel beschrijft, kan je vragen of hij dit kan illustreren met voorbeelden van andere sites, logo’s en stijlen.

Wanneer je voelt dat je weet welke richting de klant uit wil, kan het handig zijn zelf een kleine verzameling elementen bij elkaar te zoeken. Deze verzameling kan je gebruiken om later terug de stijl op te roepen die de klant voor ogen heeft.

2. Evalueer bestaande stijlelementen

Zorg dat de klant je al zijn oud materiaal stuurt en evalueer of zijn logo en kleuren passen bij de eerder beschreven stijl. Vraag zeker ook na of de klant goed fotomateriaal heeft. Unieke professionele foto’s kunnen vaak het verschil maken bij een ontwerp.

Kijk alle elementen na en controleer of alles bruikbaar is. Open alle vector bestanden om na te gaan of ze daadwerkelijk vector zijn. Bekijk de resolutie van eventuele foto’s en kijk de kleurprofielen na.

3. Visualiseer de inhoud en bepaal het doel

Bekijk de structuur die de informatie architect met de klant heeft gemaakt en overloop wat het doel is van elke pagina en element. Bepaal wat moet opvallen en wat minder moet opvallen vanuit het oogpunt van de bezoeker.

Het is de taak van de designer om ervoor te zorgen dat hij de bezoeker doorheen de pagina gidst, en alles ziet wat hij hoort te zien. Wanneer te veel elementen om aandacht vechten zal de bezoeker zijn weg doorheen de pagina niet vinden.

4. Maak minstens 4 voorstudies

Eens je het doel en de klemtonen van alle elementen weet, maak je best enkele schetsen. Het schetsen is een cruciale stap bij het ontwerpen. Het stimuleert de creativiteit en spaart veel tijd uit. Een viertal schetsen uitwerken per pagina is het absolute minimum.

Een paar voorstudies voor websites.

Stop echter niet te veel tijd in een schets. Schets eerder alles neer wat je te geest komt en visualiseer wat er zal werken en wat niet. Werk de beste schetsen uit in fijnere voorstudies om zo je idee bij te schaven.

5. Werk een eerste voorstel uit

Open je favoriete webdesign programma om je ontwerp vorm te geven en ga aan de slag om je visie om te zetten in pixels. Laat je ontwerp evolueren en laat je zeker niet limiteren door je schetsen.

Hou rekening met de beperkingen van browsers en schermresoluties en maak je ontwerp altijd op ware grootte. Probeer de inhoud zo realistisch mogelijk te houden, indien mogelijk zelfs de definitieve copy. Wanneer je die laatste knop en pixel juist geplaatst hebt, is het tijd om het document te sluiten. Neem een korte pauze of werk even iets anders af.

6. Knijp die ogen eens half dicht

Open nu je document en kijk wat je eerste indruk is. Vallen de elementen die moeten opvallen (zie stap 3) op? Neem wat afstand van je scherm en knijp je ogen dicht tot alles wat troebel is.

Zo kun je makkelijk evalueren of je ontwerp in balans is. Eventueel vraag je aan iemand om even je ontwerp te bekijken. Zorg wel dat je open staat voor hun kritiek! Het is soms niet prettig om negatieve kritiek te horen op een ontwerp waar je net enkele uren aan hebt gewerkt.

  • Voldoet je ontwerp niet aan de verwachtigen en doelstellingen? Ga terug naar stap 1, passeer langs start en neem een Nalu.
  • Voldoet je ontwerp wel aan de verwachtingen en doelstellingen? Ga dan naar stap 7.

7. Geniet van je rockstar moment

Proficiat! Je bent voor heel even een webdesign rockstar! Spring even op je bureau en doe een luchtgitaarsolo. Blijf echter niet te lang in je roes, je ontwerp moet nog gesliced en geïntegreerd worden zodat de hele wereld ervan kan genieten.

Meer weten? Advies nodig?

Kom gerust langs voor een kop koffie en een goed gesprek. Wijs geeft strategisch advies, en helpt bij het uitwerken en verbeteren van all things digital.

Gerelateerde artikels

 

Al 21 reacties

Laat hier een reactie achter of contacteer ons via e-mail

Roel Van Gils

Roel Van Gils
schreef

Goede samenvatting.

Ik denk dat je de inspraak van de klant wel een beetje minimaliseert in je verhaal. De praktijk leert dat een klant steeds minstens één punt van kritiek heeft: hij wil immers laten merken dat hij 'in control' is. Een grappige tip die ik ooit kreeg, is: stop één foeilelijk element in je ontwerp (zoals een dikke vette rode rand rond het logo). Je klant zal je bij de evaluatie van het ontwerp vragen om dat lelijke element weg te halen en daarna zal hij je ontwerp pefect vinden en niet meer 'mierenneuken' over zgn. 'details' (waar jij wel hard op gezweet hebt). Pure psychologie ;)

En, alsjeblief… waarom gebruiken jullie toch steeds weer dat vreselijke woord 'slicen'. Koude rillingen! Flashback naar 1998! ImageReady-terminologie! Ik weet wat je bedoelt, maar heb toch wat meer respect voor je front-end developers ;) Het zijn vakmannen.


schreef

Mooi stappenplan, maar idd, de input van een klant wordt hier wat achterwege gelaten. Wat dikwijls voor een pak problemen en frustratie zorgt.

@roel van gils:

die tip om één lelijk element erin te stoppen, kan ik NIEMAND aanraden! Ik heb het zelf één keer meegemaakt, en bij collega's nog vaker gezien: sommige klanten vallen daar niet over en willen dat per se behouden.. en wat dan ?? Ga je hen vertellen dat je dat erin hebt gestopt zodat zij het er uit konden halen ?? Goed voor de vertrouwensrelatie met de klant..

Net zoals 3 mockups presenteren, 2 mooie en 1 lelijke.. je mag niet van de klant verwachten dat hij esthetisch inzicht heeft.. je hebt gewoon 1 kans op 3 dat hij dat gedrocht kiest...

ToM.


schreef

Dat ene lelijke element toevoegen kan in de praktijk vies tegenvallen, ik raad het alleszins af.

Roel Van Gils

Roel Van Gils
schreef

Nja, ik bedoelde het ook eerder anekdotisch hoor. In een professionele designer-klantrelatie is het in de eerste plaats belangrijk dat je elkaar kan vertrouwen en serieus neemt en dan kan je je zo'n experiment niet permitteren. Maar probeer het eens als je een site bouwt voor je jeugdvereniging of nonkel Jos ;) Worked for me.


schreef

@Roel, heb jij een degelijk alternatief voor de term "slicen"? We hadden het hier gisteren bij ons nog over en we kwamen niet veel verder dan "opknippen" :)


schreef

Er zit wel meer achter dan enkel opknippen, dat is een feit, maar wij hebben hier tot op heden nog geen degelijk alternatief gevonden.


schreef

Als ik me niet vergis gebruiken onze noorderburen vaak de term "Basing".


schreef

In Nederland is het inderdaad allemaal "Basing", maar ik vind "slicen" nog steeds een term die de lading (genoeg) dekt, en heb daar nog geen klachten over gehad van programmeurs ..

Roel Van Gils

Roel Van Gils
schreef

@asfaltkonijn: ik denk net dat het woord de lading helemaal niet dekt ;) En programmeurs zal je daar inderdaad niet over horen klagen, want zij zijn immers 'programmeurs'.

'Slicen' is slechts een van de stappen in het proces dat de Ollanders 'basen' noemen. Misschien is 'basen' wel een beter woord omdat je niet meteen aan 'opknippen' denkt, maar het klinkt vreemd in Vlaamse oren.

'Slicen' duidt volgens mij enkel op het digitaal 'uitknippen' van de stukjes 'beeld' uit een mockup die je niet met CSS kan genereren (logo, icoontjes, pijltjes, shadows, gradients etc.). Maar hierna (of ervoor) begint het échte werk voor een 'slicer' pas: een degelijke HTML-structuur opzetten, paginaonderdelen positioneren met CSS en de hele boel 'stijlen'. En niet te vergeten: het debuggen, het optimaliseren en het verhelpen van browser issues.

Steeds vaker wordt van een 'slicer' ook verwacht dat hij jQuery of een ander JavaScript-framework beheerst om flitsende effecten, lightboxes, image rotators etc. toe te voegen.

Een 'slicer' die zichzelf ernstig neemt en het vak beheerst, noem je daarom een front-end developer. En zijn rol is net zo belangrijk als het werk van de back-end developer. In het ideale geval zijn ze zelfs beste maatjes.


schreef

Basen doet me aan drugs denken maar kom, dat ben ik misschien.


schreef

@wolf neen, het ligt niet aan jou..

Omdat ik het woord basen nog nooit gehoord had heb ik het even opgezocht en ik kom niets tegen dat maar in de verste verte met slicen te maken heeft. Op 3 geeft Google wel deze http://www.cocaineinfo.nl/hoe-te-gebruiken/basen/.


schreef

basing wel natuurlijk ;-)

iets te snel geweest, maar ik vind het geen mooi woord, msshn moeten we er maar een ander verzinnen


schreef

Wat een zinloze discussie over terminologie eigenlijk... Ik maak trouwens sowieso nooit een volledig ontwerp in Photoshop of Illustrator. Mijn mock-ups maak ik in illustrator (betere measure-tools dan Photoshop imo) en dan ga ik rechtstreeks naar de browser. Van slicen is er dus niet echt sprake.

Ik mis in het artikel eigenlijk één belangrijk punt: probeer je klant zo te begeleiden dat hij je problemen voorschotelt, eerder dan oplossingen. Verder een goeie round-up, al kan geen enkel designproces in strikte stappen opgedeeld worden natuurlijk.


schreef

Het omschrijft idd aardig het proces van designen. Het briefen in het begin blijft super belangrijk, probeer reeds zoveel mogelijk info te hebben voor het gesprek zodat je reeds de juiste vragen kunt stellen. Zal je veel tijd besparen nadien.


schreef

ik zou wel eens wat meer voorstudies willen zien

elise

elise
schreef

Ik heb nog een vraag. "Bekijk de resolutie van eventuele foto’s en kijk de kleurprofielen na" Waarvoor kan dit allemaal handig zijn? Het is omdat ik bezig ben met een scriptie voor school over huisstijl en ik vroeg mij dit af.


schreef

Stel dat we een beeld ontvangen dat als "headerbeeld" gebruikt zal moeten worden (op een website) dan kijken wij na of deze minimum 980 pixels breed is met een minimum resolutie van 72 dpi. Voor print huisstijlen zijn deze vereisten veel hoger (minstens 300 dpi op de afmetingen dat je het beeld wil gebruiken).

De kleurprofielen laten toe om op verschillende toestellen dezelfde kleuren te verkrijgen. Wanneer deze dus ontbreken is het gissen naar de exacte kleuren die de klant zag.


schreef

Zo'n gestructureerde proces is inderdaad handig en effectief voor relatief "grotere" projecten. Ik denk dat je bij minder grote projecten het proces wat moet verkorten om efficiënt te zijn.


schreef

Een mooie opsomming! Vooral de voorstudie ziet er erg handig uit. Ik mis wel bij punt 3 dat er eventueel conversiepunten moeten worden opgenomen in een ontwerp. Alleen opvallen is denk ik niet genoeg om een funnel te starten. Ik kijk uit naar een artikel over het grafisch proces en conversiedoelen!


schreef

Mooi stukje Yoni!


schreef

En dan maar hopen dat de opdrachtgever ook tevreden is :-) Die willen er nog wel eens een compleet 'andere kijk' op hebben....

Plaats een nieuwe reactie