French Quarter Festival Redesign

The French Quarter Festival started in 1984 as a "showcase" for New Orleans’ finest local musicians. Since then, it has grown into the cities second largest festival, which represents the best of local culture, food, music, film, and visual art. This festival truly embodies the unique and diverse culture of the French Quarter in New Orleans and provides an amazing opportunity to support local artists and keep communities and the world connected to this city.

Currently, their website is difficult to navigate and is lacking in a "system" that would create more ease for festival attendees, especially people unfamiliar with the city. Based on competitor research, the site and brand feel outdated and do not represent the pride and culture that people associate with this city and event. It is currently a part of an umbrella site for French Quarter Festivals Inc, and has the same layout and design as its "sister festivals". Because this festival is exponentially larger, it needs a contemporary and unique layout that stands out from its competitors.

My goal for this site is to make it accessible to multiple generations and locals and tourists alike; with a better organized site navigation and emphasis on event schedules and locations. I also wanted to give it a more contemporary feel, with an emphasis on New Orleans culture and heritage without looking “historical”.

Grid System

For this project, I needed to use a very basic grid system, that was able to flow well with the navigation. In the smallest media query, the grid is a 1 column, 100% grid with the responsive navigation menu on top. In the medium media query (min-width: 40em), the grid is 2 columns, 50% / 50% grid with the responsive navigation menu on top. And in the largest media query (min-width: 53.125em), the grid is also 2 columns, with the responsive navigation menu floated to the right at a 222px fixed width.

Small Device Grid

100% — Col 1

Medium Device Grid

50% — Col 1
50% — Col 2

Large Device Grid

Fixed Width — 222px
50% — Col 1
50% — Col 2

Type System

When exploring typefaces, I came across Phoreus Cherokee, which I felt really represented the look and feel of this project and was reminiscent of ornate wrought iron fencing you see all over the French Quarter. I used Phoreus Cherokee on all headers, and I paired it with Azo Sans for the body copy, links and list items. Azo Sans is a simple, geometric font with great readability.

Phoreus Cherokee

by TypeCulture

Variable = $head: "phoreuscherokee",sans-serif;

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Zx Yy Zz

Azo Sans

by Rui Abreu

Variable = $primary: "azo-sans-web",sans-serif;

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Zx Yy Zz

Header One—Base 3.25em

Header Two—Base 2.5em

Header Three—Base 2.25em

Paragraph—Base 1.25em, line height 1.5

Color Palette

The French Quarter Festival is in the beginning of spring every year, which also marks the start of crawfish season (big deal y'all). The French Quarter also has very vibrant house colors and art hanging all over the fence around Jackson Square. I wanted to shy away from colors normally associated with New Orleans (Mardi Gras and Saints colors) and really pull from the vibrancy and season.

Primary

  • rgb(199, 11, 15)
  • hex #c70b0f
  • Variable = $primary_red
  • rgb(76, 155, 172)
  • hex #4c9bac
  • Variable = $primary_teal
  • rgb(220, 226, 105)
  • hex #dce269
  • Variable = $primary_yellow
  • rgb(223, 233, 37)
  • hex #dce269
  • Variable = $logo_highlight

Secondary

I used simple colors for all the text and navigation backgrounds, since the other background colors are so vibrant. I used white text on darker background colors, and the dark grey for light or white background colors.

  • rgb(75, 70, 72)
  • hex #4b4648
  • Variable = $dk_text
  • rgb(255, 255, 255)
  • hex #ffffff
  • Variable = $lt_text

Icon Set

I created all of the icons in Illustrator and they are all saved and used as svgs.

Home Page Icons

This set of icons are intended to be more playful and reminiscent of iconic New Orleans images. I saved two different sets of these icons. One set to be used as small (100px x 100px) icons with animation on the home page. And another set to be used as large, semi-transparent background images to create more depth.

Food Vendor Icons

I created these to be used on the Food page to indicated which vendors offered vegetarian and gluten free options

Images, SVGs, & iFrames

All images are saved for web in Photoshop a JPEG Medium. Any image taken from another photographer or event is credited on the bottom of the image.

All icons created in Illustrator are saved as SVGs. Small sets are used as images in HTML, and large sets have a 30% opacity and are used as background images in CSS.

All maps on the Music Page are embedded iframes from Google Maps. They have a max-height of 200px so that they don't create scrolling issues on mobile devices.

Elements

Links & Hovers

For the responsive navigation, I wanted to separate the primary page links from secondary and footer links. The primary page links are styled with a dark grey background color, teal hover, and highlight yellow bottom border (or right border, depending on the media query). The secondary links are on a white background with the teal color hover. And the footer links are on a dark grey background with a highlight yellow color hover, as shown below.

Home
Sponsor and Artist
Volunteer

Navigation

Responsive dropdown in global/mobile media query

Responsive Navigation in medium device media query (min-width:40em)

Responsive navigation in large device media query (min-width:53.125em) with a fixed width of 222px and floated left of all content.

Day and Location navigation for all events and vendor pages

Sponsors

I used type hierarchy to indicate which were the top tier sponsors and which were second tier sponsors. The "platinum" sponsors (Chevron and Capital One Bank) are displayed with one color logos.

Top Tier Sponsors:

Second Tier Sponsors:

Process

Sketching & Planning

I began this process by doing client interviews, a current site analysis, competitor market study, S.W.O.T. analysis, and a creative word list. Then I jumped into my sketchbook and explored multiple layout ideas with three media queries each. Here is the one I decided to move forward with.

Morphological Matrix for FQF Logo

I used a morphological matrix to combine different imagery associated with New Orleans to explore different logo idea. The point of this process is to move away from an obvious representation of the client and create a unique and simple logo.

Style Tiles

I used multiple style tiles to explore different color and type options. I brought in photos from my research that I wanted to draw from with color and vibe. I also put together elements in different ways to see how the color and type could relate to each other on the page.

Wireframes

Once I narrowed down a layout idea in my sketchbook, I moved into wireframing in Photoshop. This process helped me solidify the layout and structure of the site, without focusing on how color and type would play into it.

Comps

After tweaking my wireframes, I created full color, type, and content comps to help solidify layout and design and make any major decisions on content placement. Because of the nature of the web and the re-flow of content, there were some things that needed adjusting and even changing from the comps, however they were a great reference to use when going into production.