# D019 - Visual Richness Overhaul

> D019 - Visual Richness Overhaul: a note from the Obsidian vault behind https://saifsiddiqui.in.

Canonical URL: https://saifsiddiqui.in/hi-latn/brain/d019-visual-richness-overhaul/ (this is its markdown representation; the same URL serves HTML to browsers)
Other languages: en: https://saifsiddiqui.in/brain/d019-visual-richness-overhaul/ · hi: https://saifsiddiqui.in/hi/brain/d019-visual-richness-overhaul/ · kn: https://saifsiddiqui.in/kn/brain/d019-visual-richness-overhaul/ · ur: https://saifsiddiqui.in/ur/brain/d019-visual-richness-overhaul/ · te: https://saifsiddiqui.in/te/brain/d019-visual-richness-overhaul/ · ar: https://saifsiddiqui.in/ar/brain/d019-visual-richness-overhaul/

**Type:** decision  
**Status:** accepted  
**Created:** 2026-07-17  
**Tags:** decision, design, visuals

## D019: Visual richness overhaul

**Context:** The English site shipped text-led with images deferred; the audit + Saif found it "boring / cheap / off", all text on near-black, no product screenshots, no icons, no App Store/Play Store badges, dead scroll space, empty-looking graph/analytics, and (worst) live `N` stats + `[TODO]` placeholders in case-study Outcomes.

**Decision, add real visual richness (keeping the Stone base + the strong typography/i18n/engineering):**
- **Imagery everywhere:** real screenshots of Saif's live web projects; device-frame mockups + official App Store / Play Store badges for the apps; product logos; tech-stack icons; section iconography.
- **Kill all visible placeholders**, no `N`, no `[TODO]`; real metrics or honest qualitative copy.
- **Case studies → scrollytelling** (sticky device frame + narrative + before/after) not walls of text; next-project nav.
- **Graph:** typed nodes (icon + tone + legend), readable labels (hover/zoom), reliable drag, click-to-focus; fix blank homepage teaser canvas.
- **Analytics + empty/loading + AI-error states** look designed (skeletons, styled error card w/ mailto).
- **Motion:** staggered reveals, magnetic hover, page transitions; FIX the scroll-jump on Work-card hover.

**Colour:** stay on the **Stone base** (light theme is a strength) + **one restrained accent** for emphasis/graph focus, richness comes from imagery/icons/motion, NOT a generic saturated palette ([D011 - Colour Direction Stone](/brain/d011-colour-direction-stone/); see the design-taste memory). A curated muted-editorial accent palette is optional pending Saif.

**Why:** "minimal" for Saif still means visually rich + impressive; sparse text read as unfinished. This makes the site walk its own "polish the states nobody screenshots" talk. Partially revisits [D003 - Visual Restraint and One WebGL Moment](/brain/d003-visual-restraint-and-one-webgl-moment/) (restraint was over-applied). Built in [Phase 7 - Visual and IA Overhaul](/brain/phase-7-visual-and-ia-overhaul/).

## Yahan se linked

- [D020 - Art Direction v2 Bold Monochrome](/hi-latn/brain/d020-art-direction-v2-bold-monochrome/)
- [Open Questions](/hi-latn/brain/open-questions/)
- [Phase 7 - Visual and IA Overhaul](/hi-latn/brain/phase-7-visual-and-ia-overhaul/)
- [Portfolio Brain](/hi-latn/brain/portfolio-brain/)
- [Roadmap](/hi-latn/brain/roadmap/)

Saare notes: [/hi-latn/brain/](/hi-latn/brain/)

---

Mohd Saif, Product Engineer. I build solutions, not dead software.
Email: saifmd238@gmail.com · GitHub: https://github.com/Saif-09 · LinkedIn: https://www.linkedin.com/in/mohd-saif-134076141/ · Résumé (PDF): https://saifsiddiqui.in/resume

More for agents:
- [/llms.txt](/llms.txt): short summary of this site
- [/llms-full.txt](/llms-full.txt): the complete text of every page in one fetch
- [/agents.md](/agents.md): when to use this site, and how to query it
- [/sitemap-index.xml](/sitemap-index.xml): every URL, in seven languages