Translate space into a digital experience
Söder Architecture is a concept practice working across residential and cultural spaces. Its website needed to communicate the thinking behind each project while making the work easy to explore. The brief brought together website strategy, art direction, responsive design and a reusable foundation for development.
We organised the site around Projects, Studio and Journal. Projects introduces the built work; Studio explains the approach; Journal provides space for ideas and work in progress. A clear contact route connects the portfolio with the next conversation.
The homepage opens with “Spaces for living.”, set on one line above a wide architectural photograph. The headline sits to the right, balancing the studio signature on the left. A row of selected projects follows, turning the first impression into a clear route through the portfolio.
Give the work room to breathe
The visual direction takes its structure from Swiss editorial design: a disciplined grid, confident typography and clear relationships between large images and small details. Warm white surfaces and fine black rules frame the work without competing with it.
Colour comes through the architectural imagery. Soft transitions from ice blue and lilac to apricot create a sense of light and time, balanced by the precise geometry of concrete, glass and water. These atmospheric gradients connect the homepage and project pages.
A shared type scale gives headlines, project names and technical information distinct roles.
Consistent image proportions create a recognisable rhythm across the portfolio.
Reusable content modules accommodate photographs, plans, project facts and longer stories.
The result is an interface with enough restraint to let each building have its own character, and enough structure to make the website feel coherent.
Make exploration feel direct
The responsive layouts preserve the same hierarchy across desktop, tablet and mobile. On desktop, a panoramic image establishes the scale of the work, with three project cards beneath it. Tablet and mobile layouts reorganise the same content around narrower screens, preserving readable titles, useful image crops and a clear path into each project.
Project pages go beyond an image gallery. In the Courtyard House study, a large floor plan takes the lead while a compact architectural image and project facts provide context. The two views connect spatial organisation with the building’s atmosphere.
The touchscreen mockup captures a deliberate interaction: spreading a thumb and index finger over the plan to inspect its details. The proposed viewer also supports zoom controls for pointer and keyboard use. Touch is one way to explore the website, rather than a requirement.
Create a foundation for future work
One structure. A different story in every project.
A portfolio that connects architectural atmosphere with useful detail.
The proposed CMS separates project titles, locations, photography, plans and editorial content from their presentation. New work can be added through established modules, with consistent navigation and responsive behaviour.
The handoff defines component states, image guidance, content patterns and interaction behaviour. Accessibility, loading, metadata and link checks form part of the implementation brief. The outcome is a complete website direction that can grow with the practice.
Concept project created for this portfolio template. Device renders are illustrative hardware concepts.
