“The Smashing Book #3” cover design

27 Feb 2012

Around end of October of last year, Vitaly Friedman of Smashing Magazine asked me if I would be interested in contributing to the new Smashing Book #3. There were a few options on how I could contribute, but since my days were already filled till around the Summer of 2012, it was clear to me that I could only find the time to design the cover. After a little doubting on my end, as I was a bit concerned about the timing, I decided to take on the project. This was just a too good opportunity, as the briefing basically said "Do your thing. We want your design". It would have been foolish to say no to such a fun creative challenge.

Sketches & ideas

My basic idea for the cover design was to do something in combination with the logo and use the shape of the letter 'S' as my starting point. I thought I try out some kind of a geometrical pattern overlaying the logo. When I described this basic concept to the client, I already received a positive reaction. They were really intrigued by the idea and couldn't wait to see what I would came up with. Another idea I had in mind was an "Escher-like" surrealistic 3D effect. Once I sketched both ideas, I was less convinced of this 3D idea as the 'S' would be too obvious, while the initial concept was to hide the 'S'. What I wanted to achieve was some kind of a blend between some sort of pattern and the logo, making the logo a bit less obvious but still there at the same time.

My sketches for the cover design

At first I tried to stick to only very minimal shapes like circles and straight lines etc. Keeping it all strictly geometrical, but the problem was that the 'S' shape of the logo did not allow me to do this. As soon as I tried to overlay this on top of the logo, things got messy, because the 'S' doesn't follow the straight lines and perfect circles… I was afraid this would be the case, but I thought I just have to try anyway to see if it could work. Sometimes the clear vision I have in my mind is wrong and I only know for sure if I do a quick test. So I decided to start from the 'S' shape instead and go from there, which resulted in a more organic form, but still rather minimal.

Experiments showing some of the steps

The 1st design proposal

While covering the entire 'S' with the pattern, I realized I was facing a problem: where do I put the title? So then the idea came to mind of using the wavy line (which crosses the 'S') that is part of the logo, and trying to create some white space in the lower part. I also removed a bit of the pattern outside the 'S' shape to avoid busyness, and create a bit of rest. In a way I was thinking of creating some sort of transition between the logo and a new design. Some sort of blend, or mix if you like, between the 2 if you know what I mean. As an extra touch, I decided to add these white dashed lines. I thought it gave the design this extra detail. Though, later on I changed my mind, which isn't uncommon. My client wasn't much fond of it either, so we decided to leave them out.

Choosing & applying the colors

As for colors I decided to keep the palette "warm", making the link again with the logo. I was mostly inspired by this particular image from my Inspiration Stream. I find it really hard to explain in a practical way on how I apply colors. To me it has a lot to do with intuition; a feeling that certain colors go well together and others don't. It's a very subjective matter, and who am I to say that for example a certain type of soft brown in combo with a flashy red doesn't work well.

When I applied the colors to this design, I kept in mind that the segments would contrast well with each other. So I tried to apply them in a way that next to a dark brown segment, there would be a lighter segment, like yellow or orange. I also tried to make sure to apply the same color again with a bit of space in beween. Especially the darker and lighter ones, as they stand out the most. Same for the blue version, since the blue contrasts a lot with the warm colors, I made sure the blue was applied on separate locations, and also in proportion. To see if the colors are well applied —in this case with enough contrast— I usually do the test by looking at it from a distance. I enlarge the design, making it as big as possible on my screen, and I step away to look at it from a 3 meters distance. After this test I decided to adjust the segment at the top that uses a gradient of yellow and pink, as to me this one felt out of place. I felt that pink didn't really fit in the color palette. I changed that segment into a yellow gradient which is in harmony with the rest. In my first experiments I had some magenta and pink into the mix, and this was a "leftover". It was only after this test that I felt I needed to change it. It would have made sense to keep it if there would still be magenta and other segments of pink in the design, but since this was the only segment it felt out of place.

First steps of the initial design

Adjusting the design

The client really liked what I was proposing, especially the geometrical forms, and so it seems I was on the right track. One of the remarks was that the design might become a bit too complex at some point. There was also the suggestion to add more bright colors such as blue to match the new Smashing branding. Plus, there was the concern whether the large white area at the bottom didn't distract too much, making it a bit difficult to recognize the 'S' logo icon.

Adjusted design, simplifying the shape, adding in some blue

Keeping this feedback in mind, I tried to find a balance between the original design, and a light weight version in terms of complexity, while also trying to find the balance between recognizing the 'S' and maintaining the original design. I decided to reduce the segments, and going from 4 divisions to 3 instead. In this phase of the design I also received an empty Illustrator template for me to start to compose the entire cover, including the back and spine.

Another variation of the adjusted design

Change of plans

