News

Adaptive Web Design book cover

posted by Veerle Pieters
27 May 2011

In November our good friend Aaron Gustafson contacted us with the request if I would be interested in designing the cover of his new web design related book. Call me intrigued. Designing book covers isn't something that I do often and they are always a welcome creative challenge. Definitely when it involves illustration work. After checking my schedule and agreeing on the timing, there wasn't much doubt left.

The briefing

During a Skype meeting Aaron explained what his book is about. At that time the title of the book wasn't final yet, but there were already a few ideas circulating. One of the titles with the most potential was 'Adaptive Web Design, Creating Rich Experiences with Progressive Enhancement'. I was already familiar with the term 'Progressive Enhancement' so it didn't take too long to start discussing ideas. The book's cover needed to be a colorful eye-catcher, and we both agreed on trying to find some kind of a metaphor or analogy as illustrative subject.

For those that aren't familiar with the term 'Progressive Enhancement', it's a way of designing for the web with the emphasis on accessibility using semantic markup in a layered fashion that allows everyone to access the raw content and functionality of a web page, using any browser, while also providing those with a more capable modern browser an enhanced version of the webpage.

Some of the analogies Aaron had in mind were: a peanut M&M, a trifle, a layer cake or earth. He especially liked the peanut M&M because as he stated:

"Each layer adds something that makes the experience more pleasant, but not all layers are necessary for it to be edible. It doesn’t really work in a literal sense because there are more than three layers, but I still think it’s a valuable metaphor."

Even though it is a good analogy, and the result would definitely be colorful, the idea of using peanut M&M's for the cover of this book didn't really appeal to me. So I suggested to visualize the layered method in a more abstract way, using geometric forms. Aaron liked the idea as well, but of course it all depends on the outcome. It was totally up to me to make the idea work, and to have it speak for itself. We decided to follow this route, so I got started…

The design process

Browsing for inspiration

The first thing I did was browsing around to get inspired for form, colors, typography… Luckily, I didn't have to look very far as I have my own arsenal to start with, my Inspiration Stream. People often ask me if I have a typical design method that I usually stick to. I don't think I have really, as with every project it's a bit different. Of course I always start with the obvious, finding inspiration, but once it's starting to brew in my head it can differ what I'll do next. In most cases, for a project like this, I'll do some sketching and I start thinking about colors. This time I decided to try to find the right color palette first, combined with the typography plus trying to shape the idea of an abstract form that would be suitable.

Creation of a mood board

After gathering a few images that inspired me, I decided it would be a good idea to create some kind of a mood board in combination with a few suggestions on color combinations and typefaces.

Mood board for Adaptive Web Design book cover design, containing some ideas for the color palette and images that inspire me.

After browsing the Inspiration Stream, I found these images that inspired me because of their color usage: number 5, 6, 10, 11 and 12. From these images I tried to derive a color palette of usable color combinations. Next I tried out a few color and typeface combinations for the main and subtitle, by creating these basic covers as seen in 1, 2, 3 and 4.

Images number 7 and 8 I liked because of the geometrical shapes. As for number 7 I thought the idea of overlapping shapes could be something to look into. As the center of all overlapping shapes would represent the users with the richest experience, and each separate shape would be a different experience. Though I wasn't sure if this thinking was actually representative enough, plus that it would translate that message. The idea fascinated me for a while, but then it faded away and didn't result in any concrete concept. Number 9 on the other hand was a special one, because of the concept. I thought it would work well if I could do something similar as how the dog was presented: going from outline, to flat fill and to a colored fill. It reflects the metaphor of progressive enhancement very well. That illustration got me thinking…

Aaron and his team liked the colors used on image number 11. So I decided to work with colors in the same palette of that illustration. Plus they also liked the typeface used in the main title of numbers 3 and 4.

The first design proposal

For the initial proposal I thought of using the shape of a cube and trying out the same idea as the dog illustration, using a color palette that is close to the colors used in image number 11. Below you see some of the process of the first design proposal, trying out a few different compositions. At that time I also didn't know the exact dimensions of the book. As you'll notice further below, the final proportion of the book is a bit taller.

The first design proposal in 3 variations

Even though the client's preference was version 2, they weren't 100% convinced on how well the two concepts 'building up & abstract shapes' worked together. They did like some elements of the design, but they also thought of a more sophisticated illustrative style.

The second design proposal

After some brainstorming (via Skype), we came to the conclusion of trying out the concept of using a chameleon, which was also one of the ideas I mentioned in our first meeting. When thinking about the term 'adaptive', I couldn't help thinking about a chameleon. After all it is an animal that adapt itself to its environment around him, and I thought it could make an appealing look if I could create a stylized version. It would make a perfect subject because in terms of colors it gives me enough options, and because it's a very fascinated animal to draw, plus I totally love the shape of his tail. At first I dropped the whole idea, because I was convinced it had been used before on one of the O'Reilly books. Though, I'm now doubting if I don't confuse it with one of their other animals (the lemur?) as I couldn't find anything on the web… While thinking about this in more detail I knew that I would create something totally different from O'Reilly anyway as their animals are always in a black & white pen drawing style.

Second design proposal

After gathering a ton of photos of chameleons I made a small sketch of how I would position him on the cover. One thing was for sure, his tail needed to be on the cover as I totally love the curly shape. Aaron and his team also loved the color palette I used before, so it was my intention to try to adapt the same color palette into this new design. While studying the animal and his position, I tried to draw the animal using only basic shapes limiting into a horizontal, vertical or diagonal structure, with a minimal of deviations.

Second proposal, now with adjusted background leaves and toes

Aaron and his team really loved the direction of this illustration, and based on feedback I ended up with a second version where I gave the animal toes, and a leafy environment. I looked at many photos and compared them with each other. Some of the photos were too blurry for me to make things up. So for a moment the toes drove me a little bit crazy and I wished I could watch this animal in real life. That's why I made a mistake in how his toes are positioned in my first design.

The final and approved design

One of the final remarks was that the ribbon-like effect of the tail did feel a little awkward as it didn't feel like a tail but rather more as a detached ribbon. So I applied this surreal 3D effect to the tail, which gave it more depth and the illusion of thickness, while keeping the different color segments. Another request was if I could curve the crest of his head a little bit more. I initially thought this would ruin it, but after trying this out, it seemed to result in a more elegant look. I also corrected his toes on the front leg and changed the word 'Creating' into 'Crafting'.

Final and approved design of 'Adaptive Web Design' book cover.

Typefaces used for the cover are Trade Gothic Bold Condensed Twenty and Trade Gothic Condensed Eighteen. The book is now off to the printers and I can't wait to have a copy in my hands. That's something that web design will never replace, the tactile response of something you created. The book is now available for pre-order at http://easy-readers.net/ with a discount. Will do a review of the book itself too.

Comments

There are no comments on this article.