AMDE 355 – Critique & Revision (Week 8)

01 / Why critique is part of design

A critique is not a vote on whether a design is attractive. It is a structured conversation about how well a design communicates, supports its audience, and meets its goals. A useful critique identifies what is working, what is unclear, and what could be tested or improved.

Vague feedback versus actionable feedback

02 / The critique framework

Use the same sequence for each project. The order helps separate observation from opinion and encourages feedback that can be acted on.

03 / A simple priority system

Feedback is not all equally urgent. Use this priority system to decide what to address first. The labels are a planning tool, not a grade.

04 / Review hierarchy, typography, and spacing

When a page feels unclear, inspect the system before adding decoration. Ask whether the layout makes the most important information easy to find.

Example — tighten an unclear heading hierarchy

Imagine a page where the main heading is only slightly larger than a card title. The first example has no clear hierarchy; the second uses a deliberate scale.

/* The hierarchy is too similar. */
h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
.card-title { font-size: 1.3rem; }

/* Use a stronger, responsive scale. */
h1 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.05;
}
h2 {
  font-size: 1.8rem;
}
.card-title {
  font-size: 1.2rem;
}

Discussion: bigger is not automatically better. The goal is to make levels clear and consistent, then test the hierarchy in the actual layout and at different screen widths.

05 / Review navigation and interaction

Do not evaluate an interface only as a static screenshot. Interact with it. A navigation system can look polished and still be difficult to use.

• Can you predict what each navigation label means before clicking?
• Is the current page or section identifiable when appropriate?
• Can you find the primary action without searching?
• Does a button or link look interactive and behave as expected?
• Can you use the interface with a keyboard, and is focus visible?
• Does the page give feedback after an action?

Example — visible keyboard focus

If the focus indicator has been removed, a keyboard user may lose track of their position. This small CSS rule makes focus easier to see.

a:focus-visible, button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}

Have a classmate press Tab through the page without using the mouse. Ask them to narrate where they are and what they expect to happen.

06 / Responsive critique: desktop, tablet, mobile

Responsive design is more than shrinking a desktop page. Content, navigation, spacing, and layout may need to change as the available space changes.

Example — make a two-column layout collapse cleanly

.project-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 2rem;
}

@media (max-width: 700px) {
  .project-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

Test it: temporarily make the browser narrow, then widen it. If content gets squeezed before the media query activates, consider changing the breakpoint or using a more flexible grid.

07 / How to give feedback that helps

Use this repeatable sentence structure when responding to a classmate. It keeps feedback grounded in an observable design choice and a project goal.

Example: “I noticed the three cards have equally strong titles and buttons. I expected one story to be the featured item because it appears first. Because all three compete equally, the priority is unclear. You could test a featured card or stronger heading hierarchy and compare the result.”

08 / In-class assignment — Critique, prioritize, revise

Use your current Project 1 interface. You will present the design, receive peer feedback, choose the most important changes, and document the revision.

Deliverables

• Current Project 1 design or prototype.
• Peer critique notes from at least two classmates.
• A prioritized list of at least three potential improvements.
• At least two implemented revisions.
• Before-and-after evidence and a brief reflection.

09 / Critique worksheet

Use these questions as a guide during peer review. Be specific and refer to an actual part of the interface whenever possible.

10 / Final self-check

Before you finish, review the project against this checklist.

• The audience, purpose, and primary action are clear.
• The visual hierarchy guides attention in a useful order.
• Typography and line length support comfortable reading.
• Navigation labels and interactions are understandable.
• The layout has been checked at desktop, tablet, and mobile widths.
• Keyboard focus is visible and the interface can be navigated without a mouse.
• Feedback has been prioritized instead of treated as a list of mandatory opinions.
• At least two meaningful revisions are documented with before-and-after evidence.
• The reflection explains what changed and what should be tested next.