A design doc to write home about
September 17, 2015 2:21 AM   Subscribe

With the introduction of Google's new logo, why not take a look at the extensive documentation explaining the details of their Material Design philosophy?
posted by cthuljew (43 comments total) 12 users marked this as a favorite
 
But this doesn't answer my fundamental brand-related question: how does quantum mechanics affect my DNA when I drink Pepsi Blue?
posted by rum-soaked space hobo at 2:57 AM on September 17, 2015 [3 favorites]


I'm all for more design philosophies, UI patterns, and giving design the respect it deserves. The Material Design philosophy seems pretty well reasoned and executed, but I think by the time you get into the polymer elements and their crazy naming systems, the philosophy starts overshadowing and ultimately detracting from the usability. That said, I think Material is great for teaching basic design concepts to engineers and programmers who are tasked with design, but have no background whatsoever and end up using some vanilla framework with a few stock photos.
posted by p3t3 at 3:00 AM on September 17, 2015 [1 favorite]


I have an Android phone for work and also use Gmail/Maps/YouTube etc daily and to be honest it's only after reading this that I realised that the multi-layer thing was what they've been going for. Reading the documentation, it's internally consistent and makes a lot of sense, but I don't know how well it works as an interface in practice. Maybe a load of things all floating at different levels is more complex for people to get their heads around intuitively than it seems.
posted by kersplunk at 3:11 AM on September 17, 2015 [1 favorite]


rum-soaked space hobo: "But this doesn't answer my fundamental brand-related question: how does quantum mechanics affect my DNA when I drink Pepsi Blue?"

Go back to first principles! We discussed this one already back in 2009 and had a nice time with it. Pissed forth by gods, indeed ...!
posted by barnacles at 5:31 AM on September 17, 2015 [1 favorite]


Maybe a load of things all floating at different levels is more complex for people to get their heads around intuitively than it seems.

I'm very computer savvy, and maybe that's actually what is causing my bias, but the transition to using the little circle in the bottom right for "new email/sms/contact" everywhere still messes me up. And I use my google services daily. Just yesterday I spent like 4 minutes looking for the new contact button until I was like, oh yeah, it's that dumb circle.
posted by mayonnaises at 5:36 AM on September 17, 2015 [10 favorites]


Icon design always fascinates me specifically because of the problems. One standard (and henceforth probably eternal) problem being how to represent an action formerly done with now-obsolete purpose-built tools. Such as "Start playback of an audio or video recording" or "Act on a phone call". Both used to be distinct physical actions, and are now identical-seeming acts of tapping on virtual buttons (or even vaguer than that, through gestural or voice activations).

The go-to icons are a right-pointing triangle and an old-fashioned telephone handset. The former is already an abstraction inherited from the usual tape deck configuration having tape travel from the left reel to the right reel during playback, the latter is a physical thing that isn't used on the devices that use it as an icon.

So do we create new icons, relevant to current technology, to represent these actions? Or do we allow the disctinctiveness of these shapes to transcend their origin and let future generations treat the shape of the answer-a-call button as a trivia factoid?

After all we also refer to the recording that plays as a "ringtone". Some old tech terms survive because they can be frictionlessly adapted to new meanings. ("Call" itself predates the telephone; a caller was somebody visiting you). Maybe some old images will similarly be adapted and re-adapted as they adequately approximate meanings that are otherwise hard to abstract as simple images.
posted by ardgedee at 6:17 AM on September 17, 2015 [5 favorites]


I am apparently an alien outlier because I actually like tree-diagram derived drop down menus with text, not counterintuitive (to me) icons. So I dislike Google's current design philosophy, though I don't mean it's objectively bad or anything, just not my preference. On the other hand I read extremely fast but have difficulty distinguishing between all the different types of shadows and junk outlined in the design document so maybe it also has to do with my own visual acuity and the subpar display resolutions I work with. Don't see that I should be penalized for having a crappy monitor or bad depth perception though. Oh well, at least Google hasn't taken context-dependent menus as far as MS Office has. Even though I've grown used to it and know where everything is, I still hate the Office ribbon interface. It's meant to cater to people less willing than I am to dig into interfaces and again isn't objectively wrong, but I shall continue to hate it.
posted by Wretch729 at 6:18 AM on September 17, 2015 [1 favorite]


