Webdesigner: ‘to code or not to code?’

De vragen die menig webdesigner zichzelf weleens gesteld heeft – althans, ik wel: wat voor type webdesigner ben ik? Waar ligt mijn webdesign-kracht? In de wireframes, de workflows, de interactie? Ga ik leren coderen? Moet ik mijn designs naar front-end code kunnen omzetten? Of blijf ik gelaagde Photoshop-ontwerpen maken die daarna (door iemand anders) naar front-end code worden omgezet? Met alle overdrachtsperikelen daarbij… Is dat een efficiënte workflow, of kan het anders?

Even terug in de tijd.

Webdesign als vakgebied bestaat sinds het verschijnen van Netscape 1.0 (Mosaic) in 1995. Het ontwerpen en bouwen van een internetsite is in die afgelopen 20 jaar volwassen geworden. Toen maakte je eigen webpagina’s met bijvoorbeeld Microsoft FrontPage en TextEdit. DreamWeaver kwam later. Het was pionieren. Je deed alles zelf; van idee, ontwerp, tot HTML.

Volwassen vakgebied

En nu? De mogelijkheden om een website vorm te geven en te coderen zijn uitgebreid en verbeterd, en zijn er veel verschillende webdisciplines ontstaan; het is allang niet meer zo dat een website door één persoon wordt verzorgd. Al helemaal niet bij complexe, professionele websites. Van Visual design, UX, tot CSS, van content tot SEO – er is een specialist voor ieder onderdeel. We hebben ook betere programma’s tot onze beschikking en ‘best practices’ zijn ruimschoots voor handen.

Ontwerpen en bouwen van internetoplossingen is dan weliswaar een volwassen vakgebied geworden, maar nog lang niet uitgegroeid.

Er zijn veel webdisciplines ontstaan waarbij uit hun titel de specialisme blijkt. De term ‘webdesigner’ is daarentegen voor meerdere interpretaties mogelijk. Voor de een is een webdesigner iemand die zich alleen richt op het vormgeven van de front-end (look-and-feel), voor de ander iemand die ook zijn designs omzet naar HTML/CSS, of zelfs de volledige front-end en back-end verzorgt.

Coderen: ja of nee?

Ik heb vaak geprobeerd om het coderen mij eigen te maken, maar kan maar niet de begrippen als class, tag, container, div en span uit elkaar houden; laat staan welke parameters daar weer bij horen. Ik struikel steeds over de steile leercurve om nette en juiste code op te leveren. Natuurlijk kan ik snel en vrij eenvoudig met wat HTML en CSS iets in elkaar zetten. En dan maar hopen dat het werkt op verschillende devices… Voor een presentatie prima, maar ik zal waarschijnlijk nooit in staat zijn (ik denk de meeste designers niet) om kwalitatief codeerwerk op te leveren. Het is voor een designer al een grote uitdaging om op te vallen tussen de concurrentie.

Ik ben het type webdesigner dat besloten heeft niet te willen coderen, omdat ik mij wil richten op visuele presentatie en/of gebruiksvriendelijkheid van een site.

Specialisatie

Ik ben het type webdesigner dat besloten heeft niet te willen coderen, omdat ik mij wil richten op visuele presentatie en/of gebruiksvriendelijkheid van een site. Daar is op zich niets mis mee. Dit heet namelijk ‘specialisatie’. Eerlijk gezegd, vanuit een technisch perspectief gezien, is programmeren veel moeilijker; een design vindt je mooi of niet mooi, een typefout in code is ‘killing’… Dus je moet kiezen.

Als je een professionele designer wilt zijn, dan zul je de beste design-skills in jezelf naar boven moeten brengen. Ten slotte veranderen designtrends continu en de technische vooruitgang staat nooit stil. Er wordt veel van je gevraagd om bij te blijven. Meer dan voldoende dus om je ontwerpkwaliteiten tot het uiterste te testen. Laat staan als je daarbij ook nog bij wilt (blijven) coderen.

‘Rare snuiter’

Meningen, begripsverwarring en vooroordelen spelen al lang een grote rol in de discussie of een webdesigner moet kunnen coderen, of niet. Een designer wordt nog vaak gezien als een ‘rare snuiter’ die in vage bewoordingen praat over het belang van ‘kleurtjes’ en ‘fontjes’. En hij wordt al helemaal niet voor vol aangezien, zodra blijkt dat hij niet kan programmeren.

