Tree Filling Window
Tree Filling Window
Tree Filling Window
Building a poetic web system for a studio that works between fashion, sport and art
Building a poetic web system for a studio that works between fashion, sport and art
Building a poetic web system for a studio that works between fashion, sport and art
Role
Art Director & Web Designer
Year
2024
project type
Web Design
Deliverable
Website
Final product
Role
Art Director & Web Designer
Year
2024
project type
Web Design
Deliverable
Website
Final product
Role
Art Director & Web Designer
Year
2024
project type
Web Design
Deliverable
Website
Final product
Overview
Tree Filling Window is a multidisciplinary agency working across fashion, sport, art and strategy. They came to Miyagami wanting a website that didn’t behave like a traditional agency homepage. No grid of case studies, no loud typography. Something quieter. A site that feels like entering a room rather than scrolling a page. I designed and art directed the digital experience.
Challenge
The ask was simple; a website, but the direction was not. There was no logo system, no tone of voice, no defined content plan. Instead, there were moods, fragments and references: photographs by Wolfgang Tillmans, stills from Frank Ocean’s Blonde, the structural silence of Superstudio. Translating that atmosphere into a functional, buildable website was the real challenge. It had to be poetic without becoming vague, structured without feeling rigid.
Approach
I treated the website like a spatial system rather than a scrolling layout. Each page was designed to feel like entering a room — quiet, considered and free from unnecessary interface.
Role
Web Designer and Art Director. I shaped the visual world, interaction language and layout system. I worked closely with Barbara on development to make sure the design logic held up once it became code.
Overview
Tree Filling Window is a multidisciplinary agency working across fashion, sport, art and strategy. They came to Miyagami wanting a website that didn’t behave like a traditional agency homepage. No grid of case studies, no loud typography. Something quieter. A site that feels like entering a room rather than scrolling a page. I designed and art directed the digital experience.
Challenge
The ask was simple; a website, but the direction was not. There was no logo system, no tone of voice, no defined content plan. Instead, there were moods, fragments and references: photographs by Wolfgang Tillmans, stills from Frank Ocean’s Blonde, the structural silence of Superstudio. Translating that atmosphere into a functional, buildable website was the real challenge. It had to be poetic without becoming vague, structured without feeling rigid.
Approach
I treated the website like a spatial system rather than a scrolling layout. Each page was designed to feel like entering a room — quiet, considered and free from unnecessary interface.
Role
Web Designer and Art Director. I shaped the visual world, interaction language and layout system. I worked closely with Barbara on development to make sure the design logic held up once it became code.
Overview
Tree Filling Window is a multidisciplinary agency working across fashion, sport, art and strategy. They came to Miyagami wanting a website that didn’t behave like a traditional agency homepage. No grid of case studies, no loud typography. Something quieter. A site that feels like entering a room rather than scrolling a page. I designed and art directed the digital experience.
Challenge
The ask was simple; a website, but the direction was not. There was no logo system, no tone of voice, no defined content plan. Instead, there were moods, fragments and references: photographs by Wolfgang Tillmans, stills from Frank Ocean’s Blonde, the structural silence of Superstudio. Translating that atmosphere into a functional, buildable website was the real challenge. It had to be poetic without becoming vague, structured without feeling rigid.
Approach
I treated the website like a spatial system rather than a scrolling layout. Each page was designed to feel like entering a room — quiet, considered and free from unnecessary interface.
Role
Web Designer and Art Director. I shaped the visual world, interaction language and layout system. I worked closely with Barbara on development to make sure the design logic held up once it became code.
Design process
Reference mapping
Before drawing screens, I built a library of visual cues -> photography, printed publications, architectural plans, album covers. This helped define pacing, color temperature and spatial rhythm.
Concept directions
We didn’t start with one idea. I explored multiple interpretations of what Tree Filling Window could look like online, from archival minimalism to surreal visual essays. The version that stayed was the most restrained one: sliding horizontal frames, quiet typography and long pauses of white space.
Structure and flow
Pages behave like rooms connected by corridors. Instead of scrolling down, users move sideways through content. Each section has its own atmosphere. Nothing shouts.
Interaction language
Motion was kept subtle. Hovering shifts elements slightly, like air moving. Cursor reacts, but nothing animates for the sake of attention. The site invites lingering, not clicking quickly through.
CMS logic
The agency needed to update work on their own. So we built the site to be flexiblem, projects can be reordered without breaking layout. The system preserves the atmosphere even when content changes.
Design to development
Barbara developed the architecture: custom hover logic, horizontal scroll behavior and layered content structure. The layout is delicate, small spacing changes affect the whole composition so the handoff included detailed notes on scale, timing and padding.
Design tool
Figma for layout and system design. FigJam for mapping navigation and page flow. Photoshop and Lightroom for image treatment. Front-end built in Webflow with custom code.
Key design decision
Use space as a material; let whitespace do as much work as typography or imagery.
Horizontal movement instead of vertical scrolling to create a gallery-like experience.
No heavy animations. Only subtle micro-movement that feels like breathing, not performing.
Typography kept quiet and neutral to let images and writing carry tone.
No mockups of laptops or phones — everything is shown in its own environment.
If a visual idea could not be built well, it was removed rather than faked.
Design process
Reference mapping
Before drawing screens, I built a library of visual cues -> photography, printed publications, architectural plans, album covers. This helped define pacing, color temperature and spatial rhythm.
Concept directions
We didn’t start with one idea. I explored multiple interpretations of what Tree Filling Window could look like online, from archival minimalism to surreal visual essays. The version that stayed was the most restrained one: sliding horizontal frames, quiet typography and long pauses of white space.
Structure and flow
Pages behave like rooms connected by corridors. Instead of scrolling down, users move sideways through content. Each section has its own atmosphere. Nothing shouts.
Interaction language
Motion was kept subtle. Hovering shifts elements slightly, like air moving. Cursor reacts, but nothing animates for the sake of attention. The site invites lingering, not clicking quickly through.
CMS logic
The agency needed to update work on their own. So we built the site to be flexiblem, projects can be reordered without breaking layout. The system preserves the atmosphere even when content changes.
Design to development
Barbara developed the architecture: custom hover logic, horizontal scroll behavior and layered content structure. The layout is delicate, small spacing changes affect the whole composition so the handoff included detailed notes on scale, timing and padding.
Design tool
Figma for layout and system design. FigJam for mapping navigation and page flow. Photoshop and Lightroom for image treatment. Front-end built in Webflow with custom code.
Key design decision
Use space as a material; let whitespace do as much work as typography or imagery.
Horizontal movement instead of vertical scrolling to create a gallery-like experience.
No heavy animations. Only subtle micro-movement that feels like breathing, not performing.
Typography kept quiet and neutral to let images and writing carry tone.
No mockups of laptops or phones — everything is shown in its own environment.
If a visual idea could not be built well, it was removed rather than faked.
Design process
Reference mapping
Before drawing screens, I built a library of visual cues -> photography, printed publications, architectural plans, album covers. This helped define pacing, color temperature and spatial rhythm.
Concept directions
We didn’t start with one idea. I explored multiple interpretations of what Tree Filling Window could look like online, from archival minimalism to surreal visual essays. The version that stayed was the most restrained one: sliding horizontal frames, quiet typography and long pauses of white space.
Structure and flow
Pages behave like rooms connected by corridors. Instead of scrolling down, users move sideways through content. Each section has its own atmosphere. Nothing shouts.
Interaction language
Motion was kept subtle. Hovering shifts elements slightly, like air moving. Cursor reacts, but nothing animates for the sake of attention. The site invites lingering, not clicking quickly through.
CMS logic
The agency needed to update work on their own. So we built the site to be flexiblem, projects can be reordered without breaking layout. The system preserves the atmosphere even when content changes.
Design to development
Barbara developed the architecture: custom hover logic, horizontal scroll behavior and layered content structure. The layout is delicate, small spacing changes affect the whole composition so the handoff included detailed notes on scale, timing and padding.
Design tool
Figma for layout and system design. FigJam for mapping navigation and page flow. Photoshop and Lightroom for image treatment. Front-end built in Webflow with custom code.
Key design decision
Use space as a material; let whitespace do as much work as typography or imagery.
Horizontal movement instead of vertical scrolling to create a gallery-like experience.
No heavy animations. Only subtle micro-movement that feels like breathing, not performing.
Typography kept quiet and neutral to let images and writing carry tone.
No mockups of laptops or phones — everything is shown in its own environment.
If a visual idea could not be built well, it was removed rather than faked.
Result
The website design is complete and live. It reflects Tree Filling Window without diluting them into a typical agency template. It is calm, spacious and specific.
Key learning
Designing atmosphere is not enough, it needs structure to survive translation into development, feedback and time. Ambiguity can be a starting point, but it cannot be the whole process.
Conclusion
Tree Filling Window became a study in how digital space can hold stillness. It taught me that a website can feel like architecture , it is measured, directional, quiet as long as someone is willing to design not only the visuals, but the pace, silence and exit.
Result
The website design is complete and live. It reflects Tree Filling Window without diluting them into a typical agency template. It is calm, spacious and specific.
Key learning
Designing atmosphere is not enough, it needs structure to survive translation into development, feedback and time. Ambiguity can be a starting point, but it cannot be the whole process.
Conclusion
Tree Filling Window became a study in how digital space can hold stillness. It taught me that a website can feel like architecture , it is measured, directional, quiet as long as someone is willing to design not only the visuals, but the pace, silence and exit.
Result
The website design is complete and live. It reflects Tree Filling Window without diluting them into a typical agency template. It is calm, spacious and specific.
Key learning
Designing atmosphere is not enough, it needs structure to survive translation into development, feedback and time. Ambiguity can be a starting point, but it cannot be the whole process.
Conclusion
Tree Filling Window became a study in how digital space can hold stillness. It taught me that a website can feel like architecture , it is measured, directional, quiet as long as someone is willing to design not only the visuals, but the pace, silence and exit.
Credits
Assignment achieved through Studio by Miyagami. Special thanks to Barbara, our amazing Webflow Developer
Credits
Assignment achieved through Studio by Miyagami. Special thanks to Barbara, our amazing Webflow Developer
Credits
Assignment achieved through Studio by Miyagami. Special thanks to Barbara, our amazing Webflow Developer
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO