Stadilia Housing
A new website for a modern homebuilder
Brief
Create a modern website for Stadilia, a newly founded Swedish house company, with a clear focus on architecture, flexibility, and customer experience. The website should reflect Stadilia’s bold identity and distinguish it from traditional homebuilders.
Solution
The design emphasizes Stadilia’s unique approach with expressive typography, architectural imagery, and a modular layout that mirrors the company’s design philosophy. Clear navigation, refined copy, and a focus on plan layouts over standard house types guide users toward inspiration and contact – while reinforcing Stadilia’s promise of quality, freedom, and bold material choices.
Landing page
Type house page
Design
The design for Stadilia is rooted in simplicity, structure, and strong architectural presence. Inspired by modern architectural publications, the layout balances clarity and elegance—giving space for both visuals and storytelling to breathe.
Neutral tones, confident typography, and a modular grid system reflect the precision and design freedom that defines Stadilia’s approach to homebuilding.
Navigation is designed as a clear and intuitive mega-menu, making it easy for users to explore the site and get a full overview of its content—from type houses to practical information and contact.
” The final result captured our vision perfectly – a bold, modern site that reflects our architectural focus and identity. ”
Gunnar, owner of Stadilia
Style Guide
To ensure visual and functional consistency across the website, I created a compact style guide that outlines the core components of the design system—such as typography, color palette, spacing, and UI elements.
The design process
Step-by-step
Step 1 – Key takeaways from kickoff meeting
The project began with a kickoff meeting, which helped align vision and set the foundation for the project:
-
Clear, intuitive site structure
-
Modern design reflecting architectural identity
-
Emphasis on customizable, flexible homes
-
New logo to express the brand visually
Step 2 – Visual inspiration from references
Analyzing reference projects helped define a visual direction that aligns with Stadilia’s identity:
-
Bold architecture that communicates character
-
Clean, modern design with strong hierarchy
-
Minimalist palettes and generous white space
-
Clear display of plans and process
-
Balance between form and function
-
Reflects values of freedom, clarity, and craftsmanship
Step 3 – Create sitemap
The next step was to create a sitemap to define the website’s structure and ensure a simple, intuitive user journey aligned with the overall vision. The structure was reviewed and approved by the client before moving into the prototyping phase.
.png)
Step 4 - Lofi prototypes (wireframes)
With the sitemap approved, I created low-fidelity wireframes to define layout, user flow, and content structure. After client feedback, I developed high-fidelity prototypes to bring the design vision to life.
Product page (lo-fi)
Type house page
Knowledge page
Step 5 - Hifi prototypes (final design)
The final design was presented and handed over to the client, who will gather content for each page before moving into the development phase and launching the site.
Product page (hi-fi)
Type house page (hi-fi)
Knowledge page (hi-fi)
A glimps into Figma:
