Apple just unveiled a new design language centered around Liquid Glass at WWDC25 and we're thrilled to announce that DetailsPro will fully support this stunning new design when it launches this fall, and even sooner via a summer TestFlight beta.

Liquid Glass is Apple's new software-based material that combines the optical qualities of glass with a sense of fluidity.

Beta on TestFlight

We're already hard at work integrating Liquid Glass into a new TestFlight for DetailsPro on '26 operating systems. Our beta program will open soon, giving you early access to:

• Live Liquid Glass previews - See your designs with the new translucent materials in real-time
• Updated design elements - All system components automatically render with Liquid Glass
• Cross-platform consistency - Design once and see how your UI adapts across iOS, iPadOS, macOS, and visionOS
• Zero learning curve - Keep designing the way you always have—we handle the Liquid Glass magic

Stay Ahead of the Curve

When iOS 26 launches this fall, your designs will be ready. DetailsPro will be 100% accurate to the new Human Interface Guidelines from day one, just like we've always been.

Want to be among the first to try Liquid Glass in DetailsPro? Follow us on Twitter @detailsproapp for beta announcements and sneak peeks.

Secondly, we're announcing new pricing changes with a detail that we are certain many will be happy about. Starting June 5th, DetailsPro will once again offer a one-time purchase option priced at $129.99 USD and adjusted for other storefronts. Also, the monthly and yearly subscription prices will go up to $5.99 and $59.99 respectively, also with adjustments in other storefronts.

As always, you really can use DetailsPro free forever. The core features are available free and with no limit on the number of files you can create.

But, we include a lot of great stuff with the upgraded version of DetailsPro. You can access all the elements with the upgrade, including prototyping views like Button and NavigationStack, and you can access all design templates.

We're always working on new features and new design templates too, thanks to your support and the wonderful community. We can't wait to be back with more news on what features we're going to support and what design goodies we'll get at WWDC25. Til then!

In this post you'll get a look at each template and our recommendations for how best to use them. Let's dive in!

1. Place Gallery

This beautiful, image-focused design works for situations where you have a large hero image to feature and want to give the screen a title that feels elevated.

2. Place Card

We love designing cards and could do it forever without complaint. This card is great for designs where an image needs to be complemented by information that is a little more dense.

3. Simple Login

Sometimes, you don't have images that make sense for your designs, so we created this template to make it easy to go image-less but still have a beautiful login screen.

4. Gallery Login (Premium)

Gallery Login, our first premium template in this pack, kicks off in the opposite direction of #3 and uses images to make the login screen rich and vibrant.

5. Carousel Login (Premium)

This design is great for situations when you want a clean feeling overall and have several smaller images that can be highlighted together.

6. iPad Carousel Login (Premium)

We're starting to include more templates outside of iPhone templates and this first iPad template shows you an easy way to soak up the added space while keeping an attractive layout.

7. Place Detail (Premium)

Where Place Gallery was more experimental, Place Detail is more standard. You can easily feature other content without taking up too much space.

8. iPad Place Detail (Premium)

Another iPad template that complements the added space with larger imagery and a custom side-by-side layout.

Future Template Packs

This was a look at our template pack this month, but fret not, for there will be many more! It's one of our favorite things to do, making these designs. We'll be back with another template pack for June '25 and we also plan on adding additional packs that aren't tied to months. As always, each template pack stays in DetailsPro, they don't disappear each month, and they include some free templates and some premium templates available with DetailsPro Premium. If you get DetailsPro Premium, you get all of the templates to use in your designs and you get additional advanced features of the app. We hope you subscribe, but we have made DetailsPro to work for people free forever as well.

'Til next time!

In this post you'll get a look at each template and our recommendations for how best to use them. Let's dive in!

1. Art Widget

This beautiful, simple design works for situations where you want to prominently feature an image and have a single caption or single line of text to overlay on top.

2. Navigation to Museum Widget

This design gives you an example to use for when you have panels in your widget, like this top-and-bottom layout, and also gives you a starting point for more complex layouts that are typical for maps and navigation.

3. Museum Hours Widget

We love an example of dense information in a compact space and designing with the Small Widget size is nothing if not compact. This template we are really excited about because at the end of the day, it's just text, but there is so much you can communicate through layout, color, and spacing. A lot of Apple system designs do this sort of thing very well, and this template should serve as a great starting point for the next time you set out to do the same.

4. Museum Tour Widget (Premium)

This design, the first of our premium templates in this template pack, is super versatile for all sorts of listening situations. In this imagined design scenario, we thought it would be awesome to see the current artwork that is being discussed in the widget, and this can apply to things like podcast chapters, album tracks, news segments, etc. On the right, you see a very text-friendly layout for fitting lots of words and the standard play/seek controls.

5. Featured Works Widget (Premium)

This template is also all about the imagery, giving you a gallery layout that you can use for any presentation that has a title/subtitle that could go with it, but moreso wants to put a gallery grid of images front and center. This could be great for video playlists, recent photo uploads, recommendations, etc.

6. Featured Works List Widget (Premium)

This design is just like #5 Featured Works Widget, with the difference of giving each piece of the gallery its own line with space for a title/subtitle. This kind of design could be great if the names or text information really "matter" for what you are displaying. If that's not really important to your design, you'll probably find that a design similar to #5 Featured Works Widget is a better choice thanks to the bigger image placements.

7. Art Checklist Widget (Premium)

This design is a true interactive widget template with the checked/unchecked icons on the left. iOS lets you add interactivity to widgets in bite-sized moments like this, which riffs off of the system Reminders widget. It's pretty great that with the Large Widget size designs, you really can fit all of these things across the horizontal space, even with the images taking up some room.

8. Featured Artist Widget (Premium)

If you've made it this far, then you must be familiar with the Extra Large Widget template size that is available on iOS. This design gives you an example of just how much you can do with that XL space. This widget contains a whole paragraph at a readable size, plus an image panel, plus a whole module with a photo and title/subtitle. That is a lot. This template can aid you the next time you are looking to master this advanced size.

Future Template Packs

This was a look at our template pack this month, but fret not, for there will be many more! It's one of our favorite things to do, making these designs. We'll be back with another template pack for May '25 and we also plan on adding additional packs that aren't tied to months. As always, each template pack stays in DetailsPro, they don't disappear each month, and they include some free templates and some premium templates available with DetailsPro Premium. If you get DetailsPro Premium, you get all of the templates to use in your designs and you get additional advanced features of the app. We hope you subscribe, but we have made DetailsPro to work for people free forever as well.

'Til next time!

Until today, testing widget designs has been difficult and cumbersome. Not only have you needed a Mac and Xcode, you’ve also had to write special code to configure the widget you want to preview. Ideally, we wanted to be able to just use DetailsPro to quickly mock up a widget and add it straight onto our Home Screen. From there, iOS could just render it so we could see exactly how it is in-situ.

So that’s just what we made!

How to add widgets to your Home Screen

Adding widgets to your Home Screen from DetailsPro is easy. You can use any of your designs that use a widget size template. If you don't have any yet, you can start with any of our free or premium templates.

To add a widget, you just go through the normal iOS flow. You don’t have to do anything special with your files beforehand.

First, go to your Home Screen and press-and-hold to add a new widget. Next, select DetailsPro in the widget browser and you’ll be able to pick any widget size.

Finally, once that widget has been placed on your Home Screen, long-press and edit the widget to select one of your designs.

You can place any design that uses a widget size template. If you're not sure which those are, you can use our new Widgets tab that you’ll find in the main DetailsPro screen. From here you can quickly browse your widgets and create new widgets.

And that’s it! Now, iOS will render your SwiftUI widget from scratch and you’ll see just how everything is lining up. This is a great way to check out whether your paddings and fonts are feeling right, or if you want to make anything bigger or smaller.

How we made it easy for you to design great widgets

We’ve added two extra features in this new update that make it even easier to get started. The first is our April ’25 template pack, Art Collection, which contains a bunch of widgets. The first three are free for everyone and the other five are offered as a part of DetailsPro Premium. We designed these to cover the common widgets you might create.

The second is a separate type of widget you can add called Design Template. This widget is a reference widget you can use if you’re really trying to create something specific and to take advantage of the default margins and sizes iOS uses. This widget auto-detects these values on any device and under any combination of accessibility settings and presents them to you. Then, you can use this information in your next widget design to perfectly match the padding or make something off of the sizing. We don’t expect everyone to need to use this widget, but we know some will certainly enjoy it.

You can get started today with version 5.4.0 of DetailsPro.

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!

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.

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.

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.

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

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.

But that’s not all that’s slated for this year. Oh, no, no, no. Everyone thinks we are going to see an Apple augmented reality headset. And at the same time, designers and engineers formerly at Apple at Humane have Spring 2023 typed out as the glamorous release-date-in-lights for their product, which has been marketed as not a phone, not a tablet, and not a screen.

Products can be good or bad, successes or failures, divisive or universal. But beyond all that noise, I see a world of human creativity, thoughtfulness, and effort: design.

I want to know everything about everything we are supposed to see this year. I want to congratulate every person who put their life into designing these inventions. I want to get lost in their abilities and enjoy myself.

This week, we’re looking back at a few of the beautiful designs Apple shared with us at last year’s WWDC. Looking back, but daydreaming about the year ahead—that’s where you’ll find me.

I hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S

Come on Out, There’s a Patio

An iPhone on iOS 16 shows an area outside the Lock Screen. I love the way this design connects to the design of watchOS. There’s never been an area outside (or bigger than) the Lock Screen. And yet, if you wanted to edit the entire Lock Screen itself, wouldn’t you need to get to someplace outside it? I think this design shows a beautiful understanding of human-computer interaction. It reminds us to look for those moments in our own designs where someone might think, “of course it works that way.”

Quick, Hide the Computers

I love the written language of Now, Tonight, Tomorrow Night, and Later… here on Mail in macOS Ventura. There’s an understanding of the person there at the Mac—someone who wants to send an email tomorrow, but doesn’t mind when. If this design required picking a specific time, it’d be cumbersome. This is a great example of how we can remove computer-y details and steps from our designs to relate to the person on the other side.

I Didn’t Even Notice the Tiles

Weather on iPadOS 16 displays everything from the day’s weather to the week’s weather and the wind. This design beams with care and creativity. It’s a reminder that we can step outside the most common interface layouts (like lists, for example). We can try something new and dense, and we might end up with a beautiful result.

We Added Our Own Touches

I love watching iOS grow, seeing interface designs from the Mac spring up in the garden of iOS human interface guidelines. Here, this file menu has everything you could ask for in an iOS reimagining. I think this shows us that there’s more in the past that we can bring to the present—that the present has some room still.

We Know It’s a Mess, But It’s Our Mess

A lived-in home gets messy, as does a screen. I have always found Stage Manager to be incredibly inspired and beautiful. Proportions at play, gravity with its give, designs overlaying atop each other. This is the inventive spirit we could only imagine landing on planet Apple—and beyond. It might not be for everybody just yet, but I think there’s something grand here.

Can You Give Me a Hand?

This year, folks. I’m telling you…

Thank you for reading UI Designer Weekly. See you next week.

The morning of WWDC lets loose many years of work, creativity, and coordination, in a form made to entertain, delight, and inspire us. If you can’t tell, it’s a day that I’m looking forward to as much as ever.

Next week, in the UI Designer Weekly newsletter we’ll be looking back at a few of the coolest designs that were introduced at last year’s WWDC keynote.

For this week, we have everything from an Apple Newsroom web design to an intuitive Apple Maps screen to Steve Jobs Foundation interface charm.

I hope you find something here that you can mix into your own design work. Thank you for reading UI Designer Weekly. —S

Adding to the Experience

An Apple Maps button asks you if you want to share pictures you’ve recently taken somewhere the next time you search for it in Apple Maps. Tapping the button opens a screen that takes your review and gives you an easy and inline picker to select the pictures you want to share. I love this design because I think it does a gentle job of suggesting I share my pictures and then the screen to do so is quick, light, and doesn’t ask me to write a review. I think this is a great example of how we can include suggestions in our designs and how a single page can take all sorts of input without feeling overly long.

Slide to Unlock (Knowledge)

An inviting part-timeline-part-navigation design from Make Something Wonderful. This design feels new to me. We’ve seen book navigation where pages are a horizontal scroll along the bottom, but maybe with a book like this where jumping around chapters is encouraged, a design like this fits better because the navigation is more visible. This is a great reminder that we can look for ways to bring gestures into our design’s interactions (this bar supports tapping chapter titles or sliding up and down the bar) to make things more inviting.

One More Things

I loved the way the Steve Jobs Foundation handled instructions for accessing the book. A list of expandable sections has each destination titled “For iPad, iPhone, or Mac”, “For Kindle”, and so on and expanding each section shows a simple sentence explanation for what to do and where to go.

While You Listen, or While You Look

An Apple Newsroom story combines photography with audio from that moment in the photo. A play button paired with a waveform (iOS 16, anyone?) invites you to click and listen. I keep going back and forth on whether I think this is the audio paired with a photo or the photo paired with audio. It must not matter. But what a great example of how we can add that one additional bit of interactivity and sensation to make two separate things one new whole.

Thank you for reading UI Designer Weekly. See you next week.

Since it’s hard for me to do this newsletter year-round, I’m going to break it up into “seasons” and let you know when a season is starting and stopping. This way, you’ll know when to expect this newsletter and when to expect it to be on a break.

We’re going to call everything before today Season 1 and this issue you’re reading the first issue of Season 2. I’m excited to be back with the same goal as before. From the very first issue of UI Designer Weekly back in October 2020:

