Apply visual design principles

Course

Level 1 · Web Introduction

Module

Images and visual design

Expected effort

120–210 minutes

Estimate assumptions: You have completed the responsive profile-page assignment. The estimate includes a visual audit, CSS changes, contrast checks, narrow-screen testing, and the self-check. Optional extension work is not included.

Outcome

You will refine your responsive profile page so its visual design communicates a clear reading order. You will use a small design system instead of styling each element as a separate decision.

Why this matters

Visual design affects whether people can identify the page’s purpose, find related content, distinguish actions, and use the page in different conditions. A deliberate system also makes later changes more predictable.

What you will practice

• Explain how hierarchy, proximity, alignment, repetition, contrast, and whitespace affect a page.
• Assign colors, type, and spacing by role instead of by individual element.
• Create a clear reading order without changing the semantic HTML order.
• Keep text, links, focus indicators, and grouped content distinguishable.
• Test design decisions at a narrow width and at 200% browser zoom.

What is new and what is reused

• New: Visual hierarchy, proximity, alignment, repetition, contrast, whitespace, color roles, and a short visual audit.
• Reused: Semantic HTML, reusable classes, CSS custom properties, the cascade, the box model, Flexbox, media queries, keyboard focus, and responsive testing.

Starting point

Before you start

• Your completed css-profile folder from the responsive profile-page assignment.
• A current version of Edge, Chrome, or Firefox.
• VS Code with index.html and styles.css available.

Current state

The css-profile project has semantic content, reusable CSS, visible focus, a responsive layout, and its own Git history. The separate design-profile lesson workspace does not exist yet.

First action

Create an empty design-profile folder. Copy the visible files and asset folders from css-profile into it without copying .git, then open design-profile in VS Code.

First checkpoint

The lesson workspace opens in the browser, looks the same as the completed CSS assignment, and has no connection to the css-profile repository.

Help trigger

Use the recovery note or ask for help if the copied page loses its stylesheet, if you cannot identify the first point of attention, or if a contrast tool reports an unclear result.

design-profile is a lesson comparison workspace, not a second copy of the css-profile repository. Keep the completed CSS assignment and its GitHub remote unchanged. The later page-asset assignment will create a new dedicated project repository.

Required result

You have completed the lesson when the design-profile page has:

• one clear first point of attention;
• headings and groups that reveal the page structure;
• repeated spacing, type, color, and component patterns;
• related items placed closer together than unrelated sections;
• stable alignment across the main content;
• readable text and links with sufficient contrast;
• a visible keyboard focus indicator that does not depend on color alone;
• no clipped or overlapping content at about 320px width or 200% zoom; and
• a short explanation of three design decisions and the evidence that supports them.

Read the page before changing it

Visual design starts with content and purpose. Styling without a purpose produces many isolated decisions that are hard to judge.

For this lesson, use this purpose statement:

The profile page introduces the author and helps a visitor find examples of the author’s work.

The main visitor should be able to answer these questions in order:

1. Whose profile is this?
2. What kind of work does this person do?
3. Which projects can I inspect?
4. How can I move to another section or contact the person?

Open the page at a wide width and look at it for five seconds. Write down the first three parts that attract your attention. Then repeat the check at about 320px width.

Do not change the CSS during this first audit. The result is evidence about the current design.

Check

Your notes identify the first, second, and third points of attention at both widths. If the order differs from the four questions above, record the difference. A difference is a finding, not a failure.

2Assistance 2 — Use concrete questions for the visual audit

Inspect one question at a time:

1. Is the profile name more prominent than every section heading?
2. Can you identify each section without reading every sentence?
3. Do the project entries look like related items with the same role?
4. Do navigation links look interactive before you point at them?
5. Does any decoration attract more attention than the page purpose?

Record observable evidence such as “the project headings are larger than the page heading” or “the navigation and body text use the same size, weight, and decoration.” Avoid labels such as “boring” or “bad,” because they do not identify a change you can test.

Build a visual hierarchy

Visual hierarchy is the order in which a design directs attention. HTML heading levels describe the document structure. Visual hierarchy makes that structure visible, but it must not replace the semantic HTML order.

Before and after

The same content with two levels of visual hierarchy

Compare the left panel with the right panel. On a narrow screen, compare the top panel with the bottom panel.

BeforeUnclear hierarchy

AboutProjectsContact

Alex Morgan

Frontend student building accessible and responsive websites.

Projects

Profile page — Semantic HTML and responsive CSS.

Event page — A clear page structure for a local event.

Similar size, spacing, and surfaces make the reading order harder to identify.

AfterDeliberate hierarchy

AboutProjectsContact

1 First point of attention

Alex Morgan

Frontend student building accessible and responsive websites.

2 Related section

Projects

Profile pageSemantic HTML and responsive CSS.

Event pageA clear page structure for a local event.

3 Repeated pattern

Size, spacing, grouping, and repetition create an order without changing the content.

