2 Chapter 2: Principles of Visual Design
Introduction
Good design doesn’t happen by accident — it’s the result of deliberate, well-informed choices. The Principles of Visual Design are the foundation for creating attractive, functional, and accessible web pages. This week, we’ll focus on a widely used framework known as CRAP, which stands for Contrast, Repetition, Alignment, and Proximity. Understanding CRAP principles allows you to identify what makes a design effective and apply those same strategies in your own work. You’ll also put theory into practice by creating a mood board — a visual reference that captures the tone, style, and personality of a project before you start building. Finally, you’ll experiment with AI image generation to create at least one element of your mood board.
1. The CRAP Principles
Contrast
Contrast is about difference. It draws the viewer’s attention, establishes hierarchy, and ensures that important elements stand out. Contrast can be achieved through:
– Color: Dark text on a light background (or vice versa) improves readability.
– Size: Larger headlines naturally command attention over smaller body text.
– Shape: A circular call-to-action button will stand out among rectangular elements.
Pro Tip: Contrast isn’t only visual — it can also mean conceptual contrast, like pairing a minimalist layout with a bold, vibrant hero image.
Repetition
Repetition reinforces visual consistency. Reusing design elements — like colors, shapes, fonts, or icon styles — creates a cohesive user experience.
– Example: A brand’s primary color appearing in the header, call-to-action buttons, and link hover states.
– Benefit: Repetition builds familiarity, which makes navigation easier for users.
Pro Tip: Avoid boring repetition. Slight variations (e.g., adjusting button shades) can keep designs dynamic without losing consistency.
Alignment
Alignment ensures that every element visually connects to something else on the page. This creates order, organizes information, and guides the eye naturally.
– Left-aligned text is easiest for most readers.
– Grid systems help maintain alignment across multiple devices.
– Poor alignment can make a design feel messy or unprofessional.
Pro Tip: Invisible lines and grids are your friends — even if users never see them, they’ll feel the structure.
Proximity
Proximity is about grouping related elements together and separating unrelated ones. It helps users quickly understand which information belongs together.
– Example: Placing a product photo next to its description and price, rather than across the page.
– Poor proximity can cause confusion or make a design harder to scan.
Pro Tip: Use white space intentionally — space is a powerful design tool, not “empty” area.
2. Visual Design Basics Beyond CRAP
While CRAP is a great foundation, web design also benefits from additional considerations:
– Typography: Choose typefaces that are readable and appropriate for your project’s tone. Limit to 2–3 font families.
– Color Theory: Understand how color relationships (complementary, analogous, triadic) affect mood and readability.
– Hierarchy: Use size, weight, and positioning to show what’s most important.
– Balance: Distribute elements evenly so one side of the page doesn’t feel “heavier” than the other.
3. Mood Boards in Web Design
A mood board is a collage of images, colors, textures, and typography that represents the overall feel of a project. It serves as a visual reference point and helps communicate ideas to clients, collaborators, or your future self.
Why Use a Mood Board?
– Helps clarify your vision before coding begins.
– Ensures visual consistency across a site.
– Speeds up the design process by providing a style guide.
What to Include:
– Color palette swatches
– Typography samples (headlines, body text)
– Sample photography or illustrations
– Textures, patterns, or icon styles
– UI inspiration (buttons, form elements)
4. AI in Mood Board Creation
AI image generation tools like Adobe Firefly, DALL·E, or Canva Magic Media can quickly create custom imagery that fits your theme. In this week’s project:
– Use AI to create at least one original mood board element.
– Attribute AI-generated content clearly in your presentation.
– Ensure AI output aligns with accessibility and ethical standards (avoid misleading imagery, respect copyright).
5. Applying CRAP Principles to Your Project
When creating your mood board or conducting a visual design critique:
1. Identify where each CRAP principle appears.
2. Consider whether the design is intentional and effective.
3. Suggest improvements where principles are missing or poorly applied.
4. Keep accessibility in mind — high contrast helps all users, consistent alignment aids screen reader flow, etc.
Key Terms
Contrast: Design principle that highlights differences to create emphasis.
Repetition: The reuse of visual elements to create consistency.
Alignment: The arrangement of elements so that they visually connect.
Proximity: The grouping of related elements to improve clarity.
Mood Board: A visual collage that conveys style and tone before production.
Visual Hierarchy: The order in which the eye perceives elements.
White Space: The empty space around elements that improves readability and focus.
Summary
The CRAP principles — Contrast, Repetition, Alignment, and Proximity — are essential tools for building clean, effective, and user-friendly designs. Combined with a clear mood board, they give you a roadmap for creating a cohesive website experience. Adding an AI-generated element is not just a tech experiment — it’s a chance to explore new creative workflows while staying grounded in strong design fundamentals.
