parallax background image

Ontwerpen in Adobe XD (deel 3) - Prototypes maken

Gepubliceerd op 1 september 2018 Leestijd : 4 minuten

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

Overzicht van nieuwe schermen

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.

Prototype aanklikken

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

Assets wegklikken

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.

Linken 005_slepen.png

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.

Eigenschappen link

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

Alles gelinked

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.

Header fixed maken Bring to front

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

Opties voor menu

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

Terug vanuit het menu - opties

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.

Home instellen

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

Prototype bekijken

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.

Online prototype

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

Link kopieeren

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

Prototype bekijken

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

Reactie plaatsen Reactie lezen

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!

Onze klanten
Onze oplossingen