Moeten designers programmeren?

Als je de vraag letterlijk stelt: “Moeten designers programmeren?” dan is mijn antwoord: “nee”. Ieder heeft zijn eigen vak, en dat mag wat mij betreft ook zeker zo blijven. Je bent goed in/hebt passie voor het een, en niet voor het ander. En dat is prima! Als je de vraag anders stelt: “Moet een designer weten waarvoor hij ontwerpt?” dan is mijn antwoord “ja!”.

Als designer en developer werk je vaak samen aan één product. De designer bepaalt met zijn designkeuzes veel zaken voor de developer die later in het traject te werk gaat. Gelukkig gaan de ontwikkelingen op zowel design- als technisch gebied snel, en groeien deze disciplines steeds meer naar elkaar toe.

“Vroeger” (dan praat ik over een jaar of 7 geleden) zakte de moed als developer je al in de schoenen als je een design gepresenteerd kreeg met een overvloed aan afgeronde hoeken. Je mocht dan in je code in elke hoek van je element een plaatje met afgeronde hoeken plaatsen. Als de designer echt lekker op dreef was zat er ook nog een schaduw-randje aan vast en was dat blok in verschillende kleuren beschikbaar (nog meer plaatjes!).

Dat kwam eigenlijk vooral omdat destijds Adobe Photoshop het meest gebruikte programma was om te designen voor web. Maar eigenlijk was dat programma ooit voor fotobewerking bedoeld. Je kon daarmee dus designs maken die een webbrowser destijds nog niet op je scherm kon toveren.

Tegenwoordig zijn de meeste designprogramma’s veel meer gericht op web, en bieden ze ook enkel mogelijkheden die met code gerealiseerd kunnen worden doordat ze op de achtergrond ‘vector-georiënteerd’ zijn. Dat wil zeggen dat het programma bij het maken van een lijn geen pixels invult met een kleurtje, maar een berekening maakt (zoals je ook in je code zou doen) waarbij een lijn van punt A naar Punt B loopt. Waarbij veel van die tools tegenwoordig ook verder gaan dan alleen designen, en ook mogelijkheden bieden om prototypes van je website/app te genereren, of zelfs code genereren die je als developer kunt overnemen.

Een aantal voorbeelden van dit soort tools zijn:

Sketch – https://www.sketchapp.com/

Framer - https://framer.com/

Adobe XD - https://www.adobe.com/products/xd.html

Figma - https://www.figma.com/

Avocode: https://avocode.com/

Daarnaast zijn de verschillende grote webbrowsers (Google Chrome, Mozilla FireFox, Apple’s Safari en Microsofts Edge) het inmiddels ook eens geworden over een aantal zaken en kunnen we bijvoorbeeld de gevreesde afgeronde hoeken eenvoudig met code realiseren (inclusief schaduw en in alle kleuren van de regenboog, jeej!)

Het voordeel van deze vooruitgang is dat er nu veel bewuster wordt ontworpen met het oog op het uiteindelijke medium waarvoor je ontwerpt, het scherm van je desktop, tablet, smartphone etc. Helemaal als je de prototyping mogelijkheden van bepaalde tools benut, zie je als designer veel sneller hoe je design in ‘real life’ gaat werken met ‘echte’ content. Zo kun je bijvoorbeeld met Invision’s Craft plugin (https://www.invisionapp.com/craft) een JSON-bestand, of een bestaande website gebruiken om data in je design te importeren.

Naast het bewuster designen en de hoe bepaalde tools je daarbij kunnen helpen is het ook waardevol dat je soms weet hoe iets in de basis technisch werkt. Denk bijvoorbeeld aan een product-filter voor een webshop. Als je in je hoofd kunt bedenken wat zo’n stuk code nou eigenlijk doet kun je ten eerste veel beter designen met de gebruiker in gedachten, en ten tweede zal je veel sneller op één lijn zitten met je developer-collega’s. En daar wordt iedereen beter van :)

Hieronder vind je nog wat interessant leesvoer, mocht je hier meer over willen lezen:

• How to learn coding for free: A guide for designers:
  https://medium.com/interactive-mind/how-to-learn-coding-for-free-a-complete-guide-for-designers-7de857d219d6
• In their shoes: designers understanding developers:
  https://blog.prototypr.io/in-their-shoes-designers-understanding-developers-30096c5cb4c1
• Codeacademy: https://www.codecademy.com/