Category: Inspiration

Every Friday, we post curated links for user interface designers interested in iOS design, macOS design, and more on our newsletter UI Designer Weekly. You can read each post here or sign up for the weekly email.

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.

With SwiftUI, you can design beautiful interfaces. Each design element in SwiftUI is like a building block that you can use to build up any design you can imagine.

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!

Every Friday, we post curated links for user interface designers interested in iOS design, macOS design, and more on our newsletter UI Designer Weekly. You can read each post here or sign up for the weekly email.

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.

Every Friday, we post curated links for user interface designers interested in iOS design, macOS design, and more on our newsletter UI Designer Weekly. You can read each post here or sign up for the weekly email.

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.

Every Friday, we post curated links for user interface designers interested in iOS design, macOS design, and more on our newsletter UI Designer Weekly. You can read each post here or sign up for the weekly email.

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.

Apple debuted new operating systems and applications at the 2021 Worldwide Developers Conference (WWDC) and included in all of the new updates were many new design updates and changes. From SharePlay to new designs in Messages, there was something for everyone. Here’s a list of our favorites.

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!

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 ?.

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.

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.