Visual hierarchy is the order of importance a layout creates. Size, contrast, color, white space, and typography tell the eye what to read first, second, and last. If everything shouts, nothing does.
It is a UI decision that changes UX. A polished page can still fail usability when the price, the phone number, or the CTA is the quietest thing on the screen. Hierarchy is not a design system. The system keeps components consistent. Hierarchy decides which of them matters on this page.
A real-life example of visual hierarchy
A Midtown law firm homepage leads with a full-bleed photo of the building. “Call the office” sits in tiny gray type below it. Visitors admire the brick and never book. Put the name, one sentence, and a visible button first, and the same photo becomes support, not the product.
Decide the one action, then make it the loudest honest element. Read: Visual Hierarchy and contrast for small light text.