Ten Before/After Fixes
1. Before: Random outer margins per section. After: Apply one section spacing scale.
2. Before: Three primary CTAs in one panel. After: Keep one dominant CTA and demote others.
3. Before: Nested cards inside cards without hierarchy reason. After: Flatten structure and keep one card boundary.
4. Before: Form labels too far from inputs. After: Tighten label-input proximity.
5. Before: Inconsistent heading sizes page to page. After: Lock typography roles to one scale.
6. Before: Top nav overloaded with deep links. After: Move depth to sidebar or tabs.
7. Before: Success shown in blocking modal. After: Use toast for lightweight confirmation.
8. Before: Breadcrumbs on flat pages. After: Show breadcrumbs only for true hierarchy.
9. Before: Exclusive choices built with checkboxes. After: Use single-choice controls.
10. Before: Dark mode uses pure black plus neon text. After: Build layered surfaces with controlled contrast.
Which Mistakes Hurt Most
Priority, spacing, and navigation misuse create the fastest trust drop. Start your cleanup there before visual polish.
Exercise
Run a 10-minute composition triage on one live screen:
- Pick the top three mistakes from the list above.
- Fix one spacing issue and one hierarchy issue first.
- Re-evaluate scan path from header to primary action.
Composition Triage
A focused fix pass that prioritizes high-impact layout mistakes before stylistic polish.