This week

From feedback to a stronger design

Good critique is not simply deciding whether a design looks good. It is a structured conversation about goals, audience, hierarchy, navigation, interaction, accessibility, and the evidence that helps us decide what to revise.

Learning outcomes

By the end of this lesson, you should be able to:

• Present a web design concept by explaining its purpose, intended audience, and main user task.
• Give specific, constructive feedback based on observable design choices rather than personal taste alone.
• Evaluate hierarchy, layout, navigation, interaction, accessibility, and consistency.
• Separate high-priority usability problems from lower-priority visual refinements.
• Translate critique notes into a realistic revision plan for the final project.
• Describe how testing and iteration can improve an interface.

Before critique

Prepare a short design presentation

Bring your current prototype, wireframes, or working page. You do not need to pretend the design is finished. The purpose of critique is to identify opportunities to improve it.

1. State the purpose. What is this site or interface meant to help someone do?
2. Name the audience. Who is most likely to use it, and what might they need?
3. Identify the main task. What is the most important thing a visitor should be able to accomplish?
4. Show the structure. Walk through the page hierarchy, navigation, and key content areas.
5. Point out one question. Tell the group what you are unsure about or what you want feedback on.

Critique method

Describe → Interpret → Question → Suggest

Use this four-part sequence to keep feedback useful and respectful.

Avoid: “I don’t like it,” “This is wrong,” or “You should just…” These statements do not explain the problem or help the designer decide what to do next.

Try instead: “I had trouble finding the menu because it blends into the background. Could spacing or contrast help it read more clearly?”

What to evaluate

Use a consistent critique checklist

Prioritize revisions

Fix the biggest problem first

Critique can generate a long list of suggestions. You do not have to implement every suggestion. Look for repeated observations, issues that prevent users from completing a task, and changes that support the project goal.

When you choose a revision, write down the observation behind it. “Make it better” is not an actionable task. “Increase the heading contrast so the sections are easier to scan” is actionable.

Final project planning

Turn your critique into a project brief

Your final project should demonstrate intentional design decisions, not just additional content or decoration. Use the brief below to define what you will build and how you will evaluate it.

1. Project concept: In one or two sentences, describe the site or interactive experience.
2. Audience: Identify the primary audience and a need or goal they have.
3. Primary user task: State the most important action a visitor should complete.
4. Content and structure: List the key sections or pages and how users will move between them.
5. Visual direction: Identify your intended tone, typography, color approach, image style, and layout strategy.
6. Interaction: Name any meaningful interactions and explain what each one helps the user do.
7. Responsive plan: Describe how the design will adapt to smaller screens.
8. Accessibility and quality: Identify checks for readable contrast, keyboard access, visible focus, image descriptions, links, and performance.
9. Revision goals: Select three critique findings you intend to address, ranked by priority.
10. Success criteria: Explain how you will know the final design is clear, usable, and complete.

Small JavaScript connection

Interaction should help the user

If your final project includes JavaScript, start with a simple question: what user problem does this interaction solve? An interaction should make a task clearer or easier, not exist only because it is technically possible.

This beginner example makes a button reveal a short explanation. It follows the pattern find → listen → respond:

<button id="show-tip">Show design tip</button>
<p id="design-tip" hidden>
  Make the primary action easy to find.
</p>

const button = document.querySelector("#show-tip");
const tip = document.querySelector("#design-tip");

button.addEventListener("click", function () {
  tip.hidden = false;
});

Line-by-line explanation

1. const button = ... creates a named reference called button. Think of it as a label that lets the script refer to the button in the HTML.
2. document represents the web page currently open in the browser.
3. querySelector("#show-tip") searches the page for the element whose ID is show-tip. The # means “find an ID.” The ID in JavaScript must match the ID in HTML exactly.
4. The next line finds the paragraph with the ID design-tip and stores a reference to it in the name tip.
5. addEventListener("click", ...) tells the browser to wait for a click on the button. An event is something that happens, such as a click, key press, or form submission.
6. function () { ... } contains the instructions to run when that click happens. The curly braces mark the start and end of those instructions.
7. tip.hidden = false; changes the paragraph’s hidden setting to false, so the paragraph becomes visible. In JavaScript, false is a Boolean value meaning “no” or “not enabled.”
8. The semicolon ends a statement. JavaScript can sometimes insert these automatically, but using them consistently can make beginner code easier to read.

Design question: does revealing this tip help someone complete a task, or is it only decorative? Use that question to judge interactions in your final project.

In-class activity

Critique, prioritize, plan

Work in small groups. Each student will present their current design and receive feedback. Keep the discussion focused on the interface and the user’s experience.

1. Present — 2 minutes: explain the concept, audience, main task, and one question you have.
2. Silent review — 2 minutes: reviewers explore the design without immediately offering solutions. Note where you look first, what you understand, and where you hesitate.
3. Feedback — 5 minutes: use Describe → Interpret → Question → Suggest. Include one strength and one opportunity to improve.
4. Designer reflection — 2 minutes: the designer summarizes what they heard and asks for clarification. The designer does not need to defend every decision.
5. Prioritize — 3 minutes: select the three most useful revisions and rank them high, medium, or low.
6. Plan — 5 minutes: complete the final project brief and identify the next concrete step.

Submit before leaving class

• A concise project concept and intended audience.
• The primary user task and proposed site structure.
• Three prioritized revisions based on critique.
• At least two success criteria you can use to evaluate the final project.
• One question or risk you still need to resolve.

Reflection

Before next class

Write a short reflection answering these questions:

• What feedback did you hear more than once?
• Which suggestion will make the biggest difference for your audience, and why?
• Which suggestion will you not use? Explain your reasoning respectfully.
• What is the first revision you will make, and how will you check whether it worked?