This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Onze deliverables

This column was published in edition #56 of the Dutch, paper version of Web Designer Magazine. It’s in Dutch. Onze huidige deliverables, de dingen die we ter goedkeuring aanbieden aan onze klanten, zijn verouderd. En eerlijk gezegd zijn ze ook nogal onzinnig. Vaak gaat het nog als volgt: allereerst wordt de complete website in uitgebreide wireframes beschreven. Tot in detail wordt elke pagina, elk componentje, gespecificeerd. Deze wireframes worden na goedkeuring van de klant ingekleurd in Photoshop. Als de klant blij is met deze plaatjes dan mogen de web-developers ze ombouwen naar iets wat daadwerkelijk werkt. Er is veel mis met deze werkwijze.

Men gaat er van uit dat de mensen die de wireframes maken alles weten. Ze moeten verstand hebben van interactie, van content, van hiërarchie, van layout, van design en van techniek. Alle keuzes die ze maken zijn bepalend voor hoe de websites er uiteindelijk uit gaat zien en hoe de website gaat werken. Ik ken veel interactie-ontwerpers, en ze zijn bijna allemaal buitengewoon intelligent en getalenteerd. Maar alwetend zijn ze geen van allen. Zo veel verantwoordelijkheid neerleggen bij één enkel persoon, en de kennis van alle anderen negeren is — simpel gezegd — dom.

Kleurplaten

Een paar jaar geleden ging een oud-collega van mij, een interactie-ontwerper, ergens anders werken. Voor zijn vertrek nam hij zijn portfolio nog even met mij door: aan de linkerkant zijn wireframes, rechts het uiteindelijke resultaat. Het leken wel kleurplaten uit de kleurboekjes van mijn dochtertje. Door deze werkwijze was de rol van de visual designer verworden tot een simpele inkleurder. Een stylist. Met de vakkennis van designers over verhoudingen, proporties, layout — maar ook de eigen ervaring met het web — werd niks gedaan. Het was de taak van de designer om een zo mooi mogelijk plaatje te maken, niet om actief mee te denken over de beste oplossing. Die was namelijk al verzonnen.

Technisch onmogelijk

Ik moest ooit eens HTML templates maken van een set ontwerpen in Photoshop. Een blik op de — overigens prachtige — plaatjes was genoeg om te zien dat het technisch onmogelijk was om hier HTML van te maken. Sommige dingen werken nu eenmaal wél in fotobewerkingssoftware maar niet op het web. Het probleem was alleen dat de klant de plaatjes al had goedgekeurd en verwachtte dat alles er exact zo uit zou komen te zien. Ik ben nog met ze in gesprek gegaan maar ze waren onverbiddelijk. Ik heb de grenzen van het mogelijke moeten overschrijden om aan deze onzinnige eis te voldoen. Het resultaat was een brei van bizar complexe HTML en CSS gedrenkt in een smerige poel van JavaScript. Met andere woorden, het was een zooitje. Het zag er wel precies zo uit als gewenst. In alle browsers. Ik hoef waarschijnlijk niet uit te leggen dat de developers die aan de slag moesten met mijn werk niet zo blij waren. Ze hebben er letterlijk twee jaar over gedaan om van die rotzooi iets werkends te maken. Belachelijk.

Lopende band

In de watervalmethode moet elke deliverable eerst afgevinkt worden voordat er verder gewerkt kan worden. Dit werkt prima in een fabriek, maar in een specialistisch gebied als web design levert het slechte producten op waar iedereen gefrustreerd over is: de klant is ontevreden met het uiteindelijke resultaat omdat het lang niet zo mooi is als de photoshop-documenten, de designer is om dezelfde reden niet blij en de developers zijn ongelukkig omdat zij overal de schuld van krijgen terwijl ze totaal geen invloed hadden op de totstandkoming van het ontwerp. Krankzinnig. Ronduit idioot. En toch wordt er nog steeds zo gewerkt. Nee, ik weet ook niet waarom.

Dat moet anders

De oplossing klinkt eenvoudig. Laat iedereen gewoon samenwerken. Betrek de developers, de designers, de interactie-ontwerpers en de klant bij de design fase. Laat iedereen meedenken. Layouts worden beter door de bemoeienis van designers, de contentstructuur wordt beter door de invloed van developers, typografie wordt realistischer doordat de front-ender wél weet wat er wel en niet kan. Gebruik naast de talenten van iedereen ook betere tools, tools die geschikt zijn voor het web. Ontwerp een site dus niet in z’n geheel in fotobewerkingssoftware maar werk vanaf het begin direct in de browser. Photoshop is perfect om foto’s mee te bewerken. Het is totaal niet geschikt om de flexibele natuur van het web mee vorm te geven.

Dit klinkt allemaal eenvoudig. Gewoon samenwerken, gewoon andere tools gaan gebruiken. Maar slechte gewoontes afleren is lastig. Het heeft tijd nodig. En we moeten er veel over lezen. Gelukkig wordt er aardig veel over geblogd, en gelukkig heeft collega columnist Stephen Hay een fantastisch boek geschreven over dit onderwerp. Hij legt prachtig uit waar onze werkwijze vandaan komt, en wat er allemaal aan schort. Hij komt ook met geniale tips en oplossingen om tot betere ontwerpen te komen. Laat je niet afschrikken door de soms extreem nerdy werkwijze die hij propageert. Als het te technisch is, lees vooral door, het boek staat vól met prachtige inzichten. Maar wees ook niet te bang voor de nerdy tools die hij gebruikt. Het zijn momenteel de enige echt geschikte tools om echt goede websites mee te maken. Helaas.