UIDW 12: Mind-Blown by iMac
Still Mind-Blown by the iMac
What a week! I'm as optimistic about Apple Design as I've ever been.
With the introduction of the new 24-inch iMac in brilliant colors, I would say the bar for interface design to meet has been raised again to the highest rung. The four sentences on the iMac marketing page say it best: "Inspired by the best of Apple. Transformed by the M1 chip. Stands out in any space. Fits perfectly into your life." Vivid colors that make the computer personal. A performance ceiling that's through the roof. A computer that is essentially art for your living room. A tool that's useful and friendly.
As interface designers, in this relay race of invention, art, productivity, and human connection, the baton has now been passed from hardware design to software design (us). We must design interfaces that are so good, usable, and beautiful that they deserve to be given time by their users and deserve to be displayed on this and other beautiful Apple computers.
I am energized and in a period of reflection. I would love to hear what interfaces you are working on. I am designing DetailsPro and have been thinking a lot about how interfaces can be easier to use when the right information is always visible and the other information is always behind a tap or two. I've also been drawing over and over to explore visual design of inspectors and questioning some existing forms. What are you thinking about in your quiet practice? What are you exploring? I'd love to hear.
This week, I thought I'd highlight design that was presented during the Apple Event on April 20th. I hope you find something that inspires you that you can mix into your own work!
Have a wonderful weekend and thank you for reading.
Sahand
Take a Second Look
The white backgrounds and translucent sidebars we use in the new company of color iMacs.
This is a great example of how design can bring content forward. Here, the bar along the top of the display and the dock along the bottom have almost fully-clear backgrounds, so they stand out less than the app with a solid white background in the center of the display.
At the same time, the menu along the top and the dock along the bottom are on screen for much longer than the average app, so the design can allow them to blend in a little bit more because users are likely already familiar with where they stay.
We can design our interfaces to similarly allow for the more persistent, always-there elements to blend in reliably to their typical places so that the important stuff, what our users are there for, can stand out in the moment.
Space and Color, Front and Center
A bold, spacious interface for finding an AirTag. The entire screen fills with color to make indications even clearer.
A large, live-updating display of distance and direction give you immediate and ongoing feedback. This is a great example of our designs not needing to have lines and borders and bento-box like sections all the time. You can communicate a large amount of meaning just using size and placement.
The arrow, given the center placement and a large size, is clearly the area to focus on. This is also a great example of opacity use — notice how "ft", "finding", and the circular backgrounds of each button are a lighter white than the arrow and other text.
You can use opacity like this to bring forward the more important content and push into the background the secondary content.
A Simple Ring Icon Helps
A small ring with a rolling indicator dot appears when scrubbing with the new Siri Remote. This ring indicator looks like it's going to be great at helping people know exactly how they are currently moving around.
Even though it's just a ring, this is still a great reminder of the power of iconography and imagery in helping users relate what is happening within software with what they are doing outside the software.
Shadows, Separating Apps Full-Time
A shadow helps separate the Files app from the app open behind on iPadOS.
Shadows have a long history of helping make interfaces on Apple platforms beautiful. This design is a great example of where a shadow is really being put to good use.
Without it, it'd be hard for a user to separate the interface of the Files app from the interface of the app directly behind Files.
We can think about where we are using shadows in our designs and what those shadows add to the usefulness and aesthetic beauty of an interface. Especially as shadows are used more consistently throughout the operating system, we can think about shadows as carrying a meaning and a purpose with them before we even include them on a single element in our design.