My hope is to collect these beautiful, informative, and thought-provoking examples of design, no matter how subtle, and share them with you so they help you see something new and give you ideas you can mix into your work.

This year will hopefully be chock-full of beautiful Apple design. With that, let’s get started.

Thank you for being here,

Sahand

The Whole Bar is the Circle

A new volume slider and track slider in iOS 16. This design is without something that used to be there: a small circle on the bar. You used to have to touch the circle (wherever it was on the slider showing you the volume level) to then start sliding. Now, you can touch anywhere and start sliding immediately. This is maybe a great example of how an updated design can hint at its new functionality. Without a small circle, people might see this and wonder how they are supposed to use it. And then, needing to adjust the volume, they’ll surely try.

Oh, Before You Go

Sending an iCloud Drive PDF on iOS 16 shows a new dropdown outside of iCloud Drive and inside the Messages screen. Since PDFs can be sent as copies or as shared items, there’s a choice people have to make, and before this update people had to make that choice on the share sheet. You can still do that, but now you’ll see this choice and have another a chance at it when you’re preparing the message. I think this is a great example of putting a design where people will see it. You can place the choices people have to make “on their way” so they’ll always see it on the way out (or in).

A Classical Separation

Apple Musical Classical features a design made for dense information, and yet has in many places done away with separators. Separator lines (the thin, gray divider lines used throughout iOS) are usually known to be useful precisely in the situation Apple Musical Classical addresses: when you have so much information you need to clearly display lots of information. This could be a gentle reminder for us all: we can try our designs with a little bit of added whitespace instead of another visual element added.

Floppy Trip

https://youtu.be/pcYX-2uWwsk

Scrolling containers are a type of element in SwiftUI that create a “scrolling window” where anything placed inside of them can be scrolled. Horizontal stacks arrange elements horizontally. Frames are a type of modifier that let you give things a specific size. We are going to make some cards, put them in a horizontal stack, and make them scroll!

1. Start with a Card

We’ll want to start the actual element that is going to be in our scroll. We’ll make sure our element has a set width by giving it a Frame modifier and entering in a width value. This will be necessary because once we put this element into a horizontal scroll, we’ll need that width value to help the element stays uniform regardless of their content.

2. Wrap with a Horizontal Stack and then a Scrolling Container

Next, we’ll place our card into a new Horizontal Stack, and then place that Horizontal Stack into a Scrolling Container. We’ll also make sure the Scrolling Container has its direction set to “horizontal”. Pro-tip: If you use the “New Scroll with Item” action by long-pressing on an element, Scrolling Container will automatically set it’s direction for a Horizontal Stack to be horizontal.

Note: at this point, it’s normal for the card to be right up against the side of the phone. We’re going to fix this in the next step.

3. Add Padding and Repeat the Card

We’ll add a single Padding modifier to our Horizontal Stack to give us a beautiful, uniform spacing from the sides of the device so our scroll starts with a nice offset. Next, we’ll long-press on our card element and tap Repeat to make five cards appear, filling our scrolling row and giving us content to customize. Learn more about repeat here.

4. Done and Ready to Refine!

Now that we’ve got our content scrolling, we can do anything from change up our content in each repeat item to refining the design of our cards themselves. Fine-tune the width, adjust the fonts, and make your design beautiful.

DetailsPro makes it easy to design in SwiftUI and get a carousel ready to go to export into Xcode.

Repeat is made for the modern Apple designer in the very moment we find ourselves in all the time: designing a list of something (or a row of somethings). Whether a design calls for a carousel of cards or a triplet of tags, we often need to be able to design something, repeat it X times, and show different content in each repeated item. DetailsPro now supports this natively with an intuitive UI for creating these designs and goes even further and lets you customize each repeated SwiftUI item to make your next design beautiful, functional, and detailed.

Let me tell you just how Repeat works in DetailsPro and give you a quick tour.

Beautiful designs are made with Repeat

Repeat lets you take any element in your design and repeat it vertically, horizontally, or layered one on top of the other. The direction is determined by which kind of stack (Vertical, Horizontal, or Layered) you put on the outside of the Repeat. Your original element can then be repeated and you can quickly and easily change the content in each iteration of the repeat, all while the design changes stay in sync—any changes to the original element will immediately reflect in the repeats.

Now in your design process, you can focus on how each element should look and spend less time duplicating designs and making the repeat happen manually. Ever since I started working on repeating elements, I’ve started seeing them everywhere in Apple design, so I see this feature as something so essential to any designer’s toolbox.

How to make a Repeat

If you already have an element you want to repeat, you can long-press on that element and then select Repeat. This will make a new Repeat with that element and repeat it five times.

If you want to start a new Repeat, you can open the element picker just like with any other element and you will find two shortcuts for adding a Repeat: one that repeats items vertically and one that repeats items horizontally. The only difference here is which stack is used on the outside of the Repeat.

From there, any elements you put inside your Repeat will repeat. You’ll most likely want to use a stack as the first element and then create your repeating element inside that stack. If you are repeating rows, for example, you may want to start with a Horizontal Stack in your Repeat to arrange the inner elements of the row horizontally. You can also update the design of your element any time throughout the design process.

To add, edit, and delete iterations of your Repeat, you can edit a list called Items that appears. Every row in Items represents an item of your Repeat. You can swipe to delete an item or tap to edit it. Each row will also show you a preview of the content that has been changed for that item.

Repeats can have their own Repeats

You can make a design that has a repeated element in it, like a list of trips that someone has recently been on where each trip has a row of in table, and then you can give that design a header and then repeat that whole thing. Everything still works in DetailsPro as you’d imagine: you have only one source of truth for what a trip row looks like and when you update the original, all the repeats will update too. And yet! In each repeated section of trips, you can customize and change the number and content of the trip rows inside! One section could have three trips, another five, another ten, and so on.

Supporting nested repeats was absolutely necessary to making sure this feature was ready for designers because one of the most common Apple designs can be seen in popular apps like Apple Music, the App Store, Photos, and others: a vertical scroll of horizontally-scrolling rows. And now, you can make designs just like this quickly and easily.

One of the built-in templates, Store, demonstrates this type of design. Start a new design with it as the template to get a good starting point to go off on your own!

Tips & Tricks

Here are two tips that will you get going with Repeat with a great head start.

1. You can make the Repeat item inspectors friendlier to read by naming your elements. The fields in the Repeat item inspectors use the element’s name as their field name, so if you name your text element as “Title” or “Artist Name”, for example, that text will appear instead of simply “Text”.
2. You can use arrows to jump quickly from one item in a repeat to the next. The arrows are in the upper right-hand corner of the repeat item inspector and you can see them in the above image.
3. Tap on the All Elements button at the bottom of every Repeat item inspector to access a list of every element that is in the design of the repeat. For that item (say, the second item in the repeat), you can choose to toggle on or off any element within that design. You can use this feature to hide design elements that don’t need to be on every item. For example, you could design a “Featured” banner and put that only above the first element.
4. Tap on any element within the All Elements section to edit any of the options for that kind of element and edit the modifiers on that particular element. Any edits made here are only made to this repeat item, so you can use this to make changes like changing the font or adding extra padding just on one item. This section was designed for those rare occasions where you might need these options, but I expect that in most design sessions you won’t need to use anything in here.

Code Export

Your Repeat element will export to SwiftUI code as a ForEach and will export your original element inside the Repeat. From there, you can update the code to use string variables, color variables, in more in Xcode or Swift Playgrounds.

Philosophy behind this update

To explain a little bit about how this feature came to be and why I designed it to work this way, I can share with you the biggest thing that was top of mind for me: repeats are everywhere. I just came to think that this design pattern of something-that-repeats-but-just-the-content-changes is so common, especially in Apple design where we have so many standard apps that have taught us how to design lists, carousels, and so on that I wanted to make something specifically for this task.

DetailsPro’s purpose is to be a design tool for anyone who is designing software for an Apple product. They don’t need to know how to code, they don’t need to know how to design, they just need to know how to use an iOS-style app. That is what drives everything when I’m working on a new feature and wondering how it should feel and behave.

So these two ideas basically came together and I was led to: I need to make a feature that is made for handling repeating designs, and it needs to fit into DetailsPro in the DetailsPro way. (The DetailsPro way, by the way, is something that I get both a lot of good feedback on and a lot of bad feedback on. Many people want to be using what is essentially a full Xcode for iPad, which is not what I am able to offer or even going for. I’m going for what is essentially a live notebook, purpose-built for SwiftUI design, that is so easy and fast to use that a designer in a meeting can pull their iPad out and make something new on the spot to show to colleagues before the meeting has even ended.)

The desire to make something that was made for repeat is what led to what I think is the coolest thing about this feature: all the repeating elements are stuck together in essentially a group, held together by the repeat. Today, I find this to be so essential and a “no-brainer” but it was only one of many, many designs I considered along the way.

The other major component was how to handle the variation between items in a repeat. While changing the text and the images between elements is essential and very easily understood, it took me a lot longer to figure out how to support the situation where you want to have an item in the repeat be very different from an item before it (maybe you want it to have an element none of the other items have, or you want it to have five more elements in a nested repeat than the others). I’m in love with the way this works in this new update, where from item-to-item you can remove or include elements within the main element, changing modifiers and changing nested repeats. But it took a long time to get to this.

So I hope the way this feature works is something that you find both easy and enjoyable to use. It was made specifically for any attached, repeating set of design elements. It was made with the modern Apple designer in mind, the one who maybe sort of understands the general idea of how code works or SwiftUI works, but thinks more in terms of fonts, spacings, colors, and layouts than they do in anything else.

Just the Beginning

I’m really excited to be sharing this update with you today, which is available for all DetailsPro designers, and I can’t wait to be back to share the next improvement that is coming to DetailsPro related to repeat… grid! Just the same way that I’ve been waiting for so long to be able to offer this necessary functionality, I’ll have something to announce for grids very soon now that we have Repeat as a foundation.

Thank you as always for keeping up with DetailsPro and for all of your support. If you have any requests or questions about Repeat, feel free to contact us.

Throughout 2022, new updates to DetailsPro built on everything that makes this app special, adding a whole set of new features —

• Keyboard Commands with support for ⌘K, the ability to quickly open a command menu and design entirely from your keyboard.
• SwiftUI Templates supporting the most beautiful iOS designs, Dynamic Island configurations, and more to get you started quickly.
• Preview in AR so you can take any design from your screen into the real world, with a fullscreen viewer and simple controls.
• Presentation Mode so you can AirPlay a readymade slideshow of your designs in your meetings with stakeholders directly and take notes from feedback.
• Share and Export supporting SwiftUI export to a variety of formats including Xcode, Swift Playgrounds, ARKit, JPEG, and more.

Each one of these features makes DetailsPro more helpful to Apple designers everywhere. They can do more, design more beautiful interfaces, and take their SwiftUI designs to new places.

Let’s look back!

Keyboard Commands

Keyboard Commands let you create entire designs in DetailsPro all from your keyboard. You can go really fast with these shortcuts—this feature was tested extensively with our top power users.

Each action is tailor-made for SwiftUI design. You can do things as simple as changing a color to blue, or adding a headline font. And then, you can do things as complex as moving an element from one Horizontal Stack into another Vertical Stack, or converting a Horizontal Stack into a Vertical Stack all in-place, preserving its contents. Read more about Keyboard Commands.

SwiftUI Templates

DetailsPro helped more designers start quickly this year and chase their inspiration with new SwiftUI templates that are built-in to DetailsPro. Upon creating a new file, designers can choose from over 50 starting points that cover everything from the most elaborate to the most common Apple design designs-of-interest. Dynamic Island Live Activities, Home Screen Widgets, common iPhone app screens… they’re all here.

The beauty of templates in SwiftUI is that you can take any part of them right into Xcode with you. Designers can export an entire design or choose just a single component. Developers can open DetailsPro files and pluck out exactly the parts they want, readymade as SwiftUI.

Preview in AR

DetailsPro introduced a new feature that lets designers take designs further than ever before, outside of the screen itself. Preview in AR integrates with Apple’s ARKit and RealityKit frameworks to give designers a head start on what’s to come. Read more about Preview in AR.

Any design made in DetailsPro can be previewed in Augmented Reality, placed and sized to perfection, all from the same device and all without writing a single line of code.

Presentation Mode

Designers saved time they’d normally spend exporting images and creating Keynote presentations by using DetailsPro’s new Presentation Mode, which lets you create a presentation live on-the-go. You simply pick any number of designs, and just like that you’ve got an interactive slideshow that you can AirPlay to the nearest meeting room. Read more about Presentation Mode.

You can even take notes on your designs without leaving Presentation Mode, so when a fellow designer gives you a great idea or a manager gives you feedback you want to remember, you won’t miss it. After hearing that designers use DetailsPro in the middle of design reviews to quickly make changes and share new ideas, I wanted a way to make this even easier and nicer.

Share and Export

Designers took their SwiftUI designs with them everywhere. I updated the share and export options in DetailsPro to make them easier and faster throughout the app, so you can now instantly copy SwiftUI code, export a JPEG, or start a new Swift Playground.

The beauty of DetailsPro and SwiftUI, that I’ve shared again and again, is that you can take what you learn with you. Make a design, start an Xcode project, share the SwiftUI code with your colleagues, post an image into Slack—it’s all available even in the free version of DetailsPro.

On to 2023!

I have so many improvements, new features, and more on my to-do list for 2023. I can’t wait to get started in the new year and to get the first new update out to you.

