The flat screen era is ending. With Apple Vision Pro, Meta Quest, and countless AR glasses on the horizon, interfaces are about to leap into three dimensions. Is your brand ready?
The Spatial Revolution
For decades, we've designed for rectangles. Fixed viewports. 2D planes. But spatial computing changes everything:
- Depth becomes a design dimension
- Gaze replaces cursor
- Gesture replaces click
- Space becomes interface
What This Means for Brands
Your logo, carefully crafted for screens and print, will soon need to exist in air. Your navigation, honed for thumbs and mice, will respond to eye movements and hand waves.
Preparing Your Assets Today
1. Vector Everything
If your brand assets aren't in vector format, start there:
Traditional: logo.png (72 dpi, fixed size)
Future-proof: logo.svg (infinitely scalable)
Spatial-ready: logo.gltf (3D, animated)
2. Think in Layers
Flat design served us well for responsive web, but spatial UI requires actual depth:
| Layer | Purpose | Example | |-------|---------|---------| | Background | Environmental context | Subtle gradients, textures | | Mid-ground | Primary content | Cards, panels, text | | Foreground | Interactive elements | Buttons, controls | | Overlay | System UI | Notifications, menus |
3. Motion as Language
In 2D, animation is decoration. In 3D, it's communication:
// Traditional hover state
button:hover {
background: blue;
}
// Spatial interaction feedback
onGaze: scale(1.05), glow(true)
onReach: float(toward_user, 2cm)
onGrasp: haptic(soft_click)
Design Principles for Spatial
The Comfort Zone
AR/VR has literal physical constraints:
- Arms-length: Most comfortable interaction distance
- Peripheral awareness: Users need to see edges
- Vertical limit: Eyes tire looking up; favour chest-to-eye height
Typography in Space
Text in 3D is challenging:
- Minimum 24pt for comfortable reading
- High contrast essential (no subtle greys)
- Fixed position for legibility (text that moves is unreadable)
Colour Considerations
Spatial displays handle colour differently:
- Additive colour mixing (light-based)
- No true black (transparent instead)
- Brightness = presence
/* Traditional dark mode */
background: #000000;
text: #ffffff;
/* Spatial equivalent */
background: transparent;
text: #ffffff at 90% opacity;
glow: subtle ambient;
A Phased Approach
You don't need to rebuild everything tomorrow. Consider this timeline:
Phase 1: Now
- Audit existing assets for scalability
- Create SVG versions of all brand elements
- Document colour values in multiple formats
Phase 2: Near-term
- Develop 3D versions of key brand assets
- Prototype spatial navigation concepts
- Train team on spatial design principles
Phase 3: Future
- Build dedicated spatial experiences
- Create immersive brand environments
- Pioneer new interaction patterns
The Somerset Perspective
From our studio overlooking the Levels, we watch the sky constantly change—clouds casting shadows, light shifting across water. It reminds us that interfaces have always been spatial; we just forgot while staring at flat screens.
The next era of computing returns us to how we naturally experience the world: in three dimensions, with depth and presence.
Getting Started
Ask yourself these questions:
- Do I have vector versions of all brand assets?
- Could my colour palette work on transparent backgrounds?
- Is my typography legible at various distances?
- How would my navigation work with gaze instead of clicks?
The brands that thrive in spatial computing will be those that started preparing yesterday. The next best time is today.
Want to future-proof your brand for spatial computing? Let's explore the possibilities together.