Design insights & tutorials.

Rule Seven: Composition: putting it all together.

Part Seven of Seven Easy Principles to Becoming a Master Designer.title-graphic_step-7

Ok Folks, This is it; part seven of seven. I’ve hopefully convinced you to limit your use of colors and fonts, taught you to provide sufficient contrast, suggested that you properly space your elements and let you in on the secrets of adding depth and motion to your design. Now, the last principle in this rapid-fire guide to becoming a master designer is composition.

In truth, the order I’ve given you these seven principles is probably ass-backwards. The composition is the first and most important part of your design. So, let’s just pretend that you are starting your design right now – from scratch. This is the point at which you want to be thinking about your composition.

Each of the previous six principles dealt with very specific rules and techniques. Composition is the broadest and most difficult principle to explain because it encompasses EVERYTHING.

So, what exactly is a design’s composition? Let’s go the cheesy route of providing a textbook definition.

First let’s review the definition of the word ‘composition.’ Dictionary.com defines composition as
composition
1. the act of combining parts or elements to form a whole.

2. the resulting state or product.

Ok, that’s simple enough. The composition is simply what you get when you put your pieces together. It says nothing of function or quality. It just is what it is.

Now, design as defined by dictionary.com: Design is:
design
1. to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the form and structure of: to design a new bridge.

2. to plan and fashion artistically or skillfully.

Ok. Great, so, if we combine those two definitions to form a definition for design composition, it would sound something like this:

Design Composition: To skillfully and artistically combine parts or elements to form a whole.

Wow. That sounds GREAT. So, what have we learned? Um… not much. I think we already KNEW that we were here to put all our design elements together into an artistic design (whole.) What we’re after is how to make a successful design composition. So I guess we’ll have to define what a successful design is.

Fortunately for us, design is not simply “art;” a highly charged and subjective subject. Designs serve a very specific function. The function of a car’s design is to safely transport humans from one location to another. What if we designed a car with square wheels and a huge metal spike extruding from the steering wheel pointed directly at the heart of the driver? Would that be a good car design? No, probably not.

So, how do we define a successful design composition? Well, if we have successfully achieved the FUNCTION of the design, then our design is good. And who defines the function? Typically this is the client. The client tells you (the designer) the function (purpose) of the design. Then it’s your job to design (whatever you’re designing) accordingly.

Now – how do I give you a lesson on composition if the function is not set? Well, I will have to speak in generalities. Then you will have to apply these general concepts to your specific project. And since the composition is dependent on the function, well, we should probably start there.

Make sure you have a solid understanding of the design’s goal: Read your project scope carefully. Make sure you fully understand what your client is trying to do. Ask plenty of questions if you have to. This part includes the boring stuff like dimensions, resolution and printing (or manufacturing) processes. All of these affect how and what you design.

Understand who the target market is: If you’re trying to communicate a subversive counter-culture message to a young male demographic, your composition may include a strange layout with hard-to-read fonts and bright colors. Or if you’re trying to communicate where the cafeteria is to old people, your composition should probably utilize a large easy-to-read font printed in black, centered with an arrow on a white background. What’s my point? Your composition will also depend on your target market.

Know your history: Once I have these two items taken care of, I like to do some research on the design history of the company and industry I’m doing work for. As much as possible I LOVE to feed visually and compositionally off of the past. My thought process is this: “understand how they’ve gotten to where they are today, then help them transition into a better designed future.”

Make some quick sketches: Hopefully at this point I’m starting to get some rough ideas floating through my head of what needs to be in the design and, at least a rough concept of how I might want to put it all together. Before I give myself an opportunity to over-think anything, now is the perfect time to do some quick sketches. These are very fast and very rough. They’re just enough to communicate where all the elements go, how they work together. This gives me an opportunity to quickly ideate and maybe deal with some contrast issues. Let’s look at a few composition sketches for a poster and a flyer I did.
gnome-example

girl-example

The Golden Ratio: As I’m going over all of these systematic approaches to the relative question of good design composition, you surely must be thinking: “Bill, c’mon isn’t there some grand universal rules to help guide my layout? Isn’t there a FORCE which surrounds us, binds us and will help guide me to properly arrange my design elements?” Well, I want to say no. There is no design ‘force’ that you can tap into if your design midi-chlorian levels are high enough. However, there is an ancient design standard that has been used throughout the ages – going all the way back to the birth of civilization. It’s known as the Golden Ratio.
golden-ratio2