In 2023, you’ll be seeing major improvements to the DetailsPro Mac app, more templates, and the continued focus on Apple design that you’ve seen since the beginning.

Thank you for a wonderful year, see you in 2023!

—Sahand

Visit our Press page to download assets and view our FAQs.

From the beginning, DetailsPro has been about making SwiftUI work for every Apple designer. Apps are made with SwiftUI, so why can’t designs be? That’s the question I’ve asked myself since the first beta of DetailsPro came out in 2020. And since then, DetailsPro has jumped the biggest hurdle that stood in the way. Back then, it was code. You had to know how to code if you wanted to make something in SwiftUI. So DetailsPro took that requirement out by introducing a visual interface for everything, with simple taps and drags to create beautiful designs that are ready to go as SwiftUI. No difference between a VStack made by a designer and one made by an engineer.

Now, two years later, I’ve been hearing something a lot, which is that designers want to go faster. They love that DetailsPro is easy to use at a beginner level, but now they know the app inside and out and want to go fast.

This update brings that speed, and it all starts with a simple shortcut: ⌘K.

Watch the Video

Smart, instant, and handmade for SwiftUI

When you’re designing elements in SwiftUI, you’re always working with something concrete—an image element, a stack of elements, a SwiftUI modifier, and so on. This is the foundation of what makes keyboard commands smart in DetailsPro: the keyboard actions you see are always relevant to what you’ve selected.

Simply press ⌘K and keyboard actions appear instantly. You can discover and filter through a range of context-specific actions. All from your keyboard, you can arrow up and arrow down to select an action, and then press return to complete it.

DetailsPro intelligently shows you only the actions that are relevant to your design selection

Or, you can start typing to quickly filter the actions down to what you’re looking for. DetailsPro intelligently shows you only the actions that are relevant to your design selection, and can even show what you might’ve been looking for based on what you type.

Modify elements in no time flat

As you type into the keyboard actions, you’ll see a new version of Suggested Modifiers that makes the most common SwiftUI modifiers just one click to use. You can do things like instantly add a color modifier and set it to red all in one action by typing in “red”, or add a padding modifier with only one side selected by typing in “top”. You can even do things that take a few taps without the keyboard, like adding a frame with a custom-entered width and height by typing in “frame” and then entering “350×450” into the Add Frame action.

Designers who have transitioned to SwiftUI quickly become familiar with modifiers, Apple’s name for the things that make your design yours—from fonts to colors, paddings to sizes, you add the basic elements of your design onto the screen and then you customize everything with modifiers.

You can do things like instantly add a color modifier and set it to red all in one action by typing in “red”

DetailsPro made SwiftUI accessible to designers who aren’t at all interested in write code over two years ago, when the app was first released with an all-graphical interface for designing with SwiftUI. Now, keyboard commands take that a step further and let you keep designing without worrying about the code, but still taking advantage of the speed of the keyboard.

It’s easy to make changes

You can do things with the keyboard that you might not expect, like reordering modifiers. Sometimes you want a padding to before a background color, instead of the other way around. DetailsPro now has actions made just for this, with plain and easy language like “Move Background Color” and “Before Padding”.

DetailsPro’s context-specific awareness only shows you actions that matter to you in that moment, based on your design selection, so it’s no sweat to give you options that show you plainly how you can reorder your modifiers, or convert a Circle into a Rectangle, or embed SwiftUI elements into a VStack.

Every action under the sun

You can visit this blog post for a list of every keyboard action available in DetailsPro at launch. More actions are being added all the time in new updates, and luckily you don’t have to worry about missing them because they will naturally appear in the list as you design with your keyboard.

See something missing you’d like to see added as an action? Let us know!

Whether you’re a beginning designer trying SwiftUI for the first time alongside Sketch or Figma, or a seasoned iOS developer with multiple apps on the App Store, the ease of use, discoverability, and efficiency of using your keyboard with DetailsPro will help you make more beautiful designs in less time.

To use these fonts, you must be on iOS 16, iPadOS 16, or macOS Ventura and the latest version of DetailsPro. You can use these fonts anywhere you could use SF Pro before, and selecting these new widths is easy. Here’s how you do it:

How to try the new fonts in your designs

1. Open a design
2. Select any Text element
3. Add a Font modifier
4. Choose a width in the “Width” section
5. Try Compressed, Condensed, or Expanded

From the WWDC Session

Export as SwiftUI code

DetailsPro fully supports exporting code for the new expanded San Francisco font family so you can take these designs with you for iOS 16 and up. When you design with DetailsPro, you can take the design you make with you as 1:1 SwiftUI that can be exported to Xcode, Swift Playgrounds and more. Export as SwiftUI code is available free to all DetailsPro designers.

Just the beginning

As I’ve been building in support for these new fonts to DetailsPro, I have been using them and I truly think we haven’t even seen 1% of how far these fonts will go. Condensed is straightway my favorite because it’s got almost a The Flintstone’s/The French Dispatch feeling of wonder to it. I thought Expanded would be my favorite, because it’s outwardly the coolest in my opinion, but I am loving Condensed and itching for an excuse to use it in something.

I can’t wait to see what you design with it. If you make anything you want to share, tag me on twitter @sahandnayebaziz and @detailsproapp!

I wanted to collect, in one spot, the beautiful moments of Apple Design that were presented all throughout the keynote. You can watch the full Apple September 2022 Keynote here.

I hope this post can serve as an inspiration point for you, a page you can return to throughout the iPhone 14 year to catch a glance at that one design you loved, and also as a moment of appreciation for the designers, thinkers, planners, and everyone at Apple who makes these creations possible.

And, if I missed any moment that you think should be in here, just let me know!

Great uses for Presentation Mode:

• Present designs at a design review with your coworkers. You can take notes without having to leave your presentation, simply by tapping on the note icon at the top of the screen. From there, you can add or edit notes that are saved directly to your design.
• Compare two designs that you’ve made. Presentation Mode is the easiest way to view multiple designs, quickly jump between them, and compare them.
• Display a minimal view of a design. Perfect for Zoom meetings, screenshots, and social media posts, Presentation Mode gives you a beautiful and clean view of your designs.

How to use Presentation Mode from a folder:

1. Launch the DetailsPro app
2. Tap on Designs or any Folder
3. Tap the Present ▶️ button

How to use Presentation Mode with a selection of files:

1. Launch the DetailsPro app
2. Tap on Designs or any Folder
3. Tap the Select button
4. Select any number of files
5. Tap the Present ▶️ button

How to use Presentation Mode

1. Swipe between designs by dragging your finger or scrolling horizontally. You can also tap on the dots at the bottom to jump forward or backward.
2. Tap anywhere to hide or show Presentation Mode’s controls.
3. Tap the note icon to open notes for any design. Notes are saved directly with the design, so you can view notes taken while in Presentation Mode even after your presentation, anytime, by opening a design and opening the notes in the “…” menu.
4. Tap the share icon to instantly share a design being previewed with somebody else or any other sharing destination.

Kicking off a team meeting with a dazzlingly beautiful presentation can get everybody excited and inspired. Having to fumble through files, screens, and windows can turn people off and prevent you from getting your designs into the world. We hope that you’re enjoying the new Presentation Mode in DetailsPro! Let us know what you think!

My hope is that you find something that you can mix into your own work. Thank you for joining me, have a great, restful weekend!

Color, Back with New Meaning

A row of purple elements in iOS 16 shares Focus filtering is on. I think this an amazing use of color. Purple has become the color for Do Not Disturb, and now Focus here. Making everything in the row the same color helps it feel separate and different from all the rows after it. It even has a quiet sort of feeling to it, with the purple. Did you notice the interesting alignment that’s shared by the all the icons on the right, or how the “Turn Off” button seems to be not so bold?

Rectangular in the Front, Party in the Back

Inside Spotlight on macOS Ventura, the beautiful pop-up design with rounded corners, there’s a photo grid without rounded corners. This is maybe one of the best reminders that we don’t need to use rounded corners all the time on everything. The photo rows here feel big, easy to see, and like they have a lot of photos in them, and the tight spacing and no rounding are a part of that. Maybe we can use rounding a lot on the outsides of our designs, but on the insides we can find grids that can be great as regular rectangles (gasp!).

It’s Been a Blur

The menu bar extends across the top of the screen and has been a central piece Mac design for decades. Today, the menu bar is a vibrant blur of the wallpaper behind it. Just that blur is enough to create enough separation and foundation for icons, text, and colors to be placed on top. This struck me as beautiful and inspiring and made me wonder what other bars and interface elements could work better with a blur as their foundation.

Headlines Standing Out

There’s still just something beautiful about white text on photography.

Thank you for reading UI Designer Weekly. See you next week.

With AR Preview in DetailsPro, designers can preview their SwiftUI designs in AR, placing them on tabletops, walls, and objects in their own environment.

If you wanted to make a design in ARKit before, you needed a Mac, Xcode, time to learn and write code in SwiftUI, and time to write code that integrated it all together in ARKit. Plus, you needed an iOS or iPadOS device to preview your work on.

Now all you need is DetailsPro and a single device. You don’t need a Mac, you don’t need Xcode, you don’t need to know how to code, how to write SwiftUI, or how to write ARKit code. You can simply skip all of it and just create a SwiftUI design in DetailsPro and hit “Preview in AR”.

How to preview a design in AR

• Open DetailsPro
• Tap AR Preview on the sidebar
• Tap on a design
• Move your device around to place your design

How to open AR Preview from any file

• Tap on the eye
• Tap Preview in AR
• Move your device around to place your design

Why AR?

AR is exciting. Designers around the world are already using DetailsPro every day to make new designs for their apps, expressing their ideas in the Apple design language. As more apps move into augmented reality and the future unfolds, we wanted to make it easy (in the DetailsPro way) for designers to take advantage of the latest Apple has to offer, all visually and on the devices their carry in their bags every day.

Just the beginning

We’re only getting started with AR. We’re already working on new interactions, new shortcuts, and new templates that help designers get even more out of SwiftUI and AR, all from the comfort of a GUI that’s easy to use.

About DetailsPro

DetailsPro was created with a mission to make SwiftUI accessible to as many people as possible. By making it possible to design in SwiftUI with an all-visual, intuitive interface and removing the requirement to know how to code, DetailsPro has brought SwiftUI to over 35,000 people and counting. The first version of DetailsPro was released in July of 2020, and in the years since has grown to be available on iPhone, iPad, and Mac. Almost half of DetailsPro users actually create SwiftUI designs all on their iPhones. Beginner-friendliness is at the heart of DetailsPro, with a belief that what helps the first timer get their idea onto the screen also helps the experienced professional. DetailsPro is made by Fun Focus Software, LLC, a company started by former Apple design prototyper Sahand Nayebaziz.

My name is Sahand and I’m a UI designer that was hoping to find something like this. I’m always finding interesting new designs in newly-released products that keep me up-to-date on the latest interface ideas.

My hope is to collect these beautiful, informative, and thought-provoking examples of design, no matter how subtle, and share them with you so they help you see something new and give you ideas you can mix into your work.

Happy to have you here!

P.S. If you have any feedback or requests, I’d love to hear from you on Twitter!

Section Titles, Back and Better Than Ever

A beautiful rendition of section titles on the Listen Now tab of Music. Bold text, clean pairing of an album cover on the left with a smaller title and subtitle on the right. It looks fun, if I may say. This is perhaps an example that shows you can use left-aligned text without it being all the way to the left to make room for an exciting visual. (If you were displaying a section title for a news section, for example, a standard title with text only would probably be more appropriate, whereas here each recommendation row is getting significant theater.)

Listening Choices, Elevated

The audio stories highlighted on the page for Apple News+ show an amazing way to design repeated content across the screen. Here, you quickly figure out there are a lot of choices without even reading each one. Each one has its information in the same layout, which makes it super easy to scan. Imagine how much harder this would be to read if each tile had the text and the logo in different places. The faded options on both ends tell you that there is even more.

Both Marketing Design and Make-It-Work-Vertically Masterclass

A big artist photo and the idea of animating Apple Music across the bottom to represent the new releases on Instagram Stories. Note the album name is set in a slightly tighter font. Also a reminder that you can put elements across from each other and they can still feel related, like “Surrender” and “MAGGIE ROGERS” here.

The Dos and Don’ts of Pairing Typefaces

Thank you for reading UI Designer Weekly. See you next week.

I wanted to collect, in one spot, the beautiful moments of Apple Design that were presented all throughout the keynote. You can watch the full Apple WWDC22 Keynote here.

I hope this post can serve as an inspiration point for you, a page you can return to throughout the summer to catch a glance at that one design you loved, and also as a moment of appreciation for the designers, thinkers, planners, and everyone at Apple who makes these creations possible.

And, if I missed any moment that you think should be in here, just let me know!

Overall, this was definitely iOS 16. We are not in iOS 15 anymore. The design is moving ahead, it’s getting deeper, it’s branching out, and overall I think it was a huge year for design.

Below, my first impressions of what I remembered most on day one of WWDC22.

Table of Contents

• That CarPlay Footage
• Lock Screen
• Stage Manager
• Colors

That CarPlay Footage

I felt like I was dreaming at this point. I still can’t believe we got to see this much footage of future CarPlay designs, and all of it was moving. These designs looked beautiful, clear, and familiar but I really need to watch more to start to understand what’s happening.

Lock Screen

Being able to customize the Lock Screen, not only from the fonts and the layered wallpaper that puts the time behind elements of your photo, but also to be able to add widgets in any order. This was all amazing. First impressions: Apple style abound, looks super easy to use, and really fun.