Visual hierarchy guides attention. Proximity groups related content, and repetition makes similar content predictable.

The comparison uses several signals together:

• Size and weight make the profile name the first point of attention.
• Spacing separates the introduction from the projects section.
• Proximity keeps each project title close to its description.
• Repetition gives both project entries the same pattern.
• Alignment connects content to shared edges.
• Contrast distinguishes the main text, secondary text, and interactive text.

No single signal must carry the complete hierarchy. A large heading can still be unclear if several unrelated elements use the same size and weight.

Define role-based values

Open styles.css. Find the existing custom properties in :root. Keep useful properties and rename or add properties so each one states a role.

This example shows the naming pattern. It is one possible system, not a required palette:

styles.css — example role-based values

:root {
  --color-page: #f4f7f5;
  --color-surface: #ffffff;
  --color-text: #18322d;
  --color-muted: #4d655e;
  --color-accent: #29675a;
  --color-accent-strong: #194541;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  --radius-card: 0.75rem;
}

Role names preserve intent. If you later change --color-accent, every selector that uses the accent role changes together. A name such as --green describes one current value but not why the value exists.

Keep your existing working system

You do not need to replace custom properties that already have clear role names. Change only what the audit gives you a reason to change.

Make the content order visible

Use type and spacing to create three levels:

1. The h1 identifies the page.
2. Each h2 identifies a major section.
3. Each project heading identifies one item inside a section.

The exact values can differ from this partial example:

styles.css — partial hierarchy example

h1 {
  margin-block-end: var(--space-sm);
  color: var(--color-accent-strong);
  font-size: 2.25rem;
  line-height: 1.1;
}

h2 {
  margin-block: 0 var(--space-md);
  color: var(--color-accent-strong);
  font-size: 1.5rem;
  line-height: 1.2;
}

.project-entry h3 {
  margin-block: 0 var(--space-xs);
  font-size: 1.125rem;
}

If your project entries use h2 because of the document structure, do not change them to h3 only to match this code. Match selectors to your valid HTML.

Check

Reload the page and look away from the screen. Look back for five seconds. The profile name should attract attention first, followed by the introduction or first major section. The source order and heading levels in index.html must remain valid.

Checkpoint: The page has a visible reading order

What now works

The profile name, major sections, and project items have distinct visual roles that agree with the semantic HTML order.

Files changed

styles.css

What remains

Group related content through proximity, alignment, and repetition.

Next action

Inspect the space inside each project entry and the space between major sections.

If it does not work

If several elements still compete for attention, remove one strong signal from the lower-level element before adding more emphasis to the h1.

Group related content

Proximity means that distance communicates a relationship. Related items need less space between them than separate groups need.

Whitespace is unoccupied space around or between content. It is part of the layout. It is not wasted space that must be filled.

Alignment places elements on shared lines or edges. A stable left edge can connect several sections even when their content differs.

Repetition uses the same visual pattern for elements with the same role. Your project entries already share a class, so they can share spacing, borders, surfaces, and heading treatment.

Use a small spacing scale instead of choosing a new value for each gap:

styles.css — grouping example

main > section {
  margin-block-start: var(--space-xl);
}

.project-list {
  display: grid;
  gap: var(--space-lg);
}

.project-entry {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  padding: var(--space-lg);
}

.project-entry p {
  margin-block: var(--space-xs) 0;
}

Use your actual wrapper and class names. If the project list is already a Flexbox container, keep Flexbox. The design principle concerns the relationship between spaces, not the layout method.

Check

Cover the text with your hand or blur your view slightly. You should still be able to identify the major page sections and the repeated project group. Both project entries should use the same pattern unless their roles differ.

If it does not work

• If every gap looks the same, increase the gap between major sections or reduce the gap inside each item.
• If content edges move without a reason, check whether nested elements add different horizontal margins or padding.
• If one project looks different, inspect whether both entries use the same class.
• If the page becomes a wall of boxes, remove a border or surface from a group that does not need a separate boundary.

Checkpoint: Relationships are visible without reading every word

What now works

Related content sits closer together, major sections have more separation, content follows stable edges, and repeated project entries share one pattern.

Files changed

styles.css

What remains

Check contrast and interactive states, then test the design across viewport and zoom conditions.

Next action

Inspect the text, link, background, and focus color pairs with a contrast tool.

If it does not work

If the grouping is unclear, compare only two distances: the gap inside one project entry and the gap between that entry and the next major section.

Use contrast by role

Contrast is a visible difference between elements. Contrast can come from size, weight, shape, spacing, position, border treatment, or color.

Use color as one signal, not the only signal:

• Body text needs strong contrast against its background.
• Secondary text can use a muted color, but it must remain readable.
• Links need a visible distinction such as an underline in addition to color.
• Keyboard focus needs an outline or another clear shape change.
• A selected or current state needs a label, border, icon, or other non-color signal when the state matters.

