My design process of the “Digital Adaptation” book cover design

29 Apr 2014
  • posted by Veerle Pieters

I had the great fortune to do some illustration and layout work for one of Smashing Magazine's new books called "Digital Adaptation", written by Paul Boag. Yet another fun and creatively challenging project that I would love to share its design process here on my blog, starting with the design of the cover of the book and the creation of the pre-launch website landing page.

About the book

I haven't hold the book in my hands yet, but from what I have seen so far from photos on the web the printer did a really good job. The book is all about helping traditional businesses and organisations to overcome their legacy, and help them turn dated workflows and inefficient processes into an innovating culture, team structure, and workflow. If you are interested in buying this book, here is more info together with the buying options.

Photo of the book with hard cover laying down

Source: photo by Smashing Magazine

Briefing

At first I was asked to design the cover of the book, together with all the inside illustrations which included 6 chapter illustrations and another 10 illustrations throughout the different chapters. Then depending on my availability, I would also define the layout of the book. I was very excited to get started as it's been way too long since I did this kind of layout and illustration work. A bonus was that it's for a super cool client who gives me so much freedom that it felt like a gift from heaven. After a brief introduction about what the book is all about together with the first draft writings, we started a bit of brainstorming, which sparked a few ideas to get started.

Sketches & moodboard

After some short brainstorming over Skype, I grabbed my sketchbook and started sketching some basic ideas for the cover. Please ignore the typo there… as it sometimes happens that I'm so focused on the shapes while drawing that I don't see the *text* anymore. I just look but don't actually read what is there.

Sketches for the book cover design

The word digital got stuck into my head somehow, and I was thinking to translate this into something rather simple and abstract in the form of connecting lines and dots. The other route I tried out was a pure typographical one. The 3rd sketch was the last one I drew where I tried out some sort of collage of graphs, charts or other objects that reminds me of analysing or monitoring data, together with user interaction.

Moodboard, showing colors and design styles

The different pages of the mood board which included color scheme, and design styles, together with the sketches which were also included on page 4 of this PDF.

Together with the sketches I also included some kind of mood board file that shows the type of colors I had in mind together with a certain design style or direction I was thinking of. Feedback told me I should proceed into the direction of using the illustrative design style that I suggested in my mood board.

First draft

When working on the first draft I tried to create a collage of different objects that represent the digital world, in combination with the physical world. These tubes would be the perfect metaphor together with clouds, factories, offices, people… However, some of those were added in my 2nd draft after I received some feedback from Paul. It seems I was spot on with this concept, but I should add a few more of these tubes and other elements, and also give the typography some attention. In my experience it's good to work in steps, showing what you have *so far* just to see if you're in the right direction. It doesn't have to be 100% finished. In my first draft I didn't pay much attention to the typography yet. I only chose a typeface, but even that was just to have something there that I thought was OK for now.

First drafts of the cover design

While working on this illustration, I envisioned to use certain fragments for the chapter illustrations. I was certain to use the same illustration style and color palette for all other illustrations in the book to keep a consistent design style.

Final design

Once the front was as good as approved, I worked on the full cover design, including the spine and back of the book. As you can see from the image below I mirrored some part of the tubes and lines for the back of the book. My idea was to create an illustration that would seamlessly connect in case it would horizontally repeat.

Full cover design of the Digital Adaptation book showing the back, spine and front
Enlarged details of the cover design

Different enlarged details of the book cover illustration.

Pre-launch web site landing page

Meanwhile my mind was already also wondering about the design of the pre-launch webpage of the book. The illustration going from front to back would be ideal to use as a big visual banner.

Pre-launch website landing page design

The design of the pre-launch landing page for "Digital Adaptation" including a form to keep the user updated.

Some details were delivered in a separate Photoshop file of how I envisioned the form field and submit button in different states of interaction, together with examples for text and link styles, including the styles for the footer. Extra info such as colors, and other helpful specifications were added in a note.

Info for the developer

Detailed info on the interaction of the form field and submit button, together with other info for the developer using Photoshop's often forgotten but handy Note feature.

More to come

In a next post I'll talk about the process of the other illustration work I did for this book, together with the layout and web site design. Hope you enjoyed this first part and found it useful.