Description

Design a ten-to-twenty-second proof of concept that showcases augmented reality for a brand, business, or imagined future technology. This project will utilize motion graphics to show what an AR experience will look like from the user’s perspective. It will also allow you to push the experimental boundaries of a concept and give you a portfolio piece that showcases the imagination possible with AR, while sharing it in a way that’s easy for anyone to view.

Specifications

Create an AR conceptual experience that’s exported as video. It should be long enough to get the idea across but short enough to technically execute. An actual AR experience is great as a final product, but it usually needs to run as a stand-alone app.For this exercise, we’ll build something that looks and feels like a real experience but can be viewed as a video and shared online. You’ll use camera tracking in AfterEffects to convincingly “place” digital content in a video clip.

Research and Intent

Brainstorm concepts that would fit in the concise time limit, prioritizing experimental concepts. This is your chance to run wild since there’s no development at stake. Futuristic technologies that don’t yet exist or ideas that aren’t commercial are great if they’re visually compelling.

Merging different kinds of media, such as physical and digital, is one technique. One of the very early AR experiences was a magazine ad for MINI, which used a marker image. Viewing that image on a computer webcam triggered the AR experience, allowing you to see a 3D vehicle in space by turning the magazine. Doing so featured the product—a car—in a unique and interactive way. The physical/digital interaction is a sticky one, and it allows us to extend brands across mediums.

If you’re thinking about an experience for a brand or business, find a way to connect an interaction to what that entity does. IKEA Place is an app that scans a room and allows you to place and move—you guessed it—IKEA furniture. Popular AR apps let users see their face with different make-up effects. Sure enough, those have been created by companies selling cosmetics

On the flipside, if you’re pursuing something completely experimental and fun, creativity is something you should highlight. An app that lets you draw or trace over a spatial environment or pull color palettes from your field of view are some ideas my students have explored.

Methodology

How will the experience start? Is a marker image used or environment scanned? You’ll probably only have enough time to show one or two interactions: think about what those might entail. Will they be self generated or require direct interaction? The former would be more indicative of dynamic animation in the display as you move through the experience. The latter might require you to use hand gestures to make something happen.

Content

You’ll need a video to serve as the background. It needs to be smooth, crisp, and show an environment that works well with your concept. You have a few options to source this: free stock websites or filming it yourself. A stabilized smartphone video provides good enough quality. If you want to use the spatial audio from the video clip, make sure there are no audible distractions when filming.

Sketches

Start with Sara Tan’s augmented reality ideation template to get a sense of what the project goals are and how to start shaping theUI. If you want to explore a bit more fidelity, you can add additional sketches that are more in depth. Write out a rough timeline for what’s going to happen. A basic storyboard template might help you commit to this task.

Digital Design

After importing your video footage, start designing the UI assets. While you can work in whatever software you’re comfortable with, designing directly in AfterEffects can save time. You won’t have to create shapes from imported layers or re-key text. Hide all the UI layers and return back to your footage, trimming anything extraneous. Select the layer and select track 3D camera from the tracker menu. Depending on the length and complexity of the clip, this will take a bit to process. The shorter duration of the project should keep it reasonable, though.

Technical Steps

You should end up with a bunch of tracked points throughout the footage. Select several points that originate from the “floor” of the composition. The bull’s-eye target that appears should look like a tabletop, parallel to the ground.Command-click and choose “set ground plane and origin.” This will effectively set the position coordinates to zero for X, Y, and Z, and it eliminates the need to work with odd numbers when manipulating the position of other objects. Then, choose one or more points that stay persistent throughout the clip and control-click and choose “create null and camera.” This adds a null object, which we know is a flexible blank layer from Chapter 3. It also creates a 3D camera that places the null object in a fixed position within the moving footage. This is the part that will make everything look convincing because once you parent any layer or comp to the null object, it locks it into place within the footage.

Mock-Up

With those specific steps completed, animate the interactions and pre-comp them in their own layer (Layer > Precompose). Parent the comp to the null object, and you should have an animation that’s fixed in space. You can use the null object to make transformations that affect the animations as a whole, like rotating the entire thing 90 degrees or scaling it up in size. Make sure that the “continuously rasterize” switch is checked so that everything is crisp.

Adding the Foreground

If your concept calls for it, you may want to film your hands “touching” the digital content you’ve just designed, to make it seem real. To put things in perspective: the video of the environment serves as the background, the digital content the midground, and tactile interaction the foreground. You can practice “acting out”the gestures you’ll want to use (tapping, swiping, etc.) Record hand gestures to video when you’re ready. If you do it against a neutral background, you can rotoscope them in After Effects. This will effectively“clip out” moving hands in video, giving you a foreground to add. Spend the time needed on this method because choppy rotoscoping can take down the overall quality a few notches.

Testing

Render and view everything in real time to make sure your content is well positioned with respect to the environment (i.e., it looks natural) and that the pacing is good.A nice final touch is to add an introductory branded scene that sets up the content.Add any audio cues now that the animations are finished, remembering the levels we discussed in Chapter 3.

Reflection and Revision

Ask yourself the simple question: “Does this look like I’m viewing an AR experience through the lens of a participant?” If not, things to consider in making it feel more realistic are: the scale of the digital content in relation to the background;, angles of content relating to perspective, and the responsiveness of the interactions and animations. Maybe it’s the background video that just didn’t work? The best options will show a defined sense of ground and space bounded by walls or architecture. Filming in an open meadow won’t give you that definition. Re-shoot any video if needed, and make sure any rotoscoped layers look believable and smooth.

Goals and Outcomes

The method used for this project is what many tech companies have used to sell the concept of AR to the masses. It’s much easier to view a “slice” of a fringe technology in a medium that’s already commonplace than to deal with additional tech requirements. Building a prototype that actually works in AR is possible with the tools we’ve discussed, but simply calling attention to a portfolio piece is much more difficult that way. Both methods are important to show the breadth of your skills, but this technique should get the most bang for your buck. If it doesn’t look realistic enough, that advantage is lost. Sweat the details when it comes to finessing this piece. A successful project will spark the imagination for most viewers and show that you’re well versed in emerging technologies.We’ve used skills from UX, UI, and motion graphics to build this, so evaluate those against their respective disciplines. The final deliverable should be a video that can be shared easily and widely via websites and social media.