Web development
From prototype to validated design
Five design proposals, one chosen: this is Editorial v2 and why.
1 min read
Five parallel paths
For Pànxing's new design I prepared five complete proposals and compared them against the actual content of the site. Four were discarded: a dark mode version, a poster-style one, and two editorial directions that went elsewhere. The chosen one was Editorial v2.
What Editorial v2 looks like
- Warm paper background. Instrument Serif for headlines, Inter for everything else.
- Highlights are marked with a red triangle and a star, like in a printed newspaper.
- Each region has its own color: blue for Cerdanya, purple for Maresme, orange for Berguedà.
- LaIA, the AI assistant, lives in the hero (the large area at the top of the homepage). It's the front door, not a hidden widget.
- On mobile, bottom navigation with the PX logo in the center, and details open with a bottom sheet (the panel that rises from the bottom).
Mobile wasn't an afterthought—with 69% of visits coming from phones, the design was validated with a dedicated viewport from day one.
First HTML, then code
The entire design was validated as static HTML (look and feel only, no programming) before touching the real project. That file is now the source of the design system (the box of visual components): when in phase 2 a component doesn't fit, it's compared against the validated HTML, not against memory of how it was.
This avoids arguments with yourself: the design is already decided; it just needs to be implemented well. And it points to the same place as the pages that need to earn the most trust: The "About me" page: more than a biography.