Stage Manager

This was the other big thing and oh my is it amazing. Stage Manager feels like the futuristic window management that we’ve always imagined could be possible, and here it is for real. This just looked like it was the answer to better window management, and it’s beautiful to look at. I am really excited about this and already from using it on my iPad, I’ve had a great time with it.

Colors

Just another look at the colors here. The colors around iOS 16 felt great to me and matched everything that was happening around this logo—the blending, the expression, the growth.

And that’s just the beginning

I am so excited to dive into more this WWDC22 week and to learn more about the designs of the other features I didn’t mention here that still looked amazing, like Freeform, macOS Ventura, new iPadOS Desktop-Class apps, etc.

Stay tuned to the DetailsPro blog and Twitter for the next articles! Have a great WWDC22!

This is the last issue before WWDC22, and as you can surely imagine, I am really excited. We’re going to have a lot to talk about next week and I can hardly wait for it.

In this week’s issue, you’ll find more beautiful, inspiring, and thought-provoking examples of design to maybe help you see something new and give you ideas you can mix into your work.

I hope you’ve had a chance to design something new, something interesting, perhaps even something challenging over this past week.

Thank you for joining me and enjoy WWDC22!

Behind Door Number One, Every Beautiful Button

In Apple’s preview of upcoming accessibility features, Apple Books has a new sheet that shows buttons for selecting a theme in a grid along the bottom, with always-visible buttons for increasing and decreasing font size or switching from page flips to page scrolls. I think this is a great example of how we can make the interactions in our designs visible, so when someone arrives at the first screen related to something, they get a good sense of everything they can do. Maybe, if some of these buttons were behind another tap in a menu, many people wouldn’t ever see them.

I Heard We’re Almost There

Sound Recognition on iOS presents a row of empty circles that fill with a sound icon as a sound is being learned. This design is a great reminder that we can communicate progress in our designs to help people know how close they are to completing something. This design uses a simple row of elements to communicate both how many steps are left and to represent how progress is made.

Captions Captured in Beautiful Design

Live Captions on iOS shows a floating panel that uses a mix of vertical and horizontal layout to display the conversation with Apple design conventions throughout. The conversation itself uses a primary color to stand out against the dark background, while names are written in a quieter secondary color. A photo of each person sites beside each of their lines in a small circle. No divider lines, just padding throughout to make this design easy to read.

Old Design, New Tricks

And here, Live Captions shown over a FaceTime call between two people, we see a dedicated panel that uses a blurred background and a large space for the text of the conversation to flow in a white font. I think this design is a great reminder that our designs don’t need to be wildly different as we design for new uses. Here, this design is doing something brand new in showing the words spoken on a FaceTime call, and the design works wonderfully with just a regular font in a full-width layout. There is nothing inherently new about the design itself, it’s the overall context of where and how this design appears that will delight people.

Send Signals, Request to Be Seen

Apple Cash on iOS 15.5 features two new buttons on the very first screen. With a beautiful half-and-half, full width balance beneath the card (notice how the padding between the card and the buttons is a little more than the padding between the buttons themselves), the buttons feel easy to tap. I think this is another great example of making the elements of a design visible without having to do anything first. They are right there so that people can discover them more easily.

Beautiful, Museum-Quality UI

Safari’s bottom bar that was introduced with iOS 15 features a beautiful row of five elements along the bottom. The back and forward buttons automatically dim when there is no page to go backwards or forwards to. The Share button sits directly in the middle, in a vibrant blue color, and the entire row of icons along the bottom sits slightly wider than the floating address bar above. There is a shadow under the address bar, and two elements in primary color inside.

I Totally Understand

Maps on iOS 15 can understand a “place near another place” and displays a row in the design to highlight this understanding and show the option back to us. I think this is a great example of how our designs can confirm understanding and give people confidence as they interact. Maybe if this design was simply showing a list of Starbucks locations near the beach I searched for, I would wonder whether it was really working or only sort of working. But that row at the top, with Starbucks in bold primary and “near Three Arch Bay” highlight below, makes it a sure thing that Maps is doing a search for Starbucks locations near where I’m trying to look.

Open Seating

Search filters in Maps on iOS 15. Buttons are grouped together and turn blue for options you’ve selected, letting you quickly see both the large list of options and the selections you’ve made. This full-screen sheet is another example of a design that makes its buttons and interactions easily visible without having to tap into any menus.

Stairway to SF Heaven

A fun typographic treatment on our favorite font for Today at Apple’s Creative Studios.

Design of the Week: DetailsPro AR Screen

Take this week’s conversation with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

In 400 Pixels on Your Right

Guides in Maps on iPadOS 15 create a beautiful side-by-side layout where you see locations perfectly framed next to the guide’s card. This is a great example of building on the iPad’s wider screen. When we look at how we design for the iPad, we can ask ourselves if there are any two separate screens that would benefit from being shown together with the added space the iPad provides.

Have a Seat at the (Alignment) Bar

Maps on iPadOS 15 presents each place in a Guide with an image, text elements, and an SF Symbol aligned on the left. Normally, you might expect to see the restaurant symbol and the place’s name on the same line in a close horizontal stack, but here each element is stacked vertically and the restaurant symbol even gets its own line. This separation gives the design a fresh feeling of space, and maybe more importantly, helps keep the list easy to scan.

To Make It New, Make It Blue

When iOS 15 tells you that Optimized Battery Charging is enabled for your AirPods, there is a single button displayed at the bottom in the color blue. This button doesn’t have any other shadows, backgrounds, or decorations, it’s just sitting there in blue. I think this is a great example of how we can use color to make elements in our designs really stand out and feel interactive. Even on this AirPods card, with the 3D AirPods renders, rounded corners, and all the other design elements, this blue button stands out.

Finding New Interactions In Familiar Places

On iOS 15, you can drag your finger across the page indicator dots on the Home Screen to quickly navigate through your pages. This new interaction, where what was previously only an indicator has becomes a control, might feel familiar to another recent iOS change: on any page that scrolls, you can touch and drag your finger on the scroll indicator and scroll through the rest of the page more quickly. This a great reminder that our designs may have room for being directly interactive in places that we hadn’t previously thought of.

Chevrons Point Forward

In celebration of the last iPods being sold, Apple shared this image of an original iPod. As you scroll the wheel on an iPod, the highlighted menu item is shown with a filled background, light text, and a light chevron on the right. The bar at the top, with the iPod title in the center and the battery on the right, might remind you of the status bar on iOS 15. This is a great reminder that we can look back at elements in previous designs to find great inspiration for our work today.

Design of the Week: Station Screen

Take this week’s conversation with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

Love At First (Full-Width) Sight

A beautiful rendition of a news card on Apple Newsroom. The photo feels endless, going all the way to the top corners where the card itself is rounded, and going from edge to edge on the sides. Without any horizontal padding (like the padding given to the title and subtitles below), the image element of this design has all the theater and emphasis that can be given in such a small space. This is a great reminder that we can use edge-to-edge elements in our designs to make them feel like the biggest, most beautiful areas of a design.

Not to Be Overshadowed

A shadow on the volume slider on iOS 15 feels like the star of the entire show. Not to mention, every other element is dark, and this element is light. This is perhaps a great reminder that on smaller elements in our designs, a shadow can make them feel more interactive if we really want something small to jump out. Did you notice the current time marker element has a little shadow too?

Hearing is Believing

Hearing on iOS 15 presents a beautiful SF Symbol with a live indicator of volume safety, using a color and an icon to make it easy at a glance. Beneath the ear symbol, a horizontal volume meter shows the live volume level and even includes a single notch that is larger than the other ones, right at the point where volume may start to become unsafe. Maybe this is a great reminder that we can use the symbol indicator colors (like red, yellow, and green) to great effect in our designs, especially if we can make them appear inline in our designs where we want to communicate something about a “good”, “bad”, or “warning” state. And that single notch in the meter being bigger than the others, that is a classic Apple reimagining of an existing element to get more information across.

Designing in a Compact Bubble

A light rounded rectangle and an SF Symbol in a secondary color make this article preview in Messages feel at home with nearby elements. These designs in Messages, across all other content types, are a great reminder that we can benefit from making our designs match their surroundings. It’s true, we may want our designs to stand out, but if we first make them at home and then add little details to help them stand out, we may go a long way. (Thank you, Jordan Borth!)

Easier to See Without the Details

Apple Support videos on YouTube show scenes from macOS that are made up of simple shapes and colors. Maybe, if we are trying to help people learn how to use an interface that has many different things in it all at once, it can help make it easier to find what you’re looking for by showing everything else in a less specific, more abstract way. The next time you’re looking for an abstract interface illustration style, check out this video.

Best Font for Online Reading: No Single Answer

Design of the Week: Article Preview

Take this week’s conversation with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

DetailsPro supports a powerful range of keyboard commands that are all accessible from ⌘K, and on top of that supports a range of other keyboard shortcuts.

Read on below for a list of everything. For more information, you can also read our blog post announcing keyboard commands in DetailsPro.

Keyboard Commands

• Open Keyboard Commands — ⌘K
• Select Next Element — ⌘↓
• Select Previous Element — ⌘↑
• Select Next Insertion Point — ⌘⌥↓
• Select Previous Insertion Point — ⌘⌥↑

Numpads

• Enter a number — 0-9
• Delete — delete
• Clear the numpad — c
• Enter a decimal point — .
• Return from the numpad — return
• Decrease by the nudge amount — -
• Decrease by the larger nudge amount — ⇧ Shift -
• Increase by the nudge amount — =
• Increase by the larger nudge amount — ⇧ Shift =

Keyboard Support

DetailsPro’s keyboard shortcuts work on iPhone, iPad, and Mac with any Bluetooth keyboard connected, including the iPad Smart Keyboard and Magic Keyboard.

Stay tuned for more!

We’ll be updating this post with all keyboard shortcuts in the app. Stay tuned for more!

What You’re Searching For

A text field for searching, a microphone for dictation, and a row of app icons for opening all gather into a compact bubble for Spotlight on iOS 15. This design is a great example of adding optional paths that people can take. Also, even though this may sound so basic, it’s great seeing the apps in the row looking like normal app icons—maybe when you see an app with the title under it at this size, you know you can definitely tap on it to open the app. Perhaps if these were appearing in a list form or some other form, it wouldn’t feel so familiar.

Business on the Top, Business on the Bottom

A beautiful rendition of a title area in Voice Memos on iPadOS 15. The name of the recording is biggest at the top, and just below that in secondary text are the time the recording started and the length of the recording. The proportions make the title feel so big and so important, and the text-only representations of the time and duration feel clear and dependable.

A Button by Another Name

A red fill, a red border, and red text make the Resume button in Voice Memos feel just like a record button. This button resumes recording when you tap on it, and all the red features help this button say “record” without saying “record”. This button is also a great reminder that, sometimes, we may want to make in-place changes to the elements in our designs—if we have one button that really should turn into another button, like this one does after you pause a recording, we can actually design that element to change.

Sliding Into Information

The playback speed slider in Voice Memos shows you where the default speed was with a blue line between where you’ve placed it and where the default was. This charming detail feels physical, feels universal, and does it all by reusing an element that was already there. In the top left corner, the Reset button that appears is another great indication that you’ve changed something from the original settings and encourages you to jump back with a single tap.

Design of the Week: Command Modal

Take this week’s conversation with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

Easy For a List of Reasons

Symbols shown at the top of Control Center on watchOS 8 can be tapped to open a details screen. This screen shows the symbol again (with the matching color) and adds a title and a subtitle that tell you what that symbol means. This is a great example of how our designs can help people by adding in information where our design might be using a shorthand for an idea. Also, notice how the symbols at that top are also on a small gray rounded rectangle, broadcasting a hint that they can be tapped.

Screen Half Full

A list with only a few elements in Apple Business Essentials still feels beautiful, full, and grounded. Each device on the Devices screen is given padding, a full width, and a shadow and uses centered alignment to add a little more theater and presence. This is a great example of how a design that will maybe always have only a few elements in it can use that knowledge to give each item a big feeling, both to make navigating the app easier and to keep the design from always feeling empty.

Oh, The Designs You’ll Go

⇧⌘G on macOS Monterey opens a beautiful Go to Folder modal. The text field is a lighter gray than the list area below, and subtle rounding and padding throughout (like on the highlighted item) makes this design feel light and airy. This design is perhaps a great reference for the modern macOS aesthetic.

Show Me That Again

Sharing in Messages on watchOS 8 displays the message you are about to share right at the top of the screen. Even though this is a message that you were interacting with just a moment earlier, seeing it waiting here confirms that you tapped on the right message and aren’t about to send a message you weren’t meaning to. I think this is a great example of how an interaction that needs multiple steps (like selecting a message to share and then selecting who to share with) can be designed in a way to help people feel more calm and confidence with each step they complete.

Design of the Week: Schedule Screen

Take this week’s conversation with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

Score’s on First

A live score is displayed in the corner overlay of a preview in the Apple TV app. I think this is a great example of how some elements in our designs can be shown earlier and save people time. Maybe if our design shows something after a few taps, but it’s something small that someone might want to check often, we can bring it out to an earlier screen to save them the need to go in and out. Did you notice how the scores here look like a little scoreboard too? The layout is so natural it blends in perfectly.

Front Row Fireworks

On the page for an MLB game in the Apple TV app, a beautiful, wide panel gives glanceable info about the game, with everything from the score to the location. I think this is a great example of how elements in our designs can call for an extra bit of spacing, theater, and shine. You know you’ve made it to the right screen when you see what you’re looking for presented in a big, beautiful way like this.

