In this second part of a three part post, I’ll be covering the design and illustration process. Rather than designing the website from scratch to fit some sort of custom content management system, we start with a skeleton framework, usually a premium WordPress theme, to help reduce the overall cost of the website, as well as speed up the development process. Think of it like shooting video versus shooting on and developing film. It’s cheaper in terms of development time, but only by about 30% or so, which can still make a huge difference if you’re competing with two other companies for a web design project.
What used to take 6-8 weeks of strenuous front-end development and retrofitting flat HTML pages around a CMS, is now a 3-4 week process of reskinning an existing theme.
Tools used in this part of the process
- Photoshop – Laying out mockups of pages
- Illustrator – Tracing and color of illustration sketches & logo design work
- Dropbox – Storing images, layouts, and for sharing folders remotely with Riot Fest team
The Making Of Riot Fest Website Design
- Part I – Design Benchmarks & WordPress Themes
- Part II – Design Concepting & Illustration Sketches
- Part III – Web Development
Riot Fest felt that the Magazin WordPress theme best fit their needs, and luckily for me, the WordPress theme came with a PSD mockup file so we didn’t have to screen capture the site and meticulously re-layer it Photoshop.
Planning for a high traffic website
As everyone who has ever bought a ticket to a festival knows, the initial announcements and ticket on-sales tend to make websites crash, and because of that, we wanted to make it as easy as possible for visitors to quickly find the information and ticket links they needed. That way, users would only hit the front page, or one page of the Riot Fest site, and then be moved off to the actual ticket processing website Ticketfly, freeing up bandwidth for other users (If you’re more interested in how we coded the site to handle large spikes in traffic you can skip to the development process post in part III.)
With that in mind, we decided to have two clear calls to action that would live outside the main boxed design for users, one that had all of the available ticket links, and the other would house social media buttons of some sort. (These calls to action would shift/move for smaller screens or hide themselves altogether.)
These two items along with a large drop down menu that could house information for music festivals in three cities, and a menu that would stick to the top of the browser window when scrolled, were all key features that the Riot Fest team felt would help achieve all of their needs for the website.
Choosing Carnival typefaces from Google Fonts
For me, the easiest thing to get started on is fonts. Knowing that the theme supports Google Fonts made this process a little easier (or difficult depending on how you look at it), because we were limited to a couple hundred font choices. Knowing the client was all in on carnival fonts, we picked out several fonts that reminded us of carnivals. We decided on Voltaire for menu elements, Metrophobic for the main body font, and Kameron in bold for headlines. Another bonus for using Google fonts: all the font files are served up by Google’s servers which will decrease the load on the actual Riot Fest site during times of high traffic spikes.
After experimenting with font sizes in the menu, and initial feedback from the client, we decided to shrink the overall font sizes, and split the single main navigation into two with each Riot Fest city being part of the left side, and other, more minor elements making up the right side navigation, rather than trying to jam all the items onto one line. Keeping mobile in mind, the two separate menus that would appear on their own lines for smaller screens.
Illustrated characters, carnival, and a ferris wheel
Candice Ciesla, our illustrator, sent us a few sketches to show the client and work into some sort of basic wireframe for the site. I ended up sketching out the entire layout of the site to help Candice visualize how those elements would interact with the Magazin theme layout. Some elements would be background, and some may end up animating, or end up scrolling down the browser in a ‘parallax’ motion effect. We ultimately ended up not having any parallax at all—thankfully.
After doing my own horrible sketch, I sent it to Candice to help her visualize the scale for the illustrations and sent her initial sketches to Riot Fest for approval that you can see in the gallery below. (They approved)[pullquote]I got the colored vector artwork back from Candice and felt that it was dead on. Unfortunately, the client did not. [/pullquote] I got the colored vector artwork back from Candice and felt that it was dead on. Unfortunately, the client did not.
Predicting what the clients will want is always a gamble. They didn’t like the color palette direction—but still loved the style of the illustration. (Not exactly what we wanted to hear, but I digress). Because of this, we did a second and, ultimately, a third pass at coloring the illustration that you can see in the gallery below.
While this was going on, I had progressed the WordPress theme PSD a bit more and actually did some color palette choices of my own. I saved these to send to Candice along with some design benchmarks from the clients.
Riot Fest felt the colors weren’t right, so I sent the illustration back to Candice for some adjustments which included a few more illustration color palette benchmarks from the client and myself. After a few days of back and fourth, we ended up settling on a final illustration design that had some slight modifications to it include more bold, primary colors rather than faded colors and we merged those individual illustration elements into the header.
After trying to place the actual website content elements over the illustration, I realized that we may have to utilize something else in the background for the majority of the site, and just utilize the illustration elements in the footer and header.
Unifying the illustrations with the design
Because Riot Fest and I decided not to use illustration across the entire site, it was up to me to come up with a background for the very generic, boxy-looking design to make it feel more unified with the header and footer illustrations. The first challenge was figuring out what colors would work, and what textures would work for the background image that wouldn’t detract from the actual content on the pages.
I ended up pulling in every band that every played Riot Fest, and using a carnival-like font I found available as freeware to faintly have the band names appear in the background with a distressed, old carnival poster look along with some faded red stripes. (This came after two or three rounds of design edits). We hid quite a few easter eggs throughout the background including things like sharks, and MAYBE one dickbutt.
The small banners above the sidebars were also put together to look like draped carnival banners with plain text headings using the Voltaire Google font for SEO purposes. Along with those small modular looking banners, I created the very important large ticket buttons with an option for each city and each type of ticket you could purchase, which eventually ended up being simplified for the final design. The final major call to action item was a tall spire with a flag on it to include bottle caps for each of the major social media accounts for Riot Fest. (We later added a Reddit cap per Riot Fest’s request).
Couple that with some older place-holding content and photos from old Riot Fests, and elements from the yet-to-be-finalized illustrations from Candice and we have our first mockup worth sending to the client for some feedback. (What we sent to the client is below and is dated 4/17. This doesn’t reflect the final background but you can see how it’s developing.)
I realize that normally you would wait for a more complete, or nearly fully completed design to send to a client for feedback, but given that we made the design decision to just have the illustration work go across the top of the site, and in the footer, it made it easier to get a soft approval on the main content portion of the site so we could begin customizing the CSS in WordPress while the final illustrations were completed.
Redesigning the logo and header banner
Rather than just use the old logo, Riot Fest also decided that they also wanted to explore a new logo to sit atop the illustration in the header. (Which includes the anxiety-inducing animated ferris wheel, something that I still hadn’t figured out how I was going to animate…)
After compiling my favorite freeware fonts and sketches, I was able to send Riot Fest a set of rough logo looks that I thought would work on the banner I created for them and sent them off for approval.
Despite my past experiences with logos, we were able to nail down a new logo look for the illustration in just two rounds of design—a first for me.
Finalizing the design in Photoshop with illustrations and a new logo
Now that we had approval on the illustration style (colors still needed work) a rough homepage layout, and the ticket/social media calls to action elements, it was time to start refining the design to look more like a complete, unified design that looks nearly pixel-perfect.
We put together two options for the homepage design with a beige/red/yellow color palette which was what matched our initial benchmarks, but also put together a more green and blue option as requested by the clients so they can get a better feel for how the design would look. The blue and green options were more pastel-like, with the red/beige option being more of a faded carnival poster look. At this point in the mockups, we still had a more desaturated pale look to the illustrations themselves which ended up being much more bold in the end.
After deciding on the beige color palette, Riot Fest decided that the pastel color palette for the illustrations didn’t match up as well now, so we revised the colors on those and added two additional illustrated characters that we modeled off of some old fire breathers and stilt walker images we found. Some slight tweaking was needed on positioning a few elements on the page and we received approval on the design.
While this was going on, I had been doing some content formatting and customizing the CSS to the WordPress theme to save time on the development process. The reason being, it was April 23rd and I was just told that that Toronto lineup announcement, the first major announcement would be on May 6th with no ability to move back that date–given that I was going out of town on May 2nd, we needed a working version of the site completed by that day at the latest.
That left me with just 9 days to develop the entire site. 9 days. Continue to Part III – Web Development