Designing spatial-friendly apps

In this edition, I'll share with you the best resources and practices for designing user-friendly spatial applications for Apple Vision Pro, Meta Quest and other spatial computers.

Author

Jack Johens
June 11, 2024

What’s up πŸ‘‹
It’s Jack

Welcome to this new edition!
Here we discuss the latest news & opportunities in spatial computing.

πŸ”— Shortcuts:

In this edition, I'll share with you the best resources and practices for designing user-friendly spatial applications for Apple Vision Pro, Meta Quest and other spatial computers. Let's go πŸ‘‡

πŸ“‘ News in figures

1000

This is the number of employees laid off by Microsoft in the Azure for Operators and Mixed Reality orgs. Microsoft says it will continue to sell and support HoloLens 2, and will continue to support the Department of Defense's IVAS program.

🧐 Microsoft's future in spatial computing:

WWDC 2024 keynote news:

Announcements:

  • VisionOS 2

  • Photos app update turns non spacial photos into spacial photos

  • SharePlay in the photos app with spatial personas

  • Mac Virtual Display gets new sizes and resolutions including widescreen

  • Train support

  • New gestures: go to home screen by tapping, flip your hand over to bring control center up

  • Vision Pro arrives to China, Singapore, Japan on June 28th. It will also arrive to France, UK, Germany, Canada, and Australia on July 12th.

πŸ“ Spatial projects

This week, I wanted to present you the new project I launched with Monish.
Big up to him for managing the product MVP πŸ”₯

We launched: SpatialIcon.com

A time-saving tool for creating your Spatial Icon.

You know, those 3-layer icons for Vision Pro.
Our goal is to create the world's largest spatial icon library.

In addition to the library, we're developing a Spatial Icon generator by AI Prompt and an Spatial Icon Converter to output a Spatial Icon : All you have to do is add your image and we'll send you the associated spatial icon, made up of 3 files that you can put directly onto your Xcode.

We've put a pre-order offer at $9.99 for life access.
This will go up to $49 in 1 week.
And will be unavailable in 1 month.

With devices like Apple Vision Pro and Meta Quest, the possibilities for creating immersive and intuitive experiences are boundless. In this edition, we will explore the essentials of designing spatial-friendly apps, delve into best practices, and highlight useful tools and resources to help you get started.

Understanding Spatial Computing Design:

Spatial computing refers to the interaction with digital content in a three-dimensional space. Unlike traditional 2D interfaces, spatial computing allows users to engage with applications in a more natural and intuitive manner. For Apple Vision Pro and Meta Quest, this means creating apps that users can interact with using gestures, voice commands, and their physical movements within a space.

Key Components:

  1. 3D Models and Environments:
    Spatial apps often require 3D models and environments. Understanding basic 3D design principles and software like Blender or Unity is essential.

  2. Spatial Mapping:
    Both devices use advanced sensors to map the physical environment, enabling digital content to interact seamlessly with the real world.

  3. User Interface (UI) and User Experience (UX):
    Designing intuitive and user-friendly interfaces in 3D space is critical. This involves rethinking traditional UI elements to work in a three-dimensional context.

The good practices:

1) Design great Spatial Icon

All app icons can have up to three layers, a background layer and up to two foreground layers on top.

  • Use multiple layers.

  • Use flat layers, shadows and glass layer will be applied automatically.

  • Design your background layer as an edge to edge square image.

  • Try to keep graphics centered.

  • If they are too close to the edge, they could look off-centre when expanded.

Each layer is a square image, and their size is 1024 by 1024 pixels.
Both foreground layers should have a transparent background.

⚠️ To avoid:

  • Using large regions of semitransparent pixels.

  • Layers with reduced opacity will blend with the shadow cast behind it.
    Shadows.

You can use the SpatialIcon.com library to directly download
FREE unique spatial icons ready for use.

2) Find the right app name

This is not directly related to design, but this will definitely influence the look of your app. Choosing the perfect name for your Apple Vision Pro app is crucial for branding and discoverability. Make sure the name clearly reflects the app's purpose, is short and simple, unique and includes relevant keywords. Avoid legal problems by checking trademarks, and make sure the name is suitable for an international audience by testing localization. Gather feedback from potential users, consider future growth and check domain availability if you plan to create a website. Finally, make sure the name matches the tone and image of your brand, for a consistent and strong brand identity.

3) Design your app in 10 steps

Step 1: Add Background Blur

Begin by adding a background blur effect to your app. This creates a smooth and visually appealing base, enhancing the overall aesthetics of the interface.

Step 2: Create the Glass Panel

Introduce a glass panel effect. This modern and sophisticated element will serve as a focal point and add a touch of elegance to your app's design.

Step 3: Add a Sidebar

Incorporate a sidebar using darker materials. This provides contrast and structure, making it easier for users to navigate through different sections of the app.

Step 4: Give It a Name

Choose a name for your app that clearly reflects its purpose and functionality. This will help users understand the app's intent and make it more memorable.

Step 5: Text Formatting

Ensure text clarity by using bold for emphasis and rendering default text in medium weight. This distinction helps users quickly identify important information.

Step 6: Add Interactive Elements

Add buttons and links to make your app interactive. Ensure a small amount of padding, at least 4pt, around these elements to maintain a clean and user-friendly layout.

Step 7: Icon Button and Display

For icon buttons and displays, maintain a minimum target and focus area of 60pt with a padding of 16pt. This ensures that icons are easily tappable and visually balanced.

Step 8: Add More Interactive Elements Inside the Box

Enhance your app by incorporating additional interactive elements within designated boxes. Use darker materials for input elements to differentiate them from other components.

Step 9: Add Radius and Tab Data

Choose appropriate corner radius values for your cards to make them appear more comfortable and visually appealing. Include tab data within the boxes for easy navigation.

Step 10: Add Ornament and Expanding Tabs

Introduce the Ornament component to house floating tools beneath the screen. Implement expanding tabs that automatically expand when viewed for a prolonged period, enhancing the user experience.

If you want to follow these steps dynamically as your app evolves, I recommend this figma by Carolinell.

4) Use templates to ship fast

Starting the design of a spatial app from a template is super useful because it gives you a solid foundation and speeds up the whole process. One of the toughest parts, though, is finding the right template that fits your app's specific needs and vision.

Luckily, there's a great library of templates on Figma that can help. I created one: Design Spatial App UI UX Spatial Kit with Icon Template Vision Pro Quest Design Pack.

It contains a large number of pre-designed elements and layouts that you can easily customize. This resource is a lifeline for designing space applications. I hope you find it useful.

I hope you liked this edition!
If you want daily tips on spatial computing, let’s chat on Twitter🀝