DetailsPro now supports multiple designs in files. You can easily keep multiple screens together in one place, mix designs of different sizes, and even keep track of a V1, V2, and V3 of a design by putting them together in one file.
We are also excited to share that you can easily merge your existing files together to take advantage of this new update. To merge files together, go to the Designs tab or any folder, start a selection, and after selecting at least two designs, tap Merge. Your new file will be created and your existing individual files will automatically be moved to Recently Deleted.
New Features:
Files can now have multiple designs. Each design can be of a different size. Designs in a file can be named and reordered.
Files can be merged together automatically by selecting multiple files in Designs or in a folder and tapping Merge. Merging saves you time by automatically transferring designs, with their names and sizes, into one file and by moving the previous individual files into Recently Deleted.
DetailsPro now supports the Apple Vision Pro and designing for visionOS with an updated interface, new features, and new templates all at no extra cost. DetailsPro for visionOS is already included in your universal purchase.
We are so excited to debut this special release and continue to provide the tailor-made design environment for Apple designers so designs can be created directly in SwiftUI.
New Features
Existing SwiftUI designs appear on DetailsPro for visionOS through iCloud sync and are automatically compatible.
See-Through Previews are a new way to design in DetailsPro. You can turn off the canvas glass and see your design floating in the environment as you design it. Your design is rendered with real visionOS glass backgrounds, blurring what is in your environment.
New design templates (with more to come) include a visionOS window with ornament tabs and a visionOS music player window.
The Glass Background modifier allows you to quickly switch between different mask shapes and corner radii. Pair this modifier with the Overlay modifier to create beautiful layered designs where each surface has its own visionOS glass background.
Fixes & Improvements
Design thumbnails on all platforms now render with better preview sizing so you see more of your design in each thumbnail.
Loading performance on very complex files, like those with over 150 SwiftUI elements or over 100 images, has been greatly improved.
I’m excited to share the news today that DetailsPro is going to be making its way to visionOS!
With an upcoming update, the tailor-made tool designers love on iPhone, iPad, and Mac is going to debut with features made specifically for visionOS and the Apple Vision Pro.
DetailsPro on visionOS exploring a design with a window, visionOS tabs on the left, and a grid of images.
If you read any of my posts around WWDC23 when Apple announced the Apple Vision Pro, you know how much I love the design and am impressed by just how well designs translate to this new design language.
This new update includes, of course, a UI refresh across the DetailsPro app that makes it right at home on visionOS, comfortable to use with eye tracking and hand control, and easy to use.
If all we did was re-skin DetailsPro for visionOS, that might have been fine, but that would have left so much more on the table. Our new update goes much further and introduces a new set of features that are the keys to making visionOS design easy, fun, and accessible for designers on this new platform. We’ll be detailing more in an official launch blog post, but just to give you a taste, you can look forward to features including an updating set of materials throughout your designs (so all your old designs translate correctly to visionOS right away), the ability to turn canvas glass on and off to design with a transparent window for full visionOS live previewing, and the ability to add a new Glass Background modifier quickly and easily throughout.
Needless to say, this is an exciting time for DetailsPro! I’m so excited to be furthering the DetailsPro experience and exploring this new platform.
The new update will of course debut with new SwiftUI templates for visionOS that you can use right away to kickstart your ideas.
DetailsPro for visionOS is also included in the same universal purchase that gets you DetailsPro for iPhone, iPad, and Mac. So if you’ve already purchased, you’ve already got the new version for visionOS! And if you haven’t purchased yet, you can still use this app free forever with up to five files.
For this week, we have a collection of small designs (in size but not in impact, as we always chase in design work) ranging from an Apple Music design almost smaller than your thumb to a macOS System Settings design actually smaller than your thumb.
WWDC draws ever, ever closer. Less than two weeks!
I hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S
Tiny Thumbnails
The Wallpaper section in System Settings shows a small preview of each wallpaper in an added wallpaper folder. It even changes the shape of the preview based on how many wallpapers are in the folder. I think this is a wonderful way of embedding content directly into a design—the cycle symbol is more specific here with the small thumbnails.
Under My Thumb
A new, smaller notification design appears in Apple Music after interacting with a song. Besides being smaller and out of the way, I was struck by the less see-through treatment and all the spacing.
Thumbing Through Wallpapers
The Wallpaper section in iOS Settings features a new design that shows pairings of Lock Screens and Home Screens and the wallpaper selections for each. I think this is a great example of adding in buttons and labels for parts out of our designs that are more complicated, like the button for “Set as Current”.
Two Thumbs Up
A new welcome screen design in Final Cut Pro for iPad. The top area shows a video montage and cycles through other messages like “Built-In Pro Camera Mode”. I think this is a nice reminder that sometimes it can be worth it to create an explanation area ahead of something people will use, and this shows us Apple’s latest standard for a design like this.
Thank you for reading UI Designer Weekly. See you next week.
We’re a couple weeks away from the wonders, the magic, the curtains-being-pulled on June 5th, WWDC23. My excitement has reached a maximum vibration wherein I am now numb to the feeling and have transcended into a pure zen state.
I am ready to receive the beauty and creativity contained within each announced innovation. My life, ready to subtly reorganize itself to make room for a new feature. My mind, ready to play the toddler’s game of trying to fit my ideas into the square-and-circular (squircular?) holes of Apple’s new operating systems.
Today though, we have something wonderful to look at. A true gem of the kind that inspired me to originally start this newsletter. Apple’s new Assistive Access, announced this week on Apple Newsroom, debuts what Apple refers to as a distillation of app designs that make apps easier to access for those with cognitive disabilities.
What follows in this week’s issue is a collection of Assistive Access designs from this announcement. We’ll look at each and appreciate something about the design and the way it distills an app’s design.
There is something beautiful, functional, and abstract here in all this. The foundations of human-computer interaction are on display with the signature touch of Apple Design. Tapping on an app to “open it” or “enter it” remains an abstract human invention. What Apple would do to reduce the cognitive load of these interactions, and to support people wanting to use their devices to make calls, take photos, and listen to music, we now get to see and study in plain view.
I hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S
Thank You for Welcoming Me Into Your Home
I once read cautionary design advice: when designing an interaction, make sure to design from the beginning of the interaction. If you’re designing a photo editing screen, make sure to consider how someone arrives at that screen. It’s not enough to design the middle of the interaction. The Assistive Access Home Screen design displayed here represents this idea done right. I love that apps can be displayed in a grid or in a list. I love that there is an icon, a title, a background color, and a shadow. This is thought put into the beginning of the entire Assistive Access experience to prepare people for the middle.
I Put Up These Pictures the Other Day
Apps opened in Assistive Access display their app icon and app name in the top corner. This might be a great reminder for us to keep the most relevant information visible in our designs. In the experience of Assistive Access, it’s not too much information to remind someone which app they’re in by showing the name and the icon nice and big all the time.
Second, the elements of this design are arranged vertically with no layering. There is a title area, a scrolling area, and a big back button. Seeing a major button like Back displayed at the bottom is amazing, and those who think about reachability and what is easiest for the hand to reach will be pleased. Take a second to take in the absence of decoration—lines, toolbars, blurred backgrounds. Not in sight and I don’t miss them.
You’re Going to Want to See This
Camera in Assistive Access carries on the same shapes and layout we saw in Photos, except here there is a layered button for Take Photo. What strikes me here is the existence of labels on each button that have an icon and a title. Even in the Assistive Access experience, where cognitive load is the primary focus, these designs contain and icon along with a title (as opposed to either one alone). This tells me that we can look through our designs for where we might have buttons without icons, or icons without titles, and look for opportunities to pair them up to make buttons easier to recognize.
The New Phone Line Works Both Ways
Calls in Assistive Access is Phone + FaceTime. I think this is a great reminder that just because something has been done a certain way, doesn’t mean it needs to stay that way. In our designs, we can combine, shape, split, and form new ideas to make things easier for people.
I’ve Been Chatting All Day on This Machine
Messages on Assistive Access has an option for an emoji-only keyboard for those who prefer communicating visually. The primary and secondary button styling can still be seen here, with Send in blue and Back in white. The title area changes to show your contact’s name instead of the name of the app, but keeps the larger, clearer design. Messages shows us how a more complex design looks in Assistive Access, and I’m in love with the cleared-out keyboard, free of all the other buttons that would normally be there.
Thank you for reading UI Designer Weekly. See you next week.
I would say that the design of iPadOS (formerly, “iPad”) apps has always been an advanced skill. As easy as it can be to fill an iPhone-sized canvas with a new design, daunting is a word I would use to describe trying to do the same on a big, blank canvas sized for an iPad. The iPad is as inspiring and beautiful as the iPhone; The Apple Human Interface Guidelines help just as much—but it’s a larger mountain to climb.
What has always helped has been good examples. Patterns, as we call them in the design discipline, were described by Christopher Alexander to pair a design problem and design solution together in a way that allows others to replicate the solution easily, broadly, and repeatedly. Patterns in design also help us help people who use our products—once you’ve seen something here, you’ll understand how to do it there.
This week, Apple announced Final Cut Pro and Logic Pro for the iPad. As two apps long-seen as iPadOS holdouts, they will sit squarely in the world of iPadOS design as it differs from iOS design. They’re bringing a bundle of new design patterns that we can keep coming back to as we design new corners of our own iPadOS apps. I’m excited to show you the design details that stand out to me from the announcement.
On first impression, they both look great, and these are two apps that cannot be watered down by their own definition of “Pro”, so this should be fun.
I hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S
A Touch Different
A jog wheel sits on the side of screen in Final Cut Pro on iPadOS. The project timeline, large and directly scrollable, is one of the largest areas of the design. But, as we see, that wasn’t enough. I think this is a great example of going past enough and adding multiple ways to do something where it will count. The jog wheel is listed as allowing scrubbing through footage and nudging clips—even if that’s all it ever does, it could become a video editor’s favorite thing.
Within Reach
Each camera angle of a multicam clip is arranged at the bottom of the screen in Final Cut Pro on iPadOS. Traditionally, video editing applications might have reserved the bottom half of the screen for the project timeline and things related to it, but this touch-friendly design lets that space be used by a horizontal arrangement of camera angles you can tap on. This is a great reminder that we can move things around in our designs because what we’re making might not need to look like everything before it.
My iPad Can Handle It
A quiet, double-line drag handle tells you what you can drag and what you can’t. I’m struck by how close together the handle, “West Coast”, and “03:11” are while still looking great. This is a great example of how we can embed hints into our own designs that are small enough and light enough to recede into the background when you’re not looking for them.
To Each, Its Own
From top to bottom, several areas of Final Cut Pro on iPadOS feature their own toolbars. There’s the main toolbar, the Project Media toolbar, and the toolbar for the project timeline… there’s the one at the bottom of preview pane, and one outside of the screenshot. Toolbars are a tried-and-true design pattern for local-but-global actions specific to area of a design. I think Final Cut Pro gives us the permission we might have needed to put toolbars in all the places our designs might want them.
Front Row Seats
A beautiful horizontal stack of Plug-In Tiles in Logic Pro on iPadOS. Each one surfaces the important controls for a given plug-in and can be tapped for more. Notice the consistent title area with icon and title, made unique with colors, design, and everything else. This is a wonderful design that makes something complex smaller, consistent, and informative. What a great reminder that we can look at our own designs for places we could be surfacing smaller (and beautiful by way of summarization) design elements.
The Original Recipe
Buttons, Menus, Pickers, Chevrons, Drop-Downs, Slides, and Toggles all feature throughout the design of Logic Pro on iPadOS. Even on an app far removed from the same purpose as the Mail app or Calendar app, the design patterns and interface elements are the same. They have been recombined and curated to the places where they are the most effective. A complete reinvention is not what has happened, everything is actually not different. I think this is a good example as any of the power and flexibility of the elements in the Apple interface design library.
Thank you for reading UI Designer Weekly. See you next week.
Well-roundedness is a quality difficult to quantify. It’s not enough to follow somebody’s many pursuits; you have to understand their many sides and know the stories of their life. Perhaps after all of that, you can start to see the richness of the single person and the many angles reflecting in their movements.
Tomorrow, the coronation of King Charles III will take place and emblazoned throughout the ceremony, the imagery, and the artifacts will be its official emblem—an emblem designed by Sir Jony Ive KBE and LoveFrom.
Knowing what we know about Jony Ive, I see this as an inspirational-shooting-star of well-roundedness. People who categorize these things would call making an emblem “logo design” and making a phone “hardware design”, two disciplines not known or expected to collaborate. And yet, what a splendid sight.
In the past I’ve been self conscious, interrogating myself about whether any good designer would spend time learning how to surf or if, strangely, any good surfer would spend time learning how to design. Creating the cookie-cutting tools out of my mind’s own metal shop, I sought to remove parts of me to bring out the lines that would prove me to be the type of person I wanted to be. Now that I’m older, I know that it’s those rounded, hanging-off, un-cookie-cut shapes of who I am that make me unique.
In designing, we bring forward our experiences. Every connection we make between the very many things we’ve seen gives us just that bit more of chance we’ll make something great. We should allow ourselves to blend activities, interests, and knowledge that maybe we’ve never seen blended before.
The typography and color on this emblem are beautiful. There’s even more to read on the typeface itself. And there’s a freedom by example in the whole thing—you can be as well-rounded as you want to be.
This week, I wanted to leave you with this message. I hope you find something inspiring here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S
We expanded the Start with Template picker to include three total sections: Built-In, Community, and My Files.
Built-In lets you pick any of the templates made and provided by DetailsPro; these are going to be made with best practices we’ve picked up while making DetailsPro itself with SwiftUI and will help you get a kickstart on designing with the Apple HIG.
Community lets you pick from a wide array of designs uploaded by people in the DetailsPro Community; these are updated all the time, so stay tuned for updates.
My Files lets you pick from any of your own files as a template, instantly duplicating that design into your new file and letting you use it to make something new. We got a lot of requests for this and we’ve been using this feature a lot ourselves.
Fixes and Improvements
Aspect Ratio presets now automatically switch between portrait and landscape ratios based on your current selection for the modifier
Fixed a bug that was causing Community files to sometimes not open on macOS
Start with Template now opens up fullscreen to give you a better view of all the choices
Opening the community also no longer opens up in a small sheet
Any element placed into an Overlay, Background, or Mask now has a quick shortcut button at the top of the inspector for jumping back to the modifier, useful for changing the modifier’s Alignment property.
Future versions of DetailsPro will now require iOS 16 and macOS Ventura (up from iOS 15 and macOS Monterey). Please update to the latest versions of iOS and macOS if you haven’t yet so you can enjoy the latest improvements and optimizations to SwiftUI.
Recently, I was reminded how important family is. This reminder has been the guiding force behind my writing this week. I want to look at how family appears in Apple design. In these designs, there are experiences we share because they have become as common as pencils and pens (like the Notes app, one of my grandma’s favorites) and there are experiences that stay personal: the received phone calls, the sent messages, the checked locations.
While a small computer can be a productivity machine, life has much more in store for each of us than simply moments to be productive. We will grow, fall, love, live, mourn, laugh… and this will happen, even if by accident, here and there on our small computers.
The examples in this week’s issue create a string of design decisions that, to me, underscore Apple’s commitment to dignifying people in design. By pairing names with photos in one place and allowing hair to block the time in another, these designs appear to understand, if not actively join in on, the care that we have for people in our lives.
Let’s have a look. I hope that you’re able to hold the ones you love close, always. I also hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S
Family Comes First
iOS 16 can place a photo of your favorite people in front of the time and the weather on the Lock Screen. Their hair, their shoulders, and their faces will even partially block your view of the time. This design is as beautiful and artistic as it is effective, in my opinion. I think this is a great reminder for us to look for ways to break the rules (partially-make-the-time-unreadable break the rules) in our designs if it means bringing out the things people love.
We Talk and That’s the Best Part
Designs center people on watchOS 9, like here in Find My and Messages. Each chat bubble is shown on its own—I want to draw attention to the fact that there is no metadata visible on each chat bubble here. Each bubble shows the message and that’s it. And on the left, Find My shows a name and a photo beautifully and in large positions at the top. I think this is a great example of how we can leave things out of our designs to emphasize what we believe is important.
I Saw You There Looking Dignified
iOS shows a photo for each person you’re adding to a shared album. When Apple designs do this on any platform, I think they’re sending a small gesture of a message that these people matter—that they are real people. Apple Design’s handling of people was one of the first things I remember noticing before I got my first Mac. I think this is a great reminder that we should want our designs to be fluent in the way people think. We want to design in a way that visual elements of any given task align with the task itself in shape, layout, and appearance; adding people to a shared album is tapping on faces, creating a Find My notification is dragging a radius bigger on a map.
This Frame is See-Through
Photos on iOS 16 shows the latest additions to shared family photo album. Edge-to-edge, with ever-so-thin borders, each photo is shown in clear view without any interface elements over them. This is another example of what’s not there as opposed to what is—we can remove things from our designs to let people get lost in what they’re looking for.
Thank you for reading UI Designer Weekly. See you next week.
