Visual Hierarchy in UX Design
Sizing
• use sizing and scale to draw more attention to elements more than others - need to be careful if assets become too large. (keep font-weight and sizing in mind)
Color
• bright/dull colors can also be used to draw users attention to specific areas in the user-journey creating a more pleasant experience
primary high contrasting color on buttons that serve as the most crucial call to actions.
Viewing Patterns
The Z Pattern
• the Z pattern starts on the top left to the top right, and then down to the lower left, and across horizontally to the lower right, essentially following the path of the letter 'Z'.
On Apple’s website, as you’ll see below the Mac page is designed to show multiple Mac options at the top, scanning horizontally and then placing a tagline along the diagonal direction. It then finishes off with a call to action for their product. All information is laid out very clearly, in a path that most people are already subconsciously drawn to use.
The F Pattern
• the F pattern is most commonly used for text-heavy sites such as article pages or blogs. It allows the user to read information from top left to top right all the way down each line.
Proximity of elements
Placing elements closer together can give the reader the perception that they are related, which will give them the incentive to read on or engage further.
•try asking the right questions that will help identify your target and improve engagement. Oftentimes on a team/client might say, "bold the title more to make it stand out", or "can we use orange in the background to make it pop?", but its important to ensure that you don't give importance to every single element. This can make a page super distracting and unclear.