Ontwerpen in Adobe XD (deel 3) - Prototypes maken

In het derde deel van deze serie blogartikelen over Adobe XD laat ik je zien hoe je in Adobe XD een klikbaar prototype maakt dat je kunt testen met je doelgroep en je opdrachtgever. In het vorige deel kon je lezen hoe we voor het fictieve internetblog the Vinylist een mobiele website hebben vormgegeven in Adobe XD. Om beter te uit te kunnen leggen hoe je een klikbaar prototpye in Adobe XD kunt bouwen heb ik een aantal extra schermen toegevoegd. Om deze uitleg te volgen raad ik je aan ook extra schermen te maken, ook als manier om nog vertrouwder te worden met dit prachtige ontwerpprogramma. Deze schermen heb ik toegevoegd:

• Categorie van artikelen
• Menu
• Informatiepagina

Elementen klikbaar maken en linken

Laten we beginnen door de prototype-modus van Adobe XD in te gaan. Dat kun je doen door linksboven op de knop ‘prototype’ te klikken.

Vervolgens kun je het Assets-venster sluiten om de werkruimte te vergroten.

Je kunt een element klikbaar maken en linken aan een ander scherm door het element te selecteren, en met de linkermuisknop een verbinding naar het doelscherm te slepen. Als je veel met groepen werkt kan het zijn dat je even wat moet doorklikken totdat je het juiste element te pakken hebt.

Vervolgens opent het link eigenschappen-scherm. Dit kun je ook openen door dubbel te klikken op het pijltje dat wijst naar de doelpagina. Hier kun je een aantal eigenschappen voor de overgang naar de pagina aanpassen. Ik raad aan de meeste overgangen zonder geleidelijke transitie te laten lopen, dit omdat dit op het web ook niet zo werkt. Wel kun je een ‘dissolve’ animatie gebruiken om een transitie te maken die aangeeft dat er enige tijd is verlopen tijdens de transitie.

Zo kan het er uit zien zodra je alle elementen correct hebt gelinkt:

Het menu prototypen

Sinds kort kun je in Adobe XD ook mooi het menu in je prototype weergeven. Ik raad aan eerst in de ‘Design’ modus het menu-balkje ‘Fixed’ te maken en te zorgen dat dit het bovenste element is in de dieptevolgorde.

Vervolgens kun je terugkeren naar ‘Prototype’-modus. Selecteer het menu-knopje en link deze aan de menu-pagina. Selecteer daar dan de volgende instellingen:

• Type: Overlay
• Transition: Slide down
• Easing: Ease out 0.4s

Dit zorgt er voor dat het menu uitklapt boven het scherm waar je op dit moment bent. Overal waar je vervolgens klikt keer je automatisch terug naar het vorige scherm, maar je kunt ook nog linken naar andere pagina’s vanuit het menu. Gebruik in dat geval de volgende instellingen in de overgang:

• Type: Transition
• Transition: Slide Up
• Easing: Ease out 0.4s

Het prototype testen

Om je prototype af te maken moet je nog de homepagina instellen. Dat kun je doen door op het huisje rechtsboven de geselecteerde pagina die je als homepagina wilt instellen aan te klikken.

We kunnen het prototype gaan bekijken door op de play-knop te klikken!

Test je prototype goed zelf door er doorheen te klikken. Natuurlijk hoeft niet alles te werken zoals in het eindproduct, de bedoeling is dat je de gebruikerservaring goed kan testen.

Het prototype online zetten

Met Adobe XD kun je je prototype online zetten zodat anderen het online kunnen doorklikken. Dit kun je doen door de ‘publish’ knop rechtsbovenin in te klikken en ‘Publish Prototype’ aan te klikken. Vervolgens kun je hier een aantal instellingen van je online prototype aanpassen.

Klik op ‘Create Public Link’ en kopieer de link door op de ze knop te klikken:

Deze link kan je met testpersonen delen zodat zij het online kunnen testen. Dat ziet er zo uit:

Bezoekers kunnen hier een reactie achterlaten en deze op een locatie vastprikken.

Je weet nu hoe je een prototype in Adobe XD maakt en deze kan publiceren. Je kunt nu het ontwerp uitbundig gaan testen en verfijnen. Zoals ik in een eerder geschreven blogartikel heb geschreven is het belangrijk dat je je ontwerp goed test zodat problemen al snel gesignaleerd en opgelost kunnen worden,  zelfs vóór de ontwikkelaars daarmee aan de slag gaan met je ontwerp. Veel succes met het maken van complete en prachtige ontwerpen in Adobe XD!