03 Finding Patterns
& Inspirations

This week, I realized that I was moving too fast, trying to be a rabbit when the project requires the steady, foundational pace of a turtle. This shift led me to a deep analysis of how digital atmospheres are actually "staged" through recognizable patterns. During the process, I also came across a broader vision for Atmost website as an educational bridge for designers who, like me, once felt lost in the complexity of code and interaction design.

  • Week-three
    26. Jan ~ 1. Feb, 2026
  • Journal-by
    Choi Yerin
  • Keywords
    • Abstract-vs-Applied
    • Atmospheric-Patterns
    • Atmost
    • Designer-Resources

The consultation

Screenshot of Unkopi Design File

Turtle vs Rabbit

I spent the first half of the week deep in Figma, detailing the Unkopi coffee shop site. Honestly, I think I was looking for an escape, wanting to build something real and applied because the technical abstraction of the dissertation was starting to feel heavy. I wanted to have fun with colors and photos.

However, Tuesday’s consultation with Andreas was a reality check. He pointed out that I was moving toward "over-applied" versions too quickly.

The Realization:

While the right colors and photos matter, they are secondary. I need to build the knowledge through abstract experiments first. I was trying to run like a rabbit toward a finished product, but the consultation reminded me that research demands the slow, deliberate pace of a turtle.

Therefore, I decided to pivot back to Atmost, using it as the primary vessel for these abstract explorations before I allow myself to get lost in the "beautification" of a coffee shop site.

Analyzing The Patterns of Felt Spaces

atmost-moodboard-1
atmost-moodboard-2
atmost-moodboard-3
atmost-moodboard-4

Screenshots of Atmost Moodboard 1-4

To find my way back into the abstract, I built four moodboards ranging from "Purely Abstract" to "Highly Applied." Analyzing these professional references revealed five recurring patterns that successful designers used to stage a cohesive atmosphere as follows.

Five Patterns to Staging Atmospheric Experiences

  • Behavioral Patterns:
    How content reveals itself and how the interface responds to the user's specific pace of navigation.



  • Systemic Consistency:
    Maintaining a specific "character" (e.g., a scanning effect or a generative feel) across every single element.



  • Visual-Behavioral Harmony:
    Ensuring the "quality" of motion (whether it’s energetic, minimal, or futuristic) actually matches the brand’s visual identity.



  • Interaction Choreography:
    The deliberate arrangement of how multiple interactions transition into one another.



  • Sensory Layering:
    The strategic use of haptics and sound to reinforce the kinetic experience.

    • > Screen Record of Siena Film Studio Website

    > Screen Record of Tempo Blockchain Website

    These patterns can be found from various sources in action. For example, the above film studio site uses old-theater visuals with matching "film-crackle" interactions, and the blockchain site feels generative by its interaction, as the page morphed during the scroll. These are not just about one animation; it’s about the choreography of the whole.

    Dynamic animations & Visuals

    To reinforce its playful and dynamic identity, I incorporated various scroll-triggered animations on primary texts and images that can sustain more attention, mainly utilizing GSAP's ScrollTrigger and textSplit. Also, the animations are designed with bouncy and more exaggerated easings, to create a more lively and engaging experience. GSAP made it easy to control easings with its standardized framework such as power1, power2, and power3.

    For this experiment, I wanted to see how branded interactions can be well applied within its complex contexts. Hence, I also designed and included dynamic visuals and illustrations like how Duolingo uses its mascot, Duo, to create a more engaging and memorable experience even in loading to error states.

    Atmost as s Library of Resources

    During the process of collecting references and analyzing them, I had a conversation with my designer friend that changed my perspective. She loved the experimental website examples that I showed her and asked me where to find these references. Also she said she wanted to create similar ones for her own project, but felt overwhelmed by the required code and technical skills to make them.

    I realized that Atmost shouldn't just be an archive of my work or a demonstration of my skills. It needs to be a shortcut library that works like a guidance to curious designers. So, I decided include the industry tools and resources like GSAP and Mobbin, with filters, descriptions and links to tutorials. My goal is to create a practical resource that I wish I had when I was starting out last semester or before, for designers who want to create interactive and engaging web experiences, but don't know where to start.

    atmost-information-architecture

    > Information architecture for Atmost

    Subsequently, as wanted to develop Atmost further, both as a library and a demonstration, I began by structuring its information architecture (IA). I wanted the navigation itself to feel like entering a secure data terminal or a secret lab. By doing so, I can further reinforce its atmospheric aesthetics through an immersive, 3D environment. Rather than just clicking links, I want users to subconsciously feel like they are entering a secret lab, where they discover hidden knowledge and resources that are not easily accessible elsewhere, as they dive "deeper". By creating this kind of immersive experience, I hope to make the learning process more engaging and memorable for users.

    Visiting Singapore Art Week (SAW)

    Power of Atmospheres

    This week, I also visited SAW with my friend to get some fresh inspirations. Visiting SAW surprisingly reminded me of the power of staging (producing atmospheres).

    The most successful works weren't just objects, but they were environments. Like the Art Science Museum, the works that stayed with me used light and sound to make the story "persuasive". It confirmed my belief that in the digital space, if we don't curate the bodily felt, background experiences (the transitions, the rhythm, the sound), the core message might lose its power.

    Next Steps

    Next step is to further enhance the Atmost from the first prototype, following the new direction and its IA. The goal is to develop this as much as possible, before the users testing session I'm planning to conduct soon around week 5 to 6.