Web Solutions Blog: 5 Principles of Book Design That Work Great For The Web

Despite their differences, book design and web design have a lot in common. They both comply with specific design principles that work great for print design as well as the Web. This article will guide you through the five main book design principles that work great for web pages.

#1: Grid Systems

Setting up the right grid system is a large part of graphic design. No matter if it’s a book, a magazine, a brochure or flyer, grids systems are the foundation of great graphic design. It creates a composition that’s easily perceptible and simplifies content consumption by giving it a recognisable visual hierarchy. Grids are the base of print and editorial design but not exclusively.

Establishing a solid grid gives consistency and structure to your design.

This rule is equal for all types of design, including web pages. Having a grid system that really works is among the most important takeaways that web developers have learned from book design so make sure to apply it wisely and stick to a grid whenever you can.

Source: http://magazine.harvardartmuseums.org/

Yet, don’t be scared to design out of the box. Fitting in extra large photos and aligning text to other accent elements can make for a unique and visually appealing design.

Just don’t align your paragraphs to the right. Trust me. It’s not as good at it looks like, especially when you’re dealing with large blocks of text.

#2: Typography Structure

Imagine reading a text that has no formatting at all.

We’re not talking about small details, such as bold and italic. They are just as important but for the purpose of this experiment, they can be skipped. Think of a book that has no paragraphs, no breaks, no headings, and subtitles. Just plain text.

Sounds hard to read but what does it have to do with typography?

In the meaning of visual structure, typefaces are just like text formatting. They help readers get through large chunks of text quickly and create a basic hierarchy of the content the read.

Source: https://frieze.com/

So you can basically but Comic Sans and Verdana together and you’re good to go, right? No.

Pairing different fonts is not an easy task but it’s also not a rule that should be undermined. A basic rule of thumb will be: when in doubt, match fonts from the same font family. Go for bolder titles and thinner paragraphs and stay away from italics, scripts, and decorative fonts – they’re not good for reading.

In reality, it gets much more complicated. Having a wide variation of typefaces will certainly make your design cluttered. This article will give you some good font pairing suggestions to start off with.

#3: Style Classification

Did you hear that Target removed the girl and boy sections, and united them into a single one? Clients got really pissed about it. But, despite most speculations, it’s not a gender problem – it’s about categorization.

People love classifying things and separating everything into clearly defined categories. The same applies to graphic design. In book and editorial design, different columns and chapters are often characterized with a unique layout. News sections usually emphasise more on textual content while cooking sections would mostly rely on high-resolution photography.

Bloomberg

This principle can easily be translated to web design. Blogs, about us pages, and landing pages usually have completely different layouts. They have a specific structure that works for the particular purpose.

The style classification can also be mostly visual. Take Bloomberg for example. For each website category, there’s a separate home page design, color palette, and grid system. The same typography hierarchy is what keeps the design coherent between pages.

#4: White Space

It helps your design breathe. We’ve all heard that a lot but most people don’t really understand the true role of white space.

Source: http://www.dn.no/d2/

White space is not found in the lack of visual elements. It’s rather a graphic component on its own. One that sets the boundaries between different design compositions and hierarchy sections.

That’s why minimalism is so hip. It accents on different aspects of the design while giving them enough contrasting elements. So try avoiding the temptation of filling out every empty pixel on your screen. Remember that without contrast there’s no accent at all.

#5: Design Scaling

In the era of Internet, it’s hard not to talk about cross-platform design. Even editorial and book design are now distributed over various media platforms, all of which require a specific scaling.

Editorial design for different devices

With mobile devices on the scene, it gets even more complex. Web content is scaled down and restructured to fit tablets, smartphones and sometimes even smart watches. Being mindful about the size of your design is essential and will become a make-it-or-break-it point for design structures in the future.