# UX / UI Principles — PCDesigner A working design language for every surface that ships under the PCDesigner brand. Use the `pcd-ux-redesign` skill when redesigning a specific screen; come back here for the principles every redesign must respect. ## 1. Personas We design primarily for three users: - **Storefront customer (Casey)** — non-designer, on mobile, wants to finish in under 10 minutes. Emotion: small joy, low patience. - **Shop admin (Avery)** — runs a small print business, comfortable with WP admin, time-poor, wants fewer clicks. Emotion: pragmatic. - **Designer / contributor (Devi)** — sells templates in the marketplace. Wants to see earnings and ship more templates. Emotion: ambitious. When in doubt, optimise for Casey on mobile. ## 2. Jobs to be done - **Casey** (a) "design my t-shirt for tonight's party in 5 minutes", (b) "personalise my mug and feel proud", (c) "see how my design will look 3D before paying". - **Avery** (a) "set up a designable product without learning Photoshop", (b) "approve customer designs without leaving WP admin", (c) "know which templates sell". - **Devi** (a) "publish a template that earns money", (b) "see my balance and withdraw", (c) "know what shoppers want next". ## 3. Design principles (in priority order) 1. **Outcome over interface.** Ship the design, not the tool. Hide the tool if it isn't needed for the current step. 2. **Mobile is default.** Layouts pass on 375×812 first. 3. **Recognition over recall.** Always show, never hide behind a long-press. 4. **Reduce decisions.** Defaults that look great. 5 fonts beats 500. 5. **Forgive mistakes.** Undo > confirm. Toast undo with 5 s timer. 6. **Show progress.** Skeleton loaders, optimistic UI, clear save state. 7. **Speak human.** No "Generate JPEG with embedded ICC profile". Say "Download print-ready file". 8. **Respect WordPress.** On admin pages, use WP admin design tokens (`@wordpress/components` if React island). 9. **Themable storefront.** Read brand color from `class.appearance.customize.php`; never hard-code. 10. **Accessible.** Keyboard, screen reader, color contrast — every release. ## 4. Surface-by-surface guidelines ### 4.1 Storefront editor - Single primary action visible at all times: "Save & Continue". - Secondary actions in a "More" menu. - Side panel collapsed by default on mobile; one toolbar at the bottom. - Auto-save every 10 s with a discreet indicator. - Clipart / template gallery: filterable, searchable, lazy-loaded thumbnails. - Color picker: 8 brand colors first, full picker behind "Custom". - Text tool: 5 fonts featured, full Google Fonts behind "More fonts". - Inline error: "Image too small — minimum 300 DPI, you have 96 DPI" with a "Replace" CTA. - 3D preview: prominent button, opens in modal, dismissable with Esc. - Save success: toast + return to product page; do NOT trap user. ### 4.2 Storefront cart / order - Show design thumbnail at 48×48 px (avoids cart layout shift). - Tooltip on hover with full design. - "Edit design" link returns to studio with prefilled state. - After payment, show clear "Your design will be reviewed" if approval is on. ### 4.3 My Designs - Grid of cards with thumbnail, name, status pill (Draft / Saved / Pending / Approved / Rejected). - Filters: status, product, date. - Bulk reorder shortcut (three-dot menu). ### 4.4 Admin product → Enable Design tab - One-toggle on/off + a "Set up canvas" wizard. - Canvas wizard: choose template, set sides, set bleed, save. 3 steps max. - Default values pre-filled from product type heuristics. - Live preview pane on right. ### 4.5 Admin Templates manager - List view with thumbnail, name, sales count, hit count, vote. - Sort + filter; bulk publish / unpublish. - Per-row "Assign to product" opens the v2.4.8 modal. ### 4.6 Admin Global Templates - Same shape as Templates but adds a "Niche" tag. - Empty state: gallery of seed templates per niche. ### 4.7 Settings tabs - Maximum 8 tabs visible. If more, group under "Advanced". - Every setting has: label (verb-first), short helper text, link to docs. - Sticky save bar at bottom. Disable when nothing changed. ### 4.8 Setup wizard - 4 steps max: Welcome → Connect dashboard → Pick a niche → Activate first product. - Skip-friendly; do not block on every step. - Always show progress. ### 4.9 Designer marketplace (Launcher) - Public-facing storefront card layout. - Designer dashboard: balance, earnings chart, top-selling template, "Publish new" CTA. - Withdraw: clear minimum, ETA, recent payouts. ### 4.10 Live chat - Floating button bottom-right (storefront) or bottom-left (admin). - 1 unread badge style; do not flash or bounce. - No autoplay sound. ## 5. Visual system ### Type - System font stack first (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`). - Base body 16 px, scale: 14 / 16 / 18 / 24 / 32 / 48 px. - Line height 1.5 for body, 1.2 for headings. ### Color tokens - Storefront uses CSS variables read from `class.appearance.customize.php`. - Admin uses WP admin variables: `--wp-admin-theme-color`, etc. - Status colors: success #1e8e3e, warning #e07c00, danger #c2261f, info #0073aa. - All combinations meet 4.5:1 on body, 3:1 on UI. ### Spacing - 4-pt grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. ### Radii / shadow - Radius 6 px default, 12 px modals, 999 px pills. - Shadow 0 1 2 rgba(0,0,0,.08) on cards, 0 8 24 rgba(0,0,0,.16) on modals. ### Iconography - Outline icons, 24×24 px viewport, 1.5 px stroke. - Use one icon library (Heroicons / Lucide / WP icons in admin). Never mix. ## 6. Microcopy - Buttons: verb + noun ("Save design", "Start new design", "Add to cart", "Download print file"). - Avoid "Submit", "OK", "Cancel" — say what cancel does. - Errors: state the problem + the fix on the same line. - Empty states: explain why empty + give the next action. ## 7. Performance budgets | Surface | LCP | TTI | JS gzip | |---|---|---|---| | Storefront product page | ≤ 3.5 s | ≤ 5 s | ≤ 250 KB plugin contribution | | Studio editor | ≤ 5 s | ≤ 7 s | ≤ 600 KB above the fold | | Admin order detail | TTFB ≤ 0.8 s | – | – | | Admin templates list | ≤ 2 s | ≤ 3 s | – | ## 8. Accessibility floor - Focus ring visible on every interactive element. - All controls keyboard reachable in logical order. - ARIA roles: `role="toolbar"` on editor toolbar, `role="dialog"` on modals. - Color contrast verified per release. - Screen reader announcements on save / error. ## 9. Patterns we standardise - **Toast over modal** for confirmations. - **Skeletons** for any list or canvas that needs > 300 ms. - **Empty state** for every list (gallery, templates, designs). - **Inline help** with question-mark icon — opens drawer, not new tab. - **Onboarding tooltips** sparingly; never more than 3 in a row. - **Save state**: dot ▸ saving ▸ saved (3-state). ## 10. Decisions to revisit - Migrate admin Angular templates to React islands or vanilla — pick one and commit (see roadmap Q1 / Q2). - Whether to ship a Tailwind-style utility CSS in admin or stick with WP admin tokens. - Whether to bundle a starter icon set inside the plugin or load from a CDN. - Whether to consolidate Vista + Modern + Mobile into a single responsive editor. ## 11. Anti-patterns - Modal that opens another modal. - Confirm dialog before every destructive action when an undo could replace it. - Side panel with > 5 tabs. - Walls of toggles in settings without grouping. - Long-press only interactions on mobile (must have a tap equivalent). - Loading spinner that is the only feedback for > 5 seconds. - Tab focus ring removed for "design". - Inline `