Posts tagged with "design"

Designing Dark Mode App Icons

Apple’s announcement of “dark mode” icons has me thinking about how I would approach adapting “light mode” icons for dark mode. I grabbed 12 icons we made at Parakeet for our clients to illustrate some ways of going about it.

Before that though, let’s take some inventory. Of the 28 icons in Apple’s preview image of this feature, only nine have white backgrounds in light mode. However, all icons in dark mode have black backgrounds.

Actually, it’s worth noting that five “light mode” icons have black backgrounds, which Apple slightly adjusted to have a consistent subtle black gradient found on all of their new dark mode icons. Four of these—Stocks, Wallet, TV, and Watch—all seem to be the same in both modes. However, no other (visible) icons are.

Fantastic showcase by Louie Mantia of how designers should approach the creation of dark mode Home Screen icons in iOS 18. In all the examples, I prefer Mantia’s take to the standard black background version.

See also: Gavin Nelson’s suggestion, Apple’s Human Interface Guidelines on dark mode icons, and the updated Apple Design Resources for iOS 18.

Permalink

Lickability on the Design of Apple’s Sports App

A few weeks ago on AppStories, Federico and I surveyed recent Apple system app updates to get a sense of where the design of iOS is heading. Part of the inspiration for that episode was a thread that Lickability posted on Mastodon, breaking down Apple’s recently-released Sports app.

Yesterday, Lickability’s Sam Gold expanded on that thread with a post on the company’s blog that’s a must-read for anyone interested in iOS design trends because, as Sam says:

We once heard someone say, “design your app for the current iOS version + 1.” So with that lens, we’ve been looking at what the design of Apple Sports can tell us about iOS 18.

That’s good advice, and there’s a lot to learn from Sports, such as how it continues a recent trend of using gradients in the nav bar:

Gradients are used a LOT in this app. This nav bar gradient effect is becoming pretty common throughout first-party apps as well — first with the iOS 17 Health app, then Journal, and now Sports. watchOS 10 is also full of gradients.

There are many other things going on in Sports besides gradients, including Metal shaders applied to textures and interesting uses of animation and typography.

I fully expect that when I sit down to watch the announcements at WWDC, much of what Lickability has highlighted in Sports will be apparent across many more of Apple’s apps.

Permalink

AppStories, Episode 374 – Examining Apple App and OS Design Trends

This week on AppStories, we examine Apple’s Sports and Journal apps and visionOS for clues to what their designs may mean for the next major revisions of Apple’s OSes.


Sponsored by:

  • Memberful – Help Your Clients Monetize Their Passion

On AppStories+, I tackle whether Federico needs an Apple Studio Display and offer a more portable solution.

We deliver AppStories+ to subscribers with bonus content, ad-free, and at a high bitrate early every week.

To learn more about the benefits included with an AppStories+ subscription, visit our Plans page, or read the AppStories+ FAQ.

Read more


Wallpaper Interviews Apple’s Alan Dye and Richard Howarth

Today, Wallpaper published an interview with Alan Dye, Apple’s Vice President of Human Interface Design, and Richard Howarth, Vice President of Industrial Design. It’s a fantastic read with some great images, including an exploded view of the Vision Pro’s components.

Something I noticed as soon as I unboxed the Apple Vision Pro was how approachable it was. The setup process was easy, well-paced, and felt natural. That carries through to the hardware itself, too, which Dye explained to Wallpaper:

We wanted people around you to also feel comfortable with you wearing it, and for you to feel comfortable wearing it around other people. That’s why we spent years designing a set of very natural, comfortable gestures that you can use without waving your hands in the air. That’s also why we developed EyeSight, because we knew more than anything, if we were going to cover your eyes, that takes away much of what is possible when you connect with people. Getting that right was at the core of the concept of the product because we wanted people to retain those connections in their actual world.

My very early impression is that Apple’s design team accomplished its goal. Howarth puts a slightly different spin on the same message:

There’s a hardness and precision to the front of the product that is completely technical and feels like it’s been sent from the future, but then everything else that connects the product to you is soft and really approachable, so you feel cushioned and there’s not a barrier to putting it on or taking it off. And in fact, it should be a pleasure.’

Nobody is going to confuse the Vision Pro for something that it’s not. Still, the care that has been taken in its design goes a long way toward taking a device that is completely foreign to many people and making it one that isn’t intimidating. That’s something very uniquely Apple and why I’m optimistic about Vision Pro’s long-term prospects.

Permalink

The macOS App Icon Book: A Mini Review

