Winter 2021

IO Music Studio Website

Duration
5 weeks
Team Role
Freelance
Project
Primary Tool(s)
Adobe XD
After effects
Webflow

Challenge

"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

Branding

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

Wireframe

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

Hero

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

Footer

Take Aways

1

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

2

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.

3

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

Keep Going!

Next Project: CO