Web Design
The Web Design domain of the CIW Web Design Specialist exam tests how you plan, structure, and visually compose a site so it works for real users in real browsers. Questions blend visual-design principles (color, typography, layout) with production decisions (image formats, separating structure from presentation) and accessibility conformance, so you must move fluently between aesthetic vocabulary and technical rules.
Core visual-design rules
CIW expects you to name and apply the principles of design - unity, variety, balance, contrast, proportion, repetition and proximity - and to justify a layout choice with them rather than with taste. Color schemes are tested by definition: monochromatic (one hue, varied value and saturation), analogous (adjacent on the color wheel), complementary (opposite) and triadic (three evenly spaced hues). For screen typography, prefer sans-serif faces for body copy at small sizes, keep line length near 50–75 characters, and set type in relative units (em, %, rem) so text resizes with the browser.
Structure, presentation and graphics
Structure belongs in well-formed markup with a correct DOCTYPE; presentation belongs in external CSS. Deprecated presentational attributes (font, bgcolor, align) and table-based layouts lose marks. Choose image formats by content: GIF for flat color, logos and simple animation (256 colors, lossless, binary transparency); JPEG for photographs (lossy, millions of colors, no transparency); PNG for lossless graphics needing alpha transparency or crisp edges.
Accessibility rules to quote
WCAG 2.x AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18 pt, or 14 pt bold). Every meaningful image needs a text alternative, color must never be the only carrier of meaning, and headings must follow a logical order.
Worked example
A candidate sets body text at #777777 on #FFFFFF and argues that mid-grey "obviously" passes. Compute it: #777777 has a relative luminance of about 0.185, so contrast = (1.0 + 0.05) / (0.185 + 0.05) ≈ 4.48:1. That falls just under the 4.5:1 AA threshold for normal text, so the design fails by a hair - darken the grey to #767676 or darker, or move the text into the large-text tier where 3:1 applies. The reasoning, not the guess, is what earns the mark.
Traps that cost marks
- Eyeballing contrast instead of computing it.
- Assigning JPEG to line art or text (compression artifacts) or GIF to photographs (banding).
- Fixed pixel font sizes or fixed-width layouts that break when text is enlarged.
- Image-only navigation with no alt text or text fallback.
- Using color alone (red text) to flag errors or required fields.
- Testing in one browser and declaring the site finished.