Contents
Elevation system
Creating and calculating elevation values
Principles
Best practices
Development application
Why
ITHAKA had used elevation in certain places across its platforms, but it wasn’t an effect that was consistent. For example, a card on one platform would have a shadow, but on another, it wouldn’t.
The values differed and so did the light source.
As a company, one thing we love to focus on is consistency.
And this was one area I wanted to take charge of and fix.
Follow my process below on how I created our new system…
Level 1
Level 2
Level 3
Level 4
Level 5
First, I needed to define what elevation is and when it should be utilized.
Elevation is used in order to provide visual cues about a component’s depth from a website’s surface and its distance in relation to other components.
Elevation will be used in order to give users a signal that a component is being prioritized, emphasized, or requires their focus. This can come from the visual cue of dynamic elevation or static elevation.
Elevation system
ITHAKA needed to use an elevation system to assign consistent levels to certain components. By following the guide I made, uniform usage is guaranteed to be implemented.
(Our light source (X) would consistently come from 12 o’ clock and our directional movement (Y) will move in relation to the moving component)
Creating and calculating elevation values
Creating
Shadow stacking
Stacking shadows is the direction I went forward with. By avoiding solid outlines, the component is able to avoid harsh edges, which will be especially helpful when elevation rises to higher levels.
Visually, no outline worked better as diffusion kept components soft as it spread further and further.
The top shadow gives the illusion of a stroke while the bottom shadow tackles the actual shadow.
If you only have the top shadow, the top of the component will blend into the background, and if you only have the bottom shadow the component will be undefined.
Outline only
Top shadow only
Bottom shadow only
Both shadows
Calculating
Values
Though there is a set guide for us to follow, I needed to make sure that ITHAKA could easily add levels if need be.
So, what is the calculation I used?
To keep elevation levels harmonious, following this 2 step system is very important:
1. The top shadow should consistently stay at these values no matter the elevation level:
X =0
Blur =2
Y =1
Spread =0
2. Starting at level 2 is when calculations are used. The bottom shadow should comply with the following system as each level rises:
X =0
Blur +2
Y +2
Spread +1
Level 2
Level 3
Level 4
Principles
Consistent
All elevation is used at the appropriate level assigned to that component. Always follow the recommended shadow pairings.
Suitable
Dynamic elevation should only change values when suitable for a component’s behavior.
Practical
Elevation is not solely used for visually enjoyment. It should communicate to users that there is an emphasis or prioritization when it comes to a given component.
Best practices
Dos
Use when there is content behind a component (eg. a sticky header) and it is available to be interacted with.
Alter the Y-axis for directional movement.
Donts
Apply elevation to components in order to be “visually pleasing”.
Use hover elevation if interactive content is visually communicated in another way. Eg. The ability to move content is already visually communicated through the reorder icon.
Change the light source.
Development application
I converted all values into CSS for developers to easily apply them to components in our library.
(How could I forget about you all!)