Designers, Shadows Are Totally Fine in a Flat UI

This time, just a year ago, very few people knew the terms ?skeuomorphism? and ?flat design." We complained about the kind of leathery design of some apps on iOS and OS X, but in general, the UI of Apple?s mobile operating system was just fine. Then, in just a few weeks, everything changed?and suddenly flat design was the new style everybody was talking about.

Google did an excellent job pioneering this new design movement, but what about Apple? Apple panicked, fired the king of skeuomorphism Scott Forstall, and replaced him with Jony Ive to bring a minimal and flat design to iOS.

Apple's introduction of iOS 7 has been the biggest change to its mobile operating system since the first appearance of the iPhone. Gone are the heavily styled apps, texturized backgrounds, rich drop shadows and big buttons. The new iOS 7 is characterized by colorful light gradients, no shadows, lots of white space and the absence of rich, pressable buttons. While I can applaud Apple for a few changes (no more leather textures), I don?t really get many of the design decisions made by Jony Ive (and his team).

Shadows

Apple has completely stripped iOS 7 of all (drop) shadows. In part, that?s a good thing, because Apple really has overused shadows. The calendar icon is a prime example of an improvement over iOS 6.

Too. Much. Shadow.

But Apple has decided to strip all shadows from the entire operating system. And that?s the problem. I don?t know how they came up with the idea that shadows are not ?allowed? in flat user interfaces. Shadows help to differentiate between two objects, and in some cases, understand that one is above another. They help to communicate the hierarchy of elements to the user. In the case of the Calendar icon, for example, the red banner clearly is above the white paper.

The New Home Screen

Let?s look at the new home screen. Previously, shadows were used to seperate app icons from the custom background. This is essential to the idea of interchangeable, customized backgrounds. Because users can change their home screens to any image they want, it is the duty of the operating system to adjust accordingly. Pre-iOS 7, shadows were used to achieve this. If an icon accidentally has the same color as the background, (light) dropshadows helped to differentiate them. Let?s see what happens in iOS 7 if you have a white (or very bright) and black (or very dark) background.

Try a white (or black) background image in iOS7.

Yeah, that?s right. Thanks to the new ?no shadow?-policy of Apple, icons like the Calendar icon or the clock seem to disappear, melting into the background. There isn?t a clear or visible difference between the icon and the background. At first, this doesn?t seem like a huge issue, because who in the world is using a solid white or black background, right? Sure. But I?ve found that this is the main reason the new home screen looks and feels so weird.

A user has to be able to quickly find and focus on the app he or she wants to open. The new home screen makes this process much harder, thanks to the lack of shadows and differentiation between the app icon and background image. This not only affects one-color backgrounds but also very vivid background images which share colors with the new icons.

It wouldn?t be difficult to solve that problem. Indeed, Apple solved it a few years ago with (drop-)shadows. Just add a subtle (grey) glow around the edges, and it's already much easier for the user to understand the interface.

Much better. And to see how useful a subtle shadow is with photo backgrounds, let?s have a look at the following mockup.

A small change, but a big impact. It's much easier to find and focus on icons in the mockup on the right. I?ve also added the same subtle shadow to the app names because they are also very difficult to read in some situations.

Maps

Even in apps like Apple's own Maps app, shadows have completely disappeared. The white bar below is on top of the Maps layer. Since the map itself uses quite bright colors, it?s difficult for our brains to distinguish between the map and the control elements. If you add the same shadow we?ve used on the homescreen, though, it gets much easier to see the line where the maps end and the control panel begins.

I?ve also added a shadow to the adress/search input, because without it doesn?t look like something you can interact with. It doesn?t look like you can click on it and enter text.

These were only two very basic changes, done in a few minutes, and you can see the impact yourself.

Bottom Line

I really don?t understand why Apple has completely cut shadows from their latest UI. While Google and others use subtle shadows to enhance their user interface and make it easier for the user to understand, Apple seems to have forgotten about that simple but powerful technique.

What do you think? Have you something to add? Send me a tweet or comment below.

This post originally appeared on Fabian Pimminger's blog. Fabian is a coder with a design background interested in UI and all the things digital. He is based in Austria, and his website can be found here.

Source: http://gizmodo.com/designers-shadows-are-totally-fine-in-a-flat-ui-633686703

binders of women presidential debates Felix Baumgartner Little Nemo gawker Romney Bosses Day 2012