The Modern, No-Nonsense Guide to the Principles of Design

The Modern, No-Nonsense Guide to the Principles of Design

The weekend after By Bloggers launched, I went to Chicago to meet up with Sam Spurlin and a friend of ours.  We called it Remix 23 because all three of us were 23 and we were looking to mix up our lives and online businesses.  Outside of haunting coffee shops, public libraries and book stores at all hours, we spent some time walking through downtown Windy City.

I was constantly looking up.  I was in absolute awe of the architecture.  I’ve spent time in San Francisco, Los Angeles, New York, New Orleans, Hartford, Kansas City and a slew of other, “Big Cities,” but none of them had awed me in quite the same way that Chicago did.  The city is an urban and city planning masterpiece.  It seems as though every building is a gem in the crown of a city block.  I didn’t understand how Chicago could be so well planned and developed when other metropolis were not.

As I was enthusiastically developing neck problems, Sam and mine friend told me that Chicago’s organization was so cohesive because of the great fire of 1871 that destroyed over four square miles of the city.

The destruction of a large part of the city fertilized the ground for the growth of one of the most iconic cities in the United States.  It is so iconic that Batman’s Gotham is modeled after it.  There is a lesson here for us to learn.

To create something magnificent, it is sometimes necessary to start anew – to destroy what we know in order to open our minds to new possibility.  We must empty our cups. Less dramatically, we need to recreate what already exists in a way that serves us better.

A Frank Admission

The first comment on the post about the elements of design was rough for me:

Nice overview, Jonathan, but I have no idea (yet) how this relates to my eBook. I assume you’ll get to that later.”

Ouch. It was what I needed to hear though.

It was crucial feedback for me, because while I may geek out about the elements of design, it’s critical that I communicate them in a way that is directly applicable.  That’s my job and frankly, I could have done it better in that post.

Today, I want to cover the principles of design, but I want to do so in a way that is more relatable and instantly applicable.  You’ll get the one line explanation of what the classic principles are, but more importantly, you’ll get a translation of the principles.

The goal of this translation is to provide you with a set of principles that help you make strong design choices.  The classic principles have their place.  They work, but I have found that they also tend to be hard to learn.  With the new interpretation, you’ll have a more immediate understanding and comprehension of how to use design elements and components to the greatest effect.

Alright, confession time is over, let’s get busy!

Emptying the Cup

Here is a cursory glance at old school design principles.  These are the sentinels that have kept the watch over artists and designers for centuries.  They are solid, but of varying clarity:

  • Balance: Are the elements of your design in balance?
  • Emphasis: Do you emphasize a particular element in your composition?
  • Movement: Do the elements of your composition lead the eye in a natural pattern?
  • Pattern: Have you created any patterns with your elements?
  • Repetition: Are the core elements of your design repeated?
  • Proportion: Do the proportions of your design elements make sense next to each other?
  • Rhythm: Are your design elements organized in a pleasing rhythm?
  • Variety: Do you mix it up, or do you stay humdrum?
  • Unity: Does everything come together in a cohesive whole?

You can and should earn these principles.  Unfortunately, the path to doing so is a great deal of time consisting of study and trial and error.

Let’s take these principles and bend them to our purpose of designing e-books.  Such a translation will serve you more than textbook definitions anyway.

The New Kids on the Block

Who are our new contenders? (If you remember it, please start envisioning American Gladiators.)

There are six: Purpose, Contrast, Focus, Integrity, Hierarchy, and Essential.  These are the new standard for how you can make design decisions and really rock the quality of your e-book.

Aren’t you wondering what they look like in spandex, with their rock hard abs of quality?  Me too.

Purpose

We can start simple: every element you design with, every component you include and every choice you make in design must have a purpose. If you aren’t making design decisions with purpose, you are flailing and it will detract from the integrity of the entire design.

With an e-book, your goal is always to create a better user experience – through facilitating learning, communication and comprehension.  Often, the overall quality of a product is determined by the quality of the questions you ask during the creation process.  Focusing on purpose will help you ask the right questions.

Contrast

When I first started drawing, I loved using 6H pencils.  They had nothing to do with a rodeo (how disappointing, right?) – it referred to the hardness of the lead.  As far as hardness goes, it was on the firm side of the spectrum, which means that every line it made was relatively faint.

There was only one problem with this – my drawings completely lacked contrast.  Everything looked washed out.  Even the most detailed and beautiful of images lacked richness because there was no contrast.  It was like looking at a too-old photograph.  It wasn’t until I switched to darker pencils that my artwork began to really pop off the page.

Contrast is more than black and white.  You can use it within colors (try putting blue and orange next to each other).  You can contrast sizes – a massive title followed by a small tagline will draw attention.

Have you ever seen a shot in a movie where the main character is completely still and the rest of the elements in the shot are moving like crazy?  Where do your eyes look?

Your eyes are drawn to the statuesque main character.  You can’t help but look at what is different.

You can use the contrast to create a hierarchy and a focus (which both happen to be other nouveau e-book design principles) in your e-book designs.  To lead your viewers eye to where you want them to be reading, you must use contrast.  By doing so, you create visual interest, which will tell readers where to look and what to read first.  This is especially useful in headings, quotes and calls to action within an e-book.

Integrity

Integrity is the word I have chosen to replace concepts such as unity, repetition and balance.  Integrity means:

an undivided or unbroken completeness or totality with nothing wanting

All of your ducks are in a row.  You have given attention to detail.  You aren’t busting up a blue & green themed design with random spasms of neon pink.  There is consistency across your design.

It means that the fonts of every heading of the same level match.  It means that you aren’t switching the colors of your links on a whim.  It means that interactive elements have a consistent experience.

Focus

Answer the question:

“Where do I want the reader to be looking?”

When you keep the answer in mind, you will always end up with functional results.  They won’t automatically be beautiful, but your audience will be looking where you want them to.  Every design element has a visual impact.  You can use these to direct the viewer’s eye – through the ranks of a hierarchy and to specific elements on your page.

Think about landing pages and sales pages.  Unlike a blog design, they have a singular focus: getting people to take action.  And they work, because when people arrive, there are two choices:  take the desired action or leave.

You want the pages of your e-book to be as focused as a landing page is.  Each section should have a specific goal – usually to teach something.  Your design choices should hone in on that goal and support it as strongly as possible.

Visual Hierarchy

Plain and simple: make the important stuff bigger. Bolder.  Badass-er.

Make it pop.

It must be immediately apparent where our eyes should begin, and how they should proceed.  If your e-book design does not meet this basic requirement, then it is failing to create a quality user experience.

So what are the important components in an e-book design hierarchy?

In this order:  Titles, Headings, Subheadings, and Body Copy.

If you read the 13 Core Components of E-Book Design, you know that there were a lot more components than I just listed.  When you add a component other than the ones listed in this post, you must be sure that you give it a specific and consistent place within the visual hierarchy.

Essential

Stripped of the inessential, a design should be free of any component not absolutely necessary to achieve the desired effect. This does not mean that every design must be Spartan or minimalist.  There are many designs bursting with color and decoration that follow this principle.

You can practice this principle by removing elements from your design.  If the design does not fall apart or falter according to another of these new principles, you don’t need it.  This ties in tightly with focus.  The less extraneous components or elements that clutter your composition, the more attention will be where it needs to be.

While much of design is an additive process – you are creating or adding new elements – creating an essential design is a subtractive process – taking out everything that you don’t need.  It can be hard, but your designs will be stronger when you keep only the essentials.

Is There More?

Of course.  Design is a deep well to drink from.

In a field such as design, you will constantly find exceptions to the rules, and the more you learn, the more you realize how little you know.  If you design your own e-books, each one will be a new evolution in your own skill and style.

With there being more, where do we go next?  We’ll be tackling one of the more intricate beasts that has a special place in e-book design: typography; what it is, how to do it, and how to not suck at it.  There will be a sprinkling of how to use color well in your e-book designs, and a heap of practical applications coming up.

How Do You Feel About These Principles?

I have a feeling that some people with a design background might look at this interpretation of the principles of design and find room for improvement.  I hope you do.  I’m not looking to be a design guru, I’m looking to enable people to create their own high-quality products, and a crucial step in that path is “getting” the basics of design in a way that is usable.

Do you feel that this new set of principles is more accessible? What would you add to them?  Leave a comment and share your thoughts – even if it’s to dispute the interpretation.

