02
Jul
image

Google didn't spend enough time on Material Design during the keynote. We saw a beautiful video and learned a little bit about the intent and thought behind Google's new cross-platform look (which we actually saw a bit earlier than anticipated), but there's so much more to be said. Having attended as many design sessions as possible during I/O, I think it's worth taking a somewhat closer look at Material Design. In this post we'll attempt to scratch a little bit deeper into what Material means, why it's awesome, and why it's a forward-looking move for Google.

We'll give a quick look at some of the fundamental principles of material design, while avoiding restating the extremely detailed and thoughtfully crafted design guidelines. The real focus here is the purpose behind the design principles, not the principles themselves. That said, get out your glue sticks and your pinking sheers and let's get started.

materialheader

Paper & Ink

The fundamental inspiration behind MD is a pair of simple materials that have been in use for a long time now - paper and ink. Paper is considered the canvas and the element that defines structure in an interface, while ink is the color, the ripple animations, the dynamism of motion, and the "flair" of the design. Paper in Google's vision isn't just paper though. It has the approximate depth of cardstock, but behaves as "an advanced technological substance" with its own quirks, motion, and - of course - terminology.

Co-Planar Paper

A fundamental term to understand when talking about material design is "co-planar." In reference to paper, it means two pieces of paper are on the same plane or level on the Z-Axis. The pieces can either sit close to each other without touching (called a step), or they can be right next to each other, meeting at a seam. The image below shows two pieces of paper joining at a seam near the bottom, with a wide step above.

image

Layering & Z-Axis

One of the big components of material design is depth and the z-axis. The z-axis is perpendicular to both the x- and y-axes, and developers will be able to position elements on this axis. But they won't be positioning things on the z-axis just for kicks - Android's L release has a surprisingly powerful rendering system that, based on an elements position in space, correctly calculates and renders a perfect soft shadow, generated using principles of global illumination. Shadows can change depending on how the element animates, but will stay accurate.

Chet Haase, in the Material Witness talk, explained that those working on material design decided specifically not to go with orthographic projection, where shadows expand based on their position, and also decided to render ambient shadows rather than spot shadows. This means that the shadows on interface elements in L won't have completely dark spots - the light rendered (oh yeah, there's an actual light source built in to figure out where the shadow goes) bounces around elements like it would in real life, providing a softer shadow.

FAB

The FAB is going to be huge for Android design. In case you're wondering, FAB stands for Floating Action Button. It's that little circular bottom floating in the bottom right corner of Google+, but it can be so much more.

image

The FAB is intended to provide an obvious and easy point of access to users for the "hallmark action" of each view in an app. So for Google+, the hallmark action is creating new content. For something like a mapping app, it would be getting directions or starting navigation. Likewise in a music app it would be play or pause.

The FAB is flexible. It can expand into a list of smaller FABs anchored to the main button, or it can expand into a new surface entirely. If used for a play/pause control, the FAB could expand on press to a whole new surface, including play, fast forward/rewind, and tracking controls.

The FAB is a standout feature of material design - it's not only recognizable and familiar, but it creates an instant understanding of the core kernel of functionality for each view. It tells users what they can or should do next to get the best experience, and that's awesome.

Color & Contrast

Another crucial aspect of material design is color and contrast - Android's designers and engineers have gone the full mile in an effort to bring color to Android. Previously, the palette for holo designs was limited - developers were encouraged to bring their brand colors to apps, but it wasn't as easy as it should have been, and with holo's default themes there wasn't too much incentive to actually do it in a meaningful way.

image

That is all changing. With Android L, developers will be able to easily splash various colors of ink into their apps, with complementary imagery encouraged. The design spec offers an enormous palette of colors, but developers will get to use another tool to make things even easier.

Palette

Palette is a tool aimed at making in-app colors consistent, sensible, and easy to accomplish. Using the dominant RGB value of existing elements, Palette can generate... a palette... of colors for use that developers can either name by value or by their palette name. By default, Palette will generate a selection of colors based on Muted and Vibrant colors in the source asset, breaking them out further into Dark Muted, Dark Vibrant, Muted, Vibrant, Light Muted, and Light Vibrant. A larger palette is possible, but even this default configuration is highly impressive and useful.

A New, More 'Optimistic' Roboto

Christian Robertson is the lead designer of Roboto, the type family that's been the standard in Android design since Ice Cream Sandwich, slowly, silently expanding and evolving. With the unveiling of material design, though, Google is openly celebrating the biggest set of changes to the family since its introduction.

image

On its page in the design spec, Roboto is said to have been "refined extensively" to make it more versatile. Refined indeed, the family has re-styled K glyphs, an R with a straighter leg, and glyphs that are - in general - more round, inviting, and - in Google's words - "optimistic." Just take a look at the dots - the exclamation point, the lowercase I and J all have round points instead of square. Round forms are warmer, more comfortable to read, and point to a better type rhythm that's ever so slightly easier to read.

Google's also worked out italic complements, adjusting some angles and strokes to appear more balanced.

The changes are subtle to most users, but they amount to a dramatic facelift for the typeface. A welcomed change in a small, 1.2MB package.

Imagery

With Material Design, Google is finally making strong suggestions for in-app imagery.

style-imagery-style_philosophy_large_mdpi

Like Google's own products, designers and developers are expected to be personal, informative, and delightful with their imagery, be it photos or illustration. The crux of Google's imagery guidelines is this - users should get relevant information, presented in a way that relates to them on a personal level. This makes the experience fun. Imagery should be immersive, should create depth, and above all, should be thoughtfully used.

Going a bit deeper, imagery within apps should be consistent and cohesive - don't mix hand-drawn assets with clipart. Imagery should be comfortable, and shouldn't feel out of place.

Google even defines the difference between an avatar and a thumbnail - avatars are circles, and represent entities like people, companies, etc. Thumbnails, meanwhile, are square and belong among homogeneous content like reviews, general copy, etc. Thumbnails should also be actionable.

style-imagery-principles-immersive_20obscure_large_mdpi

