DetailsPro Blog

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

---

Jony Ive · Coronation · LoveFrom · Well-roundedness · Self-consciousness