Exploration of a Pinterest Spatial UI Concept for visionOS

Exploring a new design trend is enjoyable if you come at it with curiosity and an open mind. Most designers attempting spatial design follow a glassmorphism tutorial and stop there, which is repetitive and leaves no room for anything of your own. I wanted to try something else.

So: make a plan for the exploration.

1. Setting up

The idea was an immersive UI concept for Pinterest. On desktop today it is a simple set of five buttons. Home, Explore, Create, Message, Profile.

The Pinterest desktop interface: a masonry grid of image pins with a search field across the top and a row of navigation controls. — Pinterest on desktop, where the whole navigation is five buttons and a grid.

I was not doing this because I was certain it would make a good AR experience. It was about keeping it honest from the start. I gave it a real shot, and even if it had not worked, the journey would have been worth it.

2. Planning

Now we open Sketch or Figma, make a glassmorphic card, and call it a day.

Only joking.

I started sketching, and the first decision was to keep things mostly flat. Piling content up along the z-axis adds cognitive load without making anything better. So I began with a single window holding all the pins.

A rough pencil sketch showing a person seated, facing a single large floating window filled with a grid of pins. — Rough sketch of how the viewer would be looking at the UI.

The first principle of designing a spatial interface is familiarity. There is no need to reinvent anything, so I started from a plain grid of pins.

Then I sketched a vertical bar for secondary navigation. The primary navigation here is contextual, happening inside the home screen itself, which is how Pinterest already behaves on desktop and tablet.

A sketch of the pin grid with a narrow vertical navigation bar drawn along the left edge of the floating window. — Defining the vertical bar.

Then I imagined selecting a pin. The room dims around you, and a carousel opens in front of you that you swipe through. The field of view is 180 degrees, but because everything except the centre pin is dimmed, attention stays where it should.

A sketch of a seated viewer surrounded by a wide arc of pins, with the central one brightest and the rest falling away into shadow. — Rough sketch of how the pins open up into an immersive surround.

3. Mid-fidelity

With the plan in place, I built the home screen in mid-fidelity to see how it fit together.

A mid-fidelity wireframe of the home screen: a grid of grey placeholder pins, each with a caption line underneath, inside a rounded floating panel. — The home screen in mid-fidelity. A grid of pins, each with its creator or caption underneath.

A pin opens when the viewer looks at it and pinches to select.

A mid-fidelity wireframe showing one pin enlarged in the centre of the view, with the surrounding grid pushed back. — The selected pin opens in the centre of the view.

After a two to three second delay, more pins from the main screen open alongside the chosen one, forming the surround. They stay dimmed, so attention holds on the centre.

A mid-fidelity wireframe of the surround state: the selected pin in the centre with dimmed pins arranged in a wide arc on either side. — The surround, with everything but the centre pin dimmed.

4. Material exploration

Apple had already published UI kits for visionOS, but I wanted to build the material myself and see what came out.

A glassmorphic UI skeleton composited into a photograph of a sunlit living room with a sofa and coffee table. — UI skeleton placed in the living room.

Dropping the glassmorphic panels into the living room made it obvious this would not be easy. visionOS adjusts glass elements in real time against the lighting and the ambience of the room you are actually in. A flat panel pasted onto a photograph does not do that.

So I reworked the panels to match the room I had taken from Unsplash.

The same living room with the glass panels reworked: edges and gradients now lit from the upper right, matching the room's own light. — Modified glassmorphic elements placed in the living room.

The windows had to be on the upper right, because the furniture casts its shadows right to left. So I changed the gradients and the outlines to be lit from that direction.

A Sketch file showing a row of gradient swatches used for the glass panels, each a slightly different angle and opacity. — Gradients, built in Sketch.

We are not conscious of any of this, but the brain notices and processes it anyway. Small details like these are most of what makes an environment feel real.

5. Designing

From the mid-fidelity wireframes and the panels, I built the high-fidelity version. The flow runs like this.

A. You are somewhere calm. A living room.

A photograph of an empty, sunlit living room with a sofa, a coffee table, and tall windows on the right. — The room before anything opens. Image from Unsplash.

B. You put on the headset and open Pinterest. The skeleton screen loads first, then the full interface.

The skeleton screen in the living room: a floating glass panel holding empty placeholder shapes where pins will load. — B.1. The skeleton screen, while the content loads.

The fully loaded Pinterest interface floating in the living room, a grid of photographic pins inside the glass panel. — B.2. The interface fully loaded on the headset.

C. You move through the pins with eye tracking, and pinch to select the one you want to look at properly.

A single selected pin enlarged and brought forward in the room, with the rest of the grid receding behind it. — C. The selected pin opens in focus.

D. As you look at it, the room dims further and other images open beside it in a carousel, making the surround.

The immersive carousel in a darkened room: the central image bright and sharp, neighbouring images dimmed and curving away on both sides. — D. The immersive carousel in a dimmed room. Swipe to move between images.

Around then I realised swiping up for related content was too much. I changed it so everything reads horizontally, with a Similar button at the bottom for related pins. That is enough.

Thoughts

Spatial design turned out to be genuinely interesting. As Steve Jobs put it, a new category of device has to be specifically better at some tasks than a computer or a phone, or it has no reason to exist.

So the question to ask is whether the experience is actually better in mixed reality, or whether a phone would have been fine.

Thinking it through: Pinterest is where people go to find ideas for the things they care about. Dimming the room removes distraction, the pins become large in real space, and it gets easier to sit with the details before saving something. That holds up.

There is plenty left to explore, and probably to build, before anyone knows how this really works on the device. But before you get there, a little creativity goes a long way. Taking the whole experience as one piece taught me more about the limits of spatial interaction and human cognition than making a couple of glassmorphic cards for Dribbble ever would have.

Thank you for reading.

Inspired by Michal Malewicz. Special mention to Laasya Nalluri. Built with Krita, Sketch, Photoshop, ChatGPT, Unsplash, an XP-Pen, and a MacBook Pro M1.