The Smashing Book #3 Cover Design

Advertisement

Around the end of October last year, Vitaly Friedman of Smashing Magazine asked me if I would be interested in contributing to the new Smashing Book #31. There were a few options as to how I could contribute to it. But since my days were already filled until Summer 2012, it was clear to me that I could only find time to design the cover.

After some doubting on my end (as I was slightly concerned about the timing), I decided to take on the project. This was just too good an opportunity, as the briefing basically said “Do your thing. We want your design”. It would have been foolish to refuse such a fun, creative challenge. In this post, I’d like to shed some light on the creative process behind the cover design and the rationale behind the cover design.

Sketches & Ideas

My basic idea for the cover design was to do something in combination with the logo, using the shape of the letter “S” as my starting point. I thought I would try out some kind of a geometrical pattern overlaying the logo. When I described this basic concept to Smashing Magazine team, there was already a positive reaction. They were really quite intrigued by the idea, and couldn’t wait to see what I would came up with.

Another idea I had in mind was an “Escher2-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 design3
My sketches for the cover design. Large preview4.

At first I tried to stick with only very minimal shapes (like circles and straight lines, etc.) keeping it all strictly geometrical. But the problem was that the “S” shape from the logo didn’t 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, or perfect circles; I was afraid this would be the case, but then thought I would just have to try it anyways to see if it could work. Sometimes the clear vision I had in my mind was wrong, and only knew for sure if I made a quick test. So I decided to start from the “S” shape instead, and go from there, which resulted in a more organic form, though still rather minimal.

Experiments showing some of the steps5
Experiments showing some of the steps. Large preview6.

The First 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 for 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 of it. I also removed a bit of the pattern outside the “S” shape to avoid busyness, and to create a bit of a rest. In a way, I was thinking of creating some sort of transition between the logo and a new design.

The result was some sort of blend (or mix if you like) between the two, 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). Smashing Magazine’s team wasn’t much fond of it either, so we decided to just 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 image7 from my Inspiration Stream8. I find it really hard to explain, in a practical way, how I apply colors. For 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 combination with a flashy red doesn’t work well?

When I applied the colors to this design, I kept in mind that the segments could contrast well with each other. So I tried to apply them in a way that allows a dark brown segment to correspond with a lighter segment, such as yellow or orange. I also tried to make sure I was applying the same color again with a bit of space in between them (especially the darker and lighter ones, as they stand out the most).

Same goes for the blue version. Since the blue contrasted a lot with the warm colors, I made sure the blue was applied to 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 three meter distance.

After this test I decided to adjust the segment at the top that uses a gradient of yellow and pink; to me this one felt out of place, like the pink didn’t really fit in with the color palette. So 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 in the mix, which 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 design9
First steps of the initial design. Large preview10

Adjusting The Design

Vitaly and his team really liked what I was proposing, especially the geometrical forms, and so it seemed that 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 as to whether the large white area at the bottom didn’t distract too much, making it a bit difficult to recognize the “S” logo icon.

Adjusting the design, simplifying the shape, adding in some blue11
Adjusting the design, simplifying the shape, adding in some blue. Large preview12.

Keeping this feedback in mind, I tried to find a balance between the original design and a lightweight version in terms of complexity — also trying to find the right balance between recognizing the “S” while maintaining the original design. I decided to reduce the segments, going from four divisions to three, instead. In this phase of the design I also began working with an empty Illustrator template to start composing the entire cover, including the back and the spine.

Another variation of the adjusted design13
Another variation of the adjusted design. Large preview14.

Change Of Plans

Right before I finished, as I showed Vitaly and his team the two designs (shown here above) Smashing Magazine published the article to announce the preorder of the book15. They showed the initial cover design, eager to get the buzz starting for the new edition of the book. As it turned out, they also made the decision to publish a second, smaller book which wasn’t discussed in the beginning. To announce this book, which is to be called “Smashing Book #3⅓ — The Extension”, Smashing Magazine decided to create a temporary alternative blue version which was 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 good chance after all.

Dealing With Feedback

In my humble opinion, I believe you become a great designer if you try to find the middle ground of 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 to them. Sometimes the client’s feedback doesn’t offer any valuable point. Then it’s up to you to explain to the client why you think his or her direction is a bad idea.

But if it’s a matter of suggestion to try things out, or perhaps 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, sometimes it doesn’t, and sometimes the client may also agree with you.

Usually that happens to be the case for me, especially with clients who actually choose “me” because they like “my design style”. What I’m trying to say is, you just have to try to push yourself to the limit, being as creative as possible, to make it better, while taking 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 reduced 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 the most — the new ones seemed strong too, especially with that blue added into the mix. Smashing Magazine guys had the same feeling.

Initial design which is now final, including back and spine16
Initial design which is now final, including back and spine. Large preview17.

Since there will be two books now instead of one, Vitaly and his team decided to go for one of the new designs for this second book, and keep the initial design for the original #3 edition.

Design for the smaller additional book: #3⅓ The Extension18
Design for the smaller additional book: #3⅓ The Extension. Large preview19.

These designs are now 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, and so this part may just be temporary. A final item still needs to be delivered to me first, to check how it relates to what we originally had in mind. It all sounds rather abstract, I know, but I thought I would show you the cover in its entirety so you can get a better idea of how things will look.

Editor’s note: Veerle Pieters has also published this post on her blog20. The team here at Smashing Magazine sincerely appreciates and respects Veerle’s dedication to creative quality work and her creative direction in this project. 

The book is available in our Smashing shop21.