I can’t possibly get into a full explanation of the Golden Ratio here, but to summarize: people noticed certain patterns that repeated in nature. They tried to quantify this repetitious behavior in nature and came up with phi, or more precisely: 1.6180339887. If you’d like to know a little bit more about the Golden Ratio I suggest you hit up the oracle: http://en.wikipedia.org/wiki/Golden_ratio

So, how does the golden ratio apply to your design composition? Well, basically – you want to use this measurement to help space your various design elements. Once again, I can’t go into great detail in THIS tutorial, but here is a downright amazing example of the Golden Ratio being used by the Greeks to build the parthenon:
the-golden-section

The rule of thirds: In my opinion the “rule of thirds” is simply a bastardized (simplified) version of the Golden Ratio. Basically, you want to divide your composition into thirds vertically and horizontally. Where the lines meet should be your focal points. By avoiding a centered design you add some motion and interest.rule-of-thirds2

Balance without symmetry: “Great! The Golden Ratio,” you’re thinking “ Now, are there any other universal ‘truths’ about design composition?” Well – not so powerful as the Golden Ratio is the concept of balance. Without getting trapped in a symmetrical composition many artists and designers try to achieve balance in their designs. Basically, if you have a large dark object on one side of your composition, then you should have a large dark object on the opposite side of your composition. Once again, try to do this without making it symmetrical. You want to achieve balanced asymmetry.

Test it! Yes, that’s what I said, TEST IT! As we’ve already established that design is a discipline of accomplishing a specific goal (the design’s function) – we can certainly test whether or not the design works! This can be done as simply as walking around with a print of your design and asking people’s opinions. Or it can be done very scientifically with case studies and double-blind testing. How much time and energy you have available to test a composition may depend on your budget. But you may be surprised at how much information you can get by just watching a few individuals interacting with your design. This is particularly true when dealing with design ergonomics. What are the results? Does your ad get people to the mall? Can people easily navigate through your website design? Can people figure out how to work your stereo design? Put some real warm blooded people in front of your design and ask them to interact with it.

“Gosh Bill, this is fairly extensive.” You may be thinking to yourself: “Seriously? Studying the target market? Studying the history? Double-blind testing?” Your project may not have that type of budget. Or perhaps you simply don’t have the time. Well, I understand your problem. And what I’ve described here is the most ideal of design scenarios. In truth, most of this stuff I just do in my head. If the budget is extremely tight (which it often is) and I have limited time, the design process looks something like this:bills-process

Me “carefully reading the project brief” is actually me just having a short conversation with the client. “Understanding who the target market is” is just me having a basic understanding of my client and the rest is a bunch of stereotypical assumptions about his/her demographic. “Studying the history of my client’s design” is usually me just looking at their current website or marketing materials. My “sketches”, well, those rarely make it onto paper. I do them in my head. Then I jump right into slapping all my design elements together. And I don’t often get the chance to measure out the Golden Ratio. I know not to center my focal point, and I just move pieces around until they look good. Once again, I’m making some assumptions and using my design intuition. Testing – well, that’s usually me just showing the client proofs. If I like it and they like it – we assume its close enough for rock ‘n’ roll.

So, I hate to demystify the design process by simply saying “I do it in my head.” But it just depends on the situation you’re dealing with. Most clients have tight deadlines and limited budgets. If they see “3 hours for research” on their bill, you’ll probably get yelled at. It’s a constant challenge to teach our clients about good design practices and why they should spend a few extra bucks to let us do our job properly. But we try.

Well, that’s it folks. I hope this last lesson has been helpful and not too ambiguous. And generally, I hope you have enjoyed this 7 post series. There is obviously no substitute for PRACTICE PRACTICE PRACTICE.

If you missed the rest of the series, here they are:
Become a Master Designer: Part 1: Limit your Fonts
Become a Master Designer: Part 2: Limit your Colors
Become a Master Designer: Part 3: Contrast, Contrast, Contrast
Become a Master Designer: Part 4: Spacing is your Friend
Become a Master Designer: Part 5: Depth
Become A master Designer: Part 6: Motion

About the Author, William Beachy