Finally, hero images - Google breaks these into two parts: featured hero and integrated hero. Featured heroes are bold points of focus with as little surrounding content as possible. Integrated heroes on the other hand take less focus from the content, and are used to add texture or depth without distracting.

The expectation of imagery in apps is one way in which material design bridges the gap between simple flatness and highly stylized design - imagery makes use of all those pixels on your screen, but it complements the overall design philosophy and isn't used for ornament alone.

Telling A Complete Story With Motion

Motion design is every bit as important as visual design in Google's new vision. Google wants developers and designers to tell a complete story with motion by animating surfaces, elements, and buttons appropriately.

The main goal here to make users feel in control of the interaction. During the design-oriented sessions at I/O, Googlers stressed the importance of users driving the interface. Surfaces should be magnetic to touch. Animations segue user-initiated change to the interface. The user gets to see where everything goes and what it does - there are no mysteries.

anim1

Material design is based on reality - real objects have surfaces, edges, and borders. But motion adds choreography. If you put a glass of milk on a table, you expect it to stay there - not fly up to the ceiling. In the same way, users see what happens to elements and can remain calm and comfortable knowing that things will behave as they expect them to.

anim4

UI content has an introduction, interaction, and resolution. And each step of this process must keep in mind familiarity, the scene's choreography, and the craftsmanship of the animations involved.

Motion isn't just reserved for large changes, though. Things like the new loading spinner and rotation lock in the quick settings panel are great opportunities for follow-through, where users can be delighted by motion down to the last detail.

anim5

Google also encourages designers to end loading indicators or other motions with punctuation, like a loading spinner that ends with a quick snap, check mark, or other "all done" indicator.

Grids

Massimo Vignelli famously posited that grids are like the underwear of design (he was talking about books, but it works). Google gives designers guidelines for grids - interfaces work best with certain alignments like a key line at 16 and 72dp, with another line 16dp in from the right, or that type should be used with a 40dp baseline grid, but what's important here is not the exact measurement.

image

What's important is that Google is telling developers and designers to use grids - for interfaces and even icons. Grids are one of those things where no one will know if you did it right, but they'll certainly know if you did it wrong. Grids underlie content and make things look orderly. When a grid is poorly implemented, things look and feel off, and Google's making its best effort to avoid this by giving us some ideas about what works best.

And So Much More

It's clear that Android's designers and engineers have put a ton of thought and effort into Material Design, and the information they had to share at Google I/O felt complete, thoughtful, and meaningful. Providing tools like Palette and the shadow rendering system will make it just a little easier to create compelling designs while getting many benefits of good design "for free," as Google puts it.

Everyone - developer, designer, or otherwise, should look at the Material Design spec. It's a detailed explanation of Android's new fit and finish, with rich examples and explanations.

Looking Forward

Something that's easy to overlook as an everyday user is that material design is actually very forward-thinking. The philosophy is making the best of demands for a "post flat design" solution, while saving plenty of room for the future.

It isn't flat for flatness' sake. And in reality it isn't flat at all. It lacks fake leather stitching, green felt, or self-indulgent gradients, but everything built in material design has depth - implicit or explicit - that is real, tangible, and ready for the future. When and if 3D technology (like that in Amazon's Fire Phone) catches on in interface design, material is ready with shadows and depth rendered accurately in real time. Its goal of maintaining 60FPS smoothness across interfaces won't look any less beautiful in the future, and it still leaves room for creativity. What's more, material is about more than mobile. Google wants this to cover all platforms from Android to iOS to web. A design philosophy that can bridge these gaps is huge, and gives Google a huge leg up over competition in terms of complete product consistency across all devices.

What Now?

The transition to this new design language won't be easy. Whether developers will digest, internalize, and remember the guidelines while developing apps is yet to be seen. Holo adoption was a slow and winding road, but it feels like Google is making a much better effort this time around to explain what the guidelines are, what they're for, and why they're awesome both for users and developers. That said, there's something that just feels off about holo themed apps running in an otherwise paper-oriented system. To feel great, everything needs to transition. It's hard to say whether Google has convinced developers to jump on board yet, but other driving factors may compel popular apps to pick up the pace.

Design as a Selling Point

This is something I've drafted (and never published) several pieces on - with Holo, the Android community underwent a major shift of consciousness. Once everyone saw what an app could be (compared to the days of Gingerbread), everyone knew that Holo was what an Android app should be. As misguided as some of that sentiment could be (strict Holo adherence doesn't work for every functionality), the attitude is appropriate.

Design has effectively become a selling point for Android apps, and every user - on some level - has become a critic of interface design. Sure, the proportion of users who demand the latest and greatest in Android design are relatively small compared to the overall Android install base, but they are vocal, ready to adopt apps that look and feel great, and are ultimately pushing the ecosystem further.

Still, there's no telling when or to what extend developers will join the nascent material party, but when they do, we're all in for a better experience on Android.

