Visual Design Principles
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
- Anonymous contributor
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn UI and UX Design on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Introduction to UI and UX Design
Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.Beginner Friendly2 hours