I grew up in Cleveland Hts. Ohio and was drawing constantly. As a child I took art classes at the Cleveland Institute of Art and eventually became known as the "class artist." I graduated from The Ohio State University's department of Industrial Design. I have always tried to blend my passion for illustration with Graphic Design. Go Media was the culmination of my interests for both business and art. I'm trying to build a company that is equally considerate of our designers AND our clients.
Discover More by William Beachy

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Simon H.

    Nice ! And that one is helpful, complete and with the little dose of GoMedia humor I love :-D

  • http://www.gomedia.us jeff_finley

    Good post Bill, this was like finding water after a long trek through the desert. Sorely needed! Can't wait to read your next article about Design Integrity!

  • Corey

    Thank you so much for sharing your wisdom and experience. It really is a boon to have people like you to help newcomers and avid novices like me. Ciao!

  • http://www.assaultblog.com tim

    Nice Bill.

    I do the same process in my head, but the same questions happen

    “Who's going to be seeing/using this?”

    “What is the main purpose or call to action of my design?”

    “Is it interesting”

    “is it cool?”

    “Would this catch my attention if I am in the target demographic”

  • William_Beachy

    Yeah! Design integrity blog coming up next. It's all about how to NOT sell your soul to the man. After all, it's not just about the money!

    This comment brought to you by the NEW Ford F150. Have you driven a Ford lately?

    -Bill

  • http://www.labgrab.com labgrab

    I like Bills process. Less talk more Rock and Roll. Seriously thanks for the tips.

  • ted mattes

    Bill
    thanks for this. loving the blog.

    Ted
    (Global Merch)

  • Joann Sondy

    Excellent post, Bill. I especially like how you've interwoven a mathematics lesson into your dialogue. Because, after all… isn't layout either for page or web based on shapes?

  • Stan

    Hurray!! Great post. I look forward to digesting it for weeks to come.

    Am I a tard? What happened to rule 6? The last time I checked there was #5 about depth.

  • http://www.onlineposterprinting.com OnlinePosterPinting.Com

    I love this post! Very artistic and informational too. I'm surely gonna take in your advice here. thanks for sharing, real nice!

  • http://www.joshcorken.blogspot.com Josh Corken

    Amazing article! Great information and actual concepts to take with me.

    Thanks!

  • Ian Edward

    I second the question over where rule five went.

    Also, the search field isn't “sticky”
    So if I don't like the results I get, I need to retype the whole search string again. FYI.

    if(isset($_POST['search'])) { value=”$_POST['search']” } else { it's empty or whatever }

  • http://designawardsgallery.com/ Best CSS Gallery

    Great post, very interesting

  • http://celesteodell.com Celeste

    Nice to see someone acknowledge some tips for working under a tight budget! Very few of my clients want to pay for the work it takes to get a very thought-out and detailed design put together.

  • http://celesteodell.com Celeste

    Nice to see someone acknowledge some tips for working under a tight budget! Very few of my clients want to pay for the work it takes to get a very thought-out and detailed design put together.

  • whacko

    Hmm

    Am I the only one who seems to have missed Rules 3-6? Were they titled something else (other than Rule 3: “Title”)

    In any case this is a great article. Thanks!

  • http://realbloggingtips.com Forest

    Thanks BIll…. I have a few design projects coming up (including a redesign of the blog I recently purchased) and I want to make sure that I do it right so this series has been great for me.

    Thanks.

  • jrosell

    What about the “8 gold rules”?

  • jrosell

    I was thinking the same!

  • Adam Wagner

    Awesome conclusion to the series Bill! And to everyone who asked: All previous 6 Parts are now available at the bottom of this post.

  • http://www.crearecommunications.co.uk Mat

    Thats all pretty scary stuff for me to take in, having the artistic ability of a newt. A lot of the people i work with though are amazing at this kind of stuff, so i'll link this for them.

  • Stan

    Danke! I have a poster design project at school so this is just in time.

  • Scott Nash

    Ok, so I've figured out something that's easy to remember – AND it's in the form of an acronym (because everyone likes a good acronym). C.R.A.P. (Contrast, Repetition, Alignment, Proximity). So if someone says our design is “crap,” we can gleefully say “Thank You!” It's nice to have a “cool resource” like Go Media to turn to for reminding us what is needed for everyday design… C.R.A.P.. It's like saying “Here's a reminder of the C.R.A.P. you may have forgotten” or for the newbies: “Here's the C.R.A.P. you need to know.” Thank you Bill (and Go Media) – your resources continue to be there right at the right time.

  • http://www.downloadic.com Downloadic

    Very nice, I like the rule 8 ;)

  • http://www.curtiscopeland.com Curtis Copeland

    Nice work! Excellent introduction to design principles. Nice job setting up the “Golden Ratio”. As a photographer, these are some great ideas for album building and in-camera composition. Thanks for sharing and inspiring!

  • heather

    love the pointy spike at the heart comment. nice writing. :)

  • http://willismedia.wordpress.com Michael Willis

    Thanks for the tips, It great to build on theory and be a part of a community creating holistically good designs!! This has made me a fan of Go-Media looking forward to learning more about you guys!!

  • http://www.printplace.com/printing/brochure-printing.aspx On Brochure Printing

    Excellent post. Not only was it informative and helpful, but entertaining to boot! That is truly a rare quality these days.

  • http://vectorlady.com/ Vector Lady

    Just Awesome! I'm learning so more from you guys!!!

  • http://vectorlady.com/ Vector Lady

    Really really helpful! I'm always missing some theory

  • http://vectorlady.com/ Vector Lady

    Really really helpful! I'm always missing some theory

  • http://www.jermainelovepoems.com/ Love Poems & Love Quotes

    That gnome looks so awesome. Love the concept art that's presented on here.

  • airearte

    Muchas gracias. Un placer leer estos consejos.

  • http://www.swingcurrency.com Swing Trading

    Nice one. I have stumbled and twittered this for my friends. Hope others find it as interesting as I did.

  • http://www.hmpmlaw.com/ Tucson injury lawyer/attorney

    Thanks for sharing your experience! I appreciate it.

  • http://www.airwalk-design.com/ Airwalk Design

    Very intelligent post!

  • Matt

    Thanks for this nice work!
    dizi izle

  • http://www.surgeforward.com Dave – Surge Consulting Group

    Very impressive (and daring) post as design can be such a touchy subject. I went back on your earlier lessons and would have to say that I agree with your overall series, but have noticed a significant boost in the creative use of typology in web design in 2009 and 2010. All in all – great series! Thanks

  • louis vuitton muffler

    Beauteous white roses are blooming peacefully in the wizard’s secret garden. Someone could hear the voice of blooming whilst someone might see the sequel of fading.
    http://www.wslmart.net/

  • http://www.usa-basketball-shoes.com/Vince-Carter-shoes.html Vince Carter Shoes

    Here elaborates the matter not only extensively but also detailly .I support the write’s

    unique point.It is useful and benefit to your daily life.You can go those Wisdominthemind.com Elegance-is-Edgy-Dress.com

    sits to know more relate things.They are strongly recommended by friends.Personally

  • http://www.nike-air-force-one.com/Nike-Air-Force-1-mid.html air force shoes

    Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. music-ofthesun Believe me these websites won’t let you down.

  • http://vibram4u.com/ moncler outlet store

    Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here <a href=” http://music-ofthesun.com/ ” >wslmart.net you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. Believe me these websites won’t let you down.

  • http://www.moncler-down-jackets.com moncler down jackets

    Here elaborates the matter not only extensively but also detailly .I support the write's unique point.It is useful and benefit to your daily life.You can go those sits to know more relate exceptfor.net things.They are strongly recommended by friends.Personally I feel quite well.

  • http://www.discount-nike-dunk-shoes.com dunk sb shoes

    Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion.
    http://www.assure-every.com

  • http://www.archivetr.net/ Archivetr

    nice tutorials

  • http://www.loveshoppingshoes.com Alexandermcqueenheels

    I like very much the writings and pictures and explanations in your adress so I look forward to see your next writings. I congratulate you.

  • gucci medium hobo

    love the pointy spike at the heart comment. nice writing.

  • http://twitter.com/download60s download60s

    thanks.. find more best tutorials here http://download60s.com
    Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
    if you think i make a spam please remove this comment.
    thanks.. find more best tutorials here http://download60s.com
    You have good tutorials and i had post it on my website. http://download60s.com

  • http://www.filmizlerik.com filmizle

    Great post. Thanks a lot for the ideas and advice.

  • http://www.frameboxx.in/ Animation Institutes

    I love this tutorial…every time I read it I learn d
    something new…amazing work!

  • http://www.drmustafaerarslan.org/ panax

    Very cool and interesting article

  • http://www.drmustafaerarslan.org/ panax

    Very cool and interesting article

  • http://theislandbayreview.tumblr.com/ Dan

    I really love the straight forward concepts in this series.

    Please sort out the links between them! They should be set up to click through from 1 to 7

    Cheers

  • http://www.facebook.com/juan.diaz.315080 Juan Diaz

    Very useful!! Thanks for sharing your knowledge :)

  • http://twitter.com/wearsclothing Wears Clothing

    Great, are you using a tablet?