07.5 / Design Elements #1

07.5 / Design Elements #1
Design elements Design elements are all the individual pieces that allow the user to make selections and navigate their way through the site.
Checkbox examples:

Radio Button examples:

Stepper hover states
Inline additions
Navigation elements Navigation elements are strategically placed to allow the user ease of movement when searching for or entering data.
Corner expanders
HTML5 Slider examples:


Progress arrows / carets
Close-out c
Flight duration label
More information question mark
Tables Tables communicate a lot of information with multiple attributes. It is vital to arrange the data into organized, digestable chunks so that it is easy for the user to scan and understand.
Tables
Tables
Accordians An accordion is a grouped set of collapsible panels that the user can open and close by hovering on or clicking on the title of a specific panel. Accordions allow organizing the content into logical, titled sections in a space-saving way. Accordions usually work best when the user can have only one section open at a time and each section is independent from each other.
Accordians
The expanded (active state) blue accordion remains open until the user completes the task. Only then, does it progressively move on to the next accordion, and open it, so that the user may finish completing all necessary steps. The user is not allowed to jump ahead into upcoming sections without completing the current task.
Available Assets Use the links below to access the available files for the assets referenced on this page.