(I also hate working for any length of time through mobile interfaces, which sadly probably also makes me an outlier these days...)
posted by Wretch729 at 6:19 AM on September 17, 2015


The floating action button is a perfect example of a ux paradigm so clever it's totally baffling, not to mention often lost in visual noise depending on content. Am I the only phone user who really wants to put all my touch content at the bottom where my thumb can reach it one-handed? The FAB heads that way but still forces me to the far top left to move hierarchically-back or the far bottom left to move historically back... And nevermind how inconsistent those experiences are.
posted by abulafa at 6:20 AM on September 17, 2015 [1 favorite]


ardgedee: "So do we create new icons, relevant to current technology, to represent these actions? Or do we allow the disctinctiveness of these shapes to transcend their origin and let future generations treat the shape of the answer-a-call button as a trivia factoid?"

The "What Do We Put On The Save Button If Not A Floppy Disk (That Isn't Even "Floppy" If You Want To Be Honest) Conundrum"
posted by Rock Steady at 6:21 AM on September 17, 2015 [2 favorites]


If Google Docs is any indication, there won't be a save button.
posted by notyou at 6:32 AM on September 17, 2015 [5 favorites]


(Now reading the doc ... the shadows discussion reminded me that the various graphics, such as the play clock countdown timer, the networks overlay football broadcasts actually cast shadows on the "real" football field below. Watch for it!)
posted by notyou at 6:40 AM on September 17, 2015 [1 favorite]


Or do we allow the disctinctiveness of these shapes to transcend their origin and let future generations treat the shape of the answer-a-call button as a trivia factoid?

Well, the letter A started out as a bull's head...
posted by oulipian at 6:53 AM on September 17, 2015 [13 favorites]


"That said, I think Material is great for teaching basic design concepts to engineers and programmers who are tasked with design, but have no background whatsoever and end up using some vanilla framework with a few stock photos."

I actually had a programmer friend with whom I was reading this doc say exactly that about himself.
posted by cthuljew at 7:17 AM on September 17, 2015 [1 favorite]


rum-soaked space hobo: "But this doesn't answer my fundamental brand-related question: how does quantum mechanics affect my DNA when I drink Pepsi Blue?"

...... what did I just read? I feel like someone hired the Timecube guy to do their marketing.
posted by Solon and Thanks at 7:18 AM on September 17, 2015 [2 favorites]


I'm still not sure I like the new logo either. I thought the serifs were a nice counterpoint to the playful colors before. Now that the font face has gone full preschool as well, they may as well start selling crayons.

Over-reliance on the Material system can be dangerous like that, the same way the flat design trend overall has become the thoughtless default for design. It makes sense from the performance side: finding solutions that both employ vector art for retina screens, while also reducing complex shapes/layers to save bytes for low bandwidth devices (every serif chopped is a byte saved), but it inevitably at least makes designs bland, and at worst can hurt usability, undermine the brand, etc.
posted by p3t3 at 7:29 AM on September 17, 2015


It's a step forward from the horrible, horrible abuses of "realistic" textures and controls that infected everything until a few years ago. "Brushed Aluminum" always looked horrible, IMO, and, why no, it's not optimal or important that winamp look like a traditional electronic stereo stack, thanks. Screens offer a huge number of interface possibilities compared to a physical object. I've never understood the fetishism for making UIs look like something from the playboy mansion or a refugee object from an 80s action film.
posted by bonehead at 7:44 AM on September 17, 2015


This is really fascinating and seems pretty well thought out. I have to wonder, though, at some of the rules, particularly re: icons.

[star with a smiley face]
"Don’t apply human characteristics to inanimate objects."

Why? Why can't I personify things?
posted by timdiggerm at 7:48 AM on September 17, 2015


Because it's Modern, with a capital M. Material design steals from/is influenced by neo-plasticism, from Piet Mondrian, IMO. It's about abstraction not realism.
posted by bonehead at 8:12 AM on September 17, 2015 [1 favorite]


Now that the font face has gone full preschool as well, they may as well start selling crayons.

Old style crayola font.
posted by bukvich at 8:28 AM on September 17, 2015 [1 favorite]


I miss the old Google logo and I miss the old Yahoo logo. And I wish it had occurred to me to save copies somewhere so I could look at them from time to time, in a mildly wistful way.
posted by Bella Donna at 9:22 AM on September 17, 2015