(jvb) (il) (vf)

Footnotes

  1. 1 https://shop.smashingmagazine.com/smashing-book-3-printed-and-or-ebook.html
  2. 2 http://tinyurl.com/74flact
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-sketches.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-sketches.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-experiments.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-experiments.png
  7. 7 http://veerle.duoh.com/inspiration/detail/monomyth
  8. 8 http://veerle.duoh.com/inspiration/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-1ststeps.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-1ststeps.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-1.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-1.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-2.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-cover-2.jpg
  15. 15 http://www.smashingmagazine.com/2012/02/15/smashing-book-3-preorder/
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-3-book-cover-preview.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-3-book-cover-preview.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-3-thirds-book-cover-preview.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2012/03/smashing-book-3-thirds-book-cover-preview.jpg
  20. 20 http://veerle.duoh.com/design/article/the_smashing_book_3_cover_design
  21. 21 https://shop.smashingmagazine.com/smashing-book-3-printed-and-or-ebook.html

↑ Back to topShare on Twitter

One of the fascinating minds behind Duoh!, whose love for design in all its various forms shines through. Veerle is a graphic/Web designer hailing from a small but beautiful European country called Belgium. You can follow her on Twitter.

Advertising
  1. 1

    Oh! I cannot wait! April is it?
    Good cover BTW :)

    4
  2. 4

    Davin Bergstrom

    March 9, 2012 5:51 pm

    Love the new cover. It is always amazing how good designs start out complex and become better by removing elements.

    5
  3. 7

    Quite long process but this is nice! thanks for share the story behind of cover.
    Love the vibrant colors :)

    5
  4. 9

    Thank you so much Veerle for a wonderful inside look at your design process for this project. Your work has always been a huge inspiration to me. As an aspiring designer it is invaluable when people I admire in the industry open up about their creative process, as most often it helps me learn how to improve my own.

    I’m really excited about this book and the cover design you created blends seamlessly with the Smashing brand but also conveys a fresh and exciting design to entice readers even more!

    Cheers!

    2
    • 10

      Thank you Corie :) Very happy to hear this was meaningful to you. Makes it always worth to keep writing about stuff like this.

      0
  5. 11
  6. 13

    Thanks for sharing this, at first I wasnt sure if i completely liked the design but after reading more about ur process of designing it i do like it. This cover design makes me want to buy the book and considering I don’t know a whole lot about the book that says something to me as a designer. I also think this is a Good read for anyone who is having problems with their design process as it kinda gives an outline on how to start with an idea for a design and then better it using any feedback you get.

    1
  7. 15

    The journey is as interesting as the result.

    0
  8. 17

    Christopher Legel

    March 9, 2012 11:11 pm

    As a professor (and designer) I love it when designers write about process, since it provides my students with great case studies to read and think about – plus I believe they need to hear other voices besides my own.

    Great job on both the design and the article!

    4
  9. 18

    Love the last one! :)

    0
  10. 19

    Francis Boudreau

    March 10, 2012 12:51 am

    What a great cover!
    I can’t wait to have the book in my hands.

    2
  11. 20

    Thank you for sharing your experience for this issue of Smashing mag’s cover design. Really can’t wait to get a hold into the hardcopy version :D

    I do agree with your mindset, pushing yourself to the highest level in no matter what you do.

    1
  12. 21

    Gr8 job Veerle.

    1
  13. 22

    Hmmm… the design is simply amazing! You’re SUHU!

    1
  14. 23

    great !!! I am waiting for a book :)

    0
  15. 24

    Thank you all for the great comments and compliments. I’m really happy to hear that people like the outcome, and that they find it meaningful to read about the process. That’s always very motivating to hear.

    0
  16. 25

    Very well done Veerle, I really like it. Nice color pick and great composition. Thanks for sharing the design process!

    0
  17. 26

    another great design from Verlee! I love the last image of #3 1/2 cover design specially…

    0
  18. 27

    yeah! its really hard to say which one is better? looking forward to this book. nice work buddy!

    0
  19. 28

    And it’s 3-1/3, because by the time you could publish a proper 33-1/3, nobody in your then-current reader base would get the pun. :(

    0
  20. 29

    Bagshik Ghulumian

    March 11, 2012 12:23 am

    As soon as I saw your name I was excited to read this article ! Thanks for posting the whole process behind the cover design, it really is interesting and helpful. I admire your talent, keep up the good work !

    Groetjes uit Antwerpen,
    Bagshik Ghulumian

    1
  21. 30

    Kevin van Daatselaar

    March 12, 2012 9:40 am

    Great work Veerle, can’t wait to add it to my shelve!

    2
  22. 31

    Amazing work!

    0
  23. 32

    Really great experience to go through the whole process and that too from a icon in DESIGN
    the DUOH -Veerle Pieters . Thank you so much .. both for SM and VP

    0
  24. 33

    Not too fond about the cover. But I guess it works.

    0
  25. 34

    I find the kink on the back cover a bit off..

    0
  26. 35

    It’s amazing how complex a process such a beautiful minimalist design could be.
    thanks for sharing.

    0
  27. 36

    Very nice! I really dig the color scheme you went with.

    0
  28. 37

    As always, great work Veerle!

    0
  29. 38

    now it can be a case study for a creative process.. really brilliant…great!!

    0
  30. 39

    Really nice graphics art. i like it. Thank you for sharing.

    0
  31. 40

    Thank you for this nice work

    0
  32. 41

    Great! simpler is better, and yes simple is not always easy as look…..! really nice, good job!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top