Back to the archiveW—06 / 11

Mariam SaadSelected work06 / 11

Selected work / Frontend Designer & Creative Developer

InteriorDesignPortfolio

Creative DirectionUI/UX DesignCreative DevelopmentFront-End Development

Scroll to enter

01The project, in one breath

Role: Frontend Designer & Creative Developer
Client: Mariam Saad
Year: 2026

Live project

The central challenge was translating an interior-design practice into a digital experience without flattening the work into a generic image grid. The interface needed to feel expressive and youthful while still giving drawings, materials, and spatial decisions enough visual…

A motion-first graduate interior-design portfolio that translates Mariam Saad’s spatial practice into a tactile editorial web experience, combining selected projects, sketchbook studies, process narratives, and responsive interaction design.

02 / Project film

Mariam Saad portfolio home page with interior renders, project cards, material studies, and a pixel-grid interaction. — Home page — editorial overview

Selected projects overview featuring four interior studies, material samples, and color palettes. — Selected projects — four spatial and material studies

Sketchbook overview showing an arched reading nook evolving through eight drawing stages. — Sketchbook — one spatial study developed across eight passes

Contact page with conversation cards, social destinations, a personal note, and interactive color grid. — Contact — an open invitation to start a conversation

About Mariam — personal perspective and living design archive

Home page — editorial overviewSelected projects — four spatial and material studiesSketchbook — one spatial study developed across eight passesContact — an open invitation to start a conversationAbout Mariam — personal perspective and living design archiveScroll / cut

03The build, reduced to what mattered

Three decisions shaped the final experience.

SPATIAL STORYTELLING

Editorial Portfolio System

Full-screen compositions, project dossiers, archive views, biography, and contact experiences turn Mariam’s work into a paced editorial journey rather than a conventional template.

MOTION DIRECTION

Page-Specific Motion Choreography

Each route has its own reveal logic and scroll behavior, while smooth scrolling and coordinated timelines keep the experience tactile, controlled, and consistent.

PAGE TRANSITIONS

Custom Route Curtain

A bespoke full-screen curtain bridges navigation states, preserving visual continuity and giving every page change a deliberate sense of arrival.

OutcomeWhat remained after the build

The delivered frontend provides a cohesive seven-route portfolio experience covering Mariam’s selected work, project details, sketchbook, process, profile, and contact journey. Desktop and mobile layouts have dedicated interaction behavior, image delivery is optimized through Next.js, and the current project routes are statically generated for reliable production output. The frontend is deployed as an interactive portfolio experience on Vercel. The result is a complete frontend design system that presents interior…The delivered frontend provides a cohesive seven-route portfolio experience covering Mariam’s selected work, project details, sketchbook, process, profile, and contact journey. Desktop and mobile layouts have dedicated interaction behavior, image delivery is optimized through Next.js, and the current project routes are statically generated for reliable production output. The frontend is deployed as an interactive portfolio experience on Vercel. The result is a complete frontend design system that presents interior…

7 portfolio experiencesCore Routes

8 progressive scroll stagesSketchbook Sequence

Dedicated desktop and mobile behaviorResponsive Coverage