This week's sponsor

Tumult Hype Professional

Create stunning web animations without the code


Posts tagged with "design"

Designing a Dark Theme for OLED iPhones

Vidit Bhargava, UI designer for the excellent LookUp dictionary app, details in a Medium post how implementing an OLED-friendly dark theme in an app is more complicated than one might think. For example:

When an interface that uses a black theme for its background starts displaying content on the screen, the pixels needs to switch on before they can display the content. So, when you’re scrolling through the content in a black background, the pixels find it hard to keep pace with your scrolling, resulting in a smear on the screen.

Bhargava uses the following tweet from Marc Edwards to illustrate this smearing issue.

The solution utilized in LookUp was making its black theme not entirely black, but a dark enough grey that it appears black in use.

The rest of the post outlines the impact of black, dark grey, and white themes on a device’s battery life, along with the readability challenges inherent to black themes. It’s a fascinating read, and goes to show that a quality OLED-optimized dark theme requires a lot of thought and care to achieve.

Permalink

An Interview with Khoi Vinh, Principal Designer at Adobe

Earlier this week I had the opportunity to sit down with Khoi Vinh, Principal Designer at Adobe who leads its Design Practices group and author of Subtraction.com. Vinh, who was in Chicago to speak at the HOW Design Live conference, talks about how Adobe is using Adobe XD to integrate UX and UI design and prototyping into the product creation process for everyone from freelancers to big companies. He also discusses designers' role in addressing the problems social media is facing, how artificial intelligence is beginning to play a role in design, and his podcast, Wireframe.

(The following has been condensed and edited for readability.)

Tell me a little bit about what you're working on at Adobe these days.

Adobe XD is one of the main priorities at Adobe. We're really passionate about the experience design space; really passionate about how product designers, UX/UI designers, they're really kind of leading the way for how professional creativity is changing and XD is more than just an app, it's a platform to help us build what designers need. So we see it as more than just a design app. It's also prototyping and sharing, and so it's really meant to help designers, and also the people who work with them, get more value out of the design process and be more productive in general.

Read more


Jony Ive Reflects on the Design of the New iPad Pros, Apple Pencil, and MacBook Air in a New Interview

Jony Ive, Apple’s Chief Design Officer, sat for an interview with David Phelan of The Independent to talk about designing Apple products in general and the new iPad Pros, Apple Pencil, and MacBook Air in particular.

On redesigning successful products Ive said:

Because when a product has been highly regarded there is often a desire from people to see it redesigned. I think one of the most important things is that you change something not to make it different but to make it better.

If you are making changes that are in the service of making something better, then you don’t need to convince people to fall in love with it again. Our sense of habit and familiarity with something is so developed, there is always that initial reaction that is more of a comment on something being different rather than necessarily better or worse. In my experience, if we try very hard to make material improvements, people quickly recognise those and make the sort of connection they had before with the product.

Ive also revealed that the original iPad was designed to be used primarily in a portrait orientation, while the new iPad Pros have no orientation:

So, in the new iPad Pro, one of the things we’ve been wanting to get to for a long time is a sense that the product is not oriented in a primary and then, therefore, in a secondary way.

The first iPad had a very clear orientation which was portrait. It had the ability to be used in landscape, I think very well, but it was pretty clear how the product was designed. And I think with the first iPad you had the sense that it was a product made up of distinct and somewhat separate components.

What I think marks the new iPad Pro as particularly special is it doesn’t have an orientation. It has speakers all the way around the perimeter. By getting rid of the Home Button and developing Face ID, the tablet is able to work in all of these different orientations.

On the Apple Pencil, Ive describes how its design abstracts away the underlying technical complexity to focus the user on the task at hand:

I think the way it just snaps onto the side, well, that’s a nice example of a sort of that magical feeling. It’s unexpected, we don’t quite understand how it’s working and even more incomprehensible is the fact that it’s also charging. You can see how that’s aligned with this idea that you can just pick the product up and use it without thought.

Actually, you’re using it with tremendous thought, but it’s based on what you want to be doing rather than wondering if you’re holding the tablet the right way up.

Phelan’s interview is full of many other wonderful insights and tidbits about the products Apple revealed earlier this week in New York and should be read in its entirety.

Permalink

Apple Adds Videos to Developer Portal Featuring the New iPad Pro and Pencil

To help developers take advantage of the latest features of the iPad Pro and Apple Pencil, Apple has posted two new videos to its developer portal. Even if you aren’t a developer though, the videos include interesting insights on some of the unique features of the new iPad Pros.

The videos cover development and design issues that should be considered when adapting apps to the new iPad Pros like using safe area insets to avoid crowding content into the rounded corners or under the home indicator. Another consideration to take into account is that unlike the previous iPads, the 11” iPad Pro doesn’t have a 4:3 aspect ratio, which means apps hard-coded to those dimensions will have areas cut off at the top and bottom.

Also, apps that don’t link against the iOS 12.1 SDK will run in a compatibility mode when multi-tasking, which will add an inset at the top and bottom of the screen for both apps instead of running them fullscreen. Apple says that making sure iPad apps can handle the inset compatibility mode will also help with bringing iOS apps to the Mac in 2019.

The Apple Pencil has a set of default double-tap settings that we covered in our iPad overview, but developers have the option to customize the double tap action in their apps. Apple also encourages developers not to hide functionality behind the gesture or turn custom actions on by default.

