Dance and Music Academy

Visit Site Web Design, HTML / CSS / Mobile

Dance and Music Academy is a dance studio that has been enriching the community for 15 years. They take great pride in providing a curriculum that is tailored to individual desires, allowing participants to thrive in the areas they choose to explore. DMA prepares dancers for pre-professional and college dance opportunities. They are dedicated to empowering young minds through the arts and find great value in knowing each student on a personal and artistic level.

Services Provided: Web Design / Responsive Front-End Development (HTML + CSS)

Goal and Vision for the Site

The client expressed that two of her main goals were for her current students to be able to access class information easily and for new visitors to become familiar with the studio's philosophy and training style. She wanted to convey to the audience that they are a high level training facility and that their instructors inspire students to be creative.

The Challenge

DMA had a non-responsive, disorganized, outdated website that was in need of a redesign. The client expressed a desire to revitalize the look and feel of their site and provide better user experience for their customers.

Some of the main issues we were going to tackle were:
  1. Simplifying and focusing on core content
  2. Improving ease of use of the website
  3. Updating the site’s aesthetics and functionality

The Solution

Evaluating Their Old Site

The redesign of DMA’s website began with an evaluation of their old website. While attempting to navigate their old site, I was overwhelmed by the amount of information I had to look at all at once. There were too many links in the main navigation. The site felt confusing and overly complicated to look at. As a first time visitor, I wasn’t sure where to focus my attention first. I knew immediately that I wanted to simplify the site. I wanted visitors to have an easier time directing themselves throughout the site.

Simplifying Content

Strategy Session

During our initial strategy meeting we tackled the site’s structure. I recommended that we cut out any unnecessary content currently living on the site. We streamlined it to include only what was directly aligned with her current goals for the site. We would concentrate on what was most important and relevant to her existing and forthcoming customers. This was for current students to be able to access class information easily and for new visitors to become familiar with the studio’s philosophy and training style.

We also sketched out a basic site map / structure for the site. Sitemaps help to clarify what your site’s goals and purpose are before starting design or creating content. We took note of the pages that would live on the site, the links for the main navigation and footer, and any new content or images that needed to be created.

Sketching and Wireframes

After this inital discovery session, I started the process of sketching out initial ideas for wireframes. I went through 8+ sketches to try to dish out as many possible solutions before starting on wireframes.

Sketches

I created wireframes for the homepage, classes page and performance pages. Wireframes help provide a basic structure for the layout of your site before you start incorporating more visual aspects to your design. It helps with the usability and organization of your site's content.

Wireframes

Improving Ease of Use

Usability

We decided to reduce the amount of links on the top navigation to create a clearer, more effective experience. The client mentioned that registration on her old site was successful, so I made sure that it would have a prominent spot on the website. I placed the ‘Register Here’ call to action within the main navigation so users could always be one click away. Clear call to actions were used throughout the site.

Design

Capturing the Studio's Brand Through Use of Photography

While designing the website I wanted to capture feelings of inspiration, strength, and exceptional training. I wanted the photography and imagery in the design to be full of emotion, impactful, and awe-inspiring. The impressive photo of the dancer used in the hero banner immediately conveys the beautiful artistry and expressive dance training that the studio provides. These characteristics were used consistently throughout the site with other design elements such as colors and typography.

Capturing the Studio's Brand Through Typography

A serif font was chosen for the links on the navigation to stay consistent with their existing logo and the studio’s sense of artistry. The other font selected was a modern, bold sans-serif to embody the attributes of strength, value, and excellence.

Vision for the Site

Vibrant and energetic images of current students are distributed throughout the site to capture the audience's attention and to illustrate what the dance academy is all about.

Responsive Update for use on Mobile and Tablet Devices

Lastly, the website was not mobile friendly, so it was adapted to give young users the ability to access all of the site’s information on their phones or tablet devices.

Kind Words

"Gisela was wonderful to work with. She made the process exciting and fun by thoroughly understanding her client's needs and wishes. The end result was a beautiful new site for my customers to utilize. I highly recommend her!"

Krissie Odegard Geye - Owner / Artistic Director Dance and Music Academy

Interested in working together on a new design? Let's Do This!