New Apple Look Doesn’t Fully Embrace Flat Design

The web was full of speculation in the weeks and days leading to WWDC 2013 – iOS 7 would be flat.

I’m glad I did not jump on that train.

Apple will not employ a completely flat design scheme with the iOS upgrade; it just touches on it.

The company did all but ditch the skeuomorphic look that has been almost a trademark of the brand since the release of the first iPhones in 2007.

Why iOS 7 is Not Really Flat

iPhones

Apple is still using gradients and shadows in the design – two elements not characteristic of flat design.

Apple did go a long way toward flattening the design scheme with the removal of beveled edges and multiple gradients within each element, but it still stresses components and parts that create some 3D effects and depth.

Could you say it is almost flat? Maybe.

For now, I am just calling the new iOS “flatter.”

The New iOS

Safari

Apple is taking on a new approach with the design of iOS 7, which was announced at WWDC this week. The interface is sleeker, flatter and more typography driven than in the past.

Apple eliminated a lot of tricks with this design outline.

The icons are sleeker. The sharp curves and shiny look of each button has been replaced with flatter icons. The images within each icon are larger and look less like images and more like drawings. All of the beveling and shadowing that Apple design has been associated with is gone.

Color has been simplified – primarily in the use of subtle gradients, rather than multiple layers of gradients and shadows.

The mirror effect for home icons is gone and has been replaces by a box that outlines icons. All of the hairline borders have disappeared as well, making buttons sharper and clearer.

Backgrounds have lost their depth in favor of flatter schemes.

Text is streamlined – featuring the familiar typeface Helvetica Neue Ultra Light and without the shadows that type in earlier versions of the Apple operating system had.

One of the places where users will really see changes is within Safari. The new interface is much more polished and breaks away from the style of a desktop website. The header includes only a simple website address and menu tools feature a line-style look.

In addition to changes you see right away, iOS includes some design changes that are more subtle (especially outside the design/development community) related to the user interface. A new “dramatic” type system automatically adjusts weight, letter spacing and leading by font size and includes support for text styles.

Transparent

Apple is pushing transparent effects with iOS 7 – is this the design trend everyone will be talking about next? Navigation bars, tools, tab bars and other navigation elements all include some degree of transparency. (This will have an impact on app designers for sure.)

What It Means for Designers

Apple is allowing developers to preview new tools.

Central to the design is the company’s guidelines for iOS 7, which are three-fold: deference, clarity and depth as they relate to the user interface and experience.

The good news? Designers can better integrate flat-designed items into the overall Apple interface. There is no necessity to create a skeuomorphic-style icon for apps.

The bad news? Apple all but says you should start over from scratch when creating apps for iOS 7. And since it will be here “sometime this fall,” it is time to start thinking about that now.

Designers and developers with an Apple Developer account can sign in and view the complete Apple Transition Guide. The guide is designed to give you all the ins and outs of the new design, includes best practices and details transition support. Apple is also allowing developers early access to other software and releases.

Quick Analysis

At first glance the look of the new iOS seems very different. And Apple has been promoting it that way as well.

“iOS 7 is the biggest change to iOS since the introduction of iPhone, It’s packed with tons of new features, and a stunning new user interface.” Apple CEO Tim Cook said at WWDC this week.

But really this is more of a design tweak than full scale upgrade. Yes, Apple has waved goodbye to skeuomorphism, but it is not wholly jumping on board with flat design either. I really expected something a little more dramatic and different, although I am not quite sure what it would have been. (So who am I to judge, right?)

Visually, it is one of those design upgrades that could have been rolled out in phases without fanfare. How the complete package works, including the user interface, still remains to be seen.

Clean

Overall look: It’s clean and recognizable. I did not question that I was seeing an iPhone when the first images flashed across cyberspace. The icons seem bigger because of the lack of embellishment and the sharp color is nice.

