A fictional architecture, interiors and objects studio shaped as a five-chapter digital story about how designed spaces make us feel.
VISIT LIVE PROJECT ↗
S · SEREINSTRUCTURE5 NARRATIVE CHAPTERS
PROJECTS3 FOCUSED STUDIES
DETAILS3 OBJECT + 3 MATERIAL STATES
ENQUIRYLOCAL BRIEF · NO STORAGE
A conventional portfolio grid could show attractive work, but it could not express the studio’s central idea: that light, material, objects and spatial rhythm are remembered as feeling. The challenge was to turn that subjective position into a clear digital experience without losing usability.
I structured the website as five chapters—studio, spaces, objects, materials and conversation. Full-screen scene changes establish rhythm, project studies open in focused overlays, objects become a tactile carousel, materials become selectable stories, and a persistent chapter index keeps the long-form experience navigable.
The studio and its projects are intentionally fictional, and the website says so plainly. The enquiry experience does not pretend to send data to a business: it creates a project brief that stays on the visitor’s device. Atmosphere is never used to disguise what the concept is or how it behaves.
The work is shown as a sequence of decisions and deliverables, including the constraints that shaped the finished experience.
The first task was to define a believable studio position without presenting invented projects as client work. The fictional status, privacy boundary and purpose of the experiment were written into the brief before the visual direction began.
Studio, spaces, objects, materials and conversation were arranged as distinct chapters with one persistent navigation model. Each chapter needed its own pace while still contributing to one coherent argument about feeling and memory.
Image behaviour, typography, transitions and interface states were designed together. Project overlays, object states and material tabs were given different roles so interaction revealed the studio idea instead of simply adding movement.
The long-form experience was developed with responsive pacing, keyboard access and reduced-motion behaviour in mind. The private brief generator was kept entirely local and its data boundary was made visible before use.
The opening does not begin with services or credentials. It begins with a question—what makes a space stay with you?—and lets scale, image and pace establish the studio’s point of view.
Studio, spaces, objects, materials and conversation each have their own visual beat. Full-screen interludes make the journey feel authored without turning it into an opaque scroll experiment.
Three study overlays preserve context while creating enough focus for setting, scale, palette and narrative. Visitors can move between studies without losing their place in the main story.
A compact carousel shifts from form to construction and use, letting one object reveal multiple ideas instead of becoming another thumbnail in a product grid.
Stone, timber and metal become selectable micro-stories. The interaction turns a static palette into a concise expression of the studio’s material philosophy.
The closing brief builder creates a useful downloadable document locally. Nothing is transmitted or stored, and the interface explains that boundary before the visitor begins.
Key interface moments from the live build, presented in sequence to show how the visual system changes across content, interaction and intent.
SEREIN STUDIOAn exploration of how we live.
SEREIN STUDIOThe best spaces change how you feel.
SEREIN STUDIOAlentejo, Portugal
SEREIN STUDIOObject detail · 01 / 03
SEREIN STUDIOStone · timber · metal
A private project brief saved only to your device.
How should we call you?ArchitectureS · SEREIN01 / EXPERIENCE CONCEPT
02 / EDITORIAL ART DIRECTION
03 / CONTENT + UX WRITING
04 / INTERACTION DESIGN
05 / FRONT-END DEVELOPMENT
A polished studio presentation can imply real commissions. The case study and live concept identify the practice and projects as fictional so the work demonstrates design thinking without borrowing credibility.
Atmospheric photography could reduce the site to another visual moodboard. Chapter copy, captions and focused project information keep the imagery attached to a clear studio position.
Five full-screen chapters introduce depth but also navigation risk. A persistent chapter index, strong transitions and focused overlays help visitors understand both location and progress.
The closing brief experience creates a useful artefact but does not contact a studio. It states that nothing is transmitted or stored and keeps every input on the visitor’s device.
The idea of spaces being remembered as feeling became persuasive only when every chapter translated it into a different kind of evidence: projects, objects, materials and conversation.
The strongest transitions explain how one chapter gives way to the next. Decorative movement was less useful than maintaining context between the main narrative and focused studies.
For a working studio, project permissions, photography readiness and service language should be resolved before interaction detail. Real material would determine the final chapter lengths and launch sequence.
The finished responsive concept works as both a believable studio portfolio and an interaction study. It combines a cinematic opening, five navigable chapters, three project studies, three object states, three material stories and a local brief generator in one coherent system.
DISCUSS A PROJECT ↗