Artboard: het digitale ontwerpvel dat steeds slimmer wordt
Als je weleens hebt gewerkt met een ontwerpprogramma zoals Photoshop, Illustrator of Figma, dan ben je waarschijnlijk al onbewust een artboard tegengekomen. Een artboard - letterlijk een 'ontwerpbord' - is het rechthoekige vlak binnen zo'n programma waarop je daadwerkelijk tekent, plakt of typt. Zie het als een digitaal vel papier dat op je scherm ligt: alles wat binnen de randen van dat vel valt, hoort bij het ontwerp; alles daarbuiten is als het ware de tafel eromheen, wel zichtbaar maar geen onderdeel van het eindresultaat.
Het handige van een artboard is dat je er meerdere naast elkaar kunt zetten in één bestand. Een ontwerper die een app maakt, kan bijvoorbeeld drie artboards naast elkaar leggen: één voor het beginscherm, één voor het inlogscherm en één voor het profielscherm. Zo zie je in één oogopslag hoe de hele app eruitziet, zonder tussen losse bestanden te hoeven schakelen. De laatste jaren is het artboard bovendien 'slimmer' geworden: kunstmatige intelligentie (AI) kan tegenwoordig meedenken over wat er op en rond dat vlak gebeurt, bijvoorbeeld door een foto automatisch te verbreden met bijpassende, kunstmatig gegenereerde inhoud.
Wat is het precies?
De term komt oorspronkelijk uit de fysieke wereld van grafisch ontwerp. Voordat er computers waren, plakten ontwerpers letters, foto's en illustraties met de hand op een stevig karton: het 'pasteboard' of tekenbord. Toen ontwerpsoftware in de jaren negentig en tweeduizend opkwam, namen programma's als Adobe Illustrator die metafoor over: een vast, meetbaar vlak met een breedte en hoogte in pixels of millimeters, waarbinnen het uiteindelijke ontwerp staat.
Rond het artboard ligt meestal een grotere, vaak grijze werkruimte die 'canvas' of 'pasteboard' heet. Daar kun je elementen tijdelijk parkeren - een los logo, een testversie van een knop - zonder dat ze in het eindresultaat verschijnen. Alleen wat binnen de rand van het artboard staat, wordt geëxporteerd als je een afbeelding opslaat of afdrukt.
Verschillende programma's gebruiken net iets andere namen voor hetzelfde idee. Adobe Illustrator en Photoshop noemen het 'artboard'. Figma noemt het 'frame'. Sketch houdt het bij 'artboard'. Functioneel doen ze hetzelfde: ze bakenen af waar het ontwerp begint en eindigt, en maken het mogelijk om meerdere versies - bijvoorbeeld voor een telefoon, een tablet en een desktopscherm - naast elkaar te zetten in één bestand.
De meest recente stap is dat het artboard niet langer een strak vaste rand hoeft te zijn. Met generatieve AI-functies, zoals Adobe's 'Generative Expand', kun je de rand van een artboard letterlijk naar buiten slepen. De software vult het nieuwe, lege stuk dan automatisch met beeldmateriaal dat qua stijl, belichting en perspectief aansluit bij wat er al stond. Het vaste vel papier wordt zo een vlak dat op verzoek 'meegroeit'.
Wat wil men ermee bereiken?
De belangrijkste reden voor het bestaan van artboards is overzicht en structuur. Ontwerpers werken vaak niet aan één scherm, maar aan tientallen: verschillende schermen van een app, verschillende taalversies van een poster, verschillende afmetingen van een advertentie. Zonder een duidelijk afgebakend vlak per onderdeel zou een ontwerpbestand al snel een onoverzichtelijke chaos worden.
Een tweede doel is 'responsive' of 'multi-device'-ontwerp: hetzelfde idee testen op meerdere schermformaten. Doordat je in Figma of Sketch simpelweg meerdere artboards met andere afmetingen naast elkaar zet, zie je direct of een ontwerp ook op een klein telefoonscherm nog werkt, zonder dat je alles opnieuw hoeft te bouwen.
Daarnaast speelt samenwerking een grote rol. Moderne tools zoals Figma zijn gebouwd rond het idee dat meerdere mensen tegelijk in hetzelfde bestand werken, elk aan hun eigen artboard, terwijl iedereen de voortgang van de anderen live kan zien en van commentaar kan voorzien. Dat scheelt eindeloos e-mailen van losse bestanden heen en weer.
Met de komst van AI-functies is er een nieuw doel bijgekomen: tijd besparen op repetitief handwerk. Het handmatig 'uitbreiden' van een achtergrond, het bijsnijden van een foto voor tien verschillende advertentieformaten, of het bedenken van een eerste opzet voor een scherm - dat kostte voorheen uren. Het achterliggende idee is dat AI dat ruwe werk voorbereidt, zodat een ontwerper zich kan richten op de keuzes die echt smaak en oordeel vereisen.
Voorbeelden uit de praktijk
Photoshop CC 2015 was een mijlpaal: Adobe voegde toen voor het eerst volwaardige ondersteuning voor meerdere artboards in één Photoshop-bestand toe, specifiek bedoeld om app- en interfaceontwerpers te bedienen die tot dan toe vaak naar andere software uitweken.
Sketch, gelanceerd in 2010 door het Nederlandse bedrijf Bohemian Coding (opgericht door Pieter Omvlee, gevestigd in Den Haag), bouwde het artboard-concept al vroeg in de kern van het programma. Mede daardoor groeide Sketch tussen ongeveer 2013 en 2018 uit tot een van de populairste tools voor het ontwerpen van apps en websites.
Figma, opgericht in 2012 en publiek gelanceerd in 2016, bracht het artboard (dat het bedrijf 'frame' noemt) naar de browser en maakte het voor het eerst mogelijk om er in real time met meerdere mensen tegelijk aan te werken. Vooral tijdens en na de coronapandemie, toen veel ontwerpteams op afstand gingen samenwerken, groeide het gebruik van Figma sterk.
Adobe Firefly's Generative Expand, geïntroduceerd in Photoshop in 2023, laat zien hoe AI het artboard verandert: reclamebureaus gebruiken de functie om bijvoorbeeld één productfoto automatisch te herformatteren naar de vierkante afmetingen van een Instagram-post én de langwerpige afmetingen van een billboard, zonder dat er opnieuw gefotografeerd hoeft te worden.
Canva, opgericht in 2013 in Sydney, verlaagde de drempel voor niet-ontwerpers door kant-en-klare 'boards' aan te bieden op maat van specifieke formaten - een Instagram-verhaal, een LinkedIn-banner, een A4-flyer - waardoor ook kleine ondernemers zonder ontwerpachtergrond professioneel ogende content konden maken.
Hoe ver is de techniek?
Het basisidee van het artboard zelf is inmiddels tientallen jaren oud en technisch gezien volledig uitontwikkeld: een rechthoekig, afgebakend vlak met vaste of instelbare afmetingen is geen onderwerp meer van onderzoek. Wat wél snel verandert, is de AI-laag daarbovenop.
Functies als automatisch uitbreiden van beeldranden, 'auto layout' (waarbij elementen binnen een artboard zich automatisch herschikken als de inhoud verandert) en het genereren van een eerste schermontwerp op basis van een korte tekstopdracht, zijn de afgelopen paar jaar in hoog tempo verbeterd. Toch zijn de resultaten nog niet feilloos: door AI uitgebreide achtergronden vertonen soms rare naden, onlogische schaduwen of details die net niet kloppen, en moeten door een mens gecorrigeerd worden. Automatisch gegenereerde lay-outs missen vaak nog de fijne afwegingen die een ervaren ontwerper wél maakt.
Een ander obstakel is uitwisselbaarheid. Elk programma slaat artboards op in zijn eigen, gesloten bestandsformaat. Een Sketch-bestand openen in Figma, of andersom, verloopt meestal via export naar tussenformaten zoals PDF of SVG, waarbij details verloren kunnen gaan. Dat maakt overstappen tussen tools lastiger dan het lijkt en houdt gebruikers enigszins vast aan één leverancier.
Hoe belangrijk deze tools inmiddels commercieel zijn geworden, bleek in 2022 en 2023: Adobe kondigde in september 2022 aan Figma te willen overnemen voor ongeveer 20 miljard dollar, maar blies die deal in december 2023 af nadat mededingingsautoriteiten in de Europese Unie en het Verenigd Koninkrijk zich ertegen hadden gekeerd. Rond diezelfde periode liet Adobe ook weten zijn eigen concurrerende tool Adobe XD niet langer actief door te ontwikkelen.
Wie werken eraan?
De belangrijkste spelers zijn commerciële softwarebedrijven, niet zozeer universitaire onderzoeksgroepen - het artboard is in de eerste plaats gereedschap, geen fundamenteel wetenschappelijk vraagstuk. Adobe (Verenigde Staten) is met Photoshop, Illustrator en de Firefly-AI-modellen een van de grootste partijen. Figma Inc., gevestigd in San Francisco, is momenteel de meest gebruikte tool voor gezamenlijk interfaceontwerp.
Nederland heeft een opvallende rol: Sketch wordt gemaakt door Bohemian Coding, met wortels in Den Haag. Ook Miro, oorspronkelijk in 2011 opgericht in Perm (Rusland) als RealtimeBoard en gespecialiseerd in oneindige digitale whiteboards, heeft een grote vestiging in Amsterdam naast het hoofdkantoor in San Francisco. Canva (Australië) richt zich vooral op de bredere, minder technische gebruiker.
Op de achtergrond werken ook onderzoeksgroepen op het gebied van mens-computerinteractie - onder meer aan Amerikaanse universiteiten en aan Nederlandse instellingen zoals de TU Delft, waar ontwerp- en interactietechnologie wordt bestudeerd - aan de vraag hoe AI-gestuurde ontwerptools zo gebouwd kunnen worden dat ze ontwerpers daadwerkelijk helpen, zonder hen controle over hun werk te ontnemen.