This Week's Sponsor:

Drafts

Where Text Starts

Posts tagged with "design"

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.

2023 ADA Finalists Announced

As has been the case the past couple of years, Apple has announced the finalists in the running for its annual Apple Design Awards. The awards ceremony revealing the winners will be held during WWDC at 6:30 pm Pacific on June 6th.

The finalists have been divided into six categories that include six finalists each:

Inclusivity

Delight and Fun

Interaction

Social Impact

Visuals and Graphics

Innovation

The selections include a broad selection of games and apps, including some apps from smaller developers like Knotwords, Afterplace, and Gentler Streak, as well as titles from bigger publishers.

This is the third year in a row that Apple has announced the finalists in advance, which I like a lot. Winning an ADA is a big achievement for any developer, but it’s also nice to know who the finalists are because it’s quite an honor among the many apps that could have been chosen too.

Fiery Feeds for iOS Added an In-App Split View Mode That I Wish More iPhone Apps Offered

Vertical split view in Fiery Feeds.

Vertical split view in Fiery Feeds.

A few weeks ago on Mastodon, I shared a simple feature request: a split-screen mode for iPhone RSS readers that would allow me to scroll headlines in the one half of the screen and preview actual articles in the other.

If this sounds familiar, you’re not alone: back in 2007, Steve Jobs demoed pretty much the same thing for the first version of the Mail app for iPhone OS 1.0. That layout mode never shipped, and probably rightfully so at the time given the limited screen real estate of the first iPhone.

Read more

Apple’s Taken the Joy out of its Books App with iOS 16→

I enjoyed this article by Mitchell Clark, writing for The Verge, about the removal of the classic page-turn animation from the redesigned Books app in iOS 16:

Apple Books has been my main reading app for years for one very specific reason: its page-turning animation is far and away the best in the business. Unfortunately, that went away with iOS 16 and has been replaced by a new animation that makes it feel like you’re moving cards through a deck instead of leafing through a digitized version of paper. And despite the fact that I’ve been trying to get used to the change since I got onto the beta in July, I still feel like Apple’s destroyed one of the last ways that my phone brought joy into my life.

I forgot to mention this in the Books section of my iOS 16 review. The Books app received a major redesign this year, and I’ve heard from quite a few people over the past few months about why, for serious readers like them, the new UI layout of the Books app is a regression from iOS 15. All that aside, however, I don’t understand why the page-turn animation – a fun, whimsical aspect of the Books UI that felt uniquely Apple – had to be taken away.

I agree with Mitchell on this: the page-turn animation should come back – if anything, as an optional setting.

Permalink

‘Command-K Bars’ as a Modern Interface Pattern→

Maggie Appleton (via Michael Tsai) has written about one of the UI trends I’ve seen pop up more and more lately, and which we mentioned on AppStories several times over the past year: the so-called ‘Command-K’ bars inside apps.

Command bars are command-line bars that pop up in the middle of the screen when you hit a certain keyboard shortcut.They’re also known as ‘command palettes’, ‘command launchers’, or ‘omniboxes’ Traditionally CMD + K, hence the moniker “Command K bars.” But CMD + E and CMD + / have also been strong shortcut contenders.

[…]

They don’t even have to remember its exact name. Fuzzy search can help them find it by simply typing in similar names or related keywords. For example, if I type “make” into a command bar, it’s likely to show me any actions related to creating new items. Even if “make” isn’t part of the action name.

[…]

These bars also do double duty as universal search bars. You’re not only searching through the available actions in an app. You can also search through content like documents, file names, and tasks.

You’ve probably seen these command bars in apps like Obsidian, Craft, Todoist, Arc, Cron, Notion, and lots of others. (On Apple platforms, Things did something similar all the way back in 2018 with a feature called ‘Type Travel’.) It feels like every modern productivity app – especially on desktop – has its own flavor of this interface element nowadays. In a way, this visual trend reminds me of pull-to-refresh before it was standardized by Apple and became a native iOS UI component.

I’m intrigued by Command-K bars as a feature that speeds up keyboard-driven interactions on iPad and Mac while at the same time serving as a search box for an app’s own commands. Think of the typical Command-K bar as a mix of Spotlight, the macOS menu bar, and iPadOS’ keyboard shortcut menu, but as an element that can be invoked from anywhere in an app and dismissed with just a keystroke. As the examples in Maggie’s article show, Command-K bars can be genuinely useful to surface hidden commands and allow power users to save time when using complex apps.

There are plenty of cases where Apple’s apps could benefit from this kind of in-app search makeover. Here’s Notes, for instance, when you activate the ‘Note List Search’ command:

Search inside Notes.

Search inside Notes.

And here’s the rather complex list of keyboard shortcuts supported by Safari:

Keyboard shortcuts in Safari for iPad.

Keyboard shortcuts in Safari for iPad.

I said this on AppStories and I’ll say it again: I think Apple should consider an in-app version of Spotlight that replicates the functionality of Command-K bars and is optimized for keyboard usage on iPadOS and macOS. Modern productivity software is clearly moving in this direction on desktop and the web; I’d like to see Apple apps offer faster keyboard navigation and command discoverability too.

Permalink

Pixelmator Pro 3.0 Adds Templates

Templates are a great way to speed up your workflow and maintain a consistent design language and branding across everything you create. With Pixelmator Pro 3.0,, you now have over 200 professionally-designed templates for creating a wide range of documents and mockups. I’ve been playing around with the new templates for a few days, and they have a lot of potential.

Templates are organized by type and branding style.

Templates are organized by type and branding style.

When you start a new Pixelmator Pro document, you’re presented with the app’s catalog of templates, which is broken down into several categories for creating social media, print, video, and mockup assets. There’s also a Brand Templates category that cuts across different template types, collecting templates by their branding style. There’s a lot here to browse, but like any app that offers templates, I quickly gravitated to a couple of looks that I particularly liked. You can also define your own templates using the app’s system for creating placeholders for various image elements.

Replacing a placeholder image is easy.

Replacing a placeholder image is easy.

Once you open a new template-based document, tweaking it is easy. The options for each template vary depending on its design, but browsing through the layer navigator in the left sidebar, you’ll find controls to change things like lighting effects, placeholder images, colors, and more. The Pixelmator team says that for actions like replacing placeholder images, Pixelmator Pro uses the app’s machine learning engine to remove backgrounds, resize images, change their resolution, and place them properly in any frame.

Examples of Pixelmator Pro's Document Colors.

Examples of Pixelmator Pro’s Document Colors.

Pixelmator Pro 3.0 also introduces the concept of Document Colors, which are sets of colors that can be applied to a template. Each template comes with a few starter palettes to choose from, and you can create your own too. Click on a set of colors, and your template will be updated with the new color scheme all at once.

Device mockups are limited but look good.

Device mockups are limited but look good.

Overall, I like the new Pixelmator Pro templates a lot. It’s simple to get started and easy to adjust your creation. I also appreciate the wide variety of formats available for social media and other types of documents.

The iPhone, iPad, and MacBook mockups have potential too, but I found the lack of adjustments available for the device frames and backgrounds limiting, A bigger library of mockup styles would help, but more controls to manipulate device frames and backgrounds would be ideal.

Still, I like the direction Pixelmator Pro is heading with its templates. They’re easier to use than the systems used in other apps and should meet the needs of a lot of users.

Pixelmator Pro 3.0 is available on the App Store as a free update to existing customers.