THIS WEEK'S SPONSOR:

Backblaze

Astonishingly Easy And Unlimited Cloud Backup


Posts tagged with "design"

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

2020 Apple Design Award Winners: The AppStories Interviews

Federico and I had the pleasure of interviewing three of the 2020 Apple Design Award winners for AppStories. The awards, which were announced by Apple last Monday, recognize “outstanding app design, innovation, ingenuity, and technical achievement.”

For today’s special episode, we spoke with Majd Taby of Bergen Co., the creator of photo and video editing app Darkroom, Sam Rosenthal of The Game Band, the studio behind Where Cards Fall, which was a launch title on Apple Arcade, and Jenova Chen, of thatgamecompany and the creative director of Sky: Children of the Light, an innovative social adventure game. All three interviews are terrific conversations that reveal common threads of thoughtful design, innovative approaches that feature the latest Apple technology, and a deep understanding of their users.

Thank you to Majd Taby, Sam Rosenthal, and Jenova Chen for taking the time for the interviews, Apple for helping arrange them, and as always, thank you for listening to AppStories. We hope you enjoy the episode.


Permalink

Michael Flarup on Big Sur’s New Design

In the years since iOS 7 ushered in flat, minimalistic design, Michael Flarup has consistently pushed back, insisting that the trend had gone too far and there was still room for fun and expression in design. With the redesign of macOS 11 Big Sur, Apple surprised the design world by introducing a design that harmonizes macOS with the company’s other OSes, while providing room for expressiveness.

As Flarup explains:

Materials and dimensionality has made its way back into the interface —and every single app icon for every application and utility that Apple ships with macOS has been redesigned with depth, textures and lighting. This is a big deal. Probably bigger than what most people realise.

The post is a fantastic overview of where design stands on Apple’s platforms today and the influence that the company’s choices have on the design community. Whether intended or not, the unexpected design shift on macOS is one that Flarup expects to see radiate out to affect the design of iOS and iPadOS too:

With this approach Apple is legalising a visual design expressiveness that we haven’t seen from them in almost a decade. It’s like a ban has been lifted on fun. This will severely loosen the grip of minimalistic visual design and raise the bar for pixel pushers everywhere. Your glyph on a colored background is about to get some serious visual competition.

It’s interesting to consider where this new direction will lead. Big Sur’s iconography is part of a broad redesign on macOS that runs far deeper than the design changes made to iOS or iPadOS this year. Whether those platforms will follow the Mac’s lead in the future or take their own paths is something I expect to see debated a lot in the months to come. However it plays out, though, I’m glad to see the Mac retain character in its design as it heads into what promises to be a new era for the Mac.

Permalink

Apple’s WWDC 2020 Design Sessions

I’ve watched a lot of sessions this week. I’ve been impressed with the production quality of them all and the shorter, more condensed format of many of them. I’m still working my way through everything that has been released, but my favorite sessions by far have been the ones presented by Apple’s design team. Through a combination of under-the-hood peeks at how various design elements work and practical tips for implementing new UI controls, the sessions are terrific resources and provide fascinating insight into where design is heading across all of Apple’s products.

Probably my favorite session of the bunch has been Design for the iPadOS pointer. The session explains not only how the pointer works on iPadOS, but why it works that way through a technique called adaptive precision that accounts for the context in which the pointer is being used to define its level of precision. The talk also covers pointer inertia, magnetism, and interaction with controls and other screen elements. It’s an excellent place to start for anyone adapting an iPad for pointer support.

Designing for the unique characteristics of each platform.

Designing for the unique characteristics of each platform.

One of the big picture themes that I came away with from the design sessions I’ve watched so far is the emphasis on designing for the unique qualities of each platform’s hardware. As Design for iPad explains, this doesn’t just mean designing something in between a Mac and an iPhone for the iPad, it also requires developers to consider what makes using an iPad different from either of those platforms. Having used far too many iPad apps that feel like blown up iPhone apps in the past, I hope this session is watched by a lot of developers and designers. I also enjoyed the Design with iOS pickers, menus and actions session, which explains the migration away from (but not complete elimination of) action sheets and popovers in favor of pickers and menus.

Menus and Pickers.

Menus and Pickers.

Finally, I want to mention the SF Symbols 2 and the details of UI typography sessions. I’m a big fan of SF Symbols. I love the consistent look and feel they provide across UIs. This year there are over 750 new glyphs including Apple device, transportation, game controller, and human-related images, plus multicolored symbols for the first time.

As someone who looks at text all day, I also enjoyed nerding out on typography with the details of UI typography session. It’s a fun deep-dive into a subject that I don’t know well, but appreciate for what it adds to an app’s experience.

Even if you’re not a developer or designer, the design sessions at WWDC are some of the most accessible talks released this week. I highly recommend them to anyone who has any interest in how the apps they use are made and the care that goes into the process.


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


The Iconography of Apple Maps

Mercury Intermedia, in a post on Medium, shares its extensive documentation of Apple Maps’ iconography over the years:

A few years ago we published a post examining the point of interest (POI) icons within Apple Maps titled More Than You Ever Wanted to Know About Apple’s Spotlight Location Icons. POI icons have existed in Apple Maps since Google was the maps provider. But with iOS 6, Apple took full ownership of Maps and introduced a selectable, color-coded POI system with all new iconography.

We took particular notice of the icons included with iOS 8 when Apple began using larger versions of these icons at the system level as part of their new Spotlight search feature. Apple has continued to iterate on these icons and has made several additions and refinements. With iOS 10 for example, Apple redesigned the Maps app to use the larger POI icon set directly on the map itself. This post will examine how the system has grown and evolved over the past few years.

If you’re interested in design, iconography, or how these things have evolved over time in Apple Maps, the post is a fantastic resource and fun exploration of the little details that make a significant mark on user experience. For example, the article includes quotes from designer Scott Dunlap comparing Apple’s icon changes over the years and what purpose those tweaks served, as well as offering feedback for how Maps’ icon set could stand more improvement, particularly for greater clarity at small sizes.

Permalink