0

I'm trying to design a website using the Material Design guidelines.

I've a navbar/headerbar with the logo of my website and some icons. The background color is transparent, showing the background image, when the scroll position is on top of the page. When the scroll position is almost 400px, it is dark grey (it fades during the entire 400pxs).

As you can see, the background has some white spikes, so I can't use white icons. But if I use black or dark icons, they are not well visible when the background is dark grey.

What Material Design guidelines say about this kind of problem? I've read I can't use a shadow to make the top of the background darker...

Relevant documentation: http://www.google.com/design/spec/style/imagery.html#imagery-ui-integration

(text protection paragraph)

enter image description here

1

You could make the transparent bar have a background of black but instead have the opacity set to 20%. Then you could use off white icons and text. Try using Ghostwhite or something like that, since white on black is quite harsh.

You can still have the fade until 400px too. But it will be much smoother.

  • I can add a protection scrim but with a maximum opacity of 40% (according to bigG guidelines), the icons must have 80% opacity (again second bigG) and the result would be this one... i.imgur.com/XT0NIij.png I'm not sure them are enough visible – Fez Vrasta Sep 5 '14 at 11:06
  • That looks alot better, what about using the purple color for the icons, similar to the background? – McIvor Sep 5 '14 at 11:37
  • I need to follow the material design guidelines... icons can be black or white. – Fez Vrasta Sep 5 '14 at 13:40
  • Then you will have to rethink your design :) – McIvor Sep 5 '14 at 13:58
  • I can't belive material design does not have a solution to use white backgrounds with dark interface, there must be one... – Fez Vrasta Sep 5 '14 at 14:09
0

Could you have the icons fade between the two colors as the background fades? This could be a simple CSS animation class (highly suggested) or anything as complicated as you want.

  • currently this is my solution but it does not feel material design at all.. – Fez Vrasta Aug 31 '14 at 5:17
0

This is probably not what you want to hear, but according to the google guidelines, you really shouldn't be using an image in the header.

You can use a color overlay on your photos to make the text pop. But if the text or icons don't pop on the image you're using, then you should probably be using an image that works better, or a solid color.

If I were you, I'd use a solid color.

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.