We Redesigned the OSTraining Book Series

OSTraining offers online and offline courses, but for those who still love reading books like me, OSTraining also offers great books.

Steve contacted me a few months ago because he felt it was about time to give those books a more appealing and current look. But the real challenge was that he wanted to turn them into a beautiful collection in which all the books “look the same and different at the same time”.

He loves what A Book Apart has done for its book collection. And I can see there is a trend on the horizon. In the past, book covers were extremely important for narrative books, but today, people want even technical books, known to be extremely boring in their content, to look more beautiful and engaging.

Because, between you and me, we all judge books by their covers, don’t we?

Design is a creative art, but in order to be appropriate and desirable, we must plan its execution. In my previous blog post about branding, we learned that in order to create consistent and relevant design, we need to create rules.

There has been a lot of buzz about style guides recently and how useful they are when it comes to building a beautiful and visually consistent website.

A style guide is quite a common tool extensively used by graphic designers. They define guidelines that designers can use in extremely inventive ways. They also improve collaboration between people that are carrying out different tasks on the same project.

For the OSTraining book collection, I thought that a style guide was necessary in order to define colors, typography, space between blocks of text, printable areas and the hierarchy among the elements inside the layout.

In this way, the books would look similar, yet ensure that each of them has its own personality too.

Guidelines for logos and identities are quite common and you can get inspired by many resources available online. But when it comes to creating a style guide for books, what I found was shallow and blunt. There was nothing that I could really follow as an example.

So I had to start from scratch.

I created different design proposals. All of them were extremely recognizable and striking. The OSTraining team chose unanimously what I think was the most straightforward design.

This is how the new collection will look:

As you can appreciate in the render above, the new design is extremely clean and distinct.
It uses a geometrical diamond pattern all over the front side.

However, the most prominent design element is the edgy, big, triangular shape, where the author’s name, the title of the book and its description are located.

The “arrow”, as we internally started to call it, is a dynamic element that suggests a direction. I think that the team chose this design because they found this hidden meaning to be appropriate.

In fact, all the OSTraining books are actually guides that help you move forward confidently; through practical instructions you will sharpen your skills and make progress, step-by-step. At the end of the book you will be able to build a great website.

The “arrow” is also a very distinctive element, easy to spot among other books. If you are a visual person like me, who remembers covers rather than titles, you can easily describe it to a salesperson in this way: “It is a book about learning Joomla. I don’t remember the title, but it has a giant arrow-shape on top, and a diamond pattern”.

When you design a layout for a book jacket, the most important task is to define the elements that will be displayed on the cover and how to position them on the page.

I first defined my canvas and how much space I need in order to display the following elements: the author(s), the title of the book with a small description, the OSTraining logo, and the symbol of the computer application that the book explains.

The most challenging part was to calculate the space between elements that may change from book to book, like the author’s name, the book’s title and the description.
Those elements may change considerably in size and number.

For example, the next book may have a longer title and two authors; so how will I be able to consistently apply the rules I created for one book to another book of the same collection?

For this reason, guidelines must be extremely flexible and consider different variations. Great guidelines must help designers to find solutions, rather than lock their creativity to a list of things they are not allowed to do.

For the OSTraining books, I decided that the title should occupy a prominent part of the book and will be positioned almost in the center of the cover.

The title is written in Nevis Bold, a sans serif typeface that looks extremely sturdy and friendly, even when it is used in the uppercase.

The author’s name is positioned above the title, in uppercase font.

Below the title goes the description that must always be displayed in the lowercase.

Both author and description are featured in Varela Round, a smooth and clean sans serif font with rounded strokes that balance the rigid shapes of Nevis Bold.

Colors in book covers undoubtedly play an important role.

For the OSTraining book collection, I decided that the color scheme should be limited to 3 different colors.

Some graphic elements are associated with the same color. For instance: if you decide to change the main blue color on the cover above, the change will be applied to all of the elements in cyan.

In this way, it is easy to find a wide range of combinations and keep them in balance.

If the subject of the book allows it, I suggest using the corporate colors of the specific computer application/software discussed in the book itself.

For example, WordPress Explained uses the official color palette of the WordPress brand, while Drupal uses the official blue and green that are largely present throughout their website.

When not applicable, I leave it to the taste of the designer to find the best color scheme that fits with the subject and the rest of the other books.

Using a pattern for technical books is quite unusual, but I loved the idea for the new OSTraining book collection.

I think it adds character to the collection and a more appealing look to each cover.

Further, the pattern has an important functional purpose: inside its diamond shapes, I placed the symbol of the computer application and the publisher brandmark.

Otherwise, those small elements may be lost on a big empty background.

The computer application icon must be centered inside the diamond shape that is positioned to the right of the center of the front page. This way, the arrow points to the brandmark.

The publisher brandmark, when available, must be positioned in the top right corner of the front page, just vertically opposite the OSTraining logo.

Both brandmarks must be centered inside the diamond shapes and must be in their monochrome versions.

I think it is important to keep the color scheme of the collection limited to three colors.

For this reason, the OSTraining logo is also featured in its monochrome version.

Introducing the OSTraining logo in multiple colors would have limited the color combinations because they would have had to match the brand colors. But the monochrome logotype fits with any scheme of colors, and always looks consistent and clear.

The OSTraining logo occupies the bottom right corner of the front page and it is centered inside a rectangular space. For those who know OSTraining, the logo is a guarantee for great books and content.

It took a lot of effort to find a “good formula” for a perfect style guide that allows me to accurately balance all the graphic elements, and at the same time consider their flexibility. Today the guidelines are easy to follow and they have considerably improved my design process in terms of time and final output.

It is amazing how the perception of a book can be changed by its cover.

The new OSTraining books stand out from thousands of anonymous books in the same field.

The new cover reflects the high quality of the content and I am sure you will enjoy collecting the whole series!