Ontwerpen in Adobe XD (deel 3) - Prototypes maken

Geschreven door: op zaterdag 1 september 2018

Leestijd:

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.

Linken005_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 makenBring 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 plaatsenReactie 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!


Andere blogartikelen

  • HTML tips voor mail templates

    Geschreven door: op zaterdag 10 november 2018

    Bij het bouwen van een e-mail template binnen HTML komen er veel dingen kijken, ik leg in deze post een aantal basiselementen uit hoe je om moet gaan met de HTML van een mail template, en hoe wij daar ...

    Bekijk het artikel »
  • Documenteer je code

    Geschreven door: op zaterdag 27 oktober 2018

    Documenteren van je code is uiteraard een best practice. De code op zich mag zo beschrijvend mogelijk zijn, zodat de documentatie impliciet is, maar bijvoorbeeld een uitleg over het waarom van een bep ...

    Bekijk het artikel »
  • 5 tips voor een succesvolle website

    Geschreven door: op vrijdag 5 oktober 2018

    Binnen een gestroomlijnd B2B sales proces spelen websites en online strategieën een essentiële rol. Met de juiste aanpak bereikt u als ondernemer de doelgroep. Maar hoe creëert u het juiste effe ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg