Posts tagged with "design"

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.

Apple Updates Its Human Interface Guidelines

Apple’s platforms have seen a lot of changes to their designs in the past few years, so it’s not surprising that the company has released an extensive update to its Human Interface Guidelines. As Apple explains in a post on its Design website:

Apple’s Human Interface Guidelines (HIG) is a comprehensive resource for designers and developers looking to create great experiences across Apple platforms. Now, it’s been fully redesigned and refreshed to meet your needs — from your first sketch to the final pixel.

The web-based guide, which has been evolving since Apple’s earliest days, is broken into six top-level categories: Foundations, Patterns, Components, Inputs, Platforms, and Technologies. There’s a wealth of information in each section organized by subtopics and fully searchable, with quick links to designing for each OS too. Later this year, Apple will add change logs, which should make keeping up on the latest changes simple.

Searching the HIG.

Searching the HIG.

Browsing through the updated HIG, it’s clear that a lot of work went into making it just as easy for designers and developers to find the specific information they need as it is to browse the guide’s many topics. Of course, every topic is illustrated with examples, links to related topics, and cross-referenced with Apple’s developer documentation too. Whether or not you build apps, if you’re interested in design, the HIG is a great way to learn more about the design of the devices so many of us use every day.

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

The iOS App Icon Book: The MacStories Review

I’ve eagerly awaited The iOS App Icon Book by Michael Flarup ever since it was first announced in 2018. The book sits dead center among topics that are at the heart of MacStories: apps, app preservation, and design. As a result, my expectations were high, and I’m happy to report that it doesn’t disappoint. If you care about apps, you’ll love The iOS App Icon Book.

The cover of The iOS App Icon Book sets the tone with a large iridescent squircle, the shape that defines every app icon. It’s the canvas on which every app icon is created. The squircle has become iconic in its own right, creating a consistent thread that ties disparate designs together into a coherent whole. The shimmering foil used for the book’s squircle is an excellent touch that hints at the colorful variety of icons between its convers.

The iOS App Icon Book is an art book at its core. The book’s pages are packed with icons of varying sizes, but the book also features essays by Flarup, a foreward by Bjango’s Marc Edwards, a history of iOS iconography by Jim Nielsen, and profiles of a dozen designers and design studios. The focus of the book lies firmly on the icons themselves, but I’m glad the essays and profiles were included. The essays provide an outlet for anyone who happens upon The iOS App Icon Book and wants to know more about the history and design of icons, while the profiles put a face to some of the artwork on its pages.

Of course, the stars of The iOS App Icon Book are the icons themselves. Each high-resolution image is reproduced in vivid colors on high-quality paper that makes browsing through the book’s pages a pleasure. As someone who writes about apps, I enjoyed flipping through the pages, rediscovering the icons of apps from the early days of the App Store alongside the icons of apps I use every day. It’s a careful mix of old and new that blends the context of early app iconography with current design trends.

As you flip through The iOS App Icon Book, you’ll find that the icons are arranged in a number of different ways. Some are grouped by color, while others are organized thematically, like the pages featuring food, games, and photography apps. My favorite part of The iOS App Icon Book, though, is the pages that trace the evolution of specific icons. Each version is dated and connected by horizontal lines to indicate its lineage. It’s fascinating to see the directions that designers have taken app icons over the years.

The one thing that The iOS App Icon Book doesn’t do that I would have liked to have seen is trace the evolution of the icons used for some of Apple’s system apps. That may not have been feasible given the need to get rights to the artwork for printing in a book. However, it would have been interesting to see the extent to which Apple’s design work has influenced third-party designers.

iOS app icons are the first thing that users encounter when they download an app and use it for the first time. Icons set the tone and personality of an app. It’s an important part of the app experience that has a rich history on iOS. The iOS App Icon Book brings that history to life in a way that immediately had me flipping back and forth through its pages, rediscovering old favorites and studying the details of icons I’d never run across before. I highly recommend it for anyone interested in apps and design.

The iOS App Icon Book is still available to pre-order for €60.00 from its website.

Pixelmator Pro 2.4 Adds New Color Adjustment and Effects Layers, Plus 200+ Vector Images

Source: Pixelmator.

Source: Pixelmator.

Pixelmator Pro 2.4, the photo and image editor for Mac, was released today with two new layer types, a redesigned layers sidebar, and over 200 built-in vector images.

Today’s addition of color adjustment and effects layers adds new flexibility to Pixelmator Pro that should simplify the creation of more complex layered projects. According to Simonas Bastys, lead developer at the Pixelmator Team:

One of the things that users love most about Pixelmator Pro is how it makes advanced layer-based image editing incredibly easy. And with the addition of color adjustments and effects layers, layer-based editing in Pixelmator Pro becomes even more powerful, enabling all-new workflows, such as advanced selective editing of photos.

I haven’t had a need for Pixelmator Pro’s new layers yet, but the possibilities are intriguing and something I plan to spend some time experimenting with more in the weeks ahead.

Adding new layer types to an image.

Adding new layer types to an image.

Pixelmator Pro has expanded well beyond photo editing to become a full-blown design tool. With today’s update, the app adds over 200 vector images designed by artists that can be incorporated into design projects using the app’s Shapes tool. The collection includes all sorts of shapes and symbols, along with categories like science and activities.

M1 Mac optimization isn’t a new feature of Pixelmator Pro, but the Pixelmator team reports that thanks to the app’s M1 tuning, machine learning tasks like ML Super Resolution and background removal run up to 1.7 times faster on Apple’s latest M1 Ultra chip. So, if you’ve got a new M1 Ultra-based Mac Studio, all of those computationally-intensive tasks should be faster than ever.

Pixelmator Pro is available on the Mac App Store as a free update to existing customers and is $39.99 for new users.

Wallpaper Tours Apple Park’s Design Studio→

Wallpaper has published an in-depth profile of Apple’s Design Team that takes readers behind-the-scenes at Apple Park for a peek at the wide array of disciplines for which it is responsible. The story covers everything from hardware design to typography and sound design and includes interviews with Apple’s Evans Hankey, vice president of industrial design, and Alan Dye, vice president of human interface design.

Wallpaper’s piece is packed with anecdotes about Apple’s design process, such as this one about the Apple Watch’s haptic feedback system:

For Apple Watch, the team had to design, build, and implement a physical notification system. How strong? How long? What felt natural? ‘We knew that the Watch was going to be the most intimate, the most personal product that we’ve ever made,’ says Hankey. ‘We also knew it needed to get your attention at some point.’ It was Duncan Kerr, a long-standing member of the Design Team, who suggested the idea of the ‘tap’. ‘It’s such a lovely simple thing, but we had no idea how to bring that to life,’ Hankey says. Through a series of clunky prototypes and the work of haptics expert Camille Moussette, the ‘tap’ was refined and perfected.

Apple’s design process is rarely on display, which makes Wallpaper’s story, which includes loads of photos of the Design Team in action, one that you won’t want to miss.

Permalink

Michael Flarup Announces The iOS App Icon Book→

Source: Michael Flarup.

Source: Michael Flarup.

Four years in the making, designer Michael Flarup has launched a Kickstarter campaign to finalize, print, and ship The iOS App Icon Book.

Source: Michael Flarup.

Source: Michael Flarup.

As Flarup explains, the iPhone sparked a golden era of icon design. The iOS App Icon Book is a 150-page art book that traces the history of iconography on iOS, with full-color, detailed reproductions of some of the best icon work from the past decade. In addition to the artwork, the book also includes a primer on Flarup’s approach to icon design and profiles of leading icon designers. The book traces the evolution of notable icons too.

Source: Michael Flarup.

Source: Michael Flarup.

The book is also meant to preserve the history of iOS iconography. As Flarup explains, the history of iOS icons is:

A history that is quickly fading. Many apps featured in this book aren’t around anymore or have evolved — which means the work we’ve been doing to capture this artwork have borded on internet archaeology. If we don’t preserve these things now, while we still have the opportunity to, they will be gone forever.

Flarup says the book is about 90% complete and should be finished by late January 2022, with the final product shipping in April 2022.

I’ve been following Michael Flarup’s progress on The iOS App Icon Book since its earliest stages, and I’m excited that it’s nearly finished. Icons are an important piece of iOS history, and I can think of no better person to chronicle its evolution.

Permalink

Vidit Bhargava’s Design Concept for a Menu Bar and Multitasking on iPadOS→

Vidit Bhargava, the developer behind the excellent dictionary app LookUp, has published a compelling design concept on Pixel Posts for bringing a menu bar to the iPad and modifying how its multitasking works.

Complex apps like Adobe Illustrator hide functionality behind multiple layers of obscure icons using floating palettes that can be hard to learn. As Bhargava explains:

They are powerful utility apps that some how [sic] struggle with providing a simple, easy to use and understand navigation for their actions. Actions are often hidden behind modes, strips of complicated icons or simply not available for the lack of space.

As a result, there’s no single location you can go to find all of the functionality an iPad app offers.

Bhargava makes a good case for a menu system on the iPad, using what he calls an Extended Status Bar that includes an app’s menu and a customizable control tray to access OS actions like Spotlight search and shortcuts. In addition to the Extended Status Bar, Bhargava imagines the App Library coming to the dock and the addition of floating windows for apps like Calculator.

I’m not convinced that Apple would adopt a system so similar to macOS, but I think Bhargava’s on the right track. As more complex apps are brought to the iPad, the lack of a universal way to organize their features means users have to learn a new system for every app, which hinders pro app adoption. If Apple brought Final Cut Pro or Xcode to the iPad, I think its engineers would quickly feel the same pain points with which other developers of pro apps are already grappling.

Permalink