Typography: Helvetica Neue Ultra Light is clean and sharp. But it could cause some problems if your eyesight is not keen. The font is lighter because of the thin stroke and could be difficult to read against certain backgrounds. Even in the prototypes, messages are a little difficult to read because of the weight of the typeface. It’s also one of those typefaces that you see everywhere. I’m a little disappointed that Apple didn’t look a little further outside the box here.

Color: The palette has more pep to it. Colors are brighter and sharper, but thankfully they did not change too much. The iTunes icon is still a magenta hue and the App Store is blue. (Major changes there would have led to quite the visual conundrum.) There also seems to be a greater use of both white and black in icons.

Top 3 Visual Changes: Getting rid of the mirrored effect for home icons, removing all of the outlines, additional white space and an updated Safari interface.

Bottom 3 Visual Changes: Typeface can be hard to read, some of the icons are overly cheesy (if you had never seen the previous Safari icon would you know what this one is supposed to be?) and many of the icons look a lot alike (such as notes and reminders).

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

41 Comments
  1. Ilia Jun 11, 11:50 pm

    I like the new design…
    I only have problems with those ugly app-icons. They look very unprofessional.

    Reply
    +60
    • Fernando Jun 12, 12:00 am

      Right… What’s with that Safari icon anyway? It looks like Paint Brush job.

      Reply
      +26
      • Phil Jun 15, 12:07 pm

        The Icons are not the work of jonys Design Team. Instead the Marketing Team have done them, because they hadn’t finished them until wwdc. They will be redesigned until the final Version of iOS 7.
        Sry for my maybe bad englisch. I come from Germany ;-)

        Reply
        +6
    • nerdnotfool Jun 16, 2:10 pm

      I love the new design too. Although the icons looks a bit awkward, I still like them. I bet we need stop calling this flat design and instead call it *Neon Design*.

      Reply
      -4
  2. kibostudios Jun 12, 2:18 am

    I just simply dont like it. The image within the post where you can see both versions together just tells me that iOS6 looks more polished and well done than iOS7.

    As comments above say some icons as Safari or newstand just looks crazy.

    I think there’s no sense, no guide applied. Some icons look flat, others have gradients (some with light above and others with the light below) the game center icon doesnt follow the style of the rest, margins are crazy and the typography in white doesnt stand out over white backgrounds.

    Even more, white screens consume much more batery and hurts at night haha.

    Don’t like it at all. If the last version looks like this I will switching over.

    Reply
    +35
    • Nick Bedford Jul 4, 6:38 am

      There’s so many seemingly trivial but vital user experience issues with iOS 7 (at least in its current flavour).

      It’s painfully obvious how much more iOS 1-6 focused on being an intuitive visually appealing user experience than Jony Ive’s semi-flat, UX-breaking, sometimes hideous “repaint”.

      Reply
      +3
  3. Bobby Dragulescu Jun 12, 2:29 am

    I disagree that gradients and drop shadows are “two elements not characteristic of flat design.”

    It really depends how sparingly they are used. Promoting dimensionality (even in flat design) can help to separate elements apart when it is beneficial to usability. Even in Designmodo’s own Flat UI you are using drop shadows in several places. And gradients can add visual interest to a shape, they don’t necessarily need to be used to describe dimensionality. I think the main thing is it just not try to look like a 3D object.

    Reply
    +12
  4. Lukas Jun 12, 2:33 am

    that is just bad. really bad.. home screen is ugly as f*.
    that ugly colours and gradients .. I don’t get it.. why ..

    Reply
    +9
    • Phil Jun 15, 12:19 pm

      I’m Using ios7 for a few days now and I have to say that the garish and maybe Child like looking style in the Screenshots is caused by the combination of app Icons and this background. I switched to a very clean background and this looks beautiful.
      And as I mentioned above the app icons are not ready at all and will be redesigned.
      I think in the final Version of iOS7 Apple will present us a very clean and fresh New style which Looks beautiful over the whole System. Now we can only wait for next betas.
      Ägäis sorry for my englisch, I come from germany ;-)

      Reply
      0
  5. Chris Howard Jun 12, 3:13 am

    I find the UI classy and elegant.

    But, like others, the icons are questionable. What do the Photos and Game Centre icons represent?

    It almost looks like a rush job. “Let’s just get any icon up there, WWDC is next week!”

    Ive’s was big on consistency, but there are still glaring inconsistencies in iOS7.

    Icons vary from clearly representative, e..g. a camera for the camera, to symbolic e.g. a compass-like symbol for the web browser to totally non-representative, e.g. the meaningless round globules for game centre. (Ironically, very 2007-ish globules at that)

    Some apps retain skeuomorphic elements still, e.g. lined background for Notes and I did see in the videos, one app still using a paper texture in a layered card design.

    None of these things bother me enough to even consider switching to Android (been there done that, missed iOS the whole 6 months), and I do trust Apple will tify up these loose ends over time.

    Reply
    0
  6. Alexander Goncharov Jun 12, 8:15 am

    Today we’ve got an Ivephone with iOS7, I guess he’s just sharing one of his trips with us.

    Bad news: all the designers sooner or later will do just the same =(

    Reply
    +3
  7. James Jun 12, 11:27 am

    Agree with most here, the icons look cheap, tacky and resemble a cartoon job.

    The rest of the UI looks slick, and I’m glad Apple have implemented a lot of well-needed features for UX. Like the ability to switch on and off WiFi quickly etc…

    However, the most disappointing thing for me is the lack of intuition. Apple were leaders in design, at one stage but now they are just one of the pack, so it seems. The multi-tasking looks just like my Google Nexus, the Weather app looks just like the current Yahoo Weather app (which I love…). I’m not saying this is all bad, it’s just nothing new, and perhaps lacks vision.

    As much as I hate gestures, I thought they would feature far more than the odd swipe from the top or bottom of the screen. Obviously, until it’s in my hands, I can’t be sure that they’re not worked in. But, from the Apple feature video at least, there doesn’t seem to be anything cutting-edge there either.

    I like Helvetica Neue Light and Ultra Light though, so I don’t have any problems with that choice.

    Reply
    +1
  8. Damián Jun 12, 11:32 am

    Everything looks bad, and Jony Ive should feel bad.

    If you want to laugh a bit, I recommend this new tumblr with images from the fellow dribbblers http://jonyiveredesignsthings.tumblr.com/

    Reply
    +5
  9. John Jun 12, 11:36 am

    Steve Jobs once said – “We made the buttons on the screen look so good you’ll want to lick them” – He was a fan of skeuomorphism and i think it could have remained all through. I like the new UI but they could have done a better job on the App Icons. I mean did you see the Car icon – quite shady and unlike Apple.

    Reply
    +3
  10. HalalFish Jun 12, 1:58 pm

    I never liked the gradients on previous versions of iOS and prefer Android. The gradients on the new icons make them look cheap, should have gone the whole hog and 100% flat.

    Reply
    0
  11. odmen Jun 12, 3:44 pm

    I think new apps look great, but the home screen (icons, control settings, notifications) just unprofessional bullshit

    Reply
    +4
  12. Geoff Jun 12, 5:17 pm

    Wait why do we care if it is or isn’t entirely flat? I mean it’s obvious after a quick glance in any regard, but why is this dialog necessary? Do we need a blog post dissecting this?

    They elected to add a shadow or gradient or bevel even though it contradicts the mythical flat UI style guide – who cares? Their objective is to create something that looks nice and elegant – not blindly and un-pragmatically follow a trend.

    Reply
    +8
    • Fernando Jun 12, 5:43 pm

      Absolutely. Now “Their objective is to create something that looks nice and elegant” – they failed on that IMO. I’m talking based on my experience with it. I’m already using iOS 7. But then again, look at some icons. Take Safari. What you think of that?

      Reply
      -1
      • Geoff Jun 12, 5:50 pm

        Yeah, I’m not defending iOS7.

        But I am taking issue with this article, the other “is Google flat?” article and others of that ilk.

        When I see these articles I mostly roll my eyes because I just don’t see what point the author is trying to make. Is this an exercise in picking out and defining flat UI elements? What is the end goal? I don’t see how having a rigid definition of Flat UI helps anyone create beautiful work.

        Reply
        -2
        • Fernando Jun 12, 6:03 pm

          I totally agree with you on that.

          What bugs me is the lack of consistency. There are parts of the OS that are pretty elegant and beautiful. Others, not that much… And I would NEVER expect this lack of consistency, in terms of Design, form Apple.

          Either Ive did not actively lead the redesign or he was forced to do it. Maybe both. :-D

          But yeah, you have a point. Pure flat or not, this is irrelevant.

          Reply
          0
        • Jason Jun 12, 8:08 pm

          Is Google Flat?

          According to their visual asset guides found on Behance – much ‘flatter’ than this.

          http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077

          Reply
          -1
  13. Sunny Jun 12, 5:44 pm

    I agree with you.
    Those apps icon are un-professional.
    even young/new designer can do better icon

    Reply
    +1
  14. Jason Jun 12, 8:05 pm

    Any of you ever work on a project that begins with an awesome idea and either through client input, lack of sleep or just bad ideas it evolves into something, that at it’s core embraces the original concept, but is now a sum of parts rather then a good design? Yea, that.

    Don’t get me wrong, Apple has built up enough trust where I’ll let them foul a few pitches off before I start to really question the approach, but egads, Helvetica Ultra Light? Sentence cased w/ out shadows? Should be fun trying to read that in sunlight.

    It’s like they really, really wanted to embrace new design trends and move past some of the heavily influenced Jobs design concepts, but wound up inadvertently making everything start to feel like a Microsoft Windows 8 Beta UI (Tahoma!)

    Reply
    +5
  15. Michi Jun 12, 10:30 pm

    I’m also a little disappointed by the font choice – Helvetica Neue Ultra Light is pretty much the typeface of used on the cover of your average, cheap Bar Grooves / Lounge / Chill Out – Compilation from ca. 2002. Not very original in my opinion, and not a very good looking thin font in general. Avenir Next Light would have been a great and less overused choice.

    Then there are the icons of course. It’s been pointed out often by now, but those icons look mostly awful and I’m pretty sure they will be fixed before release. The spacing, gradients and sometimes the pictogram itself (settings.app) are way off. Apple has to recognize this.

    Overall iOS often feels like it misses a sense of space. I love flat design, huge fan of Metro in WP8, but the lack of decoration requires space to distinguish between certain elements. Sometimes the density pf elements feels to high in iOS7, WP8 does this better and I prefer the need for scrolling over clutter.

    Also, while the white background is fine, buttons could very well be presented with bold solid background colors. There’s really no need to reduce an element like a button even further.

    Reply
    +3
  16. Fernando Jun 13, 4:57 am

    Now THIS is funny: http://www.macrumors.com/2013/06/12/jony-ive-put-apples-marketing-team-in-charge-of-ios-7-icon-design

    That may be just a rumor. But in any way, I wouldn’t believe that Jobs would allow iOS 7 — as it is — to see the light of day.

    Reply
    +3
  17. Daniel McClintock Jun 13, 12:27 pm

    Apple blew what was left of my already quavering faith in iOS as soon as it was announced that Bing would be the search provider for Siri. That, and clearing notifications doesn’t appear to be improved over the incredibly laborious two-click (x, then ‘clear’) trainwreck. I was considering returning to Android after my third attempt to survive the iOSphere, and it looks like Apple has made up my mind for me.

    Regarding earlier comments on flat vs. scheuomorphic design elements, Roger Oddone (Sr Graphic Designer, Google) has two very detailed projects on Behance examining the visual guidelines Google follows. Specifically in the mobile UI, Google is a strong advocate for flat design. Their policy with shadows allows straight hard shadows ideally in 45˚ (http://bit.ly/googleShadows). Shadows inherently are not in conflict with the flat design idealology; rather, presentation of shadows is a strong influencer in the design schema as a whole. Shadows that convey a realistic or physical object (curved/drop/soft shadows) are nearly always associated with a tangible object, thus leaning towards a skeuomorphic design.

    This is where I feel Jon Ive really dropped the ball. Mixing both hard and soft shadows, alternating between gradients/textures/solid colors, throwing both solid black and solid white elements over the same colored background (albeit opaque and gaussian blurred), and use of light-colored text over light backgrounds (reminders & notes look like bulls in a china cabinet, and the stocks…white on green???) all create a poor reflection on the coordination of the design team (sorry for the pun, I had to do it :). For such an integral part of Apple’s brand and presentation from the beginning, in my opinion iOS 7 falls far short of the bar they set while Steve Jobs was around.

    It also looks like they’re using a near #000000 black for the camera, compass, and stock apps…not the vogue of today. And at the very least, the way they use a solid white background in many of their apps (mail, messages, contacts, safari), you’d think they would have thought twice before slopping on the textured background behind notes and reminders.

    Interestingly, those 5 dots in the top left which are set to replace the current “bars” representation of the signal strength was in Ive’s original UI proposal back in 2005, and only now have they finally surfaced, right after the company loses Steve Jobs. Personally, I’m looking at it wondering why they’re wasting 3x the space than needed for my signal strength. It’s ok to be different, Apple, but know your boundaries and limitations…

    Reply
    +4
  18. Farouk Hosni Jun 13, 4:36 pm

    iOS7 is awful..

    Reply
    -3
  19. Fredrik Scheide Jun 14, 10:01 am

    Its evident that Jobs is no longer in control of the ship, and with all respect to the late Master Jobs, it does breathe some fresh air into the mix. Both for better and for worse. We should give Apple some time to find their bearings, and I think they are off to a great start.

    Personally I want to congratulate Apple and the designteam on a great job on IOS 7. iOS 7 is a well balanced design, its a good compromise between what some people are referring to as “Flat” and “Skeuomorphic”. Its a design that answers to the latest design trends, but does not completely abide to them – and that provokes people I see. I love that they still challenge what people already perceive as perfect.

    I think that good design can’t be labeled, it being flat is not a necessary a quality stamp, neither is any other direction. Good design is in the end of the day all about the User Experience, and to quote Neville Brody, “Its all about consistency consistency and consistency”. And that is how I would label the new iOS7, its consistent without being uniform.

    Bear in mind my fellow designers, that a good design is a design that engages, both positive and negative – and I can see that it already does. Hence Apple has succeeded on creating a design debate. But it will most certainly as with the beginning of the glossy OS X era, be perfected. I still remember the first OS X design, when it replaced OS 9, oh the horror.

    Reply
    0
    • Michi Jun 14, 10:53 am

      After a few days with the beta I have to agree with you. It feels much better now, but it’s clearly a work in progress – and I’m glad to hear that those icons are likely subject to change before release. Meanwhile those parts that are already further designed (Messages, Mail) look way better now.

      Nevertheless I still think Microsoft with their Metro language still is the king of mobile design – at least in my opinion. Admitted, this may be an exclusive opinion, but they are the ones who took a fresh approach first. If it wasn’t for the weak ecosystem I’d still have my Lumia 920.

      Reply
      -2
  20. Renee Jun 15, 7:26 pm

    Gawd, that new home screen is fugly. And the gradients on the app icons? ewwww.

    Reply
    -2
  21. jack Jun 16, 3:59 pm

    iOS7 represents the decline of Apple as a design-driver company

    I was pretty pumped for the new flat design – http://imgur.com/LuVVclh

    Reply
    -1
    • Robin Jul 15, 9:41 am

      I see what you mean. What a sorry contrast.

      However, although these flat UIs are absolutely fantastic and I would love to see them on my phone, once you swipe past the stock icons you’re back to 100s of 1000s of app icons that are not going to match.

      I think I understand Apple’s gradients, even though their choice of colour is horrible, they are trying to bridge the gap between “flat” and existing icons. And until such time they force the developers to fall in line (which I don’t put past Apple) a truly flat look, as in these fantastic examples, is not going to be possible.

      This need to be backwards compatible is what destroys most OS releases and really hampers innovation.

      Reply
      0
  22. Daniel McClintock Jun 17, 5:14 pm

    I would have thought, at the very least, they could have chosen a wallpaper image that didn’t look quite so preschooler-pastel when blurred behind other elements. Pretty sure that’s got a lot to do with the overall presentation having such a cheap feeling to it.

    Based on what I’ve heard, part of the reason it looks like it was thrown together hastily at the last minute is because…it was. :p

    Reply
    0
  23. Kyle Barnick Jun 17, 5:38 pm

    Faux Flat. A complete waste of time. Why would Tim Cook allow Jon Ive to do such a dubious change? The 3D Dock is an Apple signature. I for one will not be diving into IOS7.

    Reply
    0
  24. sf Jun 17, 11:20 pm

    Is it just me or does no know actually know what the word skeuomorphic means. Because if I see a chat icon with a gradient or the lack of one…it’s still skeuomorphic if it has a chat bubble…

    Reply
    0
  25. marlon Jun 18, 4:26 am

    Sometimes the right thing to do is something fresh, even though the old paradigms had worked so well. The irony which nobody has mentioned is that Apple is essentially copying Microsoft, instead of the other way around

    Reply
    0
  26. Bill Jul 8, 3:13 am

    All this talk about “Flat” design is driving me a crazy. It’s purely fashion, like wide ties vs. skinny ones. I understand the drive toward simplicity, but rendering a UI in flat colors (or even subtle gradients) doesn’t necessarily make it simpler and clearer. There are many other considerations.

    In the Safari screenshot where they show iOS6 next to iOS7 it’s easy to see which one is easier to understand. In the iOS7 shot, the UI elements all blend together with the webpage so at first glance it’s hard to tell whether the address field at the top is the heading for the web page or part of the Safari UI. The buttons in the toolbar at the bottom have been designed in such a mechanical way as to render them almost meaningless. For example, the bookmarks icon doesn’t look like an open book anymore. When I first saw it I wasn’t sure what it was trying to be.

    Overall, it seems like many things were changed just to change them, not because there was an overriding vision driving it all. The parallax and translucent effects feel like pointless eye candy that don’t even add that much even as visual appeal. I tried swapping out several background wallpapers to see which one worked best for the parallax effect and even the best one was barely noticeable. And besides, even if it was a cool effect what is the point? It’s not tied to some cool functionality or feedback that matters to the user. Apple has routinely added fancy effects to their UI’s on both the Mac and iOS platforms, but in the past there was reason beyond the effect itself. The genie effect in the dock in Mac OSX gives the user visual feedback about where their hidden minimized window is going. The rubber band effect in iOS is a nice bit of feedback that the user has reached the end of the content they were scrolling.

    But my main issue with the design for iOS7 isn’t the individual user experience problems that may or may not be resolved by the official release. My main issue is that Apple is reacting to the nay sayers instead of taking a leading role in determining where the design should go next. The nay sayers complained that Apple is using too much skeuomorphism and that they should embrace “flat” design, and now Apple has (kind of) done that. This new reactionary Apple is worrisome, because is make it seem like they really don’t know what to do next. I sure hope I’m wrong.

    Reply
    +3
  27. Jason Jul 15, 9:56 am

    This is an awesome read. Specifically:

    “When you think about the whole device—not just the screen—as part of the canvas, you can make the whole UI feel more real, and not by making it imitate a real-world object, but by allowing it to be its honest self.”

    https://medium.com/design-ux/4717ae3942fd

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters