All work

Architecture Studio Website

An editorial portfolio site for an architecture practice, where the work is the interface and the layout stays out of the way.

View Live Site

The Challenge

The studio had a decade of built work stored in scattered folders and no way to present it. Existing templates flattened every project into identical cards, which erased the scale and material differences that matter most in architecture.

The Solution

I built an editorial grid where each project controls its own rhythm — full-bleed exteriors, paired detail shots, and quiet caption typography. Navigation is minimal so the photography carries the page.

Previous experience before the redesign
Redesigned experience

Design Process

Wireframes for Architecture Studio Website
Wireframes
Design System for Architecture Studio Website
Design System
High Fidelity for Architecture Studio Website
High Fidelity

Development

1.project-grid {
2  display: grid;
3  grid-template-columns: repeat(12, 1fr);
4  gap: 1.5rem;
5}
6 
7.project--wide {
8  grid-column: span 12;
9  aspect-ratio: 16 / 9;
10}

Responsive

Architecture Studio Website shown across desktop, tablet and mobile breakpoints

Results

Lighthouse Performance
96Lighthouse Performance
Projects Archived
40+Projects Archived
Layout Templates
2Layout Templates
Contrast Compliance
AAContrast Compliance

What I Learned

I learned the importance of simplifying complex flows and building components that are easy to maintain and scale. It also improved my understanding of user trust and micro-interactions.

  • Editorial pacing across long pages
  • Image optimization for large photography
  • Restraint in typographic hierarchy
  • Building a flexible content grid