Visual design fundamentals give a website character and hierarchy after its experience scaffolding is established. Colors, spacing, typography, and animation shape how users scan and understand the interface. section 1.2.1
Build clear relationships and hierarchy by combining these principles:
- Use proximity to group related information and separate unrelated content. section 2.3
- Use alignment to create structure, order, and invisible connections between elements. section 2.3
- Use repetition to create consistency, orient users, and unify the experience across a website. section 2.3
- Use bold contrast through shape, color, or size to attract attention and establish hierarchy. section 2.3
- Use symmetrical or asymmetrical balance to distribute visual weight and guide the eye through the layout. section 2.3
From page structure to maintainable code
Breaking a page into its visual parts can reveal a responsive layout that needs fewer small-screen hacks. Reused headings, buttons, and styles can become shared component or CSS code. A mobile button that is not tall enough is also a reason to propose a visual adjustment rather than preserve a weak implementation. section 1.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 process diagram to connect problem identification, user research, experience design, design and build, and testing and evaluation. section 1.2.1
