Otlo

Web Design

See Project

Year

2026

Client

Service

Web Design

Quick summary

I designed and built Otlo, a Framer template for architecture studios. It has 8 pages, a CMS, and soft motion that helps show the work without getting in the way.

The problem

Most architecture websites are one of two things. Some are plain and feel flat. Others are full of heavy effects and hide the projects.

Studios need a site that:

Shows their work first
Explains how they work
Is easy to edit without a developer

My goal

Make a template that feels calm and sharp, like good architecture. Keep it simple to edit, and use motion only where it helps.

How I started

I picked three sites I liked and took one thing from each:

Structure and feel: clean sections and a strong grid
Type and colors: black, white, and grey, with big text
Interactions: smooth, simple components

Then I wrote all the copy myself, so the template feels real and not like filler text.

What I built

Pages: Home, About, Work, Project detail, Careers, Job detail, Contact, and a 404 page.

Home page story: hero, studio intro, offices, services, projects, process, stats, and testimonials. The flow goes from “who we are” to “what we do” to “proof.”

Making it easy to edit

I set up the CMS so a studio can run the site on its own:

Work: every project has facts, a story, and a gallery
Careers: job posts with filters by team, location, and type
Each field has a short hint that says what to write

I also left notes with screenshots next to every page, so the next person knows how to change each part.

The hard parts

Motion: I wanted it to feel smooth, not busy. I slowed the text reveals down and used one easing style everywhere.
Careers filter: Framer has no “show all” option for a filter, so I used two lists. One shows everything, and the other shows only the chosen tag.
Mobile: each section needed its own layout on Phone, not just a squeezed copy of Desktop.