As part of re-designing Mississippi Today, we were commissioned to come up with a new web banner for their site. Inspired by INN’s commitment to documentation and transparency, here is my creative process for creating that web banner.

The Original Web Banner

This was the original banner that they were using, which had areas that could be improved upon. The problems that I saw were:

• The logo and the photo weren’t integrated. The separation between the two design elements was jarring.
• The photo itself didn’t feel appropriate. Most of the photo space was taken up by dark tree branches, and the lighting of the State Capitol at night had a spookiness that didn’t make sense.

So I had to find a solution – something that incorporated the logo, looked modern, and felt representative of the stories that Mississippi Today reports. Here is how I went about that process.

Sketching

It started with the basics: pencil, paper, and good ol’ Google Images. Here I tried to get a feel for the subject and develop a familiarity with the visual elements. I asked myself:

• What qualities of the State Capitol building make it look like the State Capitol building? In this case, it would be architectural elements: windows, pillars, engravings, statues.
• What’s working? This is a question I always go back to. In my experience, attempting to recreate what I envision in my head never works. I find it better to let the process lead me; the little mistakes and blunders along the way tend to lead to better ideas.

I wasn’t sure if the client wanted to go with an illustrated web banner so I did a quick freehand sketch. The proportions and lines weren’t drawn precisely but it has a breezy quality that gives it whimsy.

Banner #1 - A Starting Point

Pros

• The logo is integrated with the banner and doesn't feel jarring.
• The banner features the state capitol building (both old and new).

Cons

• The dome of the building is hidden, so it isn’t specifically recognizable as the Mississippi State Capitol.
• The illustrations and proportions aren’t precise.

Verdict

The clients liked the illustrations! Woo Hoo! However, they’d like them to look more like the Missippi State Capitol. Which means...

Back to Sketching

Illustration is pain - especially when you’re drawing a building! You really just have to power through it. This time, I spent more time on making lines straight and getting the proportions right.

I don’t have formal architectural skills in drawing buildings, so most of the sketches still retained a looser, abstract quality to them.

One of the problems I encountered while designing the first banner and continued to deal with was finding a good white space balance. Given the proportions of the Mississippi State Capitol, I had to:

• Crop the State Capitol Building while finding a way to keep it recognizable.
• Find a way to fill up all that white space.

This time I got an idea - what if I used the various architectural elements as visual motifs? That would be a way to fill up that pesky white space. Back to more sketching.

Banner #2

Pros

• It's overall more colorful, graphic and richly textured than the first banner.
• The line work is more precise.
• The colors are fun.

CONS

• The design elements feel crowded; a lot is going on.
• Theres's less emphasis on the logo because of all the visual noise.
• I don’t like how the elements are cropped!

The interplay of the architectural elements somehow gets lost in the process of cropping.

Verdict

The clients wanted something more in line with the first banner illustration, which puts the logo in the foreground and the illustration in the background. They also like the looser brush style of the original illustration. Back to the (literal) drawing board!

More Sketching

I used a brush pen to outline my first illustration of the State Capitol building, so I knew to go back on that style for my next illustration. By this time, I was much more familiar with drawing the Mississippi State Capitol, which made drawing all those pesky windows and columns (slightly) less painful.

The final result has the "looser" quality of the first illustration but the precise proportions and line work of the second illustration. I added some color and the American and State flags to make sure that it was recognizable as the Mississippi State Capitol.

I was happy with the results. The style was reminiscent of Jean Jullien, a fantastic illustrator who juxtaposes bold brushwork with pops of color.

Now it was time to put this bad boy in a web banner!

Banner #3 - Is this "The One"?

Pros

• The new illustration is more similar in style to the original illustration, but done with more precision.
• The illustration doesn’t draw attention away from the logo.
• There's enough white balance so that it doesn’t feel crowded nor too sparse.

Cons

• Lines are precise but it overall lacks the free spirit of the original illustration.

The Verdict

The clients actually wanted to go back to the original illustration of Banner #1. Which happens! There’s something about the original illustration that’s charming and quirky, and it gets lost in the other two banners.

It's about enjoying the process as much as the results.

Here are the different explorations of the banner:

And here is the final illustrated banner in action:

Conclusion

My first illustration commission was a fabulous experience; I pushed myself to explore new styles and learned a lot in the process. I also improved my skills at drawing buildings - I'm totally adding "Professional State Capitol Drawer" to my LinkedIn profile.