Are you still basking in the glow of the Mac’s 40th anniversary and longing for a little more nostalgia? Well, I’ve got it for you with Michael Flarup’s latest book of iconography, The macOS App Icon Book. I loved Flarup’s book of iOS icons and was excited when I heard months ago that he was working on a follow-up dedicated to Mac iconography. I received my copy about a week ago, and it’s a fantastic mix of icons, history, and designer profiles.

The macOS App Icon Book includes designer profiles.

The macOS App Icon Book includes designer profiles.

Flarup wrote the forward, introduction, an essay on visual design, and a brief history of Mac app icons, which help put the beautifully reproduced icons in context. The book also features profiles of ten icon designers, including many of my favorites like Christa Mrgan, Matthew Skiles, Malin Sundberg, and Gavin Nelson. There’s also a section on icon sets, which is packed with great examples.

If you appreciate good design, I highly recommend picking up a copy of The macOS App Icon Book. I’m sure developers and designers will be inspired by the book’s contents, but it’s also perfect for app fans who are picky enough about the apps they use to be reading this post.

The macOS App Icon Book was funded with a Kickstarter campaign, but it’s now available on Michael Flarup’s online store for $77.


The History of Cover Flow

A few months ago when I was writing about Widgetsmith’s new music widgets in my iOS 17 review, I told my buddy Stephen Hackett I couldn’t believe there was no Cover Flow retrospective on 512 Pixels. Yesterday, Stephen delivered:

Over the last decade or so, Apple has been hard at work in simplifying the user interfaces that power its myriad platforms. I’ve welcomed most of that work, but it’s hard to deny that we’ve all lost some things along the way.

Today, we look at a UI element that started life in iTunes, but spread to the iPod, iPhone and Mac over time: Cover Flow.

I had completely forgotten that Cover Flow eventually found its way to Safari as well. I miss Cover Flow more today than I ever used it at the time; I wonder if a similar 3D interface could be revived for the age of visionOS and Vision Pro.

Permalink

Michael Flarup Launches a Kickstarter Campaign for The macOS Icon Book

Michael Flarup has launched a Kickstarter campaign to fund an illustrated book about macOS iconography. The macOS App Icon Book, which has already been fully funded, is estimated to ship in January 2024.

This book is a follow-up to The iOS App Icon Book, which was also funded via Kickstarter and shipped last year, and I reviewed on MacStories. The new title includes full-color reproductions of hundreds of icons and profiles of the designers behind some of them.

Flarup’s iOS icon book was a wonderful bit of Apple history that preserved some of the best iconography produced on the platform. It’s great to see a macOS version is being added to preserve the history of iconography on the Mac, too. If you’re interested in pledging, there are multiple reward levels, including the hardback book, a PDF version, and a set of both the iOS and macOS icon books.

Permalink

Apple Publishes Updated Human Interface Guidelines for visionOS

In addition to releasing the visionOS SDK and developer tools today, Apple has updated its Human Interface Guidelines and published additional visionOS documentation for developers. The updated HIG begins with an overview of designing for the Apple Vision Pro, covering topics like Passthrough, Spatial Audio, Focus and Gestures, Ergonomics, and Accessibility, advising developers to:

Embrace the unique features of Apple Vision Pro. Take advantage of space, Spatial Audio, and immersion to bring life to your experiences, while integrating passthrough, focus, and gestures in ways that feel at home on the device.

If you’re interested in Apple’s design philosophy for the Vision Pro, the HIG is an excellent plain-English read. For developers who want to dive deeper into the details of building apps, Apple has also published a lot of additional documentation covering the nuts and bolts of building visionOS apps.

Permalink

2023 Apple Design Award Winners Revealed

Two weeks ago, Apple announced the finalists for the 2023 Apple Design Awards: 36 apps and games in six categories: Inclusivity, Delight and Fun, Interaction, Social Impact, Visuals and Graphics, and Innovation.

Last evening, at an outdoor event on the stage built outside Caffè Macs for yesterday’s WWDC Keynote, the company announced two winners (one app and one game) in each category for a total of twelve 2023 Apple Design Award winners. Following the announcements, developers gathered in Caffè Macs for a reception and had a chance to see the Vision Pro for themselves at the Steve Jobs Theater.

Congratulations to all of this year’s Apple Design Award winners:

Inclusivity

Delight and Fun

Interaction

Social Impact

Visuals and Graphics

Innovation

We’ll have more 2023 Apple Design Award coverage soon, so stay tuned.


You can follow all of our WWDC coverage through our WWDC 2023 hub or subscribe to the dedicated WWDC 2023 RSS feed.