Legendary Baseball Cards

A beautiful stack of text elements, almost identical to the one in our March Apple Event issue, make this card pop in the Apple TV app. The padding around the sides feels smaller than the usual, and the inside gaps between each element feel great. When designing cards like this that have images as their backgrounds, you can try adding a gradient underneath the text elements that starts as a dark color and fades up to a fully clear color to help keep your designs legible (notice how the player’s uniform fades to black with the rest of the image the further you go down the card).

Reading Two Ways Is No Issue

In the Apple News app, you see the cover image of the magazine you’re reading and can tap it to navigate between articles. I think this bar is a wonderful example of accommodating different navigation styles that people might prefer. The arrows on the right side of the bar give readers a way to go from article to article, one-by-one, to see the whole issue straight through. The cover image on the left, with a helpful “Contents” text element displayed next to it, gives readers a way to jump specifically to any other article, in any order. When our designs can be used multiple ways, we can add buttons and create our layouts to accommodate the multiple ways so at any moment, people can do what’s best for them.

Apple ShapePlay

A new intro screen for Notification Summary on iOS 15. Here, the charming miniature design uses familiar elements, like the general shape of an iPhone and the design of the time on the Lock Screen, to explain where a Notification Summary would appear. If our design can’t point directly to an element on the screen, we can use basic elements together to point to something outside of what is on the screen, like a wide rectangle resembling a TV or a spinning circle representing a tire.

Design of the Week: Login Screen

Take this week’s conversation with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

You’re Already So Good at This

A big blue button and tappable suggestions in Shortcuts on iOS 15. Starting something new can be hard, especially when you’re worried about making a wrong move at the beginning. Designs like this make starting much easier because your first move is sitting right there waiting for you.

Seeing Double Feels Good

Close buttons appear over every (beautiful) tab preview in Safari on iOS 15. As you go from tab to tab, there is always a close button there, ready to be tapped. Designs like this help common actions like closing a tab become so fast, so easy, and so without thinking that we never get stuck wondering how to do something.

The Dream Team of SF Symbol, Title, and Checkmark

An inspiring design for Tab Groups in Safari on iOS 15. All it takes to make a button is a title and a rounded rectangle. This design can be seen throughout iOS, from Settings to Safari, from Shortcuts to Share Sheets. If you can include these elegant interface objects (with a descriptive SF Symbol at the beginning and a checkmark at the end if something is selected), you can make your design relaxing and familiar at first sight.

The Same Interaction Does That Too

One more from Safari. From the last open tab, swiping over actually creates a new tab and fades it in slowly as you go. Even though there are other ways to create new tabs, this way is a natural extension of the interaction that makes going from tab to tab possible. Why shouldn’t that same interaction let you go from tab to new tab?

It’s Just Nice to See

The reminder, the date, the hashtags, and the images are all visible in iOS 15 Reminders. You can tap any image to open it quickly, without having to open the reminder itself. This is a great reminder that we can always look for ways to bring the most important information in our designs out and into easier to find places.

Apple Design Part 2: Beyond Flat

Alternatives to Pagination on Product-Listing Pages

Design of the Week: Movie Poster Overlay

Take this week’s conversation around visible buttons and actions with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

Do It Just by Clicking

One beautiful button after another on Apple Newsroom. I think this is a great 1-2 punch of Apple design—something you’d want to do is possible and doing it is easy. The titles on the left announce loud and clear what each row is about, so you can find what you’re looking for, and the buttons make use of both text and an SF Symbol. This is a great example of helping people do what they need to do with your design, and helping them do it as easily as possible. Another design might have hidden the “Copy text” in a smaller icon or a smaller location, but here it’s given a whole row and room to breath.

Slide Through the Story

AirPods experiences are highlighted in a carousel filled with movement, color, and contrast. As you go from slide to slide, the plus button even rolls over from feature to feature. This design has theater, centered text, and a beautiful primary font pairings like those we discussed last issue. This is a great reminder that we can always share our features and designs by breaking them down into one-by-one visuals that give each moment their own space. This was sent in by one of our readers, thank you @jonmuzzi!

Backgrounds Make Feelings Foreground

A beautiful, earthy background color and dark primary font give the IDs in Wallet page a unique feeling all its own. White, black, and gray are perfect as background colors for so many of the designs we make, but this one is a great example of using a background color to give the entire design a new feeling. For example, if a design had an area that displays a big success message when something great happens, that design can use green to make that feeling come across in a bigger wave than green text alone might have been able to achieve.

Best Paired with an Icon

Also on the IDs in Wallet page, features are shown row-by-row with a paired color and primary text stack and a big icon on the side. This one jumped out to me the way that it clearly communicated the idea of each paragraph with just the icon. Anywhere in our designs where we are saying something that takes up more than a few short words, maybe we can also make it even easier to understand by putting something as simple as a large icon (or even an SF Symbol) next to those words.

Apple Design Part 1: Skeuomorphism

Design of the Week: Pastel Filters Screen

Take this week’s conversation around background colors and gradients with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

Triple the Fun

In the App Store on iOS 15, cards display with a stack of three text elements. First, a high-level category is written in a smaller, uppercase, secondary-color font. Then, the headline is written bold, primary color, in titlecase and given room to expand to two or three lines. Finally, a subtitle to that headline is written in an in-between color, still smaller, and with a regular font weight. This style is a great example of a layout that can fit on a card and represent the content underneath it—it’s also very photo-background friendly if you also add the gradient as seen here.

Let’s Take it Back to Basics

On the website for iPad Air, this example can take us all the way back to the very basics, somewhere I’m not at all upset to go. Let’s drop all the fancy stuff, let’s put aside our material backgrounds and uppercases and lowercases, and enjoy this masterclass for the 101-level. To describe the features of the iPad Air, a large, breathable three lines are set in a larger, but not-too-bold font. This is a great example to absorb the line spacing and proportions from, because after just the right amount of spacing below this title, there’s a smaller font used to tell two sentences of information. The pops of color are probably what make this design so fun to look at, but perhaps the best thing we can learn from this example is that you can get a lot out of splitting your idea into a headline and a description and laying them out together with plenty of breathing room.

Dress for the Occasion

On the page for “Why Mac”, a stack of text elements presents a more reserved, quiet look. This design jumped out to me because it feels like an excellent counter example to the fun, the bold, the more stand-out looks that work well in other situations but maybe aren’t what you want when you want your design to feel serious and straightforward. There are two other lessons I think we can takeaway from this design. First, this is a nice reference for designing text elements without much spacing between them, which feels like it works here because a majority of the message is inside the description, so having the title and the description so close helps to lead the viewer to those sentences. Second, actionable elements can be designed to stand out and be seen. The link here is clearly a link and even leaves room for another couple links below it if needed.

To Share the New, Expand the Familiar

macOS Monterey’s Displays window, with its new support for Universal Control, is perhaps a great example that new ideas can be introduced into existing designs with great success. The Displays window has done this cool thing for many years where it shows your current display and any external displays and lets you drag them around in 2D to tell your Mac which screen is actually on the left on your desk or which is mounted above, and so on. Now the Universal Control experience, which could have led designers down a path of making a completely new window that would open somewhere else and be separate from this one, has instead landed in the same familiar place working in the same familiar way. And, just like that, this design reinforces what you know about the Mac and the way it handles displays. On top of that, recent design additions like the perspective-accurate keyboard and mouse below have added charm and flair in the Apple way.

As Big As It Gets

Also on the page for “Why Mac”, a tried-and-true stack of text elements tell a big story, with lots of room for description, and a rounded, beautiful button design that makes clicking look fun. This is perhaps that opposite end that I was mentioning in the section above (about the “Environment” text elements) because it’s all about the big effect and the large letters here. This is a great design style you can use across a native app design and a web design, or anywhere you want to have a big element that people will notice and maybe click for more. The proportions are similar to the “Back to Basics” example above, but the centering and the even smaller description text make room for the button below and effectively attract more attention to the the words here.

Announcement Text Stack

Take this week’s conversation around text stacks with you and try changing up this week’s design. You can download this design free as a SwiftUI design file and open it up on your iPhone, iPad, or Mac with DetailsPro.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

This week has been an exciting one with the Apple Event on Tuesday that brought us the Mac Studio, the Studio Display, and more.

In this week’s issue, you’ll find more beautiful, inspiring, and thought-provoking examples of design to maybe help you see something new and give you ideas you can mix into your work.

I hope you’ve had a chance to design something new, something interesting, perhaps even something challenging over this past week!

Thank you for joining me, have a great weekend!

Sahand

Simple Indications, Elegant Colors

A beautiful stack of text elements in this moment announcing Apple TV+ Friday Night Baseball. There is a great example here of hierarchy between the big title, the “Giants at Padres…” lines set in gray, and then finally the “Watch it live now” line that returns to a bold white. And, up at the top, all you need to convey that live feeling is the red capsule behind the text. Here in this example, these lines feel bold, theatrical, and compact because of the spacing and the colors.

Make the Translation

This one is a little bit more interesting, but hear me out. Apple has been making and showing these line illustrations of their chips that make it easy for people like me (who don’t know much about chips) to count along with the screen. I see the chip drawn in colorful lines and easy boxes, and suddenly I notice the different regions of the chip and can see how they relate and get organized together. And now, after a few of these presentations, it’s easy for me to imagine in my head the way the M1 family goes from M1 to M1 Pro to M1 Max and now to M1 Ultra (which I know is two M1 Maxes put together). When I hear the phrase “two M1 Maxes put together” I think of the colorful image that’s been in the presentations that shows the two sections connected together. Maybe this shows us that it can be worth it to imagine and created simplified images for the advanced concepts you want to communicate, and to use those as a representation of the more complicated ideas. If people who use your design can leave with just the most important parts of your information, without having been turned off by the details or complexity, then maybe that is a great way to give people a way to really understand and then be able to explain their understanding to others.

Big Text Can Be a Big Deal

Large and colorful SF Bold shares an impressive number in a moment for the iPhone SE. It may seem like there’s not a lot going on here, but in fact I see this as a reminder that if our designs have some number or statistic to share, we really can make that number feel special and feel like a big deal by putting it on a line by itself and displaying it in a larger size. Maybe one of your designs currently shares a “big deal” number, like “24 runs completed this month”, and there’s some room to make that “24” feel a lot more special by giving it a similar treatment.

Tiles, Highlighting Once Again

White tiles with an image and primary text on the page for Mac Studio. This is a great example of a very simple layout you can use to organize a collection of features or ideas you want to call out. Consistent titles make each title easy to read and understand and the rounding on the whole container gives each tile a little extra feeling of refinement, like what we are looking at is on a small digital billboard.

Beautiful Desk Scenes with Mac Studio

A great first step you can take is looking at all the different SwiftUI elements you can use. Here’s a guide that shows you every element in DetailsPro, with a short explanation and a basic screenshot.

Table of contents:

1. Vertical Stack
2. Horizontal Stack
3. Layered Stack
4. Spacer
5. Text
6. Image
7. SF Symbol
8. Rectangle
9. Circle
10. Rounded Rectangle
11. Capsule
12. Divider
13. Scrolling Container
14. Blur
15. Gradient
16. Map

1. Vertical Stack

Vertical Stacks are one of three stacks total that exist in SwiftUI (the others are Horizontal and Layered). They let you vertically stack any other elements. They are essential to the design process.

Here’s an example showing a Vertical Stack with a Text element and an Image element:

A Vertical Stack on it’s own doesn’t actually look like anything—it’s invisible. It’s only when you add elements to the Vertical Stack that you start to see anything.

By default, Vertical Stacks align their items down the center. Vertical Stacks can also be configured to align their items to the left side or the right side.

Vertical Stacks also have a “spacing” option, which decides how much of a gap to put in between each element in the stack. By default, SwiftUI has some smarts to give you pretty spacing values between different elements. You can also set your own spacing value, like 0 or any specific number.

2. Horizontal Stack

Horizontal Stacks work very similarly to Vertical Stacks, except they let you put elements together horizontally. They too have an alignment option, which here actually works to align elements at their tops, bottoms, or the middles. There is also a spacing option to configure the gap between each element inside.

Virtually every design you can think of will use Vertical Stacks and Horizontal Stacks, so if you’re starting off a new design with either of these, chances are you are doing everything absolutely right.

Here’s an example showing a Horizontal Stack with a Text element and an Image element:

3. Layered Stack

Layered Stack (also known as ZStack) is the third and final kind of stack and it lets you stack elements in layers on top of and below each other. You can use Layered Stack to create backgrounds and overlays.

Just like Vertical Stack and Horizontal Stack, Layered Stack has an alignment option which controls how the elements in the stack are aligned. You can use this option align elements in the center, on the sides, or in the corners.

Here’s an example showing a Layered Stack with a Text element and an Image element:

4. Spacer

Spacer is a design element that you can use with Vertical Stack and Horizontal Stack. When you add Spacer to one of these two stacks, it takes up all of the remaining space.

You can use Spacer to push design elements over to a side of a stack, since the Spacer will occupy all the remaining space left over. If you use two spacers, they will each take half the space.

Here’s an example of a Spacer inside a Vertical Stack, pushing a Text element and an Image element to either side.

Spacers are always invisible. When you add them to your designs, you only see the effect they have on the other design elements in a stack.

5. Text

Text elements are one of the most basic useful elements in SwiftUI. You can use them to display any amount of letters and words. You can also change their fonts, colors, and other typography options.

