Visual Design Principles

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Oct 28, 2023
Contribute to Docs

Visual design principles are guidelines for creating visual designs that are effective, cohesive, and appealing. Common principles include hierarchy, contrast, balance, scale, dominance, unity, and Gestalt.

  • Hierarchy relates to the order that a person processes visual information. An interface with a clear hierarchy helps the user prioritize information and systematically view elements on the page. By contrast, a lack of hierarchy creates confusion, as it’s unclear what to focus on.
  • Contrast is used to make elements stand out. Adjusting properties like color, texture, shape, size, and placement can visually distinguish some objects from others on a page.
  • Balance is achieved when elements appear to be equally distributed on a page. Balance can be created even if elements on a page aren’t perfectly symmetrical.
  • Scale is used to convey the proportional relationship between objects. Using scale strategically helps users understand how objects in a design relate to each other.
  • Dominance is used to make one object the focal point of a page or section. Dominance can be incorporated by making one element stand out based on size, shape, color, or other properties.
  • Unity is achieved when all elements work together as a cohesive whole. In products that follow the unity principle, all elements and layouts feel like they belong together.
  • Gestalt relates to how the brain processes visual information. When initially viewing a digital interface, a person perceives the overall design rather than isolating individual elements. The brain naturally categorizes and organizes visual information to make sense of it.

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy