Winter 2021

IO Music Studio Website

5 weeks
Team Role
Primary Tool(s)
Adobe XD
After effects


"We need a website can you help?"

A friend of a friend came to me and said “Hey, I need a website for a studio I’m trying to start.” I obliged on the condition that I could use it is an opportunity to experiment with new software and tools. I used this project as an excuse to learn the ropes of Adobe After Effects as well as Webflow and Adobe XD

Phase 1


Visual Exploration

To get started I created a few mood board to get an idea of the visual direction we wanted to go in.

Phase 2

Web Content & Layout


To make the website feel full with limited content I opted for a one pager. This would also ease navigation as it would allow a viewer to access everything on the same page.

Phase 2

Web Design & Visuals


An audio visualizer to one of the groups compositions. It starts when a user enters the site and fades out the sound as they scroll down. The animation/audio will not start unless the tab is in focus.

Scoring for Visual Media

Commercial Production


Take Aways


What a client says they want and what they actually want are quite different sometimes.


Content is much easier to lay out when you have a clear idea of what that content is. It's important to determine all important text, imagery, and content before trying create visuals.


Reinforcement that audio on websites is annoying and should be avoided unless necessary.

Keep Going!

Next Project: CO