The Process of Developing My Website

I launched the redesign of this website and blog last weekend (Friday, July 24, 2009). It was a long process, and here are a few screenshots detailing the design and development.

Objective

If you’ve been following my previous site and blog you may ask, “Why, Josh, did you redesign your site?”. I guess the short answer is, I wanted to. Being a designer/illustrator it’s really hard to be satisfied with my work for an extended period of time. I guess that’s one luxury of client work: when it’s done and delivered IT’S DONE. I can’t go back and change what bothers only me.

However, in order to actually justify spending time redesigning my site I established three objectives:

1. I wanted the site to be very functional
2. I wanted to completely get rid of Flash
3. l wanted it to be a fun place to visit

Design Process

The initial concept included a very fun, quirky spirit with a heavily illustrated barnyard scene. While the “barnyard” imagery became very minimal throughout the development, I maintained the spirit and brightness that I set out to achieve (although you’ll see from my EWWW comps that it was a process).

Above is the initial sketch. The idea was to have a cow illustrating a dramatic rooster. The drawing was going to be very cartoony, while the rooster very over dramatic.

Added some character to the cow. It’s getting there.

Beginning to create a starter layout for the home page. I definitely wanted buttons/links directing the viewer to key areas of my site (i.e. illustration portfolio, design portfolio, services, etc…).

Began the rendering of the cow in Adobe Illustrator CS3. The easel is in pink showing the initial lines.

Detail of first cow rendering, and rooster "painting"

Wasn’t completely liking the clean, vectored look, so I began experimenting with different painting techniques in Photoshop. The cow’s not bad, here, but it definitely doesn’t fit the style of site that’s developing (and wanted to develop).

I'm loving this style!

More experimenting. Still not happy with the direction. Frustration is ensuing. Wacom tablet about ready to go out the window.

Back to vectors with a little texture applied in Photoshop. Now I’m getting to a look that I like. I really like the rooster, as well. It was sad to see him go in the end. I can’t wait to use him for something.

I liked the rooster so much I even tried taking everything else out and just leaving him. But in the end, there really wasn’t much of a concept backing up the visual, so I had to ditch the guy. It was a little sad.

I needed something with more ooomph… something to make the viewer’s head turn a little bit in confusion. I wanted the viewer to say “What the heck!” and chuckle at the same time. So I went back to the sketchbook and out came this guy below.

New super-cow being vectored up.

It's coming together. It's coming alive!!

More experimenting with colors.

Here is the final home page design that I settled on before slicing and coding it up. As I did the coding in Dreamweaver I quickly discovered that the illustration was taller than I wanted, and I decided that I needed an area for an introductory paragraph. So, back to the drawing board I went, and out came the design below.

Wrap-up

That’s a pretty good design summary of the home page. Throughout this process I also mocked up the subpages in pencil and Photoshop, as well as site maps. Overall I’m very pleased with the design, and the process used in creating it. I told myself over and over again to not rush the design and concept development, and I’m glad I followed that. There were some elements that I loved, but had to let go, and that was hard (*sniff* poor rooster), but as a whole the design is much stronger. My initial goals were met, and more.

If you have any comments or suggestions I’d love to hear them. Either submit them below, or send me an email.