AyronSantos
12d419de7c
Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages. DESIGN SYSTEM: - Created PRODUCT.md (5 design principles, WCAG 2.1 AA target) - Created DESIGN.md (34 color tokens, 6 radius scale, full component spec) - Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion) ACCESSIBILITY: - 33 aria-labels across 7 pages (was ~13) - 63 <label> elements (was ~30) - 6 <main> landmarks + role=navigation on all sidebars - Esc to close modals on 4 pages - Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat THEMING: - 216 hardcoded colors replaced with var() references - 449 !important removed from dark-mode.css - Dark mode script unified (was duplicated 9x inline) - All modals converted to .modal-overlay + .modal design system classes CHAT: - Error states for messages (.msg.erro, .msg.enviando) - Connection status indicator - Confirmation modal before finalizar - Input bar reorganized (3 visible actions, + menu) - Right panel accordions - Send button disabled when empty - Touch targets 44px on mobile CLIENT DETAIL: - Tabs/badges/sub-tabs use CSS classes instead of inline styles - 'Iniciar Conversa' button now primary action - alert() replaced with inline feedback - Modal converted to design system classes CLIENT LIST: - Modal moved inside <body> (was HTML-invalid) - alert() replaced with inline feedback - Modal uses .show pattern SETTINGS: - 4 modals converted to design system classes - 14 alert() calls replaced with inline feedback - fecharModal() uses classList instead of style.display ROUTES: - border-radius normalized, hardcoded colors fixed Score progression: Chat: 23 → 32/40 Client List: 32 → 35/40 Client Detail: 26 → 30/40 Settings: 29 → 35/40 Routes: 37 → 38/40 Audit (project): 14/20 → 17/20
5.5 KiB
5.5 KiB
Strip a design to its essence. Remove anything that doesn't earn its place: redundant elements, repeated information, decorative noise, cosmetic complexity.
Assess Current State
Analyze what makes the design feel complex or cluttered:
-
Identify complexity sources:
- Too many elements: Competing buttons, redundant information, visual clutter
- Excessive variation: Too many colors, fonts, sizes, styles without purpose
- Information overload: Everything visible at once, no progressive disclosure
- Visual noise: Unnecessary borders, shadows, backgrounds, decorations
- Confusing hierarchy: Unclear what matters most
- Feature creep: Too many options, actions, or paths forward
-
Find the essence:
- What's the primary user goal? (There should be ONE)
- What's actually necessary vs nice-to-have?
- What can be removed, hidden, or combined?
- What's the 20% that delivers 80% of value?
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
CRITICAL: Simplicity is not about removing features. It's about removing obstacles between users and their goals. Every element should justify its existence.
Plan Simplification
Create a ruthless editing strategy:
- Core purpose: What's the ONE thing this should accomplish?
- Essential elements: What's truly necessary to achieve that purpose?
- Progressive disclosure: What can be hidden until needed?
- Consolidation opportunities: What can be combined or integrated?
IMPORTANT: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
Simplify the Design
Systematically remove complexity across these dimensions:
Information Architecture
- Reduce scope: Remove secondary actions, optional features, redundant information
- Progressive disclosure: Hide complexity behind clear entry points (accordions, modals, step-through flows)
- Combine related actions: Merge similar buttons, consolidate forms, group related content
- Clear hierarchy: ONE primary action, few secondary actions, everything else tertiary or hidden
- Remove redundancy: If it's said elsewhere, don't repeat it here
Visual Simplification
- Reduce color palette: Use 1-2 colors plus neutrals, not 5-7 colors
- Limit typography: One font family, 3-4 sizes maximum, 2-3 weights
- Remove decorations: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
- Flatten structure: Reduce nesting, remove unnecessary containers; never nest cards inside cards
- Remove unnecessary cards: Cards aren't needed for basic layout; use spacing and alignment instead
- Consistent spacing: Use one spacing scale, remove arbitrary gaps
Layout Simplification
- Linear flow: Replace complex grids with simple vertical flow where possible
- Remove sidebars: Move secondary content inline or hide it
- Full-width: Use available space generously instead of complex multi-column layouts
- Consistent alignment: Pick left or center, stick with it
- Generous white space: Let content breathe, don't pack everything tight
Interaction Simplification
- Reduce choices: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- Smart defaults: Make common choices automatic, only ask when necessary
- Inline actions: Replace modal flows with inline editing where possible
- Remove steps: Can signup be one step instead of three? Can checkout be simplified?
- Clear CTAs: ONE obvious next step, not five competing actions
Content Simplification
- Shorter copy: Cut every sentence in half, then do it again
- Active voice: "Save changes" not "Changes will be saved"
- Remove jargon: Plain language always wins
- Scannable structure: Short paragraphs, bullet points, clear headings
- Essential information only: Remove marketing fluff, legalese, hedging
- Remove redundant copy: No headers restating intros, no repeated explanations, say it once
Code Simplification
- Remove unused code: Dead CSS, unused components, orphaned files
- Flatten component trees: Reduce nesting depth
- Consolidate styles: Merge similar styles, use utilities consistently
- Reduce variants: Does that component need 12 variations, or can 3 cover 90% of cases?
NEVER:
- Remove necessary functionality (simplicity ≠ feature-less)
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
- Make things so simple they're unclear (mystery ≠ minimalism)
- Remove information users need to make decisions
- Eliminate hierarchy completely (some things should stand out)
- Oversimplify complex domains (match complexity to actual task complexity)
Verify Simplification
Ensure simplification improves usability:
- Faster task completion: Can users accomplish goals more quickly?
- Reduced cognitive load: Is it easier to understand what to do?
- Still complete: Are all necessary features still accessible?
- Clearer hierarchy: Is it obvious what matters most?
- Better performance: Does simpler design load faster?
Document Removed Complexity
If you removed features or options:
- Document why they were removed
- Consider if they need alternative access points
- Note any user feedback to monitor
When the cuts feel right, hand off to /impeccable polish for the final pass. As Antoine de Saint-Exupéry put it: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."