Right before I finished and showed my client the 2 designs shown here above, Smashing Magazine published the article to announce the preorder of the book. They were showing the initial cover design, eager to get the buzz starting for the new edition of the book. They also made the decision (that I wasn't aware of) to publish a 2nd, smaller book. To announce this book called "Smashing Book #3⅓ — The Extension", they decided to create a blue version (themselves) based on my initial design. In a way I found this good news, because apart from changing a few small details, I really liked my initial version. So I thought it might have a chance after all :)

Dealing with client feedback

In my humble opinion, I believe you make a great designer if you always try to find the middle ground in what the client likes and what you like. After all, you design for the client, not for yourself. The client has to be 100% satisfied. But don't get me wrong here, it's not a one-way communication where the designer blindly follows what the client dictates you to do. Sometimes the client's feedback doesn't have any valuable points. Then it's up to you to explain to the client why you think his or her direction is a bad idea. Though, if it's a matter of suggestion to try things out, or personal preference, like in this situation, than it's up to you to make sure the design gets better. So the "middle ground" I just referred to doesn't mean you end up with a lesser design. It's our job to always try to top our initial design. Sometimes it works out and sometimes it doesn't, and sometimes the client will also agree with you. Usually that happens to be the case for me, especially with clients who actually choose "you" because they like "your design style". What I try to say is, you just have to try to push yourself to the limit to be as creative as possible to make it better, taking the feedback into account. In a lot of cases you'll succeed and it's always very fulfilling when that actually happens.

Final design

I had much hesitation when I started working on the previous designs. Based on the feedback, I was almost 100% convinced that it wouldn't improved the design. I was afraid if I reduce the amount of divisions it wouldn't be that strong anymore, that the effect would be lost, but I believe I was wrong. Even though I still liked the initial design a lot, I had a hard time choosing which design I really preferred most. The new ones seem strong too, especially with the blue added to the mix. The client had the same feeling.

Initial design which is now final, including back and spine

Since there would be 2 books now instead of 1, the client decided to go for one of the new designs for the 2nd book, and keep the initial design for the original #3 edition.

Design for the smaller additional book #3⅓ The Extension

These designs are 99% final as the spine will most likely change (at least if we stick to our initial plan). There is some idea for the spine that still has to be worked out here, and so this part could just be temporary. A final item needs to be delivered to me first to create what we have in mind. It all sounds rather abstract I know, but I thought I show you the cover in its entirety so you get a better idea of how things will look.

Comments

  1. 1 Sergiu 27 Feb 2012

    I would buy the book only for the cover.

  2. 2 Ram 27 Feb 2012

    Really liked this work. Was wondering who designed the cover..well there you go..no surprises here :)

  3. 3 Anoop Goyal 27 Feb 2012

    Very very cool.
    If you have time, please comment on how do you decide or where do you go to find about which colours to employ so that they are practical and in harmony with each other, just as in the example above?

  4. 4 Veerle Pieters 28 Feb 2012

    @Sergiu, @Ram Thank you for the compliment :)

    @Anoop Goyal

    If you have time, please comment on how do you decide or where do you go to find about which colours to employ so that they are practical and in harmony with each other, just as in the example above?

    I get this question quite often from people, and I always find it very hard to explain. To me it has a lot to do with intuition. Applying colors are usually the easiest part for me, while for a lot of people it’s the hardest. I remember I didn’t tweak the colors much when I worked on this design. I think about 90% of my time went in to the creation of the shape itself, and only about 10% into applying the colors, even though when looking at it, it feels almost the opposite. Maybe that’s also probably why I didn’t write much about it.  However, I have added an extra 2 paragraphs explaining a bit more on how I applied my colors. Hope this is somehow practical and informative for you.

  5. 5 Anoop Goyal 28 Feb 2012

    Thanking You Veerle for adding those extra paragraphs and very valuable info about your thought process on colour application.
    Its interesting how we all work differently. Even when you don’t lay much emphasis on colour, you end up giving the impression that colour is what you must have focused upon whereas the shape being so unobtrusive in your example was the one you worked hardest on.
    Complicated can often look simple(perhaps even easy) when achieved well, which is a sign of an accomplished design (and designer).

  6. 6 duplokat 28 Feb 2012

    Wow! Thanks for sharing this. Always love to read about the design process. Final design is really great! And I agree with Sergiu, the cover alone is worth the purchase.

  7. 7 Joe Malleck 28 Feb 2012

    Thanks for sharing your process in such a detailed way. Especially your process for choosing color treatments—very insightful. Also, I find it interesting that you feel that the client’s suggestions improved the design. In my experience this is not the case! I wonder if it is the way that you interpreted the client’s feedback or that the feedback was what the design actually needed?

  8. 8 Hendrik Martens 01 Mar 2012

    Wow! Nice work!

  9. 9 Liviu Mateescu 16 Mar 2012

    First of all great design it’s exactly how a smashing book cover should look like.
    As an opposite to the other 2 books which had just the logo thrown on the cover.

    I remember the first book design process. Smashing magazine had just opened a forum and tried to get users involved in the design process of the book. I just followed the cover design because I had a few of my own entries in the “contest”. I can’t say that my covers were the best but I can surely say that the cover design they went with was the worst choice. When you put your logo full size on the cover of the book it just tells me that you didn’t take 5 minutes to think about your choice. You underestimated the design process and went with the easiest choice.

    In conclusion I’m glad that the smashing magazine folks finally realized that the cover of the book is very important and the design should not be overlooked.

    Great job! The cover finally looks as good as it should.

  10. 10 Paul Waters 17 Mar 2012

    I’m a fan of your writing, but these images were orgasmic. The final design is perfection, but even the sketches are the sweetest eye candy. I’d simply purchase this book for the design, you’ve done a very good job (as per usual, Veerle).

    Cheers,
    Paul

  11. 11 Sam De Decker 18 Mar 2012

    Wow Veerle!

    Belgium is proud to have you as the best designer!
    Hope to see you again at MultiMania!

    Have a nice and sunny day ;-)

    Gr,
    Sam

The Deck

Ads via The Deck