Adobe XD visualisatie

Ik ben momenteel bezig met het finaal product te verwekken binnen het programma Adobe XD.
Na de feedback met Bart en Hilde, ben ik gaan zoeken of er geen efficiëntere manieren zijn om een animatie-effect te gebruiken die door een button wordt getriggert.

Eerst maakte ik gebruik van ‘componenten’, die normaal erg efficiënt zijn voor buttons die reageren (aan-uit, etc.) op een klik en hover.

Echter ben ik nu – door intensief bezig te zijn met het programma, tot betere en efficiëntere manieren bekomen. Hoewel het erg makkelijk lijkt, maak ik nu gebruik van ‘masks’ om het gewenste effect te bekomen, en heb ik ‘componentens’ niet nodig (hoewel ik deze wel degelijk ga gebruiken voor de ‘buttons’: terug naar begin, vorige, volgende, ga naar einde).

Deze truc zorgt ervoor dat de animatie langs beide kanten werkt; wanneer de ‘terug’ button wordt aangeklikt, wordt de animatie ‘reversed’, en is het dus erg makkelijk om de stap terug te nemen omdat je héél duidelijk ziet wat er gebeurt.

Eventueel zou ik nog een extra button kunnen installeren die de tekst zou voorlezen – dit is erg handig voor mensen met dyslexie. (Moet nog worden uitgezocht of dit mogelijk is – en hoe dit wordt gedaan. Deze stap lijkt mij een relatief snel geklaard klusje.)

Het kleurenpallet is licht aangepast -> ik heb besloten de balken niet van kleur te veranderen, maar in dezelfde kleur te houden (geel). De ‘inactieve’ balken worden zoals eerst ook naar de achtergrond geplaatst door ze transparanter te maken. Zo blijft de lezer weten over welk onderdeel ik het juist heb.

Elementen binnen de visualisatie:

  • process-bar (pagina-indicator)
  • buttons
  • kruimelpad
  • tekst
  • visualisatie

Elementen die ontbreken in de visualisatie:

  • voorlees-knop
  • aantrekkelijke startpagina
  • back to start button
  • sterke titel
  • kleurenpallet staat nog niet vast

Ik ben wel nog helemaal NIET tevreden met de buttons.

Bekijk het ontwerp HIER: https://xd.adobe.com/view/b4f870f9-245b-4ec6-4d9b-91c508a584b0-c2c9/?fullscreen

het finale product – wanneer de hele visualisatie zich toont, zou het ongeveer zoiets zijn:

versimpeld voorbeeld van het eindproduct (niet 100% accuraat)

One thought on “Adobe XD visualisatie”

  1. Interessante artikels over ‘wireframes’:
    https://medium.com/user-experience-3/website-wireframes-22668fcba9b3
    https://medium.com/fbdevclagos/4-reasons-why-wire-frame-is-important-during-website-or-mobile-app-development-46fabdf47190
    https://www.invisionapp.com/inside-design/how-to-wireframe/

    Hier de Belgische organisatie die het label Anysurfer mag uitdelen aan toegankelijke websites:
    https://www.anysurfer.be/nl
    Web Content Accessibility Guidelines W3C:
    https://www.w3.org/TR/WCAG21/
    Al die regels naleven kan niet volgens mij, maar vele daarvan kunnen nuttig zijn.

Leave a Reply

Your email address will not be published. Required fields are marked *