Challenge
Translating long-form content into an interactive, web experience.
The Evolution of Type presents 100 landmark typefaces through a structured, chronological format. My challenge was to preserve its depth and visual identity while making the content easier to explore online.
Process
From book concept to responsive prototype.
| Phase | Milestone Artifact | Key Focus | Link |
|---|---|---|---|
| 01Strategy | Content Audit | Defined info architecture and key features | View Slide Deck ↗ |
| 02Concept | Visual Directions | Explored visual systems and layouts | View Directions ↗ |
| 03Iteration | Core Page Designs | Refined structure and selected a direction | View Flows ↗ |
| 04Prototype | High-Fidelity Figma | Built user flows and interactive components | View Prototype ↗ |
| 05Extension | Physical Merchandise | Extended visual identity beyond the screen | View Mockup ↗ |
Prototype
Bringing the book's structure to life for the web.
I built a prototype focused on chronological exploration, in-depth typeface profiles, and intuitive browsing. Note: Due to timeline constraints, the prototype focuses on a curated selection of typefaces.
Chronological Timeline
Organizes the collection by book chapter and historical era, with context for each landmark typeface.
Interactive Typeface Profiles
Brings each typeface to life with historical context, visual examples, and hover states highlighting key traits.
Comprehensive Type Index
Provides a complete catalog of all 100 typefaces, organized by chapter and timeline for quick browsing.
Type Guide & Visual Glossary
Explains type classifications and key terminology, with links to related typeface profiles for deeper exploration.
Brand Extension
Extending the visual identity beyond the screen.
I adapted the circular emblem and minimalist typography into a custom canvas pencil pouch for design students and typography enthusiasts. The concept extends the website's visual language and editorial style into a physical product.
Next Steps
Opportunities for future iterations.
Reflection
Translating an existing identity into a new medium.
This project taught me how to translate a dense, print-based resource into a digital experience without losing its editorial structure. I learned to balance information hierarchy, visual identity, and interaction to make complex content approachable across screen sizes.
