Project card leads with the house, then the facts
Component 01
Work / Case study 06
ILLAM Architecture
A website for an architecture studio in Kerala that designs traditional, courtyard and contemporary homes. I designed the UX and UI and built the front end.
What I did
Art directionInformation architectureUI design
Design systemFront-end buildLocal SEO
A studio website that feels like its houses
ILLAM, by Nila Design Collective, is an architecture and design studio in Alappuzha and Vyttila, Kerala. It designs Naalukettu courtyard houses, traditional Kerala homes, contemporary residences, interiors and renovations.
The website has to do two jobs: show families what living in an ILLAM house would be like, and make it easy to start a conversation about their own plot. I designed it end to end and wrote the front-end code, so the live site is the design.
- Client
- ILLAM, Nila Design Collective
- Project
- Studio website
- Type
- Architecture website
- Pages
- Home, projects, six project stories, three house-type guides, contact
- Tools
- Figma
- Live site
- Open illamdesign.in
Design system
Materials first, then the pages
The visual language comes from the buildings themselves: laterite, terracotta tile, lime plaster and the dark of a monsoon evening. One grotesk carries the structure, and a single italic serif word in each headline adds the warmth.
Every page is built from the same small set of parts below, taken from the live website.
Inter Tight and Instrument Serif, one soft word per headline
Component 02
Colour taken from laterite, tile and lime plaster
Component 03
Services read as one calm, numbered list
Component 04
FAQ answers what families ask first
Component 05
The mark is a courtyard seen from above
Component 06
Pill buttons in ink, outline and terracotta
Component 07
Filters by house style
Component 08
Five steps from an idea to a house you can live in
Component 09
The problem
A home is a decision for the next forty years
Families looking for an architect in Kerala usually already have a plot and a picture in their head: a courtyard, a sloping tiled roof, or something clean and modern. They want to know whether a studio builds that kind of house, whether it works near them, and what the first step is.
Most studio websites answer with a photo gallery. The site needed to show the thinking behind the houses too: how they deal with rain, heat and light, and how the work moves from first visit to finished home.
What families need to know
Three questions before the first call
01
Do they build my kind of house?
Six services, each with a one-line answer, and a guide page for each house type: Naalukettu, traditional Kerala and contemporary.
02
Have they built near me?
Every project card shows the town, the floor area, the style and whether the house is finished or still on site.
03
How do we start?
A five-step process on the home page, a short FAQ, and a contact form that asks about the site, not just a name and email.
Process
How the work came together
- 01Sorted the studio's work into house types and the questions families ask about each
- 02Planned the pages: home, projects, project stories, house-type guides and contact
- 03Wireframed the main pages for desktop and phone
- 04Set the type, colour and component system from Kerala building materials
- 05Chose the hero film and the photo crops for each section
- 06Built the front end with self-hosted fonts and light scroll motion
- 07Added local SEO: page titles, structured data and guide pages for each house type
Below are the wireframes next to the finished pages. Drag the handle to compare.
WireframeFinal design
Key decisions
Choices that let the houses speak
HERO
Start on the land, not the logo
The home page opens on a slow film of a red-earth plot under coconut palms, with three words: Roots. Space. Belonging. It sets the mood before any text has to.
CLIMATE
Show the thinking, not only the photos
A section on rain, heat and light explains roof pitch, overhangs and materials. Families see why the houses look the way they do.
PROJECTS
Facts on every card
Style, town, floor area and status sit under each photo, and filters sort the work by house type. Each card opens a full project story.
CONTACT
A form that asks about the site
Project type, location, budget and a free-text note about the plot. The first conversation starts with useful details instead of a bare email.
Responsive web
The same website, on a phone
Many families will first open the site on a phone. On small screens the hero film still leads, the menu folds into a full-screen panel, project cards stack in one column, and the type scales down without losing its rhythm.
Both sizes were designed together, so nothing had to be squeezed down at the end.
Outcome
Live, and easy to find in Kerala
The website is live at illamdesign.in with six project stories, guide pages for Naalukettu, traditional and contemporary homes, and an enquiry form. Each house type has its own page, so families searching for that kind of home in Kerala land on the right one.
Visit the live websiteWhat I took away
- 01For an architecture studio, a few strong images with real facts work better than a big gallery.
- 02Taking colour and type from the building materials made the brand feel local without looking old.
- 03A guide page for each house type gives visitors a clear answer and gives search engines a clear page.
Keep exploring
Next: Automarto
Previous: Voizzit Chat