There’s a new feature coming to DetailsPro and here is the teaser image.
More soon.
There’s a new feature coming to DetailsPro and here is the teaser image.
More soon.
DetailsPro now supports multiple designs in files. You can easily keep multiple screens together, mix designs of different sizes, or keep track of a V1, V2, and V3 of a design all 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.
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.
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.
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.
Stay tuned for more info!
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
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.
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.
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”.
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
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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
Jony Ive · Coronation · LoveFrom · Well-roundedness · Self-consciousness
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.
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.