{ 12 comments }

Ryah Albatros February 15, 2011 at 10:50 am

I don’t have a design background, other than messing around in the digital scrapbooking world, and for someone like me your explanations are incredibly useful.

It’s not so much that I didn’t know them, just that putting them all together under the umbrella of Purpose works so well. I am guilty of plonking things down in the hope they’ll look OK.

It’s also made me reconsider the design of Erudition; I don’t make a bad job of it, but it could be so much better.

Jonathan February 15, 2011 at 1:13 pm

I’m glad these are serving, Ryah! I was really worried that I was getting to “out there” with the elements post, and I’m glad I got a reframe to move closer to a helpful model.

I love your e-zine Erudition, (which everyone should check out herehere) and I think that Design can be something that you can evolve over time. Figure out the core elements of your brand – color, logo, style choices – and then continue to implement them better and better over time.

And don’t worry, we’re all guilty of “plonking them down, hoping they’ll look good” – that’s the nature of the beast sometimes.

Ryah Albatros February 16, 2011 at 5:35 am

That’s good advice, and I’ve already found myself doing it today while putting Erudition together.

Luis October 14, 2011 at 5:08 pm

Hey Jonathan,

I thought you’d want to know that the link to Erudition you gave above doesn’t work :-/ Also, I did a quick search and found Erudition #26, which seems to be the latest… and I got a “presentation not found” message. Is the ezine still active? do you know?

Jude Spacks February 15, 2011 at 10:51 am

Yes! (these principles are accessible–for me, anyway). Very helpful reminders/reframes. Seems like they all emerge from putting client’s experience first: is the design serving the usefulness for the reader? What’s not as primary: designer’s self-expression for its own sake, or to manipulate and impress the reader. Don’t be visually bonking the reader over the head with how slick you are–make it easier for their deluged attention to take in the content. Design=service. Thank you!
Jude Spacks recently posted..Red Envelopes

Jonathan February 15, 2011 at 1:05 pm

Jude –

I feel like you summed up an entire philosophy in three words: Design = Service. Thank you. It’s brilliant and I love the analogy. I plan on building that into my own teachings over the next few weeks :)

It’s great to hear that these are accessible as well. Is there a way that you’ve applied this principle in your own blog & products?

I think that self expression is important – after all, if your design does not support your vision, your limiting how well you’re supporting your current audience and you’re limiting the audience you can attract – yet, it is subservient to how well you’re serving your audience.

I appreciate YOUR reframe of this teaching :)

Christy Bower February 15, 2011 at 4:34 pm

Thank you, Jonathan! How revolutionary for you to re-write the elements of design for eBook creation! Maybe I don’t need a degree in design afterall. I appreciate your translation services to make (essentially) “EBook Design for Dummies” so people like me can “get it.”
Christy Bower recently posted..VIDEO- Remember the Author of Love

Jonathan February 15, 2011 at 6:32 pm

I prefer to think of it as, “E-Book design for people that have lives and growing businesses.” Glad it landed for you!

Silver Magpies February 15, 2011 at 5:14 pm

Design = Service – that sheds a lot of light on your post for me.

I had an interesting lesson in Design = Service today on Notes & Observations. I had some excellent constructive criticism about design being aesthetically pleasing but Purpose not being instantly clear enough to produce desired response in a few key areas.

Sometimes simple + direct = better Purpose. It’s getting clearer!

Susan T. Blake February 15, 2011 at 6:42 pm

Jonathan this is really useful, thank you! The main thing that stuck to my brain is the question, “Where do I want the reader to be looking?” Doh! That makes too much sense. But it’s also easy to forget!
Susan T. Blake recently posted..Doppelganger or Kindred Spirit An Invitation

Jonathan February 15, 2011 at 7:48 pm

Glad you got a lot out of it, Susan! It’s easy to forget in the moment, especially when you’re under a deadline. It really is a strong guiding principle.

Esben Rahbek October 30, 2011 at 1:10 pm

Hi Jonathan.
Thanks for making this great overview but kind off in-depth guide to design. I love to learn and I feel I just learned a whole lot, thank you! I figure this post is also great for a check list when you think your done with your design.

Cheers
Esben Rahbek
Denmark