OVERVIEW
PROJECT TYPE
Visual redesign
Course project
SCOPE
Six pages (desktop & mobile views)
DATE
Mar-May 2023
DESIGN PROCESS
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.
MAIN ISSUES TO ADDRESS
subdued, unexciting colors
templated and predictable layouts
inconsistent promotional graphics and header image treatments
PROJECT GOALS
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:
STRATEGY 1
STRATEGY 2
STRATEGY 3
STRATEGY 1
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.
MOODBOARD
TYPOGRAPHY
STRATEGY 2
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.
STRATEGY 3
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.
CLAIRE NIEMEIER