Gloort er licht aan de horizon voor designers als ik? Zal front-end coderen over niet al te lange tijd volledig WYSIWYG gaan? Zoals Postscript-programmeren allang vervangen is door WYSIWYG werken met Adobe Illustrator (wist je trouwens dat Adobe’s Illustrator oorspronkelijk ontwikkeld is als viewer om je handgeschreven Postscript-code te kunnen bekijken?! En dat je eerst in outline werkte en alleen kon previewen?!). Vroeger kon je niet om coderen heen (zelf doen of inhuren). Het was een noodzakelijk kwaad. Maar dit is niet langer meer nodig – er zijn professionele drag-and-drop applicaties beschikbaar. Als webdesigner heb je geen uitgebreide kennis van coderen meer nodig. Met de juiste software kun je schitterende, functionele en responsive websites maken.

Drag-and-drop

Je bent als designer niet langer meer gebonden aan het vervaardigen van statische wireframes en mockups. Front-end code kun je door middel van drag-and-drop vervaardigen. Je kunt desktopprogramma’s als Adobe Muse en de ‘extract’-tool binnen Adobe Dreamweaver gebruiken om veel front-end coderingstaken uit handen te nemen. Daarnaast zijn er verschillende initiatieven die online oplossingen bieden, zoals Macaw, WebFlow, Webydo. En blijf je binnen een template voor bijvoorbeeld WordPress, dan blijft code grotendeels voor je verborgen.

En webontwikkelaars hoeven niet te klagen, want er wordt nette, W3C compliant HTML/CSS gegenereerd die zeker niet onderdoet aan wat veel ontwikkelaars zelf schrijven. Daarbij is het gebaseerd op Twitter’s Bootstrap framework. En nee, je zit niet vast binnen een bepaalde applicatie. Want de code die gegenereerd wordt door Webflow, Macaw of Webydo kun je desgewenst exporteren en gebruiken binnen een extern platform voor doorontwikkeling.

No more code!

Ik weet het: een gewaagde uitspraak… Maar wat ik als designer echt wil, is het realiseren van een website. Niet per se door middel van coderen. Hier liggen twee basisgedachten aan ten grondslag:

• Ik wil mijn opdrachtgevers een voorspelbaar resultaat en proces bieden. Ik heb als freelance designer niet altijd de mogelijkheid om een (dure) ontwikkelaar in te huren voor je project. En mijn opdrachtgever zit niet te wachten om tussen twee partijen in te komen zitten. Je wilt dus als designer de vertaling van design naar code kunnen verzorgen. Daar gaat het om – of je nu daadwerkelijk kunt coderen of niet. Vandaar dat professionele applicaties de moeite van het onderzoeken waard is.
• Meer controle over mijn werk. Als designer wil je controle houden over je creaties, toch? Helaas gaat er geregeld in de vertaling van design naar code veel verloren. De vertaling van PSD naar responsive HTML/CSS is geen 1-2’tje. Bouw je zelf de site, dan heb je ook vanzelfsprekend zelf de controle over de kwaliteit van het gehele project(-verloop), en ben je beter in staat om te anticiperen op veranderingen.

Kijk dieper dan je beeldscherm

Volledig werken zonder notie van code – zoals we nu ongemerkt Postscript coderen met Adobe Illustrator — zover zijn we nog niet. De (semi) handmatige vertaling van ontwerp naar (front-end) code zal nog wel even nodig zijn. De WYSIWYG-applicaties zijn nu nog opgebouwd uit twee weergaven: een ‘code view’ en de ‘drag-and-drop view’. Maar de ontwikkeling gaat hard. Straks weten we nog wel dat iets werkt of niet werkt, maar niet meer zozeer waarom. En het zal zeker geen 20 jaar meer duren. Of is dat wishful thinking? En is dat erg?

Leer de juiste begrippen, zodat je jouw designideeën goed kunt verwoorden aan ontwikkelaars.

Tot die tijd zul je als webdesigner ten minste open moeten blijven staan voor andere onmisbare disciplines. Als je compleet voorbij gaat aan het technische concept van internet, de bouwstenen van het web-ontwikkeling negeert, dan zal het slecht met je vergaan. Je zult minimaal basiskennis van coderen je eigen moeten moeten maken om te begrijpen hoe ontwikkelaars denken en wat ze nodig hebben. Leer de juiste begrippen, zodat je jouw designideeën goed kunt verwoorden aan ontwikkelaars.

Basiskennis van het ontwikkelproces

Basiskennis van het ontwikkelproces, gebruik van verschillende programmeertalen en welke restricties dit oplegt aan je design, maakt je een betere designer. Hoe beter je in kunt schatten wat technisch realistisch is, des te minder tijdverlies heb je, en dan ben je niet overgeleverd aan de bereidwilligheid van een ontwikkelaar.

Bovendien, als een professional in de creatieve sector ben je leergierig. Want als je nieuwsgierigheid opdroogt, word je ingehaald.

Afbeeldingen met dank aan Fotolia.