I was also really sorry when the girl with the umbrella on the salt package got changed. No one ever gives warning so you can carefully save the old stuff before the transition happens. Yes, I'm one of those people stuck in the past.
posted by Bella Donna at 9:23 AM on September 17, 2015 [1 favorite]


Sometimes I think the only sans serif font people will allow is Helvetica. Dare to do something different and you're guaranteed to be criticized. It's as boring and predictable as Times Roman, frankly.
posted by bonehead at 9:24 AM on September 17, 2015 [1 favorite]


Ugh. Kill it with fire. Bury it in cursed ground and salt the earth. Then piss on the grave. "Material Design" is the single stupidest thing I have ever come across. THERE IS NOTHING WRONG WITH SKEUOMORPHISM. It makes things:
-different from one another
-familiar/recognizable
-usable by a greater demographic
Material Design is:
-obtuse
-abstract
-confusing
Why, when computers are capable of doing and being, quite literally, anything (see:Alan Turing, Universal Computer), and in more colors than the human eye can even perceive are we insiting that the interfaces be a bunch of identical squares in primary colors? It's so blatantly stupid it makes me angry. Fuck Jony Ive and fuck cancer for taking away his leash.

I've never understood the fetishism for making UIs look like something from the playboy mansion or a refugee object from an 80s action film.

Then you don't understand life, I'm afraid.
posted by sexyrobot at 9:25 AM on September 17, 2015


Maybe. I also have no use for buggy whips, nor do I require a footman to light the way for my auto-chariot, to avoid scaring children and horses.
posted by bonehead at 9:30 AM on September 17, 2015 [2 favorites]


I was also really sorry when the girl with the umbrella on the salt package got changed.

I will never forgive UPS for what they did to the logo.

NEVER!
posted by notyou at 10:06 AM on September 17, 2015


I mean, I get it, not everything needs to be slathered in wood paneling (though that would be rad), but simplification just for the sake of simplification is dumb. Icons should be simple, yes, but they should also give some clue to their function. When you throw out the latter in favor of the former it no longer functions, it's just useless noise. And when there is a previous use case (as the 'phone' or 'save' icons that keep being trotted out) by all means, use that, and the more it can look like those objects the better (you could easily replace those two with 'oval' and 'square'...would that make them better? Fuck no.)
What most comes to mind for me is that piece of music software (reason?) that looks like a rack of different machines. Would it be better to toss that out in favor of a panel of square icons? No, it wouldn't. Because there's a hierarchy to well-designed useful objects where their primary functions are the most obvious. This is intentional. When you force all the functions of an object to have the same impact, you no longer have a useful tool. You just have garbage. This is important for the designer of the tool as well. Staying focused on what's important by making sure that that's obvious to your end-user helps you make more effective tools. Throwing that away for a "clean" (vomit. shudder.) "look" is madness.
posted by sexyrobot at 10:09 AM on September 17, 2015 [1 favorite]


Old style crayola font

Older style crayola font
posted by timdiggerm at 10:16 AM on September 17, 2015


Old style crayola font

Older style crayola font


Google's new logo is actually a much better font choice for a Crayola box than Crayola's current logo.
posted by selfnoise at 10:23 AM on September 17, 2015 [1 favorite]


sexyrobot, I think there's a middle ground to be reached. A dialer icon that looks like a phone handset makes sense, but a highly detailed icon that looks exactly like a handset and has shadows in all the right places will be difficult to see on certain screens and is potentially a waste of resources to render. The simplified phone handsets on android and iOS do a good job of both a) looking like their functions and b) being easy to see and attractive on many screens.

Material Design strikes a good balance in many ways. In the Calendar app, you click a plus sign to add a new event. In the Gmail app, you click a pencil to write an email. They're not abandoning skeuomorphism, they're abandoning unnecessarily detailed skeuomorphism.

Then you don't understand life, I'm afraid.

I can't tell what joke you're making here. Well, I hope it's a joke.
posted by Tehhund at 10:25 AM on September 17, 2015 [1 favorite]


Short version: It's the shadows, stupid.

Honestly I think they put too much faith in the user's ability to see the difference between one shade of gray and the next in terms of what has primacy over what. Also, I find the palette colors started interesting but quickly become exhausting. Not everything has to be bold and contrasting all the time.

The closer I get to that gmail logo the more I hate it - it's something about that color stripe of the M that gets me.

