Het aanmaken van artboards in Adobe XD is de eerste stap in het ontwikkelen van je ontwerpen. Of het nu gaat om responsieve websites, apps of prototypes – een slimme indeling van artboards is cruciaal voor de workflow. In deze handleiding leer je hoe je artboards maakt en optimaliseert voor verschillende resoluties en apparaten. Zo houd je altijd het overzicht over je projecten.
Belangrijkste inzichten
- Maak artboards voor verschillende apparaten en resoluties.
- Geef je artboards en objecten zorgvuldig namen om het overzicht te behouden.
- Houd rekening met de pixel dichtheid voor Retina-displays om de beeldkwaliteit te maximaliseren.
- Gebruik sneltoetsen voor een snellere en productievere werkwijze.
Stap-voor-stap handleiding
De begint: Een eigen artboard aanmaken
Om te beginnen met werken in Adobe XD, moet je je eerste artboard aanmaken. Je vindt het artboard paneel, dat je kunt bereiken via een klein pictogram in de onderste balk. Hier kun je al je artboards beheren die je in je project hebt. Gebruik nu de dubbelklik om je eerste artboard een nieuwe naam te geven, bijvoorbeeld “Home”. Dit helpt je het overzicht te behouden.
Nieuwe artboard creatie
Wil je een nieuw artboard toevoegen? Gebruik de sneltoets “A” voor het artboard gereedschap. Bij een klik hierop wordt een nieuw artboard aangemaakt. Met opnieuw klikken op het artboard kun je dit ook een naam geven, bijvoorbeeld “Features”. Zorg ervoor dat je verschillende groottes voor je artboards gebruikt om flexibiliteit in je ontwerp te bereiken.
Aanpassingen aan het artboard
De artboards bieden veel aanpassingsmogelijkheden. Klik op het desbetreffende artboard en ga naar de instellingen in het paneel. Je kunt de oriëntatie gemakkelijk wijzigen van horizontaal naar verticaal. Dit stelt je in staat om snel op verschillende apparaten zoals tablets of smartphones te simuleren hoe je ontwerp eruit zal zien. Vooral bij webdesign is het belangrijk om responsieve ontwerpen te maken.
Vergroten en aanpassen van de grootte
Nu kun je de grootte van je artboard wijzigen. Door simpelweg met de handgreep naar beneden te slepen, zie je meteen het nieuwe gebied dat zich aanpast. Over de gestippelde lijn kun je aflezen welke delen van je pagina zichtbaar zijn in de huidige viewport. Delen die daarbuiten vallen, moeten worden gescrold.
Kleur- en rasteraanpassing
Ga nu naar de kleurinstellingen en definieer de kleuren die je nodig hebt. Je kunt kleurcodes invoeren of met de schuifregelaar werken. Daarnaast is er de mogelijkheid om een raster voor je ontwerp te activeren, wat je helpt om layouts nauwkeurig op te stellen. Deze tools zijn enorm nuttig om je ontwerpen te structureren en visueel aantrekkelijk te maken.
Instellingen voor verschillende apparaten
Maak minimaal drie verschillende artboards voor de gangbare schermformaten: desktop, tablet en smartphone. Je moet ervoor zorgen dat je ontwerpen op alle apparaten goed overkomen. De meest voorkomende desktopresolutie ligt bij 1366 pixel, maar je kunt ook 1920 pixel (Full HD) gebruiken. Voor de tablet kun je de iPad of Surface als sjabloon kiezen en vervolgens overstappen naar de smartphone-dimensie, zoals de iPhone 10.
Rekening houden met de pixel dichtheid
Eén van de details waar je op moet letten bij het ontwerpen, zijn de high-resolution displays die in veel moderne apparaten worden gebruikt. Deze displays hebben een hoge pixel dichtheid, wat betekent dat de beeldkwaliteit erg belangrijk is. Wanneer je dus grafieken of afbeeldingen van Photoshop in je project invoegt, let dan op welke resolutie deze beelden hebben. Voor Retina-displays moet je de afbeeldingsgrootte minimaal verdubbelen om een ideale kwaliteit te bereiken.
Indeling van de artboards
Met Adobe XD heb je de mogelijkheid om je artboards eenvoudig opnieuw te ordenen. Dit is handig als je een beter overzicht wilt krijgen. Via de terugtoets of verwijderen kun je ongewenste artboards verwijderen. Alternatief kun je met de sneltoets “Command + D” een duplicaat van een artboard creëren om nieuwe ontwerpen op te baseren.
Werkomgeving optimaliseren
Gebruik de spatiebalk om het handgereedschap te activeren en je vrij in je werkomgeving te bewegen. Dit is bijzonder nuttig wanneer je meerdere elementen op je artboard hebt. Dubbelklik op objecten om naar hun detailweergave te gaan en ze verder te bewerken. Zorg ervoor dat al je objecten duidelijk zijn benoemd en netjes binnen de artboards zijn geplaatst, zodat je later eenvoudiger kunt werken.
Samenvatting – Artboards in Adobe XD: Stap voor stap naar effectieve ontwerpen
In deze handleiding heb je geleerd hoe je artboards in Adobe XD aanmaakt en aanpast. Je weet hoe belangrijk het is om deze goed te benoemen en aan te passen om het overzicht in je project te behouden.
Veelgestelde vragen
Hoe maak ik een nieuw artboard in Adobe XD?Gebruik de sneltoets “A” voor het artboard gereedschap en klik op de plek waar je het artboard wilt hebben.
Kan ik de grootte van de artboards wijzigen?Ja, je kunt de grootte aanpassen door de handgrepen te gebruiken of de waarden in het rechterpaneel in te voeren.
Waarom is de pixel dichtheid belangrijk?De pixel dichtheid is cruciaal om te zorgen dat afbeeldingen en grafieken scherp worden weergegeven op high-resolution displays.
Hoe kan ik mijn artboards beter organiseren?Gebruik duidelijke benamingen voor elk artboard en houd je werkgebied schoon om het overzicht te behouden.
Kan ik artboards dupliceren?Ja, gebruik de sneltoets “Command + D” om een artboard te dupliceren.
