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?

enter image description here

enter image description here

enter image description here

migrated from ux.stackexchange.com Jan 22 '18 at 9:59

This question came from our site for user experience researchers and experts.


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.

enter image description here

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.

enter image description here

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

enter image description here

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

enter image description here

  • If it's opinion based, why not vote to close it as such? Or suggest that it would be a better fit as a critique request? – Zach Saucier Mar 23 '18 at 11:36
  • This is not opinion based; I am actually asking for what the material design spec would recommend for a situation where you have a background, tiles, and cards on those tiles. – Crearo Rotar Mar 24 '18 at 10:22

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.

  • This isn't exactly a mockup design; this is the real thing. We're trying not to make the UI too flashy with several colors - the idea is to have the UI in white + grey as primary colors and red as the accent. Thanks for the suggestions. My specific question is - if I use grey as primary background, keep a white tile on the right, and have more cards inside that tile, the white cards on a white tile don't look great and I can't find a color scheme for this specific case. – Crearo Rotar Jan 24 '18 at 6:55

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...

  • Thanks! Yes, the right card is actually a tile. This is helpful. I could remove the button border, and keep the text only. – Crearo Rotar Jan 24 '18 at 6:57
  • We will remove all the extra text in the device selection section and keep only the device ID and maybe an image of the device selected, but I'd still like to keep the cards on top of the tile. Can you suggest a color scheme for this? -- ie, a grey background on top of a white (?) tile and cards in a list on top of those tiles. – Crearo Rotar Jan 24 '18 at 10:14

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:

enter image description here

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

enter image description here

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:

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.