There is often a perception that classical music is boring or old, and unfortunately the existing site for the Grand Rapids Symphony does little to contradict that notion. This redesign was a chance to bring the artistry and emotion of the GRS’s performances into their visual identity.


Visual redesign
Course project


Six pages (desktop & mobile views)


Mar-May 2023


Audit of current site

The current site functions pretty well (aside from a bad readability issue on the homepage), but the overall visual design is very bland. There is a lot of text, but very little text hierarchy. The main branding color are subdued shades of blue and gold.


  • subdued, unexciting colors

  • templated and predictable layouts

  • inconsistent promotional graphics and header image treatments


My main goal was to create a site that’s dynamic and expressive. I wanted to convey the artistry and craftsmanship of the music and to match the emotional feel of being at the symphony.

I also wanted to up the cool factor a bit to increase the appeal to younger people, but still keep that feeling of occasion and elegance that people associate with going to a symphony concert. To do this I focused on three main strategies:


Make the text a focal point of the design


Use color and texture to convey emotion


Create varied layouts with dynamic interactions


Make the text a focal point of the design

The symphony website primarily supports information seeking, and as a result many of the pages are extremely text heavy.

The GRS also doesn’t have a lot of great images on their current site, so I wanted to move away from the layouts with large header images and let the text carry more of the visual weight.

I spent a lot of time selecting the font, and ultimately settled on the display font Waltzing Mathilde. It has a lot of movement, but also feels quite elegant without being stuffy.

For the body text I chose Noto Sans. It’s solid, narrower feel balances the display font nicely.




Use color and texture to convey emotion

I decided on a dark background with colored gradients because I wanted to reflect the feeling of sitting in a darkened concert hall with the spotlight on the musicians and the music in the air all around you.

I chose the orange color in large part because it tied in well with a lot of the images of the musicians on stage with wood paneling around them. The dark green adds some nice depth and the light pink is elegant and contrasts well with the other colors.

I also added a slight graininess to the background which contributes to the feeling of craftsmanship and physicality.


Create varied layouts with dynamic interactions

To break up the heavy feeling of so much text, I used lots of contrast between font sizes and created layouts that broke the grid with offset or overlapping elements.

The layouts vary page to page, but include consistent patterns such as heading formats which tie the page structures together.

I also created several hover animations which enliven the design and invite users to interact more. The interactions also serve to guide the user as they scroll through the lists of upcoming concerts, making it easier to keep track of their place on the page.