PolarisDepth → Creating depth
Visual hierarchy
Use a combination of shadows and layering to create a sense of realism and hierarchy in the interface, guiding merchants' attention and indicating interactivity.
Shadows & bevels
Shadows and bevels create the illusion that an element is raised above the rest of the interface, indicating that it's interactive or important.
Use shadows and bevels to indicate important interactions. This will make buttons and other important interactive elements appear more tactile, obvious, and inviting to click.
Overuse shadows or bevels, as they will make the interface look cluttered and confusing. They’re meant to be used sparingly and consistently.
Use consistent shadow and bevel styles across your interface, to maintain visual harmony and make the interface feel more cohesive.
Use different styles for similar elements. This can confuse merchants about the hierarchy and interactivity of the elements.
Lighting
Lighting plays a crucial role in creating the illusion of depth. It reinforces interactivity and guides merchant's attention.
Decrease the brightness of an element when it’s being pushed down in the Z index. When a button is pressed, it goes down.
Increase the brightness of an element when it’s being pushed up in the Z index. When a page is active, it goes up.
Layering
Layering can be used to organize elements and create a sense of hierarchy. By placing elements on different layers, you can indicate which elements are in focus or interactive.
Use layering to organize the interface and guide merchant focus. Higher layers should be used for more important or interactive elements.
Use too many layers in one screen, as it can confuse merchants and make the interface difficult to navigate.
Keep most elements on the same layer to establish a visual baseline, and allow for purposeful use of layering, when necessary, to denote importance or interactivity.
Resort to layering as the initial tool for emphasis. Explore other visual techniques first to highlight elements without disrupting the layering system.
Surface depth
Surfaces can enhance depth perception in an interface by establishing hierarchy and guiding attention.
Distinct separation between surfaces, depending on the visual boundary, can suggest an indentation or elevation, further intensifying the sense of depth and spatial organization.
Use a gray background to de-emphasize contained information. This will divert merchants’ attention towards more important information, as the muted background visually recedes, pushing the contained content into the background.
Use bright or contrasting colors for container backgrounds or borders. This distracts merchants from the main content and creates a cluttered UI. More guidance can be found under Color.
Use unique styles for surfaces, like inset shadows. This makes the interface noisy and creates confusing information hierarchy.