Apple’s WWDC ‘21 presentation provided something for everyone, from screen sharing in FaceTime with SharePlay to improved multitasking on iPadOS 15 with new affordances. Here are the designs that excited us most in no particular order…
1. Photo Collections in Messages This design feels vibrant and pop-out-3D in the best way. You’ve got to see the nice swiping interaction that can be used to flick through these images when they tuck together into a stack.
2. Memory Mixes An ingenious layout makes it possible to slide through different filters and playlists while look at the same image full-bleed.
3. Bottom-Weighted UI in Safari We have been dreaming of interfaces like this for years, and to finally see it live on iOS is a great moment. In Safari, this new bottom bar floats beautifully and provides much easier thumb access. Let us love our big phones, and let our big phones have more of their controls on the bottom.
4. Quick Note Another light and feathery interface that features a compact toolbar, extremely high levels of interactivity, and beautiful Apple clarity.
A new affordance appears at the top of every window, inviting users to discover iPadOS multitasking.We love the animation of your first window sliding over to reveal the rest of the iPad home screen, ready for any app to launch.
5. New iPadOS Multitasking Affordances This year’s update is simply a brilliant update for making iPadOS features discoverable and easier to use. Now, windows all have a “…” at the top that can be tapped to expand out the different multitasking window settings. We think this will make it a lot easier for more folks to use these once-hidden-behind-a-gesture features.
6. Notification Summary A beautiful, newspaper-inspired summary block makes information easy to scan at a glance and jump into for more detail.
Wondering what SwiftUI is? Or how DetailsPro works? Here is an article that will hopefully answer a lot of your questions. I’ve made a list of every SwiftUI design element that DetailsPro offers.
Check out screenshots and short descriptions for the design elements you can mix, match, and stack to make almost any design you’ve ever seen on iOS. Many designs, from the iOS 14 Lock Screen to widgets and Apple Music are all made with combinations of these simple elements.
Let’s start with the coolest elements in SwiftUI… stacks.
Vertical Stack
Vertical Stacks let you put any SwiftUI elements above and below each other.
Horizontal Stack
Horizontal Stacks let you put any SwiftUI elements next to each other.
Layered Stack
Layered Stacks (also known as “ZStacks”) let you put any SwiftUI elements on top of and under each other.
Spacer
Spacers work by taking up extra space in Horizontal or Vertical Stacks, here shown dramatically pushing the text and image to opposite corners of the screen. You can even use multiple spacers to evenly take up space in a stack.
Text
Simply text, editable with fonts, colors, tracking, leading, and more.
Image
Simply images, with content modes like fit and fill for specific presentations in another design element.
SF Symbol
SF Symbols, the same ones made by Apple, editable to match a certain font, font weight, and color.
Rectangle
Simply rectangles, editable with colors, shadows, and more.
Circle
Simply circles, editable with colors, shadows, and more.
Rounded Rectangle
Just like rectangles, but able to have circular or smooth Apple-squircle corners.
Capsule
Just like rounded rectangles, but always sets to have perfectly pill-shaped corner radius.
Divider
A subtle, thin line that makes a great divider in Horizontal and Vertical stacks.
Scrolling Container
Scrolling Containers let you have elements scroll either vertically or horizontally.
Blur
Blurs are the same standard blurs you see throughout iOS and can be edited to be stronger or weaker blurs.
Gradient
Simply gradients, editable with any number of colors and any gradient direction.
And more to come…
I made DetailsPro to make designing beautiful interfaces more accessible to more people around the world. Apple’s framework, SwiftUI, is an intuitive, simple, and powerful framework. With the right access, including the ability to create designs without knowing how to code, I believe more people can create truly beautiful and intelligent designs at work, on personal projects, and as they learn in schools.
With WWDC ’21 coming up, we wanted to take a look back at the best designs that came out of WWDC ’20. There were so many that were worth mentioning. We’ve narrowed it down to the ten we found most exciting. Without further ado, let’s get started…
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 🔥.
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.
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.
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.
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.
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.
We want to make SwiftUI accessible to more people around the world. Our love of design is at the heart of this goal. Today, we are excited to announce a feature that makes DetailsPro even more flexible for the way designers and developers work: SwiftUI Playground export.
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.
Any design made in DetailsPro can be exported to Swift Playgrounds instantly.
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.
Designers can use DetailsPro templates, like the iOS 14 Medium Widget, and export the templates into Swift Playgrounds.
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.
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.
Alex’s app Coffee Book was featured as App of the Day on the App Store.
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.
Alex’s first iPod.
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.
Alex’s iPhone 3G. This phone is probably my all-time favorite as well. It was beautiful and it was my first.
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.
The coffee book, stains front-and-center, that led Alex to develop Coffee Book.
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.
Coffee Book made it easier to craft the perfect brew and quickly found an audience.
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.
Alex’s app Pass Book features a modern design with clean controls and sections.
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.
For more from Alex, visit his apps on the App Store and follow him on Twitter.
Hand-in-hand with great design is great photography and Unsplash is really the place to find great photography.
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.
A new option, Choose from Unsplash, makes it easy to add great photos to your designs.
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.
We found a number of areas where we could make loading, interaction, and animation smoother than before. DetailsPro is a 100% native app written in SwiftUI, optimized for the M1 chip and the latest iPhones and iPads on iOS 14. With this update, we greatly reduced DetailsPro’s memory usage and CPU usage so you should feel the app is snappier and faster than before.
When Steve Jobs showed us how we’d scroll on an iPhone, the crowd laughed and then applauded. Were they laughing because it was funny? Maybe—I bet they were laughing because, like any great joke that hides its simple answer right in front of you, his answer was obvious once we heard it.
Scrolling has existed long before the iPhone. If you check out the 1992 Macintosh Human Interface Guidelines, you’ll even find a great visual explanation attached to original writing about this new feature.
A visual explanation from the 1992 Macintosh Human Interface Guidelines.
The iPhone, in its compact size, especially lends itself to great scrolling. From system UI to apps to website, you truly end up scrolling everywhere all the time. So how come designers don’t have an easy way to include scrolling in their designs?
Traditional design tools have tacked-on scrolling solutions like making really long artboards or using 3rd-party plugins. For DetailsPro, being built entirely on SwiftUI gives us a unique opportunity to make this much easier for designers and, at the same time, much more powerful.
As of today, designs in DetailsPro can take advantage of true iOS scrolling. Using a new element in our element palette—Scroll Container—any designer can add horizontal or vertical scrolling.
The trick is to make sure to add more content than can fit within that container. You can even create designs that have nested scrolling, like the App Store which stacks horizontal scrolling rows that you can scroll through vertically.
For more on this, check out this video tutorial for a walkthrough of how to use this feature.
If you are new to SwiftUI or want to review how to think in SwiftUI from a designer’s perspective, check out this tutorial on YouTube. Sahand from the team behind DetailsPro gives you a tour of DetailsPro and describes SwiftUI from the very beginning, sharing perspective and his way of thinking.
You can follow along by downloading the widget featured in this video from the Explore tab of DetailsPro!
The spaces we design for influence what we create.
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.
Designers can choose from built-in size templates for iPhones and other Apple devices.
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.
Size Templates include other relevant sizes, including those of iOS 14 widgets.
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.
Designers are expected to deliver designs that look great in Light mode and Dark Mode.
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!
9to5Mac published an article about DetailsPro today. I am so thankful for this writeup and I am so excited to see the app out for designers and developers to finally try. This is only the beginning.
Hello and welcome to the very beginning of something new!
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.
