Note
There are always things we can't do that we wish we could. Life teaches this lesson and makes sure to review it with us (too often, if you'd ask me.)
Great art, great songs, and great inventions though, these tell us we can do what we never dreamed we could.
As I'm writing this newsletter, I'm sitting in my bedroom typing on my MacBook Pro. If I hadn't seen visionOS, I probably wouldn't be thinking right now about how I could be looking up and working with life-size floating windows, rather than looking down at my finite-feeling MacBook screen.
Everything I think of visionOS can be boiled down to "Wow, that thing looks like a normal window. That's a normal app." Apple has gone and made it look easy, but we all know it must have been anything but.
I hope you find something here that you can mix into your own design work. And I hope this gets you excited for what we'll be doing when this releases. Thank you for reading UI Designer Weekly. —S
This issue continues my WWDC23 coverage and discusses visionOS. In upcoming weeks, we'll look at the other platforms. Here's the schedule:
June 23rd: iOS
June 30th: macOS
July 7th: iPadOS
July 14th: watchOS
July 21st: tvOS
New Standards
Windows
Windows in visionOS float in your space. They use a glass-like material to let you get a sense of what's behind. (I can't believe there's more) You can use the window bar, the longer line below the window, to move the window around your space and guess what? Windows will always subtly rotate to be facing you directly. Sounds to me like an excellent example of making something hard to mess up, because you can't leave a window in a "wrong" position. The Principles of Spatial Design session further states that windows adapt to the lighting conditions of your space. I'm struck not only by how beautiful these windows look, but by how functional they appear to be. For example, you can scale windows manually using a small corner control that appears and closely resembles a similar control found in Stage Manager on iPadOS. Wow.
Tab Bars and Toolbars
That isn't even the half of it. Windows and familiar design elements like Tab Bars and Toolbars situate together in this amazing layered setup, where the bars always float on a layer above the window. Apple says this makes them easier to access. I'm stunned by how good tabs look arranged vertically on the side, and the fact that these tabs are cognitively the same tabs and the same SF Symbols as you can use on the other platforms.
Light and Shadow
Windows in visionOS adapt to the lighting condition of your space. Safari on visionOS highlights these lighting effects all in the search bar area. I can count at least five separate enhancements to the search bar and the surrounding elements that are purely to establish realistic lighting. The highlights on the tops, the shadows on the bottom, the three-dimensional lighting reflecting off the curved edges between layers. Again, I'm stunned.
Design Sample: Keynote
I can best describe Keynote on visionOS as "this looks too good to be true" or "there is no way there is a full version of Keynote that works so well and appears so beautifully". I think there are a couple of points to focus on here. First is the fact that Keynote on visionOS looks like Keynote on anythingElseOS. Maybe that is not surprising to you, dear reader, but I didn't know we could expect it to be wonderfully 1:1 like this. Second, the visionOS design language can support full-on apps like Keynote. The way things translate, all of it is there such that you can use Keynote in a way that, from these screenshots, appears like you'd be missing exactly zero of the features.
Design Sample: Safari
Safari on visionOS features a separation between interface elements where the search bar is in a separate section above the content section, extending the behavior we saw earlier with Tab Bars and Toolbars. A familiar design, encapsulating all the complexity that comes with interacting with the web page content. A great version of Safari being available at launch reminds me of the iPhone and what that did for the web back then.
Design Sample: TV App
A principle of spatial design Apple shared for visionOS is scale and how scale and depth should be used in tandem. In the TV app using an immersive cinema as your environment, the play controls appear much smaller than the screen and much closer. I'm excited and inspired by the idea of designing with depth so literally. We're going to have new things to think about left and right (and back and forth.)