In this three part post, I’ll be showing you how we built Riot Fest‘s brand new WordPress website with as much helpful information as I can remember, in hopes that it’ll help you out in some way with your own large-scale website design projects. In each section, we’ll be covering one step of our process and providing insights as to why we built it the way we did, how we ended up on our final WordPress theme choice and overall design aesthetic for Riot Fest. This particular part is about the “analyze” phase of the project that primarily involves a brand review, brainstorming, and design benchmarking.
In the remaining two parts we’ll cover the design, and then the development and launch of the actual site. We were a bit crunched for time and actually went from Photoshop mockups to fully built in 9 days, just in time for the May 6th Toronto lineup announcement and my much-needed Disney World vacation on May 2nd.
- Evernote – Taking notes in meetings, recording design benchmarks, mood boarding, sharing ideas with clients
- Pinterest – Yes, we use Pinterest extensively for design ideas
- ThemeForest – Skeleton WordPress Themes
The Making Of Riot Fest Website Design
- Part I – Design Benchmarks & WordPress Themes
- Part II – Design Concepting & Illustration Sketches
- Part III – Web Development
Design Benchmarking is one of the most important phases of web design, because it gives you an idea of not only what design aesthetic works for a brand, but it can also identify how well-versed and particular your client is with design.
After our initial brand review and brainstorming meetings, we dived into trying to figure out what design aesthetic team Riot Fest felt best reflected their brand and personal tastes. One of the main reasons why Riot Fest was a dream project for us, besides the fact that it’s a yearly festival we love, is because of the interesting design aesthetic the festival has had over the years, as well as the fact that Mike Petryshyn, aka Riot Mike, basically gave us free reign on everything except to say he wanted a “turn of the century carnival with some illustration work,” possibly an animated ferris wheel, and a place to hold a small music player (either Rdio or Spotify).
Due to the complexity and request for illustration work and character design, we did four different categories of design benchmarking so we could identify which illustration style was preferred, as well as a color palette for the illustrations and the website design. We also did some research on character illustration as having characters interact with the design was something that was discussed as being part of the new website. We did design benchmarking for websites that Riot Fest felt would match their aesthetic as well. Finally, we picked out a variety of WordPress themes that would be able to accommodate all the different types of content and features that Riot Fest would be utilizing throughout the year to promote shows, show pictures from past Riot Fests, as well as the primary goal of the new website: selling tickets.
Color palette, illustration style
One thing that was very important to Riot Fest was incorporating old-school illustration into their website, so that the in-festival printed materials would have an aesthetic carry over from the website. Their old map illustration gave us a jumping off point for what would drive the look of the new illustration which would also impact the overall look and feel of the design.
Riot Fest did a lot of the work for us in finding a multitude of illustration benchmarks in a variety of shapes/colors that they liked. Some of them made it into the final design, and some of them would be used later for print materials and for many of the digital ad banners and festival promotional materials leading up to the fest in each city.
Because Riot Fest had a very specific illustration style in mind, I felt it was important to get an idea of what color palette, as well as illustration style they thought would fit the brand. We started out with faded colors that you’d find on old carnival posters. Faded colors like beige, yellows, pinks, and other colors were found in some of the style benchmarks, but we ultimately ended up going with a much more bold color palette per Riot Fest’s request that had darker greens, reds, maroons, and brighter primary colors like yellow and bright blue. I still ended up using some of the more faded colors in some aspects of the design to draw in more contrast.
After some back and fourth via email about illustration work, I sent off a bunch of different options to our illustrator Candice Ciesla for some sketches. (Her work is fantastic so check out her site if you have a chance)
Website Design Benchmarks
Layout, color, fonts, photos, video, textures
Part of our initial benchmarking meant we had to do some research into what other festivals had done, or were currently doing, to see if we could draw any inspiration or ideas from them. After all, if you’re not doing some analysis on your competition as a designer, you’re never going to be able to stand on the shoulders of all the hard work that’s been done before you! And then how you can hope to improve upon it? We also reviewed past Riot Fest efforts to build upon.
With Candice working on illustration sketches, I moved on to finding a wide variety of websites that I felt had design elements that would translate well for the new site, that also resembled the look of some of the older creative used for Riot Fest. Some of the sites we felt matched aesthetically included:
- Find Your Way To Oz
- Street Art Meets Basketball
- Black Negative – Bose
- Moment Skis
- 96 Elephants
- Jack Daniels Christmas
WordPress Theme Benchmarks
Layout, features, full screen/fixed width, typography
Most of the WordPress theme benchmarks we chose were premium themes from ThemeForest. The majority of them resembled online magazines, but it was also important that once the site was completed, that it would be able to handle a large amount of traffic coming in at the same time. (While also being able to accommodate all the different types of announcements and content that Riot Fest would have in the coming months.)
A few of the problems that needed to be addressed with the current site was the navigation, layout, speed, and overall design aesthetic. Riot Fest’s current site was also not mobile friendly, which was an absolute must now that 50% of the traffic coming to the site was from tablets and handheld devices so responsive themes were a must.
A few other features that the Riot Fest team indicated was important for the new site included:
- Multi-tiered drop down menus
- A ‘sticky’ header navigation with the option to have multiple navigation menus
- A featured area of the homepage where Riot Fest could feature smaller club shows they were partnered with in other venues around the country
- Integration with a Content Distribution Network (CDN) so the site would stay online during periods of high traffic
- Cached pages (Done through WordPress’ Supercache plugin)
- Drag & Drop WordPress editor so Riot Fest’s content manager could easily and quickly format and post new content to the site
- Integration with Mail Chimp so people could sign up for Riot Fest’s email newsletter
- Separate page for upcoming shows (Riot Fest Presents partner shows)
- Animated characters or a ferris wheel
Some of the themes we looked at:
After gathering all the various design benchmark selections that Riot Fest felt best reflected their brand, it was time to move on to the next phase of the process. We were lucky in that Riot Fest found a site that they felt would accommodate their needs in our first wave of benchmarks, which gave me everything I needed to move on to the next phase of the project, the design.