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.
Ontwerpen van 3 verschillende Netlash ontwerpers.
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.
Door Roel Van Gils 24/11/09 (3 maanden geleden)
re: Het grafisch proces
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.
Door Tom Hermans 24/11/09 (3 maanden geleden)
re: Het grafisch proces
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.
Door Wolf 24/11/09 (3 maanden geleden)
re: Het grafisch proces
Dat ene lelijke element toevoegen kan in de praktijk vies tegenvallen, ik raad het alleszins af.
Door Roel Van Gils 24/11/09 (3 maanden geleden)
re: Het grafisch proces
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.
Door Bart Noppen 24/11/09 (3 maanden geleden)
re: Het grafisch proces
@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" :)
Door Wolf 24/11/09 (3 maanden geleden)
re: Het grafisch proces
Er zit wel meer achter dan enkel opknippen, dat is een feit, maar wij hebben hier tot op heden nog geen degelijk alternatief gevonden.
Door Yoni De Beule 24/11/09 (3 maanden geleden)
re: Het grafisch proces
Als ik me niet vergis gebruiken onze noorderburen vaak de term "Basing".
Door Lapin McAdam 24/11/09 (3 maanden geleden)
re: Het grafisch proces
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 ..
Door Roel Van Gils 24/11/09 (3 maanden geleden)
re: Het grafisch proces
@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.
Door Wolf 24/11/09 (3 maanden geleden)
re: Het grafisch proces
Basen doet me aan drugs denken maar kom, dat ben ik misschien.
Door Gert Baudoncq 24/11/09 (3 maanden geleden)
re: Het grafisch proces
@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/.
Door Gert Baudoncq 24/11/09 (3 maanden geleden)
re: Het grafisch proces
basing wel natuurlijk ;-)
iets te snel geweest, maar ik vind het geen mooi woord, msshn moeten we er maar een ander verzinnen
Door Xavier 25/11/09 (3 maanden geleden)
re: Het grafisch proces
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.
Door Nicky 20/12/09 (2 maanden geleden)
re: Het grafisch proces
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.
Door Dragolin 23/12/09 (2 maanden geleden)
re: Het grafisch proces
ik zou wel eens wat meer voorstudies willen zien
Door elise 04/01/10 (2 maanden geleden)
re: Het grafisch proces
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.
Door Yoni 05/01/10 (2 maanden geleden)
re: Het grafisch proces
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.
Door Sha 20/02/10 (23 dagen geleden)
re: Het grafisch proces
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.
Er zijn nog geen blogreacties.
Er zijn nog geen tweets over dit artikel.