Here’s an example showing a Text element by itself.

6. Image

Images are the other super useful and basic element in SwiftUI. Images can show any any picture, including transparent .png files or .jpeg and .heic images.

Here’s an example showing an Image element:

7. SF Symbol

SF Symbols are icons from Apple’s built-in icon library for iOS. You can select from a wide of built-in icons that were designed by Apple to look great next to Text elements, on top of Image elements, and in other common design layouts.

You can change the color, size, and thickness of an SF Symbols icon.

Here’s an example showing an SF Symbol by itself:

One quirk about SF Symbols: You set the size of an SF Symbol by specifying a font size. This is because SF Symbols were tailor-made to pair well next to Text elements. A Text element and an SF Symbol element will look best next to each other if both have the same font size. SwiftUI will even make sure they are aligned properly.

8. Rectangle

Rectangle is one of four shape elements that exist in SwiftUI, along with Circle, Rounded Rectangle, and Capsule. Rectangle is simply a rectangle. You can change it’s color, border, and size.

Rectangles can be placed into stacks, used as backgrounds, or used any other way you can imagine.

Here’s an example of a Rectangle:

One quirk to know: all shapes in SwiftUI expand to fill the stack they are in by default. So, if you want to have your shape stay under a certain size, you have to set that size on the element.

9. Circle

Circle is simply another shape element similar to Rectangle.

Here is an example of a Circle:

10. Rounded Rectangle

Rounded Rectangle is just like Rectangle, with the only difference being it has a built-on option for changing the corner radius. You can also select a corner radius style, choosing between a standard corner radius or the Apple-specific “squircle” style that offers a smoother rounding.

Here’s an example of a Rounded Rectangle:

11. Capsule

Capsule is another SwiftUI shape element that is basically a convenient shortcut. Capsule is just like Rounded Rectangle, but it automatically uses a perfectly-rounded corner radius.

So if you want to do a rounded rectangle that had perfectly round radius on the sides (left and right, or top and bottom) you can use Capsule.

Here’s an example of a Capsule:

12. Divider

Divider is an element that acts as a divider line in any of your stacks. You can simply add a Divider to your Vertical Stack or Horizontal Stack and it will add a faint, Apple-designed divider line.

Divider is super easy to use and adds an elegant line to your design.

Here is an example of a Divider in a Vertical Stack:

13. Scrolling Container

Scrolling Container is one of the more advanced elements. You can add any oversized, really long Vertical Stack or Horizontal Stack into a Scroll Container to make it scroll.

You can also choose whether to hide or show the scroll bar.

Here is an example of a Scrolling Container with a very long, oversized Vertical Stack.

14. Blur

Blur is an element similar to Rectangle. When you design with a Blur element, the element will blur any elements behind it. You can use Blurs in your designs to make elements easier to see over other elements.

Here is an example of a Blur over an Image:

15. Gradient

Gradient is an element similar to Rectangle. When you design with a Gradient element, you can choose between three types of gradients: Linear, Radial, and Angular.

With each gradient type, you can choose the colors you want and the direction you want the gradient to go in.

Here is an example of a Gradient with a Linear gradient style:

16. Map

Map adds a MapKit map to your design. When you design with Map, you can search with Apple Maps for a place to center your map with. You can also search for places to add as pins, and customize the pin color.

Note: Map is available for in the upgraded version of DetailsPro. The free version of DetailsPro can display Map elements, but doesn’t allow editing them.

Now you’re ready to design!

This is only the beginning! Now that you’ve seen the basic elements, you’re ready to put these elements together to create your very own SwiftUI designs. If you want more inspiration, take a look at the inspiration section of our blog or at the community designs made by other DetailsPro designers!

Elements That Color Together Stay Together

A beautiful, compact stack of elements about an upcoming Apple event. Elements you can interact with all colored blue. This is a perhaps a great example of how you can group together elements in a design that have the same possibilities. “Add to your calendar” and the email icon can both be tapped and so they share the same color. This design might have worked if they were different colors, but making them both blue makes it easier to apply what we learn about one element to the other elements, all with a quick glance.

Gravity

Files on iOS 15 presents pictures within a folder in an airy and inviting grid. You can see here that two alignment styles are used: bottom alignment for the thumbnails and top baseline alignment for the names. With bottom-aligned thumbnails, each picture feels like a work of art that’s real and sitting on a shelf. Almost like gravity brought each thumbnail down. Text, on the other hand, keeps the top baseline alignment (“baseline” here refers to the term baseline used in typography) so that each filename starts at the same height, no matter how many lines it needs. This makes it easier to scan filenames while looking from one side of the screen to the other. This is a great example of how you can use alignment styles in your designs to emphasize parts of your content and make collections easier to browse.

What You See Is What You Are Looking For

Sharing to Instagram presents a charming design with miniature screens that resemble and preview each choice. These previews feel light and useful, especially if you are already imagining how you want your story or post to look. This makes the long distance to travel from Share Sheet to Instagram feel like a connection that is intelligent, well-made, and reliable. It’s also appropriately visual for an app that is itself so built on visuals. Perhaps, even, this helps remind of you of all the different ways you can share an image on Instagram.

A Harmony of Light Text and Color

Another example of light text looking amazing over a colorful image. There is something about this pairing that feels like it wouldn’t work on paper, but in reality, truly helps draw you in and see both the message and the imagery clearly. If there is a part of your design that you want to make with this bold, attention-grabbing feeling, try starting with a colorful gradient or an image that lets light text stay readable.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

Apple introduced SF Symbols at WWDC 2019, making Apple-designed iconography available for designers and developers that was easy to use, included in the iOS SDK, and designed to integrate seamlessly with Apple’s current system font San Francisco.

How to find the SF Symbols browser in DetailsPro

1. Launch the DetailsPro app on your iPhone or iPad.
2. Tap on SF Symbols in the main navigation.

Not only can you browse through the entire collection of SF Symbols, but you can also explore SF Symbols by category or search them by name.

How to view SF Symbols by category

1. Launch the DetailsPro app on your iPhone or iPad.
2. Tap on SF Symbols in the main navigation.
3. Tap on the list icon next to “All”.
4. Tap on any category to see its icons.

How to search SF Symbols by name

1. Tap on the search field
2. Type in a partial name like “heart”, “delete”, or “iPhone”

Tip: You can also view more SF Symbols on screen at a time by hiding the sidebar in the DetailsPro app.

How to browse SF Symbols on a Mac

You can use these same steps on the DetailsPro Mac app to browse SF Symbols, but if you’re on a Mac, the best way to browse SF Symbols are with Apple’s own SF Symbols Viewer which can be downloaded from their SF Symbols Apple Developer page. With this app, you can make custom collections, learn about the backwards compatibility of each icon, and more.

What do you think?

Do you search for SF Symbols often? Does being able to browse through the vast library of icons on-the-go help in your workflow? We’d love to hear from you!

Here’s a simple example. Let’s say you are designing something with:

1. One image
2. One SF Symbol over that image

Let’s say it’s supposed to look like this:

The Layered Stack Way

Your first option would be making this design with a Layered Stack. Here are all the steps:

1. Add an Image
2. Add a Frame modifier
3. Add a new Layered Stack with that image
4. Add an SF Symbol
5. Select the Layered Stack and change the alignment

You should end up with something that looks like this:

Layered Stack is perfect for layered elements like this (hence, the name 😉) and can handle designs, from the simple to the complex, with ease.

When to Use Layered Stack

We recommend using Layered Stack whenever you have a clean slate and know from the beginning that you want a design to be layered. Whether at the top of your design or somewhere deeper down, Layered Stack is great for the job.

When Not to Use Layered Stack

The only time we don’t recommend using Layered Stack is if you already have a rather complex design in front of you. If you have already done a lot of work and realize that you need to add layering to your design late in the game, we recommend using the second way we’re about to discuss…

The Overlay Way

Your second option is making this design using the Overlay modifier. Here are all the steps:

1. Add an Image
2. Add a Frame modifier
3. Add an Overlay modifier
4. Delete the placeholder “Overlay” Text inside the Overlay
5. Add an SF Symbol inside the Overlay
6. Select the Image’s Overlay modifier and change the alignment

You should end up with something that looks like this:

Overlay is a perfect, lean option for quickly adding layering over any of your design elements.

When To Use Overlay

We recommend using Overlay anytime your design feels like a certain design element is the “base” (here, the image) and the layered design elements really feel like they are secondary to that “base”. An image with action buttons over the image is a perfect example.

When Not to Use Overlay

The only time we don’t recommend using Overlay is when you are starting with a clean slate. Very early on in a design, if you already know that you’d like to make your design layered, it may be better to start with a Layered Stack. This way, you don’t have to worry too much about which element is the “base”.

Make Sure You Are Up-to-Date

The behavior of ZStack seems to have changed recently, in a really positive way, becoming easier to use and making these options possible. If you’re on an old version of iOS, you may not be seeing this behavior. Make sure you are on the latest version of iOS/iPadOS/macOS to enjoy these benefits. Doesn’t hurt to update to the latest version of DetailsPro while you’re at it!

Conclusion

SwiftUI is great like that, giving us multiple ways that are best suited to the many different situations that arise when designing.

What does DetailsPro support?

1. Exporting designs to Swift Playgrounds.
2. Creating new Swift Playgrounds 4 apps right from DetailsPro, which open directly in Swift Playgrounds.
3. Exporting to the classic standalone Swift Playgrounds format or the new Swift Playgrounds 4 app format.
4. Exporting multiple designs at once by exporting an entire folder.
5. Exporting all SwiftUI design elements, modifiers, SF Symbols, and image assets.

How does DetailsPro make a good companion for Swift Playgrounds?

DetailsPro is your design companion for creating apps on the iPad. Whether you’re a designer focused on elevating the visual design of your company’s app, or a developer mocking up the next screen you’re about to build, you can use DetailsPro to create SwiftUI designs quickly and easily. The DetailsPro app was made for the single purpose of helping to complete visual design work for iOS and gives you an environment and UI that’s focused on that task. While you can make mockups and prototypes in Swift Playgrounds, the process isn’t as easy or as focused as the experience in DetailsPro.

How to export a design to Swift Playgrounds

Exporting a design from the DetailsPro app is easy and quick.

1. Open your design file.
2. Tap on the “…” More menu.
3. Tap Export as Swift Playground… if you want a classic, standalone Swift Playground.
4. Tap Export as Swift Playgrounds App… if you want a new Swift Playgrounds 4 format app (This is the right starting point if you want to eventually submit your app to the App Store).

Here’s how a design looks when you’re working on it in the DetailsPro app:

Here’s how that same design looks after it’s been exported to Swift Playgrounds:

DetailsPro and Swift Playgrounds make app design a lot faster and easier

Before the DetailsPro app was released, to do any sort of SwiftUI development you had to open Xcode, go through all of the dialogs, and create some sort of project each time.

Now you can open the DetailsPro app and be working on a new design in less than a few seconds. No project setups, no configuration, no coding knowledge necessary.

And now all of this has been pushed further with the release of Swift Playgrounds 4. Developers can make real apps and publish them to the App Store and, since designs made in DetailsPro are already made as native SwiftUI, exporting designs to Swift Playgrounds is accurate, easy, and instant.

The DetailsPro app can take any of your designs and export them as a Swift Playgrounds app because all designs made in DetailsPro are already native SwiftUI.

Requirements

Make sure your iPad is upgraded to iOS 15.2 or newer and you have DetailsPro 3.19.0 or newer.

Download Swift Playgrounds 4 here.
Download DetailsPro here.

This feature requires the upgraded version of DetailsPro. If you haven’t upgraded yet, this is a great time to do so!

DetailsPro’s support for designing with Apple Maps is extensive—there’s support for Dark Mode, adding pins to the maps, finely adjusting the map’s frame in your design, and searching for places to quickly and easily center the map on your point of interest!

Download the latest DetailsPro update and upgrade to design with Maps.

Beautiful Displays Can Be Buttons Too

Home on iOS 15 makes a beautiful display of a lot of information. By simply lighting up the rounded rectangle and the visual elements representing one of your Home scenes, it tells you that the scene is active and the others are not. Home uses these visual elements as buttons too, where simply tapping takes you to more about that home device. Key takeaways here I believe are that we shouldn’t be afraid of loading up visual elements in our designs with multiple meanings and multiple uses—it may be true that the people using our designs come to them with multiple reasons depending on the time of day or what they were doing just before, and our designs can keep that in mind.

More Beauty in a Smaller Space

Pictures stack together in Messages on macOS Monterey. For me, Apple Design strikes its most triumphant notes when its interfaces bring in elements of the real world. It may seem something so simple, but this new way of showing pictures is beautiful while also being better in many ways: a set of pictures now takes up just one spot in the conversation instead of taking up a long scroll; you can quickly tap and flick through the set of pictures without losing your spot in the conversation; did I mention it’s beautiful?

Between Elements, Design with Difference

Screenshots and Markup on iOS 15. Along the top, visual elements for each button are all in the same light color that has great contrast on the darker, blurred background. This design shows us with the way the markup icon is currently highlighted with a white circle background that we can use very simple, almost tiny differences to communicate in our designs. For example, nowhere on the screen does it currently say “Markup” or “Markup Mode”; it’s just the pen having a white circle highlight behind it. Also noteworthy that there is a delete button right there at the top with all of the other actions. If deleting was a common action that people wanted to take here, it makes sense to include that right away at the same level, instead of after a “…” tap, for example.

Less is More

