Deze post is geïnspireerd op een geweldig artikel van Volodymyr Kurbatov. Ik dacht gewoon dat het makkelijker kon.

 

 

Ik heb Adobe XD en Storyboard VR (vereist een HTC Vive & Windows PC) gebruikt. Dat is het. In plaats van Adobe XD kan je ook Sketch, Photoshop of Illustrator gebruiken om jouw ontwerpen in te maken. Dus voor je verder leest kan je eerst beginnen met deze programma’s te installeren.

Als een Interaction Design student wou ik onderzoeken hoe we interfaces konden ontwerpen in VR zonder we nog maar iets moeten programmeren. Het is zeer belangrijk om je ontwerp zichtbaar te maken maar je kan niks schetsen omdat VR in 3 dimensies werkt. Het is niet 2D zoals papier, laptop- of smartphoneschermen.

Na wekenlang onderzoek te hebben gedaan naar VR-ontwerp, kwam ik Storyboard VR tegen. Een tool ontwikkeld door de Artefact Group om storytelling visuals te maken in VR. Ik vond een erg handig hulpmiddel om prototypes mee te maken.

Dus hoe ben ik begonnen?

In mijn vorige posts beschreef ik een aantal punten waarmee je als ontwerpen rekening mee moet houden in VR. Met deze aandachtspunten in mijn achterhoofd ben ik begonnen met componenten te maken in Adobe XD. Je kan Photoshop, Sketch of eender welk programma gebruiken dat je toestaat om je componenten te exporteren als een PNG.

Componenten in Adobe XD

 

 

Ik heb mijn artboard breed gemaakt om te componenten te positioneren en een algemeen overzicht te hebben van compositie. Na het maken van een lay-out ben ik de items gaan groeperen en mijn componenten gaan vormen die ik zal gebruiken in Storyboard VR.

Dat is het eigenlijk. Maak je componenten en exporteer ze als PNG.

Wat nu?

Wel, nu je de componenten hebt kan je ze importeren in Storyboard VR. Storyboard VR gebruikt een bepaalde mappen structuur die je zal moeten respecteren om de componenten te categoriseren. Uiteindelijk zal je maar 2 mappen moeten gebruiken PlanesSpheres. Spheres zijn bollen. De bollen kan je gebruiken om 360 foto’s als achtergrond te gebruiken. Planes zijn platte vlakken die je kan positioneren in de ruimte. Deze vlakken/componenten kan je bewegen op de XYZ as-lijnen.

Dus samengevat: Componenten gemaakt in Adobe XD steek je in de map Planes. 360° afbeeldingen die je als achtergrond wilt gebruiken steek je in de map Spheres. Sla de andere mappen over. Die heb je niet nodig.

Maak nu je interface! 

Nu dat je componenten zijn gemaakt en zijn geïmporteerd in Storyboard VR kan je Storyboard VR opstarten en de Vive Headset opzetten. Nu je in de werkruimte bent kan je beginnen met een achtergrond toe te voegen. Gebruik de Spheres map in je linkerhand om je achtergrond te plaatsen. Maak je achtergrond zo groot mogelijk (zet het helemaal naar achter tot zo’n 400m). Nu heb je een standaard achtergrond en kan je beginnen met je componenten, die zich in de map Planes bevinden, te plaatsen. Je kan deze vergroten en verplaatsen op de XYZ as-lijnen. Begin met experimenteren en veel plezier!

Een paar tips!

Storyboard VR’s functies zijn beperkt. Je kan geen interactieve functies toevoegen zoals een knop. Storyboard VR werkt met wat zei noemen “frames” of “Scenes”. Door frames te gebruiken kan je functies zoals knoppen nabootsen. Wat ik meestal doe is mijn frames/scenes dupliceren en bewerken gebaseerd op de vorige frame. Op deze manier kan je een bepaalde actie simuleren zoals het indrukken van een knop.

 

Kijk wat ik heb gemaakt in 25 minuten:

Leave a Reply