Designing for Spatial Experiences: How To Get Started (cont.)
A step-by-step guide to visualising ideas in augmented reality (AR)
My previous article was for those looking to make a pivot from graphic design to spatial design. I touched on design disciplines, human-centred design, contextual layouts, and tools. This follow-up is a step-by-step guide on how to visualize your idea in XR — perfect for those who want to create something in AR/VR but they don’t know how to start.
Let’s assume we don’t have a VR/AR headset available, don’t know how to code, and don’t know how to use design programs.
All you need to visualise your idea in XR is:
- A mobile phone (iOS)
- A computer
- An Internet connection
For the purpose of this guide, I am going to show you how to place a simple recipe graphic into an augmented reality environment, and add interactions to create a mini experience.
Step 01: Create 2D Designs
Firstly, we are going to need a button that will open into an information box to show the recipe we will be cooking, as well as nutritional information, and total cooking time. To do this, I used Figma, a free and easy to use vector graphics editor and prototyping tool. Feel free to use the assets I created, which can be downloaded here, or use your own!
Here we have the Information Button and Information Box design I’ll be using for my cooking based experience. We can also call this our User Interface (UI) or our Image Assets.
Step 02: Set Up Adobe Aero
On your mobile device, download the Adobe Aero app from the App Store (iOS). Adobe Aero is available on Google Play (Android). However, it is only an experience viewer and doesn’t have the capabilities of the iOS app yet. This workflow is for iOS only at this time.
It’s free for everyone and does not need an Adobe subscription.
Once you have installed the app and signed in, the app will take you through a tutorial on how to place elements and add interactions. It’s worth going through this to familiarise yourself with the app.
Before we can start creating our AR scene, we need to get the graphics created in Figma or your own assets from the computer to your phone’s photo library.
There are many ways to do this, but I like to send myself the images via email and save them to my photo library.
Step 03: Create the Scene
We are now ready to start putting together our AR Scene. Think about what you want the end product to look like, and how the augmented UI will work with the physical world elements around it. I chose to place my real-life ingredients on my kitchen island and used my phone’s camera to put together a nice composition, but you don’t need to go down this route if you don’t want to.
I made sure to leave some space for the augmented reality UI to appear in, and because some of the text is black without a background, I made sure the area was bright for contrast.
Now we can open Adobe Aero.
Click the blue “Plus” button in the bottom left-hand corner to create a new scene. Start by scanning the room to find the surface you wish to anchor your AR assets to. Once the room scan is complete and you’ve placed an anchor on the surface, press the blue Plus button again, choose “Camera Roll”, select your assets (for us it is the “Info Box” and the “Info Button”) and place them into the scene, wherever you like.
Once you’ve placed the assets, you can tweak the size, rotation, and angle by tapping on them again, then selecting the required tool from the bottom menu bar.
I rotated the assets so they would lie flat next to the chopping board and I could film directly from above. You can do this by tapping on the asset, selecting ‘Move’, then using the X, Y, and Z axis to rotate or angle it to your liking.
To double-check everything is where you want it to be, simply press the ‘Preview’ button at the top of the screen this will show you what your final scene will look like. Return to the editing menu by clicking the ‘Edit’ tab at the top of the screen.
Just having these assets sit statically in AR space doesn’t make for a very exciting or interesting experience. To make it feel more natural, we need to add some interactivity to our assets. For this example, we’d like to be able to tap on the “Info Button” and have it disappear to reveal our “Info Box”.
To do this, tap on the “Info Box” asset, select “Behaviours” from the bottom menu, then tap Trigger > Start > Add Action, and finally select “Hide”. Leave the duration as 0.2s for now, but you can edit this later if you wish. Now, at the start of the interaction, the “Info Box” will be hidden, this is necessary so that it can reappear later when tapping the “Info Button”.
Now, we want to make the “Info Button” disappear when the user taps on it, and then have the “Info Box” appear in its place.
To do this, tap the “Info Button” asset, click behaviours, select Trigger > Tap > Add Action > Hide. You will see that in the behaviours tab, there is a timeline of which actions trigger which behaviours. For your “Info Button”, it should say Tap > Hide + Action.
To create the secondary animation of the “Info Box” showing up in place of the “Info Button”, you need to add another action after the hide action. Click the + Action box and select “Show”. In the next dialogue box, make sure your “Show” subject is your “Info Box” asset.
Now, if you open the preview, you can record a tap on the “Info Button” and will see the “Info Box” appear, like in the gif below.
This is an example of a simple user interaction and from here we can add more assets, steps, and behaviours. For example, step one of the recipe is to turn on the oven — a great opportunity for some contextual placing:
I’ve shown you the basics to create simple AR prototypes, now it’s over to you. I recommend looking into the Figma community to find more preset UI elements for your projects, there are some excellent ones out there. Why not try making different prototypes with your own graphical assets? The best way to learn is by doing, so have fun and experiment with it!
Stay tuned — our next article in this design series will explore displaying 3D assets in AR. Until then, happy creating!
XRLO: eXtended Reality Lowdown is brought to you by REWIND, an immersive design and innovation company. If you want to talk tech, ideas, and the future, get in touch here.
Your claps and follows help us understand what our readers like. If you liked our articles, show them some love! ❤️
We’d also love to hear from you. If you’re passionate about all things XR, you can apply to contribute to XRLO here. ✍️
