Posted on by marmar20545

Assignment 5: Book design

Penguin Books have asked you to design a new house style for a collection of books on design for children and young people.
They are starting with three titles: Colour, Typography and Photographs. You will need to produce three covers (front, back and spine). The designs will need to be recognised by readers as a series and at the same time be appreciated on their individual merits. The book dimensions are 190mm wide by 225mm high.
In addition they have asked you to produce the one on typography called A is for… It doesn’t have to be a conventional text book. Create an introductory chapter of at least 4 pages that is visually interesting and will entice young people into wanting to buy the book and read more about the fascinating world of typography.

Analysing the brief

Key words:

  • Children’s book
  • Book cover (front, back, spine)
  • Series: typography, colour, photographs
  • Penguin Random House
  • 190mm x 225mm
  • 4 pages
  • A is for …
  • Visually interesting

“WH” Questions:

  • Who is the audience? Young People
  • Who is the publisher? Penguin Random House
  • What media should be used? Illustration/ photo/ type
  • What colour should be used? Vibrant
  • What fonts should be used? TBC
  • Where will the design be displayed? Bookshelves
  • How to make it interesting? Colour/ typeface/ image

Research – Children’s book design

TOP FIVE TIPS FOR CHILDREN’S PICTURE BOOK COVER DESIGN:

1.) Rule of Thirds

There’s nothing wrong with a basic front-and-center composition and it does have value, however, one of the easiest ways to elevate your artwork is to apply the Rule of Thirds, an off-center composition, to make your artwork more appealing and give it more structure. The idea behind this principle is that you can divide your artwork into thirds, rather than in half, and place important elements along the guidelines and at the intersection points that the one-third sections create.  If you’re drawing a landscape, an easy way to apply Rule of Thirds is to place the horizon along one of the horizontal guidelines.  It doesn’t have to be measured out exactly.

Take a look at my illustration below to see how I drew the horizon near the lower horizontal guideline. Had I placed the horizon along the middle of the page or even along the upper horizontal guideline, it would have really taken away from the feeling and focus of how majestic and grand a sky with northern lights can be. I wanted the sky to really grab your attention here. You could even say that the sky itself was also split into a second Rule of Thirds grid and the lights were drawn in such a way as to utilize the nine equal portions within the sky giving the artwork continued structure and balance.

Part of learning about different composition tools is figuring out when it’s beneficial to apply a rule and when it isn’t. There are times when an off-center composition, like the Rule of Thirds, is not beneficial.  For example, you do not want to cut off important details just to put an object in this position.

Here’s another example. Take a look at the cover I did for Monty the Manatee. This book cover received a book cover design award from Kids Shelf Books in 2018. If you split the artwork up into thirds creating nine equal spaces, you can see that the title of the book falls along the top horizontal guideline and the two “M’s” fall near the upper left intersection point. Monty, the main character, is then placed near the lower right intersection point with his body along the right vertical and lower horizontal guidelines, facing upwards and onto the page and not away.

2.) Preferred Diagonal Scan

For native speakers of Western languages, where we read top to bottom and left to right, we have been conditioned to feel most comfortable when our eyes can move diagonally across artwork from the upper left to the lower right. We will even subconsciously dismiss designs that makes our eyes move opposite to this. Simply put, it strains your eyes and makes it more difficult for your brain to process what it’s seeing. 

There are several layout options that take Preferred Diagonal Scan into account. The two that I use the most in children’s book illustrations are the Gutenberg Diagram Layout and Z (or Reverse S) Layout.

GUTENBERG DIAGRAM

When applying the Gutenberg Diagram, your layout is divided into four equal quadrants, with the top left and lower right areas receiving primary and terminal attention. Our eyes tend to sweep across and down the page in a series of horizontal movements. Each sweep starts a little further from the left edge. This is why the lower left quadrant is the weakest area. This sweeping motion is called Reading Gravity. You can use this layout for both typographical elements and illustrated elements, but it’s especially useful with multiple blocks of text. For example, a title, a subtitle or series name, and author/illustrator names. You would probably not want to put important text, like the title, in the lower left quadrant.