The big circles in the bottom right of apps? I was initially baffled by them, but now I can see the reason behind putting them where your (when held in left hand) thumb is. A notable confusing element is its purpose - wikipedia is confusing as that button is for bringing up the overview of the article - continually the last button I press to get that information. I associate that area for "new thing" like email or txt message. Instead I guess it is supposed to be "thing I do the most one handed"
posted by Dmenet at 10:29 AM on September 17, 2015 [1 favorite]


Tehhund: sorry, what I should have said was 'the closer it can look to an ideal/platonic version of that item, the better' I didn't mean necessarily photographic realism (i get resources, etc) but if a thing is always or almost always made if leather or metal or paper, then by all means make tge digital version appear the same. But yeah, the removal of all shading really irks me. Buttons are raised/rounded and things above other things cast shadows.

And c'mon, 80s action movies are badass, and have you seen the playboy mansion? There's a waterfall and a glass bottomed pool and there's a hi-fi in the headboard of the gigantic circular rotating bed. It's like a James Bond villian lair. That is living.
posted by sexyrobot at 11:35 AM on September 17, 2015


Sometimes I think the only sans serif font people will allow is Helvetica.
We've had over a decade of the memes of the ubiquitous Impact, now slowly being replaced by "STRAIGHT OUTTA's" League Gothic.
Somebody won a couple elections with Gotham.
Avant Garde (and its less evil twin Century Gothic) refuses to die... it's essentially the new Google font, no matter how much they may deny.
(Does VAG Rounded count? It's just Helvetica with its corners shaved off)
There is one way to test a true Helvetica lover - substitute Arial for it (or if you wanna be subtle, Franklin Gothic).
But I still carry a torch for the big square '60s-ish Eurostile myself. But I am a font outlier. I made a website logo with freaking Bookman Swash.
posted by oneswellfoop at 11:38 AM on September 17, 2015 [1 favorite]


Why not simplify, go minimal, instead of poo-pooing it as being childlike?

I'm actually a fan of minimalism, and I don't entirely dislike the logo, but I think Google is is doubling down on it in a way that may come back to bite them (at least among design snobs). I'm already hearing growing grumbles against flat/minimal among web designers. Most complaints are generally that function has overtaken form at the expense of unique identity. Maybe more than "childlike," Ikea-like is a better comparison. Not so much bad as cheap and lacking character when overused.
posted by p3t3 at 12:03 PM on September 17, 2015 [1 favorite]


That is living.

You and King Ludvig II, you would have gotten along famously.

More seriously, it's just a taste difference. I prefer utilitarianism, the function of the thing itself being used to inform the form. Both minimalist and rococo impulses can fly too far away from making certain that an interface or tool is as capable as it can be.

In your example above, I find interlaces that mimic the look of rack-mount equipment horribly busy, and I've used the real things for decades. I'd much rather have a simpler visual field with plain buttons/sliders/etc... in fact, and have done exactly that in a few of the interfaces I've built for instruments. I don't find that analogies to an older tech really help, either myself or my users. In fact, they're as likely to be misleading unless carefully implemented to exactly mimic function.
posted by bonehead at 12:10 PM on September 17, 2015 [2 favorites]


Personally, I think Google's got the right idea.

Material design is only meant to provide a common set of building blocks and metaphors to establish familiarity, but provides enough flexibility to build unique and "familiar" UIs on top of.

It also doesn't eschew all pretense of depth and contrast like Apple does. I don't have the link handy, but there was a great article recently that explained in fairly through detail the ways in which Jony Ive's approach to minimalism in hardware design has been an absolute trainwreck when it comes to software (and that this is bad because everyone blindly copies Apple).

I'm actually not a huge fan of Material design as a whole. It feels unfinished, and I think that it deserves some revision and feedback as Google gains experience building applications with the system. However, I think that the concept is great, and it wins a lot of points for being a coherent system that clearly states (and justifies) its goals and rationale. I'm not sure I love the first version of the end result, but graphic design could clearly benefit from applying more of this kind of rigor.

Apple had a lot of success applying scientific-levels of rigor to their human interface guidelines. It's a shame they seem to have abandoned that approach, and that Google are the only ones who are even giving any outward indication of even trying.
posted by schmod at 12:16 PM on September 17, 2015 [4 favorites]


What most comes to mind for me is that piece of music software (reason?) that looks like a rack of different machines. Would it be better to toss that out in favor of a panel of square icons?

Well, looking like a rack of different machines is kind of the whole point of Reason, so it would be silly to throw it out. It's fun to mess around with. But my god, as a primary digital audio environment? Give me Ableton's flat geometric boxes please.
posted by atoxyl at 1:22 PM on September 17, 2015 [2 favorites]


Sounds like I might be one of the outliers here that actually kind of likes material design.
THERE IS NOTHING WRONG WITH SKEUOMORPHISM.
It seems material design is really just one big skeuomorphism with all the drop shadows everywhere. The TL;DR of that document is basically "use clean drop shadows to indicate where things are in space".

It's just that the thing it's mimicking isn't leather trim, but instead its mimicking some kind of flawless alien space material. That's probably why they call it material, it's mimicking what an imaginary idealized material would be like and how you could stack it and it build things with it.

Schmod, I agree with you that it feels unfinished as is and I think that's OK. This document seems like more of a best practices starting point than a finished design. You'll notice that the more complex google products don't seem to use out of the box material design but have customized it more to suit their purposes. Take a look at the google music app, it's actually pretty slick.
posted by cirrostratus at 1:45 PM on September 17, 2015 [2 favorites]


I think a lot of audio software, especially plugins, is completely insane, exactly replicating real world interfaces that work sorta when you can put hands on things, but utterly fail as a bank of tiny knobs that have to be adjusted with a mouse.

Here is one mastering type plugin which sounds great but has a head wrecking interface

Here's one that doesn't sound inherently as good, but I can get to sound better quicker.

Material is nearly as bad in the other direction though.
posted by kersplunk at 4:14 PM on September 17, 2015 [4 favorites]


As a designer and front-end dev, I think my favorite part of Material is the way Google has so publicly and thoroughly laid out the importance of visual design in software. And through tangible examples that other companies will hopefully be taking notes from (and adapting to suit their brand rather than simply copying as-is).

Design all to often takes a back seat or is forgotten altogether, and it can be a real chore for designers to convince clients of design value, so kudos to Google for putting this much effort into a system and then sharing it with the world.

I also fully support the (growing?) trend of businesses making their branding and style guides publicly available, i.e. The Guardian, Starbucks, Yelp!, and tons of great guides at UK Gov.
posted by p3t3 at 6:26 PM on September 17, 2015 [3 favorites]


Yeah. I'd add that there is nothing inherently wrong with skeuomorphism, especially when it helps a user to understand or interact with an electronic device, or replicates a successful "real-world" interface on screen.

Using a "wheel" to select numbers on a touchscreen is arguably skeuomorphic, but it's also intuitive and efficient for a touchscreen. Apple haven't yet retreated from this one, although their current implementation is a bit abstract for my taste.

Google's "analog clock" timepicker on Android has its share of proponents and detractors, but I'm a pretty big fan of it. It requires the fewest taps out of any timepicker widget that I've seen. It's *definitely* skeuomorphic.

I also managed to find the link I referenced earlier: “Flat Design”? Destroying Apple’s Legacy… or Saving It. It's not a long read, but I find it difficult to argue with the points that are being made. The reasons for the transition to "flat" design are well-understood, but Apple's implementation so far has been seriously lacking. Android might not be a "great" UI, but at the very least, the underlying design system (Holo, and now Material) has always promoted sensible and usable designs. Meanwhile, Apple have been preaching their mistakes as gospel.
posted by schmod at 7:31 AM on September 18, 2015 [3 favorites]


I think a lot of audio software, especially plugins, is completely insane, exactly replicating real world interfaces that work sorta when you can put hands on things, but utterly fail as a bank of tiny knobs that have to be adjusted with a mouse.

I completely agree with this. It goes especially for synths for me - no I don't want a virtual Juno 60, I want something like Zebra or Serum - it's not really clear from that screenshot but if you've used NI Massive it takes the same drag and drop modulation system and makes it even better - that really takes advantage of the possibilities of software.

Though I don't especially mind VintageWarmer.
posted by atoxyl at 12:33 PM on September 18, 2015


VintageWarmer is ugly though. I'm usually okay with emulations of old studio gear looking like the original because that's not really my thing anyway. I feel like the really sophisticated engineering tools are too complex to even try to knobify at this point.
posted by atoxyl at 12:40 PM on September 18, 2015


« Older Signs Signs Everywhere a Sign   |   How the Net was Won Newer »


This thread has been archived and is closed to new comments