Home About Contact Deals Go Media on Facebook Shop Straight to my Inbox!

   |   RSS

Enter search keyword

Articles Freebies Tutorials Weapons of Mass Creation   0 Subscribers

Rule Seven: Composition: putting it all together.

Apr 14 Illustrator, Photoshop, Technique & Theory, Tutorials, Typography, Web Design Download Now: New eBook from GO MEDIA

Part Seven of Seven Easy Principles to Becoming a Master Designer.

Thread's Not Dead: The Designer's Guide to the

Apparel Industry written by Jeff Finley.

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, Popular Tags Twitter Facebook
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 Adobe Photoshop CS5: Sneak Peek
composition is the first and most important part of your design. So, let’s just pretend that you [video]
are starting your design right now – from scratch. This is the point at which you want to be
thinking about your composition. Intro To 2.5D Compositing in After Effects
[Video Tutorial]
Each of the previous six principles dealt with very specific rules and techniques. Composition is
Amazing Distressed T-Shirt Mockups in
the broadest and most difficult principle to explain because it encompasses EVERYTHING.
less than 3 Minutes
So, what exactly is a design’s composition? Let’s go the cheesy route of providing a textbook
Advanced Hoodie Video
definition.
Screencast: Mocking up tees with
First let’s review the definition of the word ‘composition.’ Dictionary.com defines composition as
ShirtMockup.com

Tutorial: Iconic Poster Design

How to Create a Photorealistic Ladies Tee

Mockup

Drawing a Tattered Scroll from Scratch

Interview with Jeff Finley

How to Launch a T-Shirt Line in One Day

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
Adobe advice After Effects
together. It says nothing of function or quality. It just is what it is.
apparel arsenal art business
cleveland contest design
Now, design as defined by dictionary.com: Design is: design tip Flickr pool showcase
freebie graphic design
grunge help illustration
Illustrator InDesign inspiration
interview Mac news opinion
organization ornate OS X
Photoshop poster press
productivity sketch
software staff strategy t-shirt tips
tutorial typography
vector vector art vector pack
1. to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the Video Weapons of Mass Creation
form and structure of: to design a new bridge. web
2. to plan and fashion artistically or skillfully.
Facebook - Go Media
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 Go Media
a whole. Jeff Finley

Wow. That sounds GREAT. So, what have we learned? Um… not much. I think we already Oliver Barrett
KNEW that we were here to put all our design elements together into an artistic design (whole.)
Adam Wagner
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. Liz Hunt

Fortunately for us, design is not simply “art;” a highly charged and subjective subject. Designs Adam Law
serve a very specific function. The function of a car’s design is to safely transport humans
Kim Finley
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- Latest Videos
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
Weapons of Mass Creation Fest 2011
how they’ve gotten to where they are today, then help them transition into a better designed
future.”
How to Launch a T-Shirt Line in One Day
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 Interview with Jeff Finley
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 Tutorial: Iconic Poster Design
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 Screencast: Mocking up tees with
issues. Let’s look at a few composition sketches for a poster and a flyer I did. ShirtMockup.com

Adobe Photoshop CS5: Sneak Peek [video]

All prints from the Go Media store are less than $10
for a limited time. Get them while they last!

Downloads Blogroll

Shirt Mockup bittbox

Templates Vol2
Colorburned
Video Tutorial: The
Making of Andrew Design Project
Jackson Management System
Questionnaire
Vector Set 19: 104
Royalty Free MMA Designer Daily
Graphics
Freelance Switch
Ultimate Mockup
Fudge Graphics
Template Colection 2
Fuel Your Creativity

Go Media Forum

Go Media Merch Store

Haley Saner
 How to Start a
Clothing Company

I Am The Trend

If You Make It

Imagine Publishing

MyInkBlog

Pixel Awards

Pixel2Life

Room122

Shirt Mock-Up .com

Smashing Magazine

T-Shirt Magazine

Ten Ton Books

Tutorial 9

Vecteezy

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.

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 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.

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:

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

Go Media is a creative agency based in Cleveland, Ohio. Besides the GoMediaZine, we also
work for clients and sell stock artwork and design files on the Arsenal.

balance, composition, design, design composition, form, function, golden ratio, graphic
design, master designer, Part Seven, rule of thirds, Rule Seven, symmetry

This post was written by:

William Beachy - who has written 56 posts on GoMediaZine.

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.

Contact the author

If you enjoyed this post, show your support.

We appreciate it!

Bookmark It! Stumble It! Float It!

Rule Six: Motion Enjoy this post? Stay

current and subscribe
Become a Master Designer: Rule One: Limit your fonts
to our RSS feed.
Become a Master Designer: Rule Two: Limit Your Colors
Subscribe to RSS feed
User Showcase Highlight Round 12 Subscribe via Email

Animating Birds with After Effects What is RSS?

http://simonh.toile-libre.org 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

http://www.discount-louis-vuitton.com/louis-vuitton-muffler.html 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.

http://www.gucciwebbag.com/gucci-gucci-by-gucci-medium-hobo-211926-ft0wg-9774-p-
140.html 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!

How much of your work is client / Users with the Most Comments (this Go Media User Showcase on Flickr
personal? month)

j Almost all client work

k
l
m
n Klavis (67)

j 50/50
k
l
m
n Domain Registration (8)
j Almost all personal work
k
l
m
n
HeroicTuts (4)
j Work is really slow, so neither.
k
l
m
n
Affordable web ho... (2)
Vote
Rita Stern (2)
View Results Carter Shanklin (1)

Cynthia Nelson (1)

Daniel DeHart (1)

Drew Dennis (1) Show off your work

Join the Go Media User Showcase
Good Hotel Guide (1)

Home About Contact Archives Design Resources Design Help Deals Terms and Conditions

©2011 GoMediaZine. Hire Go Media for your next

design project. View our portfolio.
The Hello Bar is a simple web toolbar that engages users and communicates a call to action.