Site anatomy
—

Headers (Logged in)
— 

The ‘logged in’ version of the header uses mostly the same elements and follow the same padding rules as the ‘logged out’ header, except instead of the ‘Log in/Register’ button, it displays the user’s name, icon and dropdown menu. This applies for all desktop screen sizes. For mobile, this will be displayed differently.

Headers Mobile
—

Headers should be simple and contain the appropriate navigation menu and elements.

Navigation
—

The website uses primary and secondary navigation. Elements grouped in the navigation should be spaced out with enough padding around them to provide breathability.

Navigation Mobile
—

For mobile, the website utilizes a drawer-style menu that flies in from either the left or the right of the screen. These menus will be accessible from anywhere in the screen and will provide users the information they need.

Navigation Mobile (Logged in)
—

For mobile, the website utilizes a drawer-style menu that flies in from either the left or the right of the screen. These menus will be accessible from anywhere in the screen and will provide users the information they need.

Modal windows
—

A modal window sits on top of a website’s main window, keeping the main window visible. Users must interact with the modal window before they can return to the main window. Modals are used to gain attention for an important message, get information from the user or show additional information in context.

Footers
—

Footers should contain the Credence logo, privacy menu and copyright. They should be at the bottom of every page.