THUAS

Webzine

Client

THUAS

platform

Figma, Visual Studio Code, Miro

My role

Storyteller Coder

The Project

Project Overview:
The Webzine was about creating something personal, coded from scratch, and designed as an immersive digital experience. After exploring multiple themes - I settled on music lovers as my target audience, since music has always been a huge part of my life. My concept grew into an interactive digital record store inspired by my favorite artist, Tate McRae, and my own connection to her songs.

Challenge


How can you turn a personal passion into a digital magazine that feels both narrative-driven and interactive? The challenge was not only to capture the aesthetic of a cozy, inspiring record store but also to code it in a way that made the navigation smooth, consistent, and enjoyable.

Approach

1. Research & Understanding the User:

  • Diverged and covered, by looking at interactive music-focused websites for inspiration, noting their use of animation, hover effects, and personalization.
  • Reflected on my own connection to Tate McRae’s music and how fans often connect to songs in very personal ways.
  • Explored record stores in games like Life is Strange as inspiration for atmosphere and storytelling.

2. Design Direction:

  • Decided to create a digital record store as the central narrative, tying together Tate’s music with my own personal journey.
  • Structured and drew the design chronologically from left to right, to build a story: childhood, first songs, current tour, and present-day connection.
  • Chose a cozy, casual aesthetic: warm, analogous colors (browns, rose, warm white), sans serif modern type for body, and a more unique header font for character.
  • Used design metaphors:
    Black/white to color = music bringing vibrancy to life.
    Borders and pink tones = youthfulness and growth.
    Violet = mindfulness and maturity.

3. Creating the webzine:‍

  • Using procreate, I drew the record store and its components
  • Self handedly coded the webzine with visual studio code
  • Through Figma, I designed the different functions my webzine would have

Outcome


The result was a fully coded, interactive Webzine that brought my personal connection to music into a digital record store experience. Using Figma for wireframing, Miro for mapping ideas, and Visual Studio Code for the final build, I turned sketches and narratives into a functioning site with clickable elements and a clear story flow. Beyond the final product, this project taught me how to balance design vision with technical execution - bridging creativity, coding, and storytelling in one interactive format.

Continue to next project

Mental Health Watch

All ProjectsOmnimediaabout me

Made by Amaris H. Rousse

Powered by Webflow