AMDE 355 · Advanced Web Design · Week 04
Visual Research & Art Direction.
Strong web design starts before the first line of code. This week, you’ll gather visual references, identify the decisions that make them effective, and translate those observations into a clear art direction for a website.
01 / The challenge — turn inspiration into direction
A moodboard can collect interesting images, but art direction gives those references a purpose. You are looking for patterns in composition, typography, color, image treatment, rhythm, and interaction—and then deciding which ideas belong together in your own design.
Research with a question
Gather references that help answer a design problem rather than collecting images only because they look appealing.
Identify visual patterns
Look closely at hierarchy, alignment, contrast, scale, density, and the way images and type work together.
Make deliberate rules
Turn what you learn into a direction that can guide a consistent, usable website—not just one attractive screen.
02 / Read a visual reference
When you find a reference, describe what it does. A useful annotation tells you what to study and how that observation might influence your own work.
Composition & grid
Where does the eye land first? Is the layout balanced, asymmetric, modular, crowded, or deliberately irregular?
Typography
How do size, weight, width, alignment, and line length establish hierarchy and pace?
Color & contrast
Does color organize information, create atmosphere, highlight a key action, or separate sections?
Image treatment
Notice crops, repetition, scale, overlays, grain, aspect ratios, and how images interact with surrounding text.
Spacing & rhythm
How do margins, gaps, repetition, and changes in density affect the reading experience?
Interaction cues
How does the design communicate navigation, links, buttons, hover states, or what can be clicked?
03 / Build a focused moodboard
Gather a small, varied set of references. Your goal is to discover a direction, not to prove how many images you can collect.
- Define the design problem.
Write one sentence describing the project, audience, and intended experience. - Collect 8–12 references.
Mix websites with posters, editorial design, photography, typography, objects, or other relevant visual material. - Annotate each reference.
Identify one or two specific decisions worth studying and record the source link and creator when available. - Group related observations.
Sort the material into themes such as composition, type, color, image treatment, and interaction. - Remove distractions.
Delete references that do not support the direction. A tighter board is often more useful than a larger one.
04 / Translate research into design rules
A clear direction gives you practical decisions you can reuse as you design and code. Use the example below as a starting point, then adapt it to your own project.
Keywords
Choose three to five words that describe the intended experience, such as tactile, restless, precise, quiet, or energetic.
Type system
Define a display style, a readable body style, and a clear relationship between headings, captions, and supporting text.
Color system
Choose a small palette and decide what each color does. An accent should have a job, not appear everywhere by default.
Layout system
Describe your grid, alignment, spacing, image ratios, and where you will allow asymmetry or visual tension.
Example CSS design tokens
Tokens help repeat the same decisions across a page. They make a visual direction easier to maintain when the design grows or needs revision.
05 / In-class exercise — three directions, one subject
Choose a photographer, musician, exhibition, publication, or fictional creative studio. Keep the subject and content the same, then create three distinct visual directions. This makes it easier to compare the design decisions themselves.
Editorial
Use considered typography, clear reading order, intentional margins, and a deliberate pace between sections.
Utility / system
Use modular structure, labels, consistent alignment, and functional color to prioritize clarity and scanning.
Experimental
Explore asymmetry, unusual scale, layered imagery, or controlled tension while keeping the content understandable.
What to produce
- A one-sentence project brief and audience description.
- 8–12 visual references with short annotations and source links.
- Three mini moodboards or direction frames.
- A short rationale comparing the three approaches.
- One selected direction with initial type, color, image, and layout rules.
06 / Critique the direction
- What do you notice first, and which decision makes it dominant?
- Which references best support the direction? Are any included only because they look attractive?
- What connects the typography, color, image treatment, and composition?
- Could another designer use these rules to create a second page that feels related?
- What would need to change on a narrow screen while keeping the same visual character?
07 / What to submit
- A visual research board with 8–12 credited references.
- Three distinct art-direction frames using the same subject.
- Annotations that describe specific design decisions.
- A short comparison and rationale for the direction you selected.
- A concise set of reusable visual rules for type, color, spacing, images, and layout.
Instructor-only material · Remove before publishing to students
Instructor Layout Code — Step by Step
Live-code a compact art-direction study page. Build each layer in order, preview after every step, and ask students to predict how each choice changes the mood and hierarchy.
Demo goal
Create a simple reference-study page with a strong title, three annotated reference cards, and a consistent visual system. This demo emphasizes that art direction is a series of connected decisions—not decoration added at the end.
Step 1 — Create the HTML structure
Start with semantic content. Explain that the page has a title and a group of related reference cards before any visual styling is applied.
Step 2 — Set the visual foundation
Introduce a small set of design tokens and the base layout. Ask students to predict how changing the background or accent will alter the tone.
Step 3 — Establish typographic hierarchy
Make the title the dominant element, then use a small uppercase label to establish context. The body copy should remain comfortable to read.
Step 4 — Build the reference grid
Use intrinsic Grid sizing so cards can wrap as space changes. Explain the role of auto-fit and minmax() before adding any breakpoint.
Step 5 — Add one intentional art-direction choice
Use the accent color to label the reference categories. Ask whether the accent helps the viewer understand the content or is merely decorative.
Step 6 — Test and discuss
- Resize the browser and check that the cards wrap without horizontal scrolling.
- Change the accent color and discuss how it affects the page’s tone and hierarchy.
- Change the title scale and check whether the reading order remains clear.
- Ask students to make a second direction by changing only two or three rules.
- Discuss which rules should remain consistent if the page gains more sections.
08 / Final quality check
- The design problem and audience are specific.
- References are varied, annotated, and credited.
- The three directions differ in meaningful ways.
- The selected direction includes reusable visual rules.
- Typography, contrast, and layout remain readable at narrow widths.