# Swiss Design Implementation: Quick Reference Guide **Project:** Bluesky Portfolio Redesign **Last Updated:** 2025-11-15 --- ## At-a-Glance Design Decisions ### ✅ DO: Implement These Changes | Element | Current | Swiss Transformation | |---------|---------|---------------------| | **Color Palette** | Dark theme (blues/grays) | Black/white with blue accent only | | **Borders** | 2px rounded (8px radius) | 3px sharp (0px radius) | | **Typography** | Inter (multi-weight) | Keep Inter (more accessible than Helvetica) | | **Grid** | 1/2/3 columns responsive | Same grid, increase gutters to 24/48px | | **Whitespace** | 16px gaps | 24px mobile, 48px desktop | | **Toggle Buttons** | Button chrome with icons | Typography-based with ▸/▾ arrows | | **Section Dividers** | Implicit spacing | 3px horizontal rules | | **Text Hierarchy** | Color-coded (blue/white/gray) | Typography + spacing only (all black) | ### ❌ DON'T: Avoid These Patterns - ❌ Helvetica (accessibility issues—use Inter instead) - ❌ Multiple accent colors (stick to black/white/blue) - ❌ Gradients or shadows - ❌ Decorative elements without function - ❌ Background color changes on hover - ❌ Reducing accessibility for aesthetics --- ## Interaction State Reference ### Project Cards ``` Default: 3px black border, white bg Hover: 3px blue border (#1185fe) Focus: 3px blue outline, 0px offset Active: 3px blue border + translateY(1px) ``` ### Typography-Based Toggles ``` Collapsed: ▸ SECTION TITLE ━━━━━━━━━━━━━━━━━━━━━ Expanded: ▾ SECTION TITLE ━━━━━━━━━━━━━━━━━━━━━ [content grid] Hover: Underline on title text Focus: 3px blue outline around heading ``` ### Badge Links (Header) ``` Default: 2px black border, white bg Hover: 3px blue border, blue text Focus: 3px blue outline, 0px offset ``` --- ## Typography Scale | Element | Size | Weight | Other | |---------|------|--------|-------| | Site Title (h1) | 40px | 700 | Flush-left | | Section Title (h2) | 28px | 700 | Flush-left | | Project Title (h3) | 20px | 700 | Flush-left | | Kicker Text | 11px | 600 | ALL CAPS, 0.15em letter-spacing | | Body Text | 16px | 400 | 1.6 line-height | | Link Text | 16px | 600 | Underline on hover only | --- ## Spacing System (8px Grid) ``` Between major sections: 48px (--spacing-lg) Section title → content grid: 32px Between cards in grid: 24px mobile, 48px desktop Inside cards (padding): 24px (--spacing-md) Between card elements: 16px (--spacing-sm) Kicker → Title: 8px (--spacing-xs) ``` --- ## Responsive Breakpoints | Breakpoint | Grid Columns | Border Weight | Spacing | |------------|--------------|---------------|---------| | Mobile (<640px) | 1 column | 2px | 24px gaps | | Tablet (640-1023px) | 2 columns | 3px | 48px gaps | | Desktop (≥1024px) | 3 columns | 3px | 48px gaps | --- ## Color Palette (Exact Values) ```css /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-card: #ffffff; /* Text */ --text-primary: #000000; --text-secondary: #000000; /* No gray—all black */ /* Borders & Accents */ --border-color: #000000; --accent-color: #1185fe; /* Blue for interactive states only */ --accent-hover: #0d6ecc; ``` --- ## Accessibility Checklist Before launch, verify: - [ ] All text is black on white (no gray text) - [ ] Focus indicators are 3px solid blue, visually obvious - [ ] Touch targets are minimum 44px × 44px - [ ] ARIA attributes intact (aria-expanded, aria-controls, aria-label) - [ ] Keyboard navigation works (Tab, Space, Enter) - [ ] Skip link functions correctly - [ ] Screen reader testing (NVDA, JAWS, VoiceOver) - [ ] Color contrast meets 4.5:1 (normal text), 3:1 (large text, interactive elements) - [ ] No reliance on color alone for information - [ ] Text scalable to 200% without breaking layout --- ## User Testing Checklist ### Phase 1: A/B Usability (20 participants) - [ ] Task completion rate ≥95% - [ ] Task time within 10% of current design - [ ] No increase in error rate - [ ] Cognitive load score ≤ current baseline ### Phase 2: Accessibility (10 participants with diverse abilities) - [ ] Screen reader users complete all tasks - [ ] Keyboard-only users complete all tasks - [ ] Low-vision users (magnification) complete all tasks - [ ] Motor impairment users (switch/eye-tracking) complete all tasks - [ ] 100% WCAG 2.1 AA compliance confirmed ### Phase 3: Mobile (15 participants) - [ ] <5% mis-tap rate on interactive elements - [ ] Heavy borders don't create visual clutter (>6/10 rating) - [ ] Text readable at 16px without zoom - [ ] Single-column layout works on 320px width --- ## Common Pitfalls to Avoid ### Pitfall 1: "Too Minimal" Syndrome **Problem:** Removing interaction affordances in pursuit of pure aesthetics **Solution:** Every element must have visible hover + focus states, even if subtle ### Pitfall 2: Helvetica Dogma **Problem:** Using Helvetica despite accessibility concerns for "authenticity" **Solution:** Inter is acceptable and superior for screen reading—function over tradition ### Pitfall 3: Desktop-First Grids **Problem:** Heavy borders overwhelming mobile screens **Solution:** Reduce to 2px borders on mobile breakpoint, test at 320px width ### Pitfall 4: Colorless Monotony **Problem:** Pure black/white feels sterile and disengaging **Solution:** Use blue accent strategically, asymmetry in grid for visual interest ### Pitfall 5: Sacrificing Accessibility **Problem:** Removing ARIA, focus indicators, or touch targets for "cleanliness" **Solution:** Accessibility is non-negotiable—design around constraints creatively --- ## File Changes Required ### 1. CSS Variables Update - Location: `index.html` lines 33-64 - Changes: Color palette, spacing, typography scale, border-radius ### 2. Project Card Markup - Location: `index.html` lines 300-343 (CSS), 532-601 (HTML) - Changes: Remove border-radius, update border-width, adjust hover states ### 3. Toggle Button → Typography Pattern - Location: `index.html` lines 249-290 (CSS), 614-616 (HTML) - Changes: Convert button chrome to clickable heading with Unicode arrows ### 4. Section Dividers - Location: `index.html` (between sections) - Changes: Add 3px horizontal rules (`
`) between content sections ### 5. Badge Links - Location: `index.html` lines 150-176 (CSS), 478-515 (HTML) - Changes: Remove border-radius, update hover states ### 6. JavaScript Toggle Function - Location: `index.html` lines 802-863 - Changes: Update to toggle ▸/▾ arrows instead of +/− symbols --- ## Launch Sequence ### Week 1-2: Build & Test 1. Create Swiss prototype in `swiss_redesign/` subdirectory 2. Recruit 20 A/B test participants 3. Conduct task-based usability testing 4. Analyze results, iterate on problem areas ### Week 2-3: Accessibility Validation 1. Recruit 10 participants with assistive technology 2. Screen reader testing (NVDA, JAWS, VoiceOver) 3. Keyboard-only navigation testing 4. Low-vision and motor impairment testing 5. Fix any WCAG violations immediately ### Week 3-4: Mobile Testing 1. Recruit 15 participants with various devices 2. Test on iPhones (SE, 13, 15 Pro Max) 3. Test on Android (Pixel, Samsung Galaxy) 4. Test on tablets (iPad, Android) 5. Adjust border weights and spacing if needed ### Week 4-5: Analytics Prep (Optional Eye-Tracking) 1. Conduct eye-tracking study (10 participants) 2. Analyze heatmaps and fixation patterns 3. Validate visual hierarchy matches attention flow 4. Make final refinements ### Week 6-8: Soft Launch 1. Deploy to 50% traffic (A/B split via server) 2. Monitor bounce rate, CTR, time on page, section expansion 3. Post-visit survey: aesthetic + usability ratings 4. Collect behavioral data for 2 weeks ### Week 9: Full Rollout (or Rollback) **If success criteria met:** - Deploy Swiss design to 100% traffic - Archive current design as `index-original.html` - Update documentation **If success criteria NOT met:** - Rollback to current design - Document learnings - Plan iteration based on user feedback --- ## Success Criteria (Go/No-Go Decision) Must achieve ALL of the following: ✅ **Usability:** - Task completion rate ≥95% - Task time within 10% of baseline - Error rate no higher than baseline - Cognitive load score ≤ baseline ✅ **Accessibility:** - 100% WCAG 2.1 AA compliance - Positive feedback from assistive technology users - All interactive elements keyboard accessible - Focus indicators visible and logical ✅ **Mobile:** - <5% mis-tap rate - Visual clarity rating >6/10 - Text readable without zoom at 16px ✅ **Engagement:** - Bounce rate ≤ baseline - Section expansion rate ≥80% - Click-through rate maintained or improved - Aesthetic satisfaction >6/10 **If ANY criterion fails:** Iterate and re-test before full rollout. --- ## Emergency Rollback Procedure If critical issues arise post-launch: 1. **Immediate rollback (< 5 minutes):** ```bash cd /home/coolhand/html/bluesky cp index-original-backup.html index.html # Clear CDN cache if applicable ``` 2. **Document the issue:** - What went wrong? (specific user complaint or metric) - When was it detected? - How many users affected? 3. **Root cause analysis:** - Review testing data: was this caught in testing? - User feedback: what specifically failed? - Analytics: which metric dropped? 4. **Plan iteration:** - Fix the specific issue in staging - Re-test affected functionality - Schedule new soft launch with targeted monitoring --- ## Questions? Contact Info **Designer/Developer:** Luke Steuber **Website:** https://www.lukesteuber.com **LinkedIn:** https://www.linkedin.com/in/luke-steuber/ **Project URL:** https://dr.eamer.dev/bluesky --- **Remember:** Swiss design is about **function over form**, not **form without function**. Every aesthetic decision must serve usability. When in doubt, test with real users.