Choosing a color scheme for 3 layers of material UI cards

Question

I'm working on the Android UI at work, and I'm happy with the current color conventions we've used; white cards on a grey background, and a black FAB adding just the right contrast to separate the two divisions.

However, I am struggling with the following:

1. In the first screenshot, white cards inside a primary white card do not fit. I tried a darker grey as the primary background color, a lighter grey as the right-card and white cards for the list of cards inside. This doesn't look great though. Any advice on a color scheme for this would be really helpful!
2. In the second screenshot, the white button inside the white background doesn't fit either. A similar situation here; a white elevated button inside a white card is not recommended, but any other color here doesn't look great.

Has anyone else worked on such a 3 layer color scheme?

Answer 1

Well, this is exceptionally opinion-based...

You could merely drop the variation behind the tiles. It provides nothing which is beneficial. The tiles themselves offer enough separation.

If you really want some separation I think you could easily use a mid-grey, such as #f6f6f6. It provides more visual separation without being prominent in anyway.

Or to punch the tiles more, use darker grey which mimics the camera tone...

To push overall branding, you could use the logo color....

Answer 2

When designing mock-ups it's advised to stick to gray scale, much like what you've done. However it doesn't seem like you tried black... which is the colour of one of the buttons (wifi). Maybe give black a shot.

Otherwise, if you have a clear company brand I'd use the main or secondary colours used for the brand. It could be the red on the camera logo that you have there.

Answer 3

Firstly, unless they are dismiss-able, what you have on the right is not "cards" but "tiles". It's a minor technical point, but I think it's still good to be accurate. :)

It looks like that this is where you select a device. If you have 10 devices available, that might mean quite a bit of scrolling. I would make this section into a standard list, separated by lines, or alternating background colors. This might also mean reformatting the text, or reducing the amount of data you are presenting in this list to begin with. Think about what the most important information the user needs to differentiate between the devices, and make that prominent, then de-emphasize or remove the other information. You can fit more if each field doesn't have a line of it's own.

Without knowing more, I would choose the camera name (TI8557) as the most important, with the IP as the second most important.

As to the second question, I don't mind the white button, but does it need to be a button at all? Can you just have the action linked to the text without a surrounding button border? Maybe add an icon if it's not clear enough...

Answer 4

Material design docs actually seem to suggest you consider keeping the light grey of the main backdrop, but correctly use a z-axis difference denoted by drop shadow to indicate hierarchical relationship:

Or alternatively you can use several light greys, as Scott has already suggested - that usage is supported in the Material Design docs like so:

But in all cases the Material Design docs make clear that z-axis differentiation is crucial to establishing card/tile/section figure-ground and active/inactive relationships, all of which is denoted using the Material Design two shadows approach (one single direct light source shadow denoting overall depth and an ambient shadow when elements are close in the stacking order) and can clearly been seen in this similar scenario to yours example from the Material Design docs:

Note that the tiles in that image have an ambient-only shadow to imply that they float just one experiential layer above their container.

It's worth recalling that there are three major reasons to more closely hew to the published Material Design methods, specs and standards: first it meets the applicable standards and thus is less likely to face censure or negative actions from Google Play; secondly Google et al have spent immense time and resources to a degree which would be unsustainable for most smaller development entities to research, develop and test their design approach and tools - and the result, if you follow their methods, is attractive, simple, most crucially, clear, legible and effective; and finally, clearly following those design precepts helps make your app look and feel far more professional and well put together, regardless of the quality of your codebase - remember that the end user sees the UI, not your amazingly efficient, clearly commented and self-consistent code.

Hope that helps.