Liam Spradlin
Liam loves Android, design, user experience, and travel. He doesn't love ill-proportioned letter forms, advertisements made entirely of stock photography, and writing biographical snippets.

  • ProductFRED

    This is so so so beautiful. Makes me want to destroy all of my Samsung devices. Bless you Lord Duarte. Bless you.

    :')

    • Pedro Segura Martín

      I was writing exatctly the same :')

    • Mobeen Ahmad

      Don't destroy them mate..instead give them to me...i'll manage...:P..;)

    • Kevin Aaronson

      The new touchwiz ui on the gs5 and new s tablets is actually a lot closer to this material design than stock 4.4, pretty wild if you ask me! Samsung is doing the themed notification bar in its stock apps like the dialer as well as the bold colors throughout the ui, not nearly as beautiful as material but still nice! Be interesting to see if they follow material design with there L update. Probably not thought.

      • ProductFRED

        You know, I noticed that too. S5's TouchWiz and the M8's Sense incorporated a lot of Material elements before they were even announced. Like for example the colored notification bar that's a shade darker than an app's title bar.

        • Wall Breaker

          before the M8 and GS5 I remember reading an article about Google telling OEMs to tone it down on their Skins.

      • NBM

        perhaps Samsung had information on Material Design and that's what Magazine UI was based off of (perhaps [very] influenced by Windows/WP), ..and then maybe Samsung rushed out to try to claim it with a "janky" show at CES, after which Google was dissatisfied and had a talk with Samsung. Perhaps they wanted to know where the info came from or perhaps they were talking about an NDA breach? I don't know how secret everything was.
        [m a t e r i a l d e s i g n VS m a g a z i n e]
        We speculated it was because Samsung was straying too far from stock Android but maybe the real reason was because Samsung was pulling a Samsung with/against something big by Google?
        There had been rumors about a major Android 5.0 design overhaul in the fall (as well as other Android L features like the Camera API) so I think it could be possible...

        then again, I'm a Google fanboy with a distaste for Samsung and when Magazine UI was unveiled, I assumed it was a visual step toward Tizen to get the masses familiar before leaving Android. Seeing [and admiring] Material Design led me to create this conspiracy theory.
        The other possibility is that Google simply allowed both Samsung and HTC to have skin elements that would transition easily to L on their recent flagships.

        • Justin Foster

          Samsung is practically the face of Android. Why not let them foreshadow design changes? I think it was all intentional.

          • NBMTX

            Yeah, I did say it was possible [and probably more reasonable to assume that] it was planned by Google at the end of my paranoid rant... but at the same time, while Samsung has a majority share of the devices, it's hardly the face of Android. Perhaps Android 2011, ICS, or something.

      • thartist

        Yeah well... No? I guess it looks like that only because oem skins actually have some color instead of being all dull grey like KK, AND specially because "flat" has been the buzzword for a while now because Samsung and HTC had been under heavy fire for too long over their Gingerbready skins... But overall they don't look material if not for the soft colors mainly plus a bit of flatness...

    • Wolph Ramírez

      NO ProductFred..! Don't hear them..! Destroy all that Samsungs..!!!

    • dandroid13

      Keep in mind that in Duarte's world, sdcards are an abomination and must be eliminated...

    • bavanai

      Or just root and get rid of that awful TouchWiz. It destroys those godlike technical specs Samsung flagships offer, making them laggier than a 150$ stock Android phone.

      • AnonGuy

        My Note 3 is performing fine. However, the Google Now Launcher performed terribly the 10 minutes I tried it. Lag and stutter all over the place. TouchWiz doesn't lag at all on my device. It bears to wonder WTF you people are doing to your phones that they're constantly lagging, and the hilarious thing about it is that these same people that complain keep buying TouchWiz devices that they know they're going to complain about? (In reality it performs fine even for them, but they don't want to get off the bandwagon of TW Hate, just yet.)

        • CalH

          Well, somebody compared the cheap Moto E to the Galaxy S5 and it did in fact open apps faster, unlock faster, etc.

          And I wonder what the heck happened to the Google Now Launcher that it lagged so hard? It works very well on my Nexus 4. Probably AOSP apps don't like Touchwiz.

  • AbbyZFresh

    And only a few users will get to use it(Nexus and Moto X users). That's what happens when you give too much customization power to OEMs and carriers,

    • E90 Commie

      L looks really great and it will also be there for users of GPe devices and the upcoming Android Silver. So the options for those who prefer vanilla in different shapes are:

      Nexus
      Motorola Moto X
      GPe/Android Silver

      Then there is the CM based line, there's no doubt that CM12 will be L based. So there are:

      Oppo Find 7
      Oppo N1
      OnePlus One

      Then there are devices with great developer friendliness, namely Sony Xperia (no carrier branding though, it means locked bootloader).

      If you choose to buy a carrier branded device from LG, Samsung or HTC; don't complain about being locked out of the pure Android L experience since there are great options available.

      I don't get this constant complaining from people with carrier branded devices - yes, branding sucks big time and the same with intrusive skins like Sense or TW... but it is easy to avoid all of that in favor of better solutions.

      • DonEmu

        Plus a lot of this looks like Sense already. I would fancy HTC would utilise a lot of this stuff in their own skin. Maybe not the FAB but the colors and flat layers.

      • BruceWillisThrowsACar@You

        You forgot Android One devices...albeit without the full spectrum of animations, #MATERIAL and Android L will be there also...

    • Armando Rodriguez

      If someone make an app with MD it will function the same regardless your phone (well if you are in L)

      • Arthur Jolivet

        But a Material Design app in a Touchwizz environment (for example) isn't very beautiful :/

        • Armando Rodriguez

          I dont get it, once you are in the app why Touchwiz matters?

  • culby

    It's going to be fun to watch all of this get ignored.

    • Miguel Ripoll

      Mostly on the Web.

    • Abhijeet Mishra

      Yeah, unless it's iOS, developers just don't show the same level of interest and speed in adopting new guidelines or features. Android is getting better in user engagement and quality of apps, but it still remains to be seen how quick developers will be in adopting all this.

      • freedomispopular

        Doesn't Apple, at least to some extent, require developers to follow their design standards? This would explain why iOS devs more uniformly adhere to the standards and why iOS is often given development priority.

        • Johannes

          as far as I know, they do... but at the same time it is a mess to publish a app on the app-store... especially if you'd like to get a bugfix-update online really fast

        • Wall Breaker

          i just started learning to develop apps over the past month at lynda.com in eclipse for Android and in Xcode for ios and I must say although I love Android, Xcode felt so much more enjoyable to work in. More things made sense quicker and many things were often easier to code.

          I actually felt like the ADT for Eclipse was very Half baked. Xcode definitely feels more polished and I feel like I can think about what I;m doing more clearly. That could play a big part in design as well.

          I honestly think thats why the app Quality tends to be better and more Developers seem to prefer ios.

          • Nathan Walters

            Well there's your problem, you're using Eclipse instead of Android Studio. It may still be in beta but it's already light years ahead of Eclipse. Give it a shot sometime.

          • Wall Breaker

            That's why I haven't tried it yet because it's still in beta.

            But since you suggested it I might give it a go.

            Thanks.

          • http://blog.sawilson.org/ Scott Wilson

            Yet developers don't prefer iOS. Android has a lot more developers.

          • AnonGuy

            Android has a lot of developers because it's basically free to develop for Android. The OS allows side-loading and the developer tools aren't behind any sort of PayWall the way XCode was for iOS or OSX developers. Additionally, you can get away with some pretty ridiculous crap on this platform that Apple would never allow as they would shut the app out during the review process or shortly after when the complaints started to come in. They have much better QC on their platform, and they also have policies that even limit the types of apps you can develop, so you won't see 85 SMS/MMS replacement apps and 50 Web Browsers, or thousands of Porn Apps, etc. In the end, it doesn't matter as iOS is still paying developers a lot more than Android is at this point in time, which is why some developers very publicly stated they won't bring their "acclaimed" apps over to Android.

          • http://blog.sawilson.org/ Scott Wilson

            So Android is better because they make the tools easier to access, and you can do more with it. That's why it's more popular. Got it.

          • Odwalla

            Get the nVidia developer tools for Visual Studio or try Android Studio.

      • Android Developer

        For me, it was never something the developers decided.
        It was always either the designers or the bosses.
        They are just so stuck on IOS...
        And here in Israel it's the worst, as many apps either mimic IOS design or create a weird HTML5 based one that mimics IOS...

    • kgptzac

      At least we can enjoy MD in gapps ;)

      But seriously, major app developers, who publish on both iOS and Android, seem to have an overriding interest of keeping the design of their app consistent *across platforms*, which makes sense but not a favorable solution to users wanting a consistent experience *within a platform*.

      • YETI

        You can quite easily make an app that's consistent across platforms yet have a platform specific UI. iOS apps mostly have their navigation buttons at the bottom, while Android apps mostly use tabs, which you can slide across or tap on to navigate. App developers can keep Apple happy by putting the navigation buttons at the bottom (as iOS users are familiar with that and I believe it's in the guidelines), while making a tabbed UI for us Android users (as we are familiar with it).
        I am aware that that Facebook isn't a great example of an Android app as it isn't exactly following Android app UI guidelines, but it is a good example when it comes to cross platform design.
        I've attached an image so you can visually understand what I mean (in this particular case the UI is basically flipped upside down).

        • Adrien Assadian

          Yeah, but screw that black bar.

          • YETI

            The black status bar will be changing in the next Android, just look at the screenshots of Material Design in the above article or the one I attached, it will take the colour of the current application but darker.

          • Gabriel Seixas

            That is not a "colored status bar"... here we go again.

          • Yeti

            It's a status bar and it has a colour, whatever you want to call it, I called it that for the sake of simplicity

          • Gabriel Seixas

            The status bar doesn't have color. The status bar is transparent, there's an "extended" action bar, so this extended action bar goes under the **transparent** status bar.

          • Yeti

            Do some research and you'll find that you're wrong unfortunately, the status bar sure can be transparent is there is a header image, but if there isn't it is coloured, not transparent, the action bar isn't extended in any way, google guidelines state that developers need to pick a colour for the status bar that's clearly career than the action bar, so no it's not transparent, it can be and on the home screen etc it is, but not in this case

          • Gabriel Seixas

            If you are using L you can see the animation when you open a Material Designed app, when you open it you can see there's already a colored space over the action bar, in this case, the extended action bar. And it goes right under the status bar. There's an image I made explaining this...

            http://i.imgur.com/Xh0xuIz.jpg

          • Yeti

            More proof here http://developer.android.com/preview/material/theme.html
            If you look at the parts talking about colorPrimaryDark you'll see that it indeed is a colour.
            Also what you've shown is simply an animation that creates an illusion which makes it seem as if the status bar was transparent, even though it's just a colour.

          • Yeti

            Also if I'm completely honest that doesn't make any difference whatsoever as both result in an identical result so all this is completely pointless, Google say it's a coloured status bar so I'm gonna stick to that

          • Nate

            Nope. Statusbar will have color. Not only that, but it will be defined by the app developer.

            http://www.google.com/design/spec/style/color.html#color-ui-color-application

            From part of this page:
            "The status bar should be the darker 700 tint of your primary color."

          • shivakool

            not again

          • joser116

            I think it should match it instead.

          • Adrien Assadian

            Yeah yeah. In the guidelines. But in the facebook app ? I doubt it.

          • YETI

            Good point, but who knows, material design looks great, they might!

          • gmaninvan

            Actually it has already changed. Facebook was just too lazy to enable transparency of the status bar/notification bar in their app.

        • rmkilc

          Exactly. Here is one of my favorite examples. You can tell it's the same app, yet it's native to each platform.
          http://i.imgur.com/jgQq4lQ.jpg

          • YETI

            That's a really great example! I like how you added Windows phone as well, it's usually sort of left out of the argument.

          • rmkilc

            I have a lot of screenshots like this. I scaled them not by PPI, but by physical screen size, as if they were physically laying side by side. Keeps it fair so iOS for example doesn't have huge blown up touch targets. Unfortunately, the ratio of well designed native apps vs. junk on all three platforms is depressing.

          • AnonGuy

            Windows Phone is the hardest platform to design a good looking at for at the moment. It kind of requires you to be a bit better at design than Android and iOS other wise your app ends up looking like something someone cooked up in MS Paint, like that PC Monitor app does.

  • Abhijeet Mishra

    I just hope all of this doesn't take a toll on low-end hardware. Android 4.0 was expected to make things better with hardware acceleration etc., but low-end hardware managed to get slower as they had more to do . But I guess even if L gets slow, they will get things back to normal in a future release, just like they improved on 4.0.

  • BarKa

    AP strikes again. yet another great post :)

  • rmkilc

    There are too many people in the Android Community, both users and developers, that don't care about design. I hope this changes that once and for all.

    • pfmiller

      Why should users care? As a user I care about the UI not getting in the way of usablity and not making my eyes bleed. Anything else is a bonus, but not terribly important to me.

      • rmkilc

        Thank you for proving my point.

        • pfmiller

          Care to answer my question? Is there a particular reason why subtle dropshadows and slightly tweaked fonts should be more important to me than they are?

          • rmkilc

            Look at HOLO vs Gingerbread. If you can't see a difference, then I'm glad you aren't in charge of Android's Design language.

          • samoanbiscuit

            Consistent analogies to build apps around, guidelines for animations to provide information to the user as well as eye candy, the concept of an FAB and how to use it. It takes more than a pretty screenshot to show a well designed app, but anyone using a well designed app will know immediately what I'm talking about. Google has done a ground up rethinking of how Android apps should work, and not just how they look, and if devs follow their guidelines, the entire userbase will benefit.

          • quilge

            I get what you mean, but I still think its nice that design is getting more priority. I'm tired of android looking like its a beta.

          • Mike Reid

            +

            Anyone who says this stuff is easy should link us to their "beautiful, perfect apps" and let anyone who wants to critique them.

            Same for anyone who says devs are "lazy", especially without considering what their managers or customers are saying.

            Some of us make low level root apps and tools, and we don't have the time, or expertise/UI skills to do "beautiful". Others with good UI skills have no idea how to do low level stuff. A beautiful app that doesn't work is useless.

            Many end users complain about UI, yet they have no idea what they want exactly. Philosophy is like "I can't define the difference between porn and art, but I'll know it when I see it."

          • http://www.modminecraft.com/ Nick Coad

            The OP simply noted that there are too many developers who don't care about design. He never said anyone was lazy (although if he did, he'd be right - denying laziness exists is stupid) and he certainly didn't make the claim that app development is easy.

          • http://www.modminecraft.com/ Nick Coad

            You might not be able to see how these things aid in usability but they do. Slightly tweaked fonts are more readable, drop shadows help with information heirarchy, this is all graphic design 101 stuff.

      • Jeez

        "As *a* user.....not important to me."

        Way to represent.

    • Wall Breaker

      I care about design big time although I prefer Android I have to give apple credit many people hated ios 7 at first but after living with it for a month last year I realize I felt like I was using a really well refined OS. People complained about the animations the animations to me made the experience feel more satisfying and hi tech.

      Now days almost any smartphone is more than capable of doing what you need it to and with spec wars becoming less of a need focusing on refining and improving the software and experience is becoming more important than ever.

      I feel like most companies have gotten the specs and hardware aspects down for the most part but now its time to improve the thing we use 100% of the time. Software.

  • freedomispopular

    I can't stand the floating buttons. Even more so with the colors they used for them.

    • rmkilc

      And that's why Samsung exists.

  • contagous

    A great post with a lot of great information :) Thanks AP

  • http://www.facebook.com/morrissex Javier Cárdenas

    I liked the design changes in the UI but, please, do not change Roboto! We want it sleek, not optimistic!

    • Walkop

      I have it on my Nexus 5 with the L preview. Looks really sleek. Trust me, it's not a change for the worse. ;)

      • http://www.facebook.com/morrissex Javier Cárdenas

        Mind uploading them? Hehe

  • Ian

    And still no dark theme...

    • 16Bitz0r

      Indeed. White/bright backgrounds look generic and bald. darker backgrounds/themes look much better, easier on the eyes, and more energy efficient.

      • Julio M

        But dark backgrounds don't look optimistic. They are a sign of reserve, fearful of potential (and battery drain). So we need something in between, something subtly colourful, warm and radiant.

      • DonEmu

        Only more energy efficient on AMOLED screens.

        • http://eichefam.net/ Paul

          Even then, only if it's true black -- which most dark designs are not.

      • quidpro

        more energy efficient is a bunch of bunk. Let Verizon handle the dark and robotic [DROIIID!!!]] themes...they are stale and done.

      • Walkop

        Considering the Android L Preview (literally) doubled battery life on my Nexus 5, even with all my apps reinstalled (went from ~2 hours SoT in a day to 4.5), I don't think power efficiency should be a worry...

      • http://www.androidpolice.com/ David Ruddock
    • BugDroid

      In fact, a dark material theme exist: http://developer.android.com/preview/material/index.html

      • Ian

        There is also dark Holo and yet Google isn't using it on any of its apps.
        If they wish to advertise Android with light Material then fair enough, but why not give users the choice?
        At least it exists... Thank you for the link.

        • BugDroid

          Yes it would be great if Google give users the choice between light and dark theme for system (Phone, Contacts, Settings, etc...) and Google apps but unfortunately I think that's not their priority.
          God Duarte if you hear...;)

  • yihtang

    we now see the effects of Timely acquisition...

    • http://AndroidPolice.com/ Liam Spradlin

      Actually Material Design has been a work in progress for more than 18 months now. Timely was acquired (officially) in January. While I am positive the Timely team has contributed greatly, Material Design is not entirely their doing.

      • Kylecore

        Good write up, I too am very excited for #mete (MEterial DEsign)> Couple quick questions about small UI things if you noticed them.
        1st. The button press .gif you show above, i think it seems awkward that when i press on a button the flings up at me. Did you happen to notice if the button down animation is there that only pops up after its been pressed?
        2. When talking about FAB and its animations, are there any that on press say expand the circle to fill the screen with colour to lead in to a transition to a new screen? If so, do you know if that transition could in fact be applied to a button press such as the one mentioned in the first question?

        Just really curious about the limitations of provided animations etc/
        Thank in advanced :)

        • http://AndroidPolice.com/ Liam Spradlin

          Not sure if I'm answering the right question, but
          1. The up navigation to go back from the view spawned by pressing the button does only appear after you've triggered that transition and
          2. FAB could expand into a full view, like in an app that uses navigation. Once you hit the FAB to navigate, you don't need it any more, so the FAB would disappear. But I don't think a FAB that transitions to a full view should turn into an up navigation element.

          • Kylecore

            Thanks for the reply!
            For the first i'm more or less referencing this picture
            http://cdn.androidpolice.com/wp-content/uploads/2014/07/nexusae0_anim1_thumb.gif but the buttons on the right. How the bounce up when pressed seems like to opposite of what they should be done on a press. As for FAB, great answer, i was initially thinking just to use the animation of FAB filling the screen on say a traditional "start" or "play" button that fills and seamlessly goes to a loading screen or something.

          • http://AndroidPolice.com/ Liam Spradlin

            Those are closer to cards than buttons, and they're "magnetic" to touch, so when you touch, they pull up as your finger pulls away, like they want to travel with your finger. That's my understanding anyway.

      • Brian Koppe

        The main thing that reminds me of Timely in Material Design is this gif right here: http://cdn.androidpolice.com/wp-content/uploads/2014/07/nexusae0_anim5.gif

        It's the exact kind of transition that Timely used when numbers changed, and I love it.

        • Ketan B. Parmar

          Timely has different anim, look properly

      • Wall Breaker

        You would not believe how many people think Companies like Apple and Google just make this stuff up weeks before conferences like WWDC or I/O.

        Most people don't release both Apple and Google plan and work on these things at least a year if not many more ahead of time.

        • AnonGuy

          Hopefully this didn't take them a year because it's not something that should have taken that long, to be frank, and I doubt that's the case since they were working on 4.4 a year ago.
          I don't think Apple took a year to flatten out iOS, either.
          Windows Phone probably took a year, but their design language, etc. is a lot more in depth than Android L Material Design and was a far greater departure from anything they've ever done compared to this (in reference to earlier Android releases, or iOS 7 to iOS 6).
          AFAIK this is no greater a UI refresh than iOS 6 to 7 was, and it's ugly to boot (or at least the examples Google has shown are).

    • Gabriel Melo

      Seriously? The Timely app is, for me, really really ugly. Not to mention its style is completely different from what's being achieved with material design. So I don't really get the point you're implying - the Timely team being responsible for a absolute different pattern from what they built upon the app? What concepts are there in common for this to be implied?

      Timely has got lots of (imho) ugly gradients along with weird patterns and non-harmonic typography. It's mostly a demonstration of how to throw in lots of stuff happening at the same time and a complete lack of concern about readability and OS-pattern consistence. Minimalism, contrast and a sense of paper organization just aren't any close to being present in that app.

      I seriously never got to understand why lots of people love this app, but for me, it simply seems off. Something's just plain wrong in it, although it packs some *few* good ideas.

      • MikeOxlong

        Wow. Relax dude, you may just have a coronary.. How a good app can piss someone off so much is wacked.

      • Gerardo Sarabia

        Maybe not the design itself, but transitions/animations.

      • yihtang

        Yeah, as Gerardo pointed out, I'm referring to the fluid animation. Maybe I should make my point clearer

  • vyktorsouza

    Remember when some people were furious saying that transparent statusbar is stupid and holo would remain forever?
    HAH, how bout that

  • Justin Foster

    This was a great read; thought-provoking, in-depth, and pleasing to the eyes. One question:

    Was there any information on how Android L will deviate from or improve upon the RAM optimization of Project Butter? Material Design is great, but what are the compromises in regards to performance?

    Thanks in advance

    • http://AndroidPolice.com/ Liam Spradlin

      Not in the sessions I attended or any discussions I was a part of. I do remember a question during one of the sessions about adapting material for lower-end devices, to which the answer was basically elegant degradation - animations get simpler, etc.

      • Justin Foster

        Ah, I see.

      • https://plus.google.com/+MichaelBond codemonkey85

        Elegant degradation makes sense for lower-end hardware. Also, the Google devs kept throwing the '60 FPS' stat out during their workshops, right? I don't know if that means anything, but I don't get the feeling Material Design is meant to come with any major performance compromises.

    • Adam Booth

      The question was asked in the Android Fireside chat. https://www.youtube.com/watch?v=K3meJyiYWFw#t=1815

      • Justin Foster

        Oh, thanks!

  • jnt

    Too bad this will only be on Nexus and GPE devices...

    • http://AndroidPolice.com/ Liam Spradlin

      How do you figure? Material design isn't just for system apps. Third party developers are absolutely expected to adapt as well. Whether they will is another question, but the possibility is definitely there for a material experience on any device.

      • http://www.androidpolice.com/author/pamela-hill/ Pamela Hill

        Not only that, but even on Samsung devices, at the very least, the Google apps will have Material Design, right?

      • rskyline

        I think he's refering to the fact that OEM's always bloat their devices. Well except for Motorola right now..

        • jnt

          Yeah basically. OEM's don't care about looking like Google. They care about looking like Samsung, HTC, LG, etc. They care about differentiating themselves first and foremost. Google might push back occasionally, but ultimately Google wants this dynamic to exist, so they're never going to force anything. It will always be a balancing act in the gray area of OEM differentiation and stock Android.

      • jnt

        "Whether they will is another question" - that will go unanswered by a lot of developers for a long time. They're "expected" - that's the problem. Expected means very little in this context.

        It'll be great that the major Google apps will have this, and with a launcher like Nova, the home screen can as well. But the majority of apps and the system UI / framework on most Android devices will never utilize this. If you believe that's any different now than it was 1, 2, 3+ years ago, then you're believing a pipe dream unfortunately.

        • http://AndroidPolice.com/ Liam Spradlin

          Actually I absolutely believe it's different. Google's making a much larger effort to not only explain the new guidelines to developers, but to provide tools, elements, and "stickersheets" to them to make the process easier.
          Again, that doesn't translate into developers giving a damn, but my point is that Google is making a concerted effort to point out the importance of design, which they haven't historically done at such a scale.

          • jnt

            Trust me, I hope you're right. And I know Google is making an effort to make things easier, but you said it yourself - it doesn't translate into developers (or OEMs) giving a damn. Google is never going to require it.

          • http://AndroidPolice.com/ Liam Spradlin

            Very true. But I remain optimistic!

          • jnt

            I guess that's my problem, I'm a lifelong skeptic! :P

  • Finger

    I think it kinda sucks. That huge topbar, and that huge padding, ew no

  • Android Developer

    I wonder if there will be a library that supports this kind of UI.
    In the past, we had ActionBarSherlock and HoloEverywhere to help adapt to the new UI of Honeycomb and ICS .
    Now, I think it's quite hard to make a port of it all for pre-"L" versions.

    • Guest

      I think that a Material Design app would look extremely out of place on a pre-L system. My understanding is that you would have a Material UI for L, and a Holo UI for anything before that.

      • Android Developer

        Tell that to the designers and their bosses around the world. They usually want an abomination of merging between IOS and Android, and now they have another design to mix with...

      • CuriousCursor

        I'm not so sure about this now. We saw that with the Google+ and Google I/O apps that some Material Design elements actually look fine in Holo setting so maybe it'll be okay. Coming up with a library to do ALL of these animations, especially the ones which allow passing a view from one activity to the other might be very difficult though.

        • Guest

          But then, I'm still stuck on the Gingerbread era, so I won't even be able to use these Material/Holo hybrids ;)

          • CuriousCursor

            Nobody is targeting the Gingerbread people as their audience anymore ;)

  • Opinion

    Hopefully all developer and OEM will updates their app following MD guidelines,no more ugly UI

    • Allen Tanguay

      They're going to have to with Android Silver/One

  • RandyJFrances

    Hopefully all developer and OEM will updates their app following MD guidelines,no more ugly UI http://clck.ru/9FMLh

    • Rob S

      a plain copy of the comment from @contagous:disqus directly below, but with an additional SPAM-link... Marked as spam! Guys, don't klick this link unless you want to buy a spycam on amazon...

  • psuedonymous

    "A fundamental term to understand when talking about material design is
    "co-planar." In reference to paper, it means two pieces of paper are on
    the same plane or level on the Z-Axis. The pieces can either sit close
    to each other without touching (called a step), or they can be right
    next to each other, meeting at a seam. The image below shows two pieces
    of paper joining at a seam near the bottom, with a wide step above."

    Either the description of 'co-planar' is incorrect, the the wrong image is attached below. The two pieces of paper in the image are NOT on the same plane (different Z-depth), so should not be co-planar. No 'seams' or 'steps'. The only two elements in that image are that are at the same Z-depth are the system status and navigation bars.

    • http://AndroidPolice.com/ Liam Spradlin

      Check near the bottom of the screen, under the FAB. You'll notice a line which is a seam. Above that, where the FAB sits, is a step.

  • http://petercast.net Peterson Silva

    Was expecting such a post from AP. Was not disappointed.

  • Fatal1ty_93_RUS

    Why can't they just get rid of that pitch black on the navigation bar? Do it like LG with G3 - autoapply colors for it in any and every app! Why is it so hard?

    • Wesley Modderkolk

      Pushbullet applies transparency to the navigation bar, but that is the only app I know of that does so, and it looks great. It looks much more fluid and as a whole.

      I don't know why it isn't applied, and I certainly don't know why Google's own apps do not follow this translucency(or transparency, whatever you like).

      • Adrien Assadian

        Trello does it too. It's buggy as shit, but it's there :)

      • thunderbird32

        Reddit Sync also applies transparency to the Nav Bar.

      • oj88

        Spotify too.

    • Oliver Phillips

      If you're rooted get Xposed and the TintedStatusBar module

  • https://play.google.com/store/apps/developer?id=iWizard Bikram Agarwal

    This article is written so much better than google.com/design. When I was going through that site on I/O day 1, I was banging my head on a wall. Who the F wrote all that? The ENTIRE portal seems to be written by some MBA graduate who just threw buzzwords all over the place. Not a single paragraph made any sense there.

  • Harold JP Castro

    I hope google forces developers to use the new design languages, just like apple did. If not, we users will only see this beauty with google's apps.

    • michaelhall43

      That isn't true. There are many, many third party apps which already use Holo, so material will eventually be adopted as well.

    • BruceWillisThrowsACar@You

      Maybe with the fact that Google will actually follow through with a consistent design language across all their apps (so they say) that it would act as an example to follow for all third party devs. AFAIK, in the past, Google never really followed through with design in their apps, and gave reason for devs not to give a fuck about HOLO until Google started to loosely unify design across their Jellybean/KitKat apps.

  • Nicks

    I love it.!! I want the Google play music update now... It takes the colors from songs cover. :)

    • http://AndroidPolice.com/ Liam Spradlin

      Yep, that's part of palette, which can find the dominant RGB value in an image and use that to create a palette of colors that work well together.

      • Nicks

        It's AWESOME.. like walkman on sony devices!

  • remister

    You look beautiful on the inside and now on the outside.
    How does no one love that GPE Music player...

  • http://AndroidPolice.com/ Liam Spradlin

    I think not.

  • schneeland

    As much as I like most of it - the colors are horrible.
    This was actually the first thing that annoyed me with Microsoft's Metro design and it is the main thing I do not like here. As Goethe used to put it, only "men in a state of nature, uncivilized nations and children, have a great fondness for colors in their utmost brightness," whereas "people of refinement" avoid vivid colors.
    I really wish, they would use shaded colors...

    • Slosh

      I agree man at least give us some option off like a darker shade, a light or dark theme option, not a fan of these bright colours at all :|

  • Zak Taccardi

    "The FAB is flexible. It can expand into a list of smaller FABs anchored to the main button, or it can expand into a new surface entirely."

    Where can I see this in action?

  • Dorian Resener

    An approachable yet insightful article on UI design. I was directed here by my brother and was surprised at how engaged I was in this article which is hosted on a website with such a terrible graphic design: the cracked concrete background, the lens flare on the shop icons, the terrible sirens, tiny megaphone, schizophrenic button choices ... may be a good time to review the tenets above and look at a redesign.

    • http://AndroidPolice.com/ Liam Spradlin

      Oh we've been working on a redesign for a REALLY long time. Believe me, it bugs me too. But we've been working with an extremely talented web developer and we're really close to being ready to show it off. It will definitely be worth the wait.

      • Crispin Swickard

        A preview pic on G+, or something wouldn't hurt with a not final notice on there. ;)

      • Dorian Resener

        Great! Looking forward to seeing a design that matches the quality of the content and puts it forward!

      • Gerjannn

        Wow, this is one of the best things I'd read today. Hope to see some 'L' goodness in the new redesign aswell. And please don't get rid of Disqus, I really like the way comments are now.

      • cizzlen

        And where is this new redesign now? What a load of crap.

    • BruceWillisThrowsACar@You

      Sirens? You mean strobe lights...

      But yes, this website needs a thoughtful and refreshing re-design.

  • remister

    On top of this, I wish you could change the UI font on the fly. That would be great!

  • senor_heisenberg

    The animations are great. Timely devs puttin in work.

  • Justin-Alexander

    Can we please forward this article to Blackberry? The BBM app has no reason to look like Gingerbread considering it was made this year. Even their IOS app is atrocious somehow, it's stuck on IOS6

  • Protoss

    Google please :D staph copying pleaaaaaase

    • Walkop

      I can see plenty of differences. Google's design has more depth, and layers vertically as well.

    • Braulio Cesar Holtz Ribeiro

      This showed that Apple is basic, a background, icons on the front and the notification bar (if I remember correctly) in front of them all ... what Google is showing is something very different, read the article again

      • Arthur Dent

        You expect reading comprehension? That's asking quite a lot ....

      • Protoss

        Please... Why Google copy so much!!!

    • Jesus Bleeding Christ on Crutc

      Dude, the only thing alike in those pictographs is that they use a phone as a backdrop.

    • Arthur Dent

      What a douche. It's not even close.

    • BruceWillisThrowsACar@You

      You're an idiot or a troll. You "staph".

  • NoBullet

    Cant wait to see all of these animations lag up after a few weeks of use.

    • Nathan Walters

      What makes you think that will happen?

  • SVem26

    Material Design is all beautiful and visually super appealing.. But I am not sure about the Huge Action bar eating up real estate..

    Also: I loved the tiny navigation bar humburger thingy.. So classy..

    Hope they take majority feedback and change a few things for the final release..

  • WhyWai

    It's look fantastic. But again. It's Android. Only certain commited dev and Google own apps will looks streamlined for new UI.
    Other apps will just remain their own outdated UI.

  • rss

    Unless Google aggressively pushes developers to this new design, devs won't bother and it will be years before we start seeing apps with it and just before Google makes another design leap.

    • Dinsy Jones

      That's what happens when design is about following trends rather than usability. Why bother in the first place if a new trend to keep things "fresh" is going to come along soon anyway.

      What we're going to end up in real life is a horrible mix-up of apps using several, radically different styles. Add to that mix the customizations added by OEMs and we'll see how much of all this grand vision is "materialized".

  • duse

    I'm glad they're putting in the effort and focusing on design but can you really say the end result looks good? That My Files screen is awful, all the wasted space and garish colors.

  • Wall Breaker

    Google is Finally really taking android more serious than ever.

    - Blocking OEMs from skinning Android Wear, TV and Auto
    - Material Design and Android L
    - Enforcing Design Rules and Guidelines
    - Android Silver for high end stock devices for carriers.

    Android's Evolution is quite an accomplishment and its only getting better form here.

    • http://www.thejunglephoto.pw Thejungle

      Yeah - "Blocking OEMs from skinning Android Wear, TV and Auto", but where is Android itself? I hope it could appear soon in that sentence, but I'm afraid Paper Design will be still available only on Nexus'.

      • Wall Breaker

        Well I think Android silver is a solution to that since its rumored to be offered in stores at carrier prices giving stock more consumer exposure without making oems mad.

        Also it wouldn't be smart to completely piss off OEMS because right now Nexus devices only make up about 10% (guessing based on kitkat chart) of androids 80% marketshare when samsung is the majority of Android users, which is know to be a fact.

        I believe Android silver will help Google Gain the Much Needed Attention to help win back some marketshare, because right now if Samsung up and Left android for Tizen Android would be hurting, or it could cause HTC and LG's marketshare to Skyrocket because Tizen has no where near the devs of Android.

  • nawa

    Now that'd be a great time to redesign Android Police!

    • Fatal1ty_93_RUS

      With material design...

      *head explodes*

  • Archadae

    Its fugly and iOS-ish and I hate it.

    • jernfrost

      Hahaha I was sort of thinking the same, but with a bit schadenfreude, because as an iOS user I so hate the iOS7 look, since it is so Android and Windowsphonish. Well I know it is different but I never wanted flat design. Sceumorphic design was one of the things I liked about the Apple world. But I think the finally got it right in OS X Yosemite. I hope they copy that over to iOS. Anyway time for you Android users to hate on your interface for a change :-P

  • Cascade

    I think MD was meant for KK but they didn't want haters to say that they were copying Apple as they had redesigned ios last year.

  • http://liveinalux.com/ mankulito

    All that Samsung junk will look the same with Android L.

  • vladec

    Very nice, except navigation buttons - like Sony PS...

  • http://www.Mikereviews.co.uk/ Mike Brown

    The layered look really appeals to me. Hopefully vendors will hop on this quickly and get this update out to us.

  • Ben

    Ahem,

    "little circular bottom floating in the bottom".

    Please fix this before imaginations start running wild!

  • Snip3rM00n

    Et tu Android? Et tu? Another victim of the painfully bright, flat, black text on white UI movement... At least Android is mod-able and I can install custom ROMs so I won't have to deal with this scourge that modern tech companies push on us like its the solution to all their problems...

  • Magnus Thornberg

    The hardest part is by far to get ALL developers to adopt the design. Now with the preview they have time to remake the apps until Android L goes official. As the articles points out it took a long time for the developers to adopt Holo design. I am going to choose apps that have the the new design and uninstall those that havn´t. I wan´t the same look in every app!