Tools for visual importance
Learning to style elements in the right way will help you urge or push the user to the right place in an interface. These are 5 concepts that when used, can make elements standout or take the backseat, consider:
- Size: how large or small elements are
- Layout: placement of elements inside a view
- Spacing: distance between elements
- Color: rgb, hex, hsl, or other respresentations of digital pigment
- Contrast: difference between lightness and darkness on near elements
Each of these elements has its own module on UI Foundations, because each has specific applications of how visual importance can be impacted.
Think of each concept like a slider or lever on an audio board that can be adjusted up or down, either increasing or decreasing the importance of an element (instead of volume).
For each slider, adjusting up would increase the visual importance, and adjusting down would decrease it. We'll start with a component that sits somewhere right in the middle on each of these scales, and tweak elements up and down to draw out the information that matters, and give less relevance to the parts that don't.
Get the full course!
- Visual Importance
- Design Systems
- Colors (in progress)
- Space & Size (in progress)
- Data (in progress)
- Pro Details