The fewer elements you have on a page, the easier it is to understand what you intended to communicate. However, as more elements are added to your design, it becomes difficult for the eye to distinguish what it should focus on first, effectively losing any sense of hierarchy.
Depth
We have utilised the 3rd dimension and lighting effects within the interface to assist in creating visual emphasis and inject tactile realism into the design, thus better simulating the real world.
We have created a sequence of standardised drop shadows at various heights which have been crafted in a way to compliment the interface elements and components. They must be applied appropriately to the item state and desired emphasis, and never to compete or become over-used.
Shadow 1
0 2px 8px 0 rgba(0,0,0,0.16)
Shadow 1
0 4px 12px 0 rgba(0,0,0,0.16)
Shadow 3
0 8px 16px 0 rgba(0,0,0,0.16)
Shadow 4
0 12px 24px 0 rgba(0,0,0,0.16)