Design Critique and Communication: Giving Principled Feedback

1Observation + Principle + Measurable evidence + Suggestion
2
3Example:
4  Observation: 'The filter dropdown appears at the same visual depth as the page'
5  Principle: 'Figure-Ground principle: overlaid elements need elevation cues'
6  Evidence: 'The dropdown has no box-shadow, so it blends with the page surface'
7  Suggestion: 'Adding box-shadow: 0 8px 24px rgb(0 0 0 / 0.12) would
8               establish the dropdown as a foreground figure'
9
10Result: 'The filter dropdown blends with the page content (no elevation cues).
11          By Gestalt Figure-Ground principle, overlay elements need shadows or
12          backdrop to establish themselves as foreground. Suggest:
13          .dropdown { box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }'

1Weak: 'That animation is too complex to build'
2
3Strong: 'The accordion animation as designed uses max-height transition,
4  which causes layout thrashing and degrades Interaction to Next Paint (INP).
5  The same visual effect can be achieved with grid-template-rows animation,
6  which is GPU-composited and maintains 60fps on all devices.
7  Should I implement the design with the more performant approach, or
8  is the specific animation behavior important enough to use max-height?'

1Weak: 'This isn't accessible'
2
3Strong: 'The filter button row has no visible focus ring — clicking focuses
4  the first button, but keyboard users cannot see which button is focused.
5  For WCAG 2.4.7, keyboard focus must be visible. Adding
6  .filter-btn:focus-visible { outline: 2px solid var(--color-action); }
7  fixes this without changing the visual design for mouse users.'

1Weak: 'Those images will make the page slow'
2
3Strong: 'The hero section currently loads the background image without
4  a specified width and height. This causes Cumulative Layout Shift (CLS)
5  as the image loads. WCAG 1.3.4 and Core Web Vitals require stable layouts.
6  Adding width and height attributes to the img element eliminates this shift:
7  <img width="1440" height="480" loading="lazy" src="hero.jpg">'

1Weak: 'This doesn't work on mobile'
2
3Strong: 'The data table layout uses horizontal columns that become unreadable
4  at 375px — the leftmost column is only 60px wide for content that needs
5  120px. A card-based layout for mobile (each row becomes a card with
6  key: value pairs) is a standard accessible pattern for this case.
7  Should I implement a responsive card fallback at < 640px?'

1Hierarchy: the visual ordering of elements by importance
2Contrast: the difference in visual weight between elements
3Alignment: the consistent positioning of elements along shared lines
4Proximity: spatial grouping of related elements
5Repetition: consistent use of visual elements throughout a design
6Rhythm: regular variation of design elements creating visual flow
7Balance: equal distribution of visual weight across the composition
8Unity: all design elements feeling part of one coherent system
9
10Specific terms:
11Baseline: the imaginary line on which text sits
12Kerning: spacing between specific letter pairs
13Tracking: uniform spacing across all letters in text
14Leading: vertical spacing between lines of text (= line-height)
15Ascender: the part of a letter that extends above the cap height (h, l)
16Descender: the part that extends below the baseline (g, p, y)
17Cap height: the height of uppercase letters
18X-height: the height of lowercase letters without ascenders/descenders
19
20Color:
21Hue: the pure color (red, blue, yellow — the 'what color')
22Saturation: the intensity of the color (vivid vs gray)
23Lightness: the amount of white or black in the color
24Value: the lightness/darkness of the color (= Lightness in HSL)
25Tint: color + white (lighter version)
26Shade: color + black (darker version)

1Designer: 'The button needs more visual weight'
2Developer with vocabulary: 'I can increase visual weight through:
3  (a) larger padding — increases the button area
4  (b) heavier font-weight — currently 400, can go to 600
5  (c) higher color saturation — current #3b82f6 is medium saturation
6  (d) adding a box-shadow — creates elevation
7  Which dimension did you want to adjust?'
8
9Designer: 'The card feels too light'
10Developer: 'Light as in visual weight or light as in color lightness?
11  If visual weight: I can add a border or increase padding
12  If color: I can darken the background from #f9fafb to #f3f4f6'

1Stakeholder: 'There is too much empty space — can we fit more content?'
2
3Design-informed response:
4'The current whitespace is functional — it creates the visual separation
5that lets users scan and find what they need quickly. Reducing it by 50%
6would require users to slow down to parse content that currently scans
7in seconds.
8
9In usability testing, pages with appropriate whitespace show 20-30%
10better task completion rates than dense alternatives. The tradeoff:
11content density vs user comprehension and conversion rate.
12
13If you need to fit more content: we can consider reducing padding
14in the less-critical secondary sections while preserving whitespace
15around the enrollment CTA, which directly drives conversion.'

1Stakeholder: 'The design is too simple — our competitors have more features'
2
3Design-informed response:
4'The current design applies Hick's Law — fewer options means faster
5decisions. Our checkout has 3 form fields; competitor X has 8.
6Formstack research shows every additional form field reduces
7completion rate by approximately 11%.
8
9Simplicity here is a competitive advantage, not a limitation.
10If we add fields, we should add only those with data showing
11they improve downstream quality (e.g., job title for B2B leads).'

1Stakeholder: 'Can we make the button more colorful? It's very plain'
2
3Design-informed response:
4'The current blue meets WCAG AA contrast (4.8:1) for the text inside.
5A more saturated or brighter color might fail this threshold, which
6creates legal accessibility risk.
7
8If we want more visual impact while maintaining accessibility:
9options include adding an arrow icon to the button (adds energy
10without changing color), or adding a subtle drop shadow
11(creates depth without changing the base color).'