Design principles are general rules for making visual decisions that help an interface communicate clearly. They give developers shared vocabulary for discussing why a layout, spacing choice, or visual emphasis serves users, rather than treating design as unexplained taste. section 1.1.1 section 1.2.1
In web interfaces, principles such as proximity, alignment, repetition, contrast, and balance establish relationships between pieces of content. Used together, they create hierarchy: people can see what belongs together, what matters first, and how to move through a page. section 1.2.1 section 2.0
Treat principles as foundations before choosing visual finishings:
- Start with the page structure and layout, since layout provides the foundation for later choices. section 2.0
- Use relationships among elements to make the page’s hierarchy and flow easier to understand. section 2.2
- Create wireframes as layout blueprints before adding typography, color, and other visual details. section 2.2 section 1.2.1
- Apply the same principles while building components or a project-specific design system, rather than relying automatically on a third-party framework. section 1.3
Plan the structure before decorating
A house built without a plan can end up with mismatched doors, oddly shaped rooms, and difficult navigation. A website can feel similarly unfinished when its layout is assembled without structure. A well-defined layout lets elements share proportions and feel as though they belong together before visual details are layered on. section 2.0
Principles connect design work to implementation decisions. Understanding them can improve communication with designers, clients, and teammates; help identify infeasible ideas earlier; and support a lighter design system that ships less code and can improve browser performance. section 1.1.1 section 1.3
Figure 1.3 The iterative process this book covers for a web design or web application project—from identifying the problem to user research, user experience design, design and build phase, and test and evaluate
Use the iterative project flow to place design principles early: they inform user experience and visual design, then remain relevant through building, testing, and evaluation. section 1.2.1 section 1.3
