Strictly speaking of Material Design, Google states that you should use hue shade 500 for large areas of color. I would guess the header is considered large area?
Should the header and footer be the same color?
-
There's no particular reason why the header should be the same colour as the footer. You also have to consider what colour the body of the page is as well, so from a design perspective there is no correct answer for the question, just use a colour scheme that reflects and brand/style that suits the presentation of content for the website.– Michael Lai ♦Commented Feb 15, 2015 at 22:07
Add a comment
|
1 Answer
Material design is, to my recollection, silent on this matter of header/footer matching. The documentation shows several variants: no footer, matching header and footer, different header and footer.
The header may or may not be considered a "large area"...it really depends on your layout: material design contains examples of both large headers and narrow headers.
Because there is no prescription or constraint, it's up to you to decide what serves your users best. If you want to draw attention to the footer (e.g. if you're using a bottom sheet that contains actions), then adding contrast between the header and the footer may help draw attention and also distinguish the function of the header (visual only) from the footer (interaction).
On the other hand if the header and footer are in a traditional content layout where they serve to frame the central content and add peripheral navigation and postscript information, shading them consistently helps showcase the body content and communicate their relationship to each other.
The optimal answer depends on your layout requirements.