Pixel Vision – Protozi Agency

01Phase ⁄ Briefing

— Mar 7, 2022 · Scope + requirements

Performance is a feature. Speed is the brand.

Pixel Studio was a creative studio whose previous website loaded in 8.4 seconds on average. In an industry where clients judge you on craft, a slow website undermined everything the work was trying to say. The brief had one overriding constraint: the site must be visually ambitious and technically excellent at the same time.

01

IMG_0001 · 4500×2800 [ PLACEHOLDER · IMG ]

Week one was not design — it was requirements. Every animation, every interaction, every transition assessed for its performance cost before it was approved for design.

Stakeholder sessions3

Performance baseline8.4s load

Interaction wishlist22 items

Technical constraints doc1

02Phase ⁄ Architecture

— Mar 14, 2022 · Tech stack + IA

Stack decisions are design decisions.

Architecture built around one principle: no JavaScript where CSS can do the job, no library where native can do the job. Webflow for the CMS and page structure, custom code for animations and interactions. Image delivery via a CDN with automatic format conversion and lazy loading built into every template.

The architecture decisions made in week two saved three weeks of performance optimization later. Starting right is always faster than fixing wrong.

"You either build for performance from the start, or you spend the last month trying to get it back." — Lead developer ⁄ Architecture review

03Phase ⁄ Prototype

— Mar 28, 2022 · Core interactions

Interactions earned, not imposed.

Core interaction prototype built in five weeks: custom cursor, project grid transitions, scroll-driven image reveals, and a hover-state system that added richness without adding weight.

13 interaction ideas rejected because they added load time or degraded on mobile. Every decision documented with the performance cost that caused the cut.

22→ 9

Interactions approved

60fps

Target across all devices

0libraries

For core animations

04Phase ⁄ Frontend

— Apr 18, 2022 · Full build

Pixel-perfect is the floor, not the ceiling.

Full build across 12 page types. Mobile-first development — every layout built for small screens first, then scaled up. Accessibility baked in from the first line: semantic HTML, keyboard navigation, reduced motion support throughout.

Code reviewed weekly by a second developer. No pattern shipped that hadn't been tested on real devices — three physical phones, two tablets, four desktop sizes.

04

IMG_0004A[ PLACEHOLDER · Image A ]

04

IMG_0004B[ PLACEHOLDER · Image B ]

Page types built12

Physical devices tested9

Accessibility checksWCAG 2.1 AA

Weekly reviews13

05Phase ⁄ Content

— May 9, 2022 · CMS + assets

Content that doesn't break the build.

CMS structured so every project page, team profile, and journal article could be edited by anyone on the Pixel Studio team without breaking a single layout. Content constraints built into the CMS fields: character limits, required fields, image ratio enforcement.

40 initial case studies migrated and formatted in four days. Every image processed and optimized before upload.

05

IMG_0005 · 4500×2800 [ PLACEHOLDER · IMG ]

CMS templates6

Case studies migrated40

Images optimized340

Content training1h session

06Phase ⁄ Deployment

— Jun 6, 2022 · Launch

Lighthouse 98. Launch day.

Site launched June 6th with a Lighthouse performance score of 98, down from a baseline of 42. Average load time 0.9 seconds on 4G, 1.4 seconds on 3G. Every animation running at 60fps across all tested devices.

Three weeks post-launch, Pixel Studio was shortlisted for an Awwwards Site of the Month. The studio used the site in their pitch deck for six months after launch.

06

IMG_0006 · 4500×2800 [ PLACEHOLDER · IMG ]

Lighthouse score98 / 100

Load time (4G)0.9s

Load time (3G)1.4s

Post-launch support30 days

Pixel
Vision Case · Nº 008

Built to
showcase
craft.

Performance is a feature. Speed is the brand.

Stack decisions are design decisions.

Interactions earned, not imposed.

Pixel-perfect is the floor, not the ceiling.

Content that doesn't break the build.

Lighthouse 98. Launch day.

The result,
by the numbers.

Built toshowcasecraft.

Performance is a feature. Speed is the brand.

Stack decisions are design decisions.

Interactions earned, not imposed.

Pixel-perfect is the floor, not the ceiling.

Content that doesn't break the build.

Lighthouse 98. Launch day.

The result,by the numbers.

Built to
showcase
craft.

The result,
by the numbers.