On the topic of simplicity and tiny differences, here’s another example. The current speaker is simply seen a little bigger with a white border and a shadow. There’s no text saying “Current Speaker” or “Speaking”.

Announcements in Color Stay Together

Colorful headlines on the page for iPad mini. This is a great example of how you can use color to add more feeling to the writing in your designs. On the white background, amidst the smaller primary text, the colored icon-and-headline pairs stand out.

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

Safari Down South

Safari on iOS 15 brings the bar to the bottom. This design beautifully lifts the address bar above the panel, a great example of how to use shadow effectively. And still, the buttons in a row below remain a cool, thin blue. This design moves ahead and answers a question that might pop up more and more going forward: Should the iPhone have buttons lower on the phone? Have too many buttons become too hard to reach? Safari’s compact presentation here bodes well for designs in the future moving more of their interactions down to the bottom.

See Where You Are

The Downloads panel presents with beautiful transparency on the page for iPad mini. Transparency like this shines when displaying over photography, graphics, and other colors. When an area of your design may include variations of color, photography, or visuals people often customize, try using blur, lightness, and transparency to help your design blend in over that potentially vivid base. The text, buttons, and separators here look beautiful here while remaining perfectly readable.

All Choices, All the Time

A color picker on the page for HomePod mini displays every option all at once. Often, designs will show the currently selected choice by itself and wait for a tap or a click to reveal the other choices. This is a great example of a handful of choices that make sense being shown all at once, since they are easy to display in a compact way and together form a sort of overview that itself provides information. If part of your design asks for a decision to be made, and the choices are less than a handful deep, consider presentations where all options are visible at once.

Primary and Secondary, the Perfect Pair

Paragraphs of text become beautiful on the page for AirPods. In the Apple Human Interface Guidelines, there are two “semantic” (or meaningful) colors that are named Primary and Secondary. When a device is in light mode, Primary shows in black and Secondary shows in gray. When a device is in Dark Mode, Primary shows as white and Secondary still as a gray, although a subtly different one. You can use the combination of Primary and Secondary to help draw people in, to communicate which information is more vital than the other, and to help make designs glanceable and beautiful. And, I don’t think we can leave this example without enjoying the colorful image on the right—yet another example of the effectiveness and lasting, simple beauty of white text on color photos. Maybe one day I’ll send you a newsletter that doesn’t call this out, but today isn’t that day.

Primary is the Pro and the Max

Building on this conversation about Primary and Secondary, here is a great example of Primary working wonders on the page for the new MacBook Pro. There are beautiful splashes of color in the background, large graphical elements for each chip, and colorful gradients in the text below. And, even with all this color and form around, standing out simply and easily are the two lines of text set in the Primary color (which here would be white). This is perhaps a great example that Primary is the best choice for text and symbol elements that are supposed to stand out, even when you think you might need more color and flash.

Start Up | A song made from 45 years of Apple sounds

If you enjoyed reading this issue of UI Designer Weekly, consider signing up for the weekly email. If you have any feedback, we’d love to hear from you on our contact page.

You can get the latest version of DetailsPro for free on the App Store and design forever with up to 5 files at no cost.

Inline editing
You can design refined, beautiful SwiftUI interfaces with our all-new editing UI that maximizes interface control and context. Expand and edit multiple SwiftUI modifiers simultaneously. Browse through SF Symbols, colors from the Human Interface Guidelines, and more all while viewing your work in-progress.

New visuals for SwiftUI concepts
Use SwiftUI to design to your fullest potential with helpful and accessible labeling and visuals we’ve added throughout. Our new visuals include, for example, beautiful and highly-communicative icons for concepts like Alignment. We’re really excited to be addressing universal needs like these, for those who prefer images in their tools. This is also another step we’re taking to make DetailsPro more global and less reliant on English language reading.

Faster Live Preview
We’ve refined the animation timing across the board from our design editing interface to our live preview—everything is snappier and more responsiveness to keep up with your design process.

New Gradient Picker
You can skip the difficult process of making good gradients—no more hunting around for the right colors or trying to guess which direction the gradient would look best in. Our new gradient picker introduces visual previews in every direction that you can preview and select from live as you edit your colors. With just a tap, you can explore gradient directions and find which one feels best in less time than ever.

New Font Picker
Designing with typography is a sacred experience. Okay, maybe some designers see it a little more casually and pragmatically than that, but for others, this is where all the fun begins.

Our subtly updated picker has simplified the experience and kept our philosophy in tact: it’s as easy as it could be for you to select a beautiful typography style from the Apple Human Interface Guidelines. Explore different font families and weights and instantly see your options update live. Finally, you can select a custom size if you are looking for something that isn’t included in the system styles. We have a lot of fun spending hours obsessing over the details of just this font picker—we wouldn’t be a niche Apple design tool if we didn’t. Now, we can’t wait to spend more time hearing your feedback and improving this super-high traffic part of our design interface.

New Color Picker
Just like our new font picker, our new-and-improved color picker sharpens the same focus on the needs of the Apple designer. You can now quickly and seamlessly design across the semantic colors provided by the Apple Human Interface Guidelines and custom colors you’ve added in yourself with fewer taps and in a more compact, visual UI.

Opacity Shortcuts
You can zoom any design element between the most commonly-used opacity levels in interface design with our quick-access shortcuts for opacity. We love the window-shopping aspects of the design process and this fits right in to the speed we want to give you with every update.

Better SF Symbol Search
You can find the perfect SF Symbol now with our improved search algorithm and the improved compact UI for browsing the categories and testing the image scales available.

… this is just the beginning!
This update was a huge update for us as we refined the entire design experience and introduced new, niche detail for the Apple designer throughout even our most boring corners (we still love you, opacity modifier). This is just the beginning for our summer releases. We are hard at work on design versions, folders and tags, reusable designs, copy and paste, and more.

Thank you for designing with DetailsPro and always sending us your feedback! If you’d like to stay up-to-date on everything DetailsPro, follow us on Twitter @detailsproapp.

1. New design for pictures in messages

Apple debuted a brand-new design that kicks in when you send multiple photos in Messages. If you send a few, you see them tossed together in an airy stack (pictured above) and if you send more than a few, you see them collected together in a neat stack. This vibrant new design also works with an interactive swiping gesture that lets you flick through the different images easily. Bonus: sending a bunch of photos no longer takes up a ton of space in the conversation.

2. An amazing look for new Photos ”Memory Mixes”

Apple shared a new feature for Photos called ”Memory Mixes” that mixes music you’ve been listening to with photos that you’ve taken. You can take a look back at a weekend you spent listening to the Bee Gees, or a birthday night you spent playing Polo & Pan. This design is definitely one of the more sophisticated and elegant ones that we’ve seen, with it’s parallax-like sliding effects and neatly overlaid text.

3. An all-new Safari toolbar design

Apple debuted an exciting and polarizing new look for Safari: the address bar has moved entirely to the bottom and now floats over the content of the page. We are loving this new look because it makes the address bar so much easier to reach as opposed to being all the way up at the top.

4. A new note-taking UI called ”Quick Note”

Apple debuted a new utility that looks great on the iPad called Quick Note, and it works by interacting with the bottom right screen edge of your device to pull up a new blank note. What’s more, Quick Note can store links, images, and even knows the context of what app you were in, whether it’s a page in Safari or an item in a 3rd party app. With that context, Quick Note can save the place you were in an let you come back. This is another light and feathery interface that features a compact toolbar, extremely high levels of interactivity, and beautiful Apple clarity.

5. New Multitasking Affordances (AKA Visual Hints)

Apple debuted a pretty genius, simple improvement to the iPadOS Multitasking system. Now you’ll see a subtle “…” at the top of each window. Simply tap that icon and you’ll be greeted by a super simple switcher that helps you do multitasking. Want to take that app in Split Screen? There’s an icon for that. Want to take a Split Screen app back into fullscreen? There’s an icon for that too. These new buttons make multitasking way easier and more obvious by being always-visible.

6. A new notifications design called “Notification Summary”

Apple also showed off a new way you can manage growing lists of notifications. You can now opt in to receiving a notification summary (pictured above) that collects a bunch of your notifications together into what looks like a miniature newspaper! This is a classic Apple design that organizes information in a way that’s easy to scan at a glance and jump into for more detail.

What did you think?

We’re just starting to explore the new designs presented at WWDC 2021 and can’t wait to get more experience with the new and updated operating systems. What was your favorite design from WWDC 2021? Let us know @detailsproapp on Twitter or on our contact page!

1. Widgets

Widgets were easily the biggest feature of iOS 14 with their inventive spirit and iconic style. They brought creative, glanceable windows of information to our home screens anywhere we wanted them. 16pt padding is 🔥.

Get the SwiftUI design files:

Download Calendar Widget Small

Download Music Widget Small

2. Widget Gallery

The Widget Gallery was perhaps the most beautiful piece of the new additions—easy, beautiful browsing supported by clear typography, dynamic placeholders, and the 3D live tilting when you drilled in. Absolutely hit it out of the park.

Get the SwiftUI design file:

Download WWDC 20’: Widget Gallery

2. Compact Calls

Compact calls were another crowd favorite. These were more about what wasn’t there than what was. This new smaller form replaced what used to be a full screen cover with a fresh, familiar banner.

Get the SwiftUI design file:

Download WWDC 20’: Compact Calls

3. App Library

App Library was another entry in the Home Screen Improvements category. This design stayed true to the history of the Home Screen with simple labels and familiar shapes that showed design discipline.

Get the SwiftUI design file:

Download WWDC 20’: App Library

4. Control Center

Along with Big Sur, Control Center was introduced—an exciting new design for macOS. This design pushed on being compact, transparent, and useful in small spaces.

Get the SwiftUI design file:

Download WWDC 20’: Control Center

5. Messages

Messages added fun features like pinned conversations, preview bubbles, and group photos. The new designs made the app feel brighter and livelier than before.

Get the SwiftUI design file:

Check back Thursday, June 3rd for the SwiftUI design files for this design.

6. Compact Siri

Siri and Shortcuts opened up their world to more compact UI. From lists to prompts and images to notifications, there seems to be no shortage of work and thoughtful design that went into this design evolution.

Get the SwiftUI design file:

Check back Thursday, June 3rd for the SwiftUI design files for this design.

7. Maps

Maps is one of our favorite places to learn Apple Design. High complexity and a high bar seem to keep the design team creative and sharp. The refinements in iOS 14 were no exception.

Get the SwiftUI design file:

Check back Thursday, June 3rd for the SwiftUI design files for this design.

9. Face Sharing

A beautifully simple and compact design that took something rather complicated and made it feel like it must have even been easy to make—which it surely wasn’t. We loved the preview in iMessage and the font pairing between “Add Watch Face” and “Apple Watch”.

Get the SwiftUI design file:

Check back Thursday, June 3rd for the SwiftUI design files for this design.

10. Safari Tabs

Safari took a great big step forward in design with the rest of macOS Big Sur, but this feature was a total surprise: elegant previews of other websites as you hover between your tabs.

Get the SwiftUI design file:

Check back Thursday, June 3rd for the SwiftUI design files for this design.

You can now export any design and open it instantly in Swift Playgrounds. See the impact of Swift code you’re working on with a beautiful SwiftUI preview; study the basics by learning from your own designs; prepare educational playgrounds with beautiful SwiftUI views built right in—all with designs made moments earlier in DetailsPro.

Day-in and day-out, we think about everyone from the curious kid working on their first app to the Apple designer working on the future of iOS. Thanks to SwiftUI, there is a new medium to create beautiful designs with that reveals itself to you as you explore.

We believe there is great promise here. Thanks to SwiftUI, a stunning design can be made with just a stack, a couple lines of text, and an image. We fit into this picture by giving designers, developers, and curious creatives around the world an easy way to get started.

To that end, we are always going to work hard to support the diversity of workflows that people have. From the beginning, we’ve been focused on supporting many ways to take your work with you out of DetailsPro.

You can already export designs as JPEGs and transparent PNGs to use in presentations, documents, and other design tools like Figma, Sketch, and Adobe XD. You can also export designs as Swift files ready for import into Xcode. We’re proud to add Swift Playgrounds as another option today and are eagerly looking forward to what comes in the future.

Exporting Swift Playgrounds requires DetailsPro 2.12.1 (available on the App Store). To export a Swift Playground, open a design, tap •••, and tap Export as SwiftUI Playground.

Hello, Alex! Thank you for speaking with us and being our first designer and developer on In Conversation. How’s your week been?

Hey guys. thanks for having me! My weeks been a bit of a whirlwind with the surprise App of the Day feature, but certainly very fun.

Let’s take it all the way back to the beginning. What was your first experience with an Apple product?

My very first time getting to experience something made by Apple was the 3rd generation iPod nano (the square-ish one). I had a wander around the Apple Store on a shopping trip and played with a bunch of devices. Then, just as we were about to head home, my dad got the Product Red Nano—I was very jealous. When I eventually got to play with it I was blown away by just how great it sounded having only experienced more budget sound before that. I’d watch video podcasts and even full movies on it despite being sat in-front of a perfectly fine TV. Safe to say there was no going back from this point and my love for Apple’s tech started to brew.

When you think back, what stands out to you about the designs of that time?

In terms of the hardware I think we were in a bit of a strange period. There were still lots of metal backs on devices (with scratches galore!) paired with funky colours on the front. I remember how much my iPod stood out against the chunky plastic design of my HP laptop. Software for me back then was basically games and music, so I didn’t get exposed too much to the design trends of the time—it was quite a few years later before I started to really appreciate what I was looking at. One thing that really stood out was that we didn’t seem to be fully set on going skeuomorphic, there were the odd bits of UI here and there that just ignored the concept and would fit right in with today’s trends.

