Otlo - Architecture Studio Template
Krish Prajapati
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.
Before launch
I checked the details that are easy to miss:
Page titles and descriptions for every page
Alt text on images
Links and scroll sections
Placeholder text removed
What I learned
Small motion goes a long way if it is slow and consistent
Good copy makes a template feel finished
Setting up the CMS well saves the buyer the most time
Tools
Framer, Figma, Unsplash
Like this project
Posted Nov 4, 2026
Designed and built an 8-page Framer template for architecture studios, featuring a CMS, custom interactions, responsive layouts, and smooth motion.
Likes
0
Views
1
Timeline
Oct 19, 2026 - Nov 2, 2026
