THIS WEEK'S SPONSOR:

Koskmik

For All Mindkind


Posts tagged with "design"

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

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