I have to say I think I kind of miss how “friendly” things felt in the hand. Everything was rounded and sorta chunky, which I don’t feel we get from modern devices.

Zooming back to today, what your thoughts about the designs in modern day?

Modern apps are a truly fascinating area of design to me. I’m someone who tends to lean towards the standard system design, which tend to be quite flat with rounded edges and the odd splash of color, but I can’t ignore how wonderful some apps are that mostly ignore convention. Headspace for example looks nothing like an app Apple would ship on the system, yet it fits right in with clever use of familiar navigation. I think there’s room for more creativity in apps, feeling like we’re maybe heading towards a ceiling with flat design.

After the Big Sur release and the “return of fun in visual design” began, I was hoping to see more apps to let this look start to bleed into their UI, not just stopping at the icon.

Your app Coffee Book has a vibrant, simple design that is easy to admire. Can you talk to us a little bit about your process?

My process for most of my apps starts with something that bothers me—Coffee Book was because I had a coffee book and I kept spilling coffee on it.

This is a particularly bad example of a page—some had holes in them were I’d tear off the stained bit. Normally I’d start to grab a sketchbook and think about what I might make to fix the problem, but this time I just went straight to Xcode—my notebook in front of me covered in coffee was essentially my research.

I took the fields of data I’d been noting down, thought about what I learned from each one and what more I could have written down and then quite quickly threw together a prototype for the espresso brew form. This very first prototype is actually what’s on the App Store now. Thanks to following Apple form design (ish) everything was quite straight forward. My design approach with this app was essentially “see what Apple does, if they don’t do it, find something thats close and mess with it”.

After building a prototype I had to consider that more people than just me will be using this thing, hopefully. I only make espresso these days so the app was designed around that but I knew it wouldn’t be enough for everyone. Realising that I’d need to add all the types that are currently in the app, I asked around how people make their brews better. The important part for me was understanding what in particular they’d look at to improve, wether it was temperature, grind, yield or anything else, rather than just asking “what do you write down”. After adding all the fields people mentioned and some fairly basic design of the selection screens, I decided to send out a TestFlight. At this point the app was not too-dissimilar to now, with the core design being set at the start.

I found that often people get comfortable with certain parameters and only tweak one or two things to get their perfect brew—this revealed a big flaw in my app, that I required every single field to be filled out. I should have probably drawn this same conclusion from the earlier research, but I ended up making a very strict app. Removing all of the validation (nearly!) on the forms meant you could store as little or as much data as you like, which helped me make the app accessible to beginners and pros.

Was your process any different with your new app, Pass Book?

A couple differences really changed how pass book was designed. First, I used SwiftUI, which meant I could iterate as fast as I liked with instant canvas reloads, turning my IDE into a sketchbook. Second, I said that I wasn’t allowed to just copy Apple. It’s been quite a while since I just did something without any inspiration at all, so I had absolutely no idea how this would turn out.

The concept itself was very simple with little wiggle room. I had a set of data to capture and I had a list of codes to show after the user entered data. This helped ground the end result and remove some of that blank page anxiety. I soon found that the end product was taking a very different direction to the apps I’d built before it.

Something interesting I tried to do was make the app feel fun and welcoming without coming across as a toy to serious users. Everything is as rounded as I could get away with, pushing the weights up of the rounded fonts to the point where they’re about to look like bubble writing. Things were spaced out a lot more than usual, trying to give the user breathing room instead of huge chunks of options. Whilst this does compromise the experience on smaller devices, I think its worth it. A good example of this is in the form where I separated each individual field into its own section.

I’m quite happy with how it turned out, with the learnings from this app certainly affecting the next couple updates of Coffee Book.

What are you most looking forward to in the field of human-computer interaction and user interface design?

I hinted on it a little earlier, but when it comes to interface design I’m excited to see what comes next with the return of fun. I hope that apps are going to start to diverge a bit when it comes to their general design, creating more innovative experiences.

As for interaction—I think the answer is AR. I’ve of course played various AR games and tried out some experiences like IKEA Place, but I am sure there’s more to do here. I imagine an experience where we just touch things in the air that have been super-imposed onto out vision (or glasses), giving us a whole new challenge of feedback in a world without physical touch.

To shadow, or not to shadow? To Corner Radius, or not to Corner Radius?

I absolutely love a good shadow. If theres enough information on a page to warrant a stronger visual hierarchy, get stuff elevated. Grey shadows with a nice big blur can make for a lovely looking app, with the advantage of colouring the shadow if you want something really vibrant. As for corner radius I think always yes—as long as you can take advantage of a continuous radius. Once you’ve seen a proper squircle, you can’t go back.

Alex Logan is the developer behind Pass Book, Coffee Book, and Snippit. We were able to interview Alex to learn more about his design practice and creative process.

For more from Alex, visit his apps on the App Store and follow him on Twitter.

As of today, you can add images from Unsplash directly to your SwiftUI designs, all from within DetailsPro on iPhone, iPad, and Mac.

We’ve added a new option you’ll find when choosing to add a new photo, Choose from Unsplash. Along with Choose from Photos and Choose from Files (we are very proficient in naming), this new option fits in nicely with what we currently have.

Our intention is for DetailsPro to have absolutely off-the-charts support for photos and the way that designers use them. So, this is a great time for a quick refresher on how DetailsPro handles images. When a designer adds an image, the source file for that image is saved in DetailsPro and made available to multiple designs at once.

We know from experience that most designers end up working on projects for a while and you’re basically reaching for the same or similar assets over that period of time. So we made DetailsPro specifically for this pattern to save designers from having to import the same images over and over and over. Leave the folder of assets behind after you’ve imported the images into DetailsPro just once.

Photo credit: Samuel Ferrara.

Fixes and improvements

• Convert to Stack now keeps any modifiers that were on the original stack
• Rotation Effect allows easy increment by 15° or 45°
• iPhone: Made color editing more compact

We are hearing a lot that many of you are primarily designing from your iPhones while on-the-go and that has us very excited. Our goal has been, from the beginning, to make designing beautiful interfaces accessible to as many people as possible. So we are going to be making sure as time goes on that every important upgrade to DetailsPro has a first-class implementation on the compact size as well as the larger sizes of iPad and the Mac.

We are working on DetailsPro all the time to make it easier for you to design your greatest ideas in less time than ever.

When Apple introduced the Apple Watch in 2014, they led with a remarkable set of videos titled Rise, Up, and Us. Each showed the watch in unique scenarios. Rise can be watched here while it’s still available.

These videos introduced a new product and a new space for interaction to consumers—the Apple Watch display.

Incredible work had been done by Apple Design to make it to this point. Imaginative, creative, and ground-breaking is how I would describe the cumulative effort that led to the beautiful interfaces shown on the watch. And so, with the public release, the baton would be passed to new designers to create new experiences.

This is where it’s vital that our tools meet the moment. The easier it would be for designers to design for the Apple Watch, the better and greater quantity of designs they would make. That’s what I believe, anyway.

DetailsPro makes this process easy today and will continue to going forward with our new feature out today: Size Templates. Size Templates help designers quickly and easily target the precisely correct size for the devices they design for.

This update contains widget sizes (Small, Medium, and Large widgets), iPhone sizes, and iPad sizes. Apple Watch sizes and Mac sizes will be coming in a future update.

DetailsPro takes care of knowing the exact point dimensions of each device and will even change the corner radius of the canvas to match that of the device. If a designer is working on something for iPhone 12, they will see not only the correct size but also the correct device corner radius. All they have to do is tap iPhone 12 and select between Portrait and Landscape. It’s that easy.

We also extend beyond device templates into other operating system-specific templates that we will continue to expand as these products evolve. Today, DetailsPro already includes support for the new widgets that debuted with iOS 14.

DetailsPro is a focused design product built exclusively for Apple platforms. We can focus deeply on what it means to design for these platforms. We can build features that designers would never see anywhere else because nowhere else has this focus.

We’ll be keeping these templates up-to-date with the latest devices always because this is what DetailsPro is all about—helping Apple platform designers do their work.

DetailsPro can help you design in both modes easier than ever, in two ways.

First, if you simply put your device into Dark Mode, your designs will show in true Dark Mode. This happens automatically with no work needed. How does this happen? Well, since you are designing with real SwiftUI, everything is reflecting true, natural SwiftUI states. Text changes color, system colors like blue and red show their true dark mode variants, and backgrounds change too.

Second, you can switch between Light mode and Dark Mode quickly and easily with the new moon icon released today in DetailsPro 1.1.

Turns out, you won’t need to manually copy changes over from your Light mode variant to your Dark Mode variant anymore.

You also won’t need to worry about them falling out sync. In DetailsPro, your Light mode design and your Dark Mode design are the same design.

Update to the latest version of DetailsPro and let us know what you think!

Whether you’re planning on grabbing a new iPhone or just thinking back to the keynote and all the beautiful transitions, camera work, and design, I hope there was something out there this week that inspired you.

Inspiring in Color and Space

Beautiful, colored section headers and nice padding in This is iPhone 12 Pro from Apple. While marketing content doesn’t map one-to-one to interfaces, there’s still some connection and something to appreciate within the design. Did you notice the reflection?

Always a Toggle Away

Reminders in iOS 14 presents a toggle to enable and expand several of the options on each reminder. You may normally expect to see a placeholder value for each of these options. The toggles feel fresh as they save space, keep many parts of the interface hidden until they are needed, and clearly communicate when something isn’t being used at all: for example, seeing “Date” and then an off toggle. This is also a great example of useful, inline UI. The location row surfaces a few common destinations and then has a “Custom” option which presents a whole search view. Surfacing those common few destinations first saves having to push another interface on top of this every time you want to choose a destination.

Time to Filter Friendly

An inspiring design for filters previewed on the page for Fitness+. Each aspect has been given a special appearance adapted for its purpose. A face beside each name, a clock for each duration. These are small touches that elevate the design.

Spaced Out and Clear to See

Elements placed in different corners in this in-class view for Fitness+. Here, they bring balance. This is an example of both keeping related information close together and also of creating anchor points and meaningful locations for the different elements in a design. (Think about where screenshots float on-screen after they are taken. The bottom right corner on macOS, the bottom left corner on iOS. Oddly enough, different corners.)

The New, Now

This creative concept by Adam Varga demonstrates what an interface for app selection might look like in several dimensions. Take a look for yourself, the animation may inspire you.

Taking It Lightly

One more from the page for Fitness+. Light text on a light background, used in a large hero spot to make up for the lower accessibility.

Spatial Memory: Why It Matters for UX Design

Read on Nielsen Norman Group

My name is Sahand and I’m a UI designer that was hoping to find something like this. I’m always finding interesting new designs in newly-released products that keep me up-to-date on the latest interface ideas.

My hope is to collect these beautiful, informative, and thought-provoking examples of design, no matter how subtle, and share them with you so they help you see something new and give you ideas you can mix into your work.

Happy to have you here!

P.S. If you have any feedback or requests, I’d love to hear from you on Twitter!

Cards, Back and Better Than Ever

A beautiful rendition of cards on the page for One. Centered text, clean pairing of the primary headline with secondary text below. Each iPhone looks, if I may say, cozy under its overlay. This is perhaps an example that shows you can use centered text to give cards identity and a little more “theater”, so the cards feel like big, bold, exciting things. (If you were displaying news articles, for example, standard left or right alignment specific to the reader’s language would probably be more appropriate, whereas here each card is getting significant weight and presence because it is a list that’s only ever going to have six cards that don’t change.)

Quick Actions, Elevated

Notes in iOS 14 presents buttons, including Delete, in a compact row at the top of the sheet. You may normally expect to find Delete at the bottom. If more often than not, a note-taker opens this sheet looking for Delete, than this is way better than having that button at the bottom! It feels like a fresh way to present buttons that users use often that might have otherwise blended in.

Both Playful Design and Keep-Your-Title-Text-Close Masterclass

A big popcorn emoji and the idea of using big emojis to represent group conversations coming in new UI in macOS Big Sur. Note that “Film Club” is set in Regular weight. It’s always a balancing act figuring out when to use Medium or Semibold versus when to stick with Regular. Regular in this case is just fine, isn’t it? Also a reminder that keeping related visual elements close helps a ton.

Making It Easy to Compare

The plans on the page for One hammer home that you can use different axes together to complement and clarify your displayed information. Here, you quickly figure out that the “Premiere” plan has more stuff in it without even reading. The horizontal axis is then used to arrange the plans for comparison. Imagine how much harder these would be to compare if they were stacked vertically. The vertical axis would be overloaded with meaning and you’d have to work harder to see which list was longer.

No-Fuss Text Callouts

There’s just something about light text on beautiful photography, isn’t there?

Aesthetics Taking Instagram Slideshows to New Heights

Read on Vox

We wouldn’t be here if it wasn’t for the nearly one thousand people who helped shape the earliest version of DetailsPro by joining the beta. All of your feedback has been worth gold to us. Truly, maybe more than gold.

As DetailsPro 1.0 is officially available in the App Store for free, the focus of the next six months turns to filling in the gaps that we see across the app and continuing to make life easier for designers.

We are very proud of DetailsPro and the community that has formed around it. We want to make fresh, creative, productive, and enjoyable SwiftUI design an experience that is accessible to anybody who wants to sit down and dream up a wonderful design.

Let us know what you think!