For normal-size text, use a contrast ratio of at least 4.5:1. For large text, use at least 3:1. Meaningful borders and focus indicators need at least 3:1 against adjacent colors.

styles.css — interaction states

a {
  color: var(--color-accent-strong);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.2em;
}

a:focus-visible {
  border-radius: 0.2rem;
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}

Do not remove an existing visible focus rule. If your current rule is clearer than the example, keep it.

Check contrast in the browser

Current browsers can show a contrast result in the color picker inside developer tools. The exact labels differ between browsers.

1. Inspect a text element in developer tools.
2. Find its color declaration in the Styles or Rules panel.
3. Open the color swatch beside the value.
4. Find the contrast ratio or accessibility result.
5. Confirm the normal text pair reaches at least 4.5:1.
6. Repeat the check for body text, secondary text, links, and text inside a project surface.

If your browser does not show a contrast value, use another trusted contrast checker and enter the foreground and background values manually.

Transparency changes the final color

A transparent text or background color blends with the color behind it. Check the rendered color pair, not only the color value written in the stylesheet.

Test the system in different conditions

Do not make a separate visual design for each device. Keep one content order and one role system, then test whether the design remains clear under different constraints.

Test these conditions:

1. Wide viewport: The content should not stretch into long, hard-to-follow lines. Groups should keep their relationships.
2. About 320px wide: Text and links should wrap. The design should not require horizontal page scrolling.
3. At 200% zoom: The reading order should stay logical and no content should overlap or disappear.
4. Keyboard only: Press Tab through every link. The focus indicator should stay visible and follow the content order.
5. Without hover: Every link and control should remain identifiable before a pointer moves over it.

If a decorative property breaks the page in one condition, remove or adapt that property. Preserve the content and interaction before preserving decoration.

Record three decisions

Write three short notes in a text file named design-notes.txt inside design-profile. Use this structure:

design-notes.txt

Decision: I made the profile name the largest and strongest text.
Reason: The page first needs to identify whose profile this is.
Evidence: It is the first point of attention at wide and narrow widths.

Decision: I used a larger gap between sections than inside project entries.
Reason: The spacing separates topics while keeping each title with its description.
Evidence: The section groups remain visible when I scan the page without reading the text.

Decision: I kept link underlines and added a focus outline.
Reason: Links must remain identifiable without relying only on color or hover.
Evidence: I can find and follow every link with the keyboard.

Use your actual decisions. The notes are evidence of your reasoning, not a required defense of every CSS declaration.

Self-check

Complete these checks against the required result.

1. Open index.html and confirm that the semantic content order and heading levels still describe the document correctly.
2. Look at the page for five seconds and identify the first, second, and third points of attention.
3. Point to one example each of hierarchy, proximity, alignment, repetition, contrast, and whitespace.
4. Confirm that CSS custom properties use role-based names or explain why each existing name is still clear.
5. Compare the space inside one project entry with the space between major sections. The larger distance must separate the larger group.
6. Confirm that every repeated project entry uses the same visual pattern.
7. Check normal text and link color pairs and confirm that they meet the required contrast ratio.
8. Use the keyboard to reach every link and confirm that focus remains visible.
9. Test the page at about 320px width and confirm that no content is clipped, overlapped, or hidden.
10. Test the page at 200% zoom and confirm that the reading order remains clear.
11. Open design-notes.txt and confirm that three decisions each include a reason and observable evidence.

How the principles work together

The principles are not separate decoration rules. They form one communication system:

• Hierarchy sets the order of attention.
• Proximity shows which items belong together.
• Alignment connects items across the page.
• Repetition teaches the visitor what a pattern means.
• Contrast distinguishes roles and states.
• Whitespace preserves separation and reduces competition between elements.

Semantic HTML supplies the content order and meaning. CSS makes those relationships visible. Accessibility tests check whether the design still communicates when color, viewport size, zoom, or input method changes.

Optional visual-design investigations

The required lesson is complete before these investigations. Choose one route that helps you test a specific design decision.

Compare two type scales

Create two versions of the h1, h2, and project-heading sizes. Capture each version at the same viewport width. Ask another person to identify the reading order without explaining your intention first. Keep the scale that produces the intended order more consistently.

Test the design without color

Use browser developer tools or an operating-system display setting to view the page in grayscale. Confirm that headings, links, focus, and groups remain distinguishable through size, weight, decoration, borders, spacing, or position.

Create an alternate theme with the same roles

Change the color values in :root without changing the selectors that use them. Keep each role stable and recheck contrast. Explain which parts changed automatically because the stylesheet uses custom properties.

Next step or safe stopping point

The required lesson is complete when the page communicates a clear order, groups related content, repeats patterns, passes the contrast and interaction checks, and includes three evidence-based design notes.

Continue to Prepare images for the web to choose image dimensions, formats, compression, and responsive markup for this page.

If you stop here, leave yourself this resume note: The profile page has a deliberate visual system. Next, open the web-images lesson and create an assets folder inside design-profile.