Designing for AR with Adobe Aero

AR for Education-Kids relating to the Periodic Table

Let’s understand the context

Who am I?

So, Hi, I am Rajiv Surya, working in Immersive Experience Design for past 1 year and testing all AR/VR Designing tools, for designers to explore. For my full profile, you can visit my LinkedIn page here.

Why I am doing this series?

To help aspiring designers or professional designers or anyone who is interested & wants to explore and get in Designing for AR solutions.

The problem/issue I see

When we talk about AR/VR Designing, we get complicated thoughts that we as designers should be knowing the 3D tools like Blender, Rhino and developing tools like Unity to make our AR solutions reality. There are fewer tools that provide designing for AR and test concepts before going into the complex development phase.

What will you get from here?

So, that is why I will be sharing few Adobe Creative Suite tools & will let you know how I designed AR concepts, without consuming much time. This is a step-by-step guide for you to try out these tools if you are enthusiastic & interested in AR Designing.

What is the AR concept?

Kids to understand the elements of the periodic table, can scan a glass of water & know about what elements it is made of, eventually highlighting those elements in the Periodic table.

Better relating to the concept in real life, increases better understanding for the student

To view the AR concept video, click here

Let’s start with how I made it. There are 3 parts to this:

1. 2D Assets Design
2. 3D Assets Design
3. AR Prototyping

2D Assets Design

Tool used : Adobe Illustrator

1. Periodic table backdrop

For this use-case designed a periodic table with a dark background, for better visibility in the real environment for AR concept demonstration.

Export it to the creative cloud in .psd or .svg formats, to use in Adobe Aero

2. Graphics for the Hydrogen & Oxygen molecule

Export it to a local folder on your PC in png formats, to use it in Adobe Dimension, when creating the 3D model of the molecule

3. Graphics for the atoms

Again, export it to a local folder on your PC in png formats, to use in Adobe Dimension, when creating the 3D model of the molecule

4. Labels Design

Export this to the creative cloud in .psd or .svg formats, to use in Adobe Aero

Design the label, which will pop up when the AR detects the glass of water.

3D Assets Design

Tool used : Adobe Dimension

After all the 2D graphics are designed, let’s get onto the 3D tool, Adobe Dimension. Will be using the existing library components for this AR concept demo.

1. The Hydrogen sphere

Drag a sphere from the starter assets section, under basic shapes.

Then click on the object and click on the actions, Place Graphic on model to place the 2D asset which you designed to wrap on the 3D object

Export to Aero now from Adobe Dimension like this, clicking on Selected for Aero

Then finally save it to the creative cloud to use it in Adobe Aero later.

2. The Oxygen sphere

Same action you do for Oxygen 3D sphere. Add the graphic about and export it to creative cloud

3. The atom ring 1

For this use the basic shapes of Sphere & Torus from the Starter assets in Adobe Dimension

Place the graphic of the Atom number on the sphere and change the color of your choice for better contrast while viewing in the AR demo

Then, export it to Aero, in creative cloud

4. The atom ring 2

Let’s now go to the fun part of the demo on Adobe Aero

AR Prototyping

Tool used : Adobe Aero

1. Import Periodic Table Backdrop

Detect the surface for the objects to place. Import the cloud assets from the plus(+) icon. Then resize it accordingly with 2 fingers, according to your concept vision.

2. Import the Main label now

To place it above, use 3 fingers to swipe up & lift the object or asset above the selected surface plane. Here my concept is to show it near the glass of water.

3. Then, import 3D molecule objects

Again, place it little above, so that they seem floating in the air, with the shadow falling on your surface, which makes it look real

4. Finally, import rings and add interactions

Now place the rings with the molecules and then add interaction to spin it. for that go to behaviours in the Aero app, and then put action as spin with the anchor point being the Hydrogen & Oxygen molecule.

More interactivity you can add, with the limited interactions provided by Adobe Aero.

Hope you liked it folks.

If this helps you to get started with AR Designing, then do share it with others, so that it helps others too. It can be on LinkedIn, Instagram or other social handles.

Also do follow Design Jam, for more AR & UX Design content.

Catch up with my content on my Instagram page, too.

Show your love by sharing it. 🥰

Thank you folks

Have a nice day 👍🏻