The videos cover the iPad Pro’s new USB-C connector too. The iPad Pro supports HDR 4K up to 60Hz and external displays up to 5K as well as USB audio devices, Ethernet, and MIDI. The iPad Pro can also send simultaneous USB-C outputs, which permits uses like connecting a DSLR Camera and 5K display to the iPad Pro at the same time.

The new videos are available as part of Apple’s Tech Talk series.


You can also follow all of our Apple event coverage through our October 30, 2018 hub, or subscribe to the dedicated October 30, 2018 RSS feed.

Permalink

Creative Selection Delves into Apple Software Design with Stories about Safari, the iPhone, and the iPad

Today, former Apple engineer Ken Kocienda’s book Creative Selection, which covers his career at Apple and insights about the company’s software design process, was released. As an engineer at Apple, Kocienda worked on several high-profile projects including Safari on the Mac and the touch keyboards on the iPhone and iPad. Much of the publicity surrounding the book focuses on Kocienda’s work on the iPhone. However, there is a treasure trove of interesting anecdotes about other products and people that make Creative Selection an absorbing read for anyone interested in the creative process and Apple.

Read more


Affinity Publisher Beta for Mac Available

Serif, the maker of Affinity Photo and Designer, announced the launch of a public beta for Affinity Publisher, a desktop publishing app that it is developing for the Mac and Windows. In a press release today, Serif says that the feature set will include:

  • Advanced typography
  • Linked text frames
  • Master pages
  • Facing page spreads
  • Dynamic photo frames
  • Tables
  • Baseline grids
  • Linked resources
  • End-to-end CMYK

Of course, Serif cautions that it is not ready to use in production work, but you can download the app from Affinity’s website and take it for a spin to get a sense for what is coming and provide input to Serif. The final product is expected to ship in ‘a few months’ according to the Publisher preview webpage.

In addition to the signup page, Serif has published a series of 16 short video tutorials explaining the basic functionality of the app. There is also a sample brochure you can download to use as a playground for experimenting with the app’s features.

From my initial look at the beta and tutorials, Publisher is an ambitious effort to build an integrated suite of creative apps by leveraging Affinity Photo and Designer, which will be accessible directly from within Publisher. Those integrations are not yet available in the beta but will be activated in a later build.

It’s been interesting to watch Serif invade an app category, in which Adobe has been the dominant player for so long, with sophisticated but cost-effective alternatives that suit the needs of many users. Publisher looks like an app that could round out the Affinity suite of apps nicely, making the trio of apps appealing to an even greater audience.


Apple Releases New App Design Resources for the Mac and Apple Watch

As tweeted by Mike Stern, Apple’s Platform Experience and Design Evangelism Manager, Apple has updated its AppKit design resources with a comprehensive set of UI elements for making Mac apps. The UI elements come in both Aqua and the Dark Aqua variants for designing Dark Mode Mac apps.

The update, also announced on Apple’s developer news website, includes new watchOS UI elements too, including ‘dozens of new UI elements for watchOS apps, watch face templates for designing complications, a color guide, and new text styles.’

The design assets are available to download in both Photoshop and Sketch formats from the Resources section of Apple’s Human Interface Guidelines website. A full list of all the changes is available here.


The Fragmentation of iOS’s UI Design

Benjamin Mayo on the state of iconography in Apple’s built-in iOS apps:

My gripe is there is no consistency, no structure or logic to this. Apps introduced later sometimes use rounded icons, sometimes not, sometimes create all-new custom glyphs of their own. Incredulously, you could open flagship apps like Messages, Mail and Safari and have no idea Apple was even playing with bold icons as a conceptual change. These apps adopted the iOS 11 large bold navigation bar title formats, but their icons and glyphs have stagnated for more than four years at this point.

Mayo uses eight examples of Apple’s action icon to emphasize the design inconsistencies.

Since iOS 7, each revision of iOS has felt like a tentative design experiment, with icons in a handful of apps moving in different directions. The trouble is, Apple doesn’t seem to have settled on a clear winner among the several options tested, which has begun to make the UI feel directionless. Although rumors seem to indicate that a design refresh of iOS is at least another year off, I hope we’ll start to see indications of where iOS design is going this year at WWDC.

Permalink

Sketch Adds Shared Libraries, Including the Official Apple iOS 11 Design Template, and Prototyping

Sketch, the popular design app from Bohemian Coding, received a big update today, but perhaps the most interesting aspect of the update is the incorporation of Apple’s official iOS 11 design template. An earlier update of Sketch added Libraries, sets of design assets that can be saved, reused, and shared. With the new version of Sketch released today, those Libraries can be stored in Sketch Cloud and shared with other Sketch users who can download and subscribe to them.

The utility of the new feature is highlighted by the inclusion of Apple’s official iOS 11 UI Assets as a Shared Library.

According to Bohemian Coding:

We’re really excited to say that we’ve integrated Apple’s iOS 11 design template into Sketch, and can now offer this invaluable resource as a built-in Library.

The Apple iOS UI library has all of the components you’ll need to start working on your next project, carefully crafted for Sketch. This expansive Library includes everything, from tab bars and status bars to buttons and switches, ready to be inserted into your latest designs.

Users can download the iOS 11 design template from the Libraries tab of Sketch’s Preferences. Once downloaded, users will receive notifications of updates to the templates.

Sketch’s latest release also adds prototyping. The feature allows users to link artboards and add animated transitions. Prototypes can be previewed in Sketch, using Bohemian Coding’s Mirror iOS app, or using Sketch Cloud.

To get a sense of what can be done with Sketch’s new prototyping feature, check out the video below by Sam Beckett, who has worked with MacStories in the past on Federico’s iOS concept videos.