Z – LAYOUT (sometimes called The Reverse S Layout)

Z-Layout is similar to the Gutenberg Layout in that your eyes will start and end in the same places. However, with Z-Layout, you bring the eyes down to the weak fallow area in the lower left quadrant before one final sweep to the terminal optical area. Z-Layout is especially useful with multiple illustrated elements.

Below you will see diagrams for both the Gutenberg Layout and the Z-Layout and how I applied them to my work. The pink arrows are where most people’s eyes will want to move. You do not need to bring out your ruler and utilize these diagrams to exact precision. You don’t want your artwork to feel stiff. But it is very important to keep in mind how a Western reader’s eyes will naturally want to move around and through an image. I can’t tell you how many times I’ve looked at amateur or DIY book cover designs and my eyes are moving all over the place and not in a way that is natural or comfortable. It completely turns me off wanting to purchase the book.

3.) Focal Point

Another important aspect for a good book cover design is to create a focal point. Here are a few of basic principles you can use to easily create primary and secondary points of interest.

SIZE

Larger elements will command more attention over small elements. Elements that are equal in size might compete with each other. When creating your book cover, decide if you want the title or the main character to be the primary focal point and make it larger. 

ISOLATION

Surrounding an element with white space helps it to stand out. If there is too much clutter around a main element, it will be harder to focus your attention on it.

CENTERING

Elements that are placed front-and-center of a design will grab more attention than elements placed along the edge or sides of the artwork. This is one of the simplest and most commonly used principles in book cover design.

CONTRAST

Contrast is most easily created by using color. A brighter object will pop out at you when surrounded by duller colors. A darker element will command more attention on a lighter background. A complimentary color will stand out more when it’s placed next to it’s opposite color [on the color wheel]. I will explain more in detail about the use of color later in this post.

POSITIONING OR DIRECTION OF A CHARACTER’S GAZE

In most cases you want to have any character looking into the page and not off the page. This will help to bring a reader into the artwork and not turn them away. Look at the cover for Monty the Manatee above again. He is facing inwards and up towards the title. A gaze can also be used to create really good preferred diagonal scan as well.

In this book cover I did for Scruffy the Scruffiest Puppy, I did a few things to create my focal points. The title is the largest element overall, placed directly in the center, and I made sure to isolate it in the sky, giving it plenty of breathing room and “white” space around it. Had the sky been full of texture and details, it would be less likely to stand out. The title is also a very dark color on a very light background to bring it forward. All of these principles were also applied to the puppy too. I increased his size to be larger than real-life compared to the size of landscape elements in the foreground. He is also placed front and center and fairly isolated and alone in the grass. But this is where it gets a bit more complex and when a more experienced designer is important. Although the title is larger than the puppy, by using a less bold font, I’ve drawn the viewer’s attention down to the Puppy, so they can make a connection with him as the main character. You might be asking yourself right about now, doesn’t having a primary focal point in the lower half of the illustration defy the principle of Preferred Diagonal Scan? Keep in mind that you do not need to use every single tip I’m writing about here every single time in every single piece of art. Close your eyes and open them again. Where do your eyes travel next? Although you might look at the puppy first, your eyes will likely immediately move upwards and reading gravity will then bring you from the title, down to the puppy again, and finally end at the lower right corner. Some viewers might look at the title first anyway, which is just fine too.

4.) Typography

Unless you are an experienced designer and know a lot about pairing various typefaces, lettering, and applying font cases and weights, my best advice is to limit the typefaces that you use on the cover (and on the interior pages) to one or two. If using more than one typeface, only one of them should be decorative or styled in nature. In the same way, be careful of mixing too many bold, underlined, and italicized versions of the same font or mixing cases. You also need to be aware of the kerning (space between letters) and the leading (space between lines of text). Adjust these to make a word more legible as needed. 

Take a look at the book cover mock up I did below. The book title is in a hand-lettered trendy typeface. If I were to use another overly styled font for the author name, it would compete with or distract from the title. Also keep in mind sizing of letters and text. Apply the principles of size found in my focal point section above. In both “right” examples below, I increased the kerning, or the space between letters, to make the author name more legible instead of increasing the size of the font. As much as we all love attention on our own name and proud of the accomplishment of publishing a book, this is not where you want a focal point. When in doubt use a classic or simple serif or sans-serif font for your secondary font on the cover and use this same font for the interior pages within the book. Keep it simple and you can’t go wrong! Too many times, I see too many font pairings or stylizations that have no business being next to each other, or the author’s name is huge, and it’s a dead giveaway that the book was self-published less than professionally. And just because two fonts are hand-lettered or two fonts are script fonts, doesn’t mean that they match!

You can also apply for the basic color principles mentioned below for your typography as well. If your illustration is in a dull earthy color palette, don’t necessarily put the title in bright primary orange. This will attract attention in a negative way. Either use black, white or pull out a complimentary color that is part of your artwork for the title, like I did below using the red from the sweater for the title. A turquoise title on a blue background would have just gotten lost and a white title would have made the composition off balance.

5.) Colour

Colour Psychology is a very extensive topic. I’m working on another blog post just about color! There is so much that goes into it and it is one of the things that most people are least aware of how important it is. It’s often one of the most overlooked elements that separates bad book covers from good book covers. Did you know that green children’s book covers are statistically sold less than other colors? Who knew, right? That doesn’t mean you can never include green in your book cover, if it’s appropriate to the mood, feeling or environment you’re trying to portay.

Different colours convey different emotions and moods. I’ll get into this more in detail in my upcoming blog post, but you can easily research color psychology online in the meantime. To get you started, there are two easy things to remember . Opposite colours (on the colour wheel) are called complimentary colours. Red compliments green. Blue compliments orange. Yellow compliments purple. Using complimentary colors will create contrast and can really make an element pop. On the other hand, analogous colors, which are next to each other on the colour wheel, can create a more relaxed, tranquil and harmonious feeling. Examples of analogous color pairings are blue and green, yellow and orange, red and purple, and so on.

Pinterest boards

I collected some boards from Pinterest about the children’s book covers and some boards about the typography books examples.

Mind mapping

Thumbnails

Designs

I made some search about the Penguin Random House style, but couldn’t find any information for the designers.

I started my design by making some silhouette of children on Procreate. Exported them as PSD file, then move them to Illustrator to complete my design.

For my four pages book design, I used Indesign. Made a five pages document to be able to have two spreads. The page size was 190mm x 225mm. The margin was set to 12mm all around the pages and 2.54mm for the bleed.

The font for the front cover is Lust slim, then created an outline to be able to manipulate the text. The font for the authors on the spine is Futura Medium (12 pt). The text on the back cover is Futura Medium (11 pt) and Futura Light (11 pt). For the inside pages, the font for the heading is LuckiestGuy Regular (50 pt), subheading is Futura Bold (12 pt) and Futura Medium (12pt) for the body text.

First, I started my design in Black & White, but decided to add colour to it and I found it more eye catching. So I used the three primary colours.

The text is from https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/.

Mockups

Self-reflection

For this assignment, we had three choices, which I decided to go for a book design. I thought because this is going to be design for the young people, I have this opportunity to make a fun and playful design. I should say it wasn’t as easy as I thought, the feedbacks were good but the problem is I still not sure about the reaction of the main audiences, who are children.

The text for the inside pages is from https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/.

It wasn’t the first book cover design in this module but this time I was feeling more confident with the design process. I tried to use my knowledge about typography, hierarchy, contrast, colour, alignment and consistency throughout my work.

I just used the author’s name on the spine. I thought when the subject of the book is more important than the author’s name it should be fine, but still not quite sure about it.

This was the last assignment in Core Concept module. I have learnt a lot through this module and hope to be able to continue improving my knowledge and skills in the future modules.

References

Leave a comment

Design a site like this with WordPress.com
Get started