# understanding graphic design composition more **URL:** \ **Category:** In My Humble Opinion\ **Created:** [March 12, 2010, 3:33am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199 "2010-03-12T03:33:24Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![goBuffalo](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@goBuffalo](https://boards.straightdope.com/u/goBuffalo)\ **Post date:** [March 12, 2010, 3:33am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/1 "2010-03-12T03:33:24Z")
Hey guys, I was wondering if anyone on here had any advice for me. I’m a graphic designer / web guy, and I’m good when it comes to structured layouts, but when I get into more random things, like a weird-shaped banner or print ad it becomes hard for me to understand proper composition. Example: [http://img203.imageshack.us/img203/746/punchbanner.jpg](http://img203.imageshack.us/img203/746/punchbanner.jpg) I am making this little banner to feature a series of things I’m doing for a brand project, but I’m having trouble undertanding why and how to place the three elements (the phone, logo, and text). Right now I think I have it in a good spot, but I am not sure I understand why. ---
**Author:** ![cmyk](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/cmyk/32/3353_2.png) [@cmyk](https://boards.straightdope.com/u/cmyk)\ **Post date:** [March 12, 2010, 6:45am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/2 "2010-03-12T06:45:23Z")
For me, it’s always about balance. The elements you’re using are few and simple, and the space you have to compose in is very horizontal, so the trick will be making the eye follow in a way that feels well distributed. As of now, it’s almost there. However, it looks like there’s too much empty space to either side of the iPhone and the copy. I’d move the phone and copy over more to the left (killing the negative space by about half), and either increasing the size of the copy (so the copy and logo aren’t competing), or adding another graphical element to complement the right side. That said, most times as a designer, you just gotta go with what your eyes tell you is right, and not try to over-think it. Instinct, baby! ---
**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\ **Post date:** [March 12, 2010, 7:09am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/3 "2010-03-12T07:09:54Z")
I almost agree with **cmyk** , who is probably more experienced than me. But I think after you’ve moved the phone to the left, centre the “get punched” text in the middle of the banner, enlarge it by about 25%, and change its colour. The busy-ness of the background and the logo is enough to keep the balance. [Like so.](http://www.guanolad.com/stuff/punched.jpg) Ordinarily this kind of arrangement wouldn’t work, but Graphic Design principles have been played around with so much as everyone attempts to be unique and add new spins on tradition, that you have more leeway than you might think. **cmyk** is right, though, in that it is all instinct. ---
**Author:** ![DMark](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@DMark](https://boards.straightdope.com/u/DMark)\ **Post date:** [March 12, 2010, 7:17am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/4 "2010-03-12T07:17:52Z")
Sorry, but the graphic hurt my eyes trying to read what you were writing in the graphic element…I kept trying to see the work Punch in those shapes, but couldn’t find all the letters. After straining my eyes for awhile, I believe now it is just abstract and not a real word or words? Personally, I find simple and clean the way to go. I would use the blue color on the phone for the same color as the blue in the logo banner - less hard on the eyes and not quite as “shrill” in contrast with the black. That is my humble opinion. ---
**Author:** ![DMark](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@DMark](https://boards.straightdope.com/u/DMark)\ **Post date:** [March 12, 2010, 7:34am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/5 "2010-03-12T07:34:16Z")
> [@DMark](#): > > Personally, I find simple and clean the way to go. > I would use the blue color on the phone for the same color as the blue in the logo banner - less hard on the eyes and not quite as “shrill” in contrast with the black. > That is my humble opinion. As a quick example of what I mean: [![](https://i224.photobucket.com/albums/dd137/DMark_bucket/punchbanner1.jpg) ](https://i224.photobucket.com/albums/dd137/DMark_bucket/punchbanner1.jpg) ---
**Author:** ![SanVito](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/sanvito/32/2805_2.png) [@SanVito](https://boards.straightdope.com/u/SanVito)\ **Post date:** [March 12, 2010, 11:02am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/6 "2010-03-12T11:02:08Z")
> [@DMark](#): > > As a quick example of what I mean: > [http://i224.photobucket.com/albums/dd137/DMark\_bucket/punchbanner1.jpg](http://i224.photobucket.com/albums/dd137/DMark_bucket/punchbanner1.jpg) I’m afraid I think you’ve just killed it with this colour change - drab isn’t good in banner advertising and you’ve also lost the brand recognition in the colour. I think GuanoLad nailed it - when I first saw the ad my immediate thought was that the headline was shrinking into the background - the size and colour change gives it the prominence it needs to work as a piece of advertising. ---
**Author:** ![goBuffalo](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@goBuffalo](https://boards.straightdope.com/u/goBuffalo)\ **Post date:** [March 12, 2010, 3:55pm UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/7 "2010-03-12T15:55:15Z")
Thanks guys, Yeah the fix provided by cmyk and Guano did the trick for my mind. I guess my question is how does one get better at nailing this more quickly-like I knew the general direction to go, but what happens when I add another element, etc. I have very little experience with print (mostly web) so sometimes this almost open-ended composition can be tricky for me. I have just started to read about the law of thirds [Balance in Page Layout Design](http://desktoppub.about.com/od/designprinciples/l/aa_balance4.htm), etc. Thanks guys ---
**Author:** ![SanVito](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/sanvito/32/2805_2.png) [@SanVito](https://boards.straightdope.com/u/SanVito)\ **Post date:** [March 13, 2010, 9:45am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/8 "2010-03-13T09:45:25Z")
> [@ceen284](#): > > Thanks guys, > > I guess my question is how does one get better at nailing this more quickly-like I knew the general direction to go, but what happens when I add another element, etc. I have very little experience with print (mostly web) so sometimes this almost open-ended composition can be tricky for me. I’m not sure there’s an easy answer to your question, as there aren’t strict laws on how these things work - it’s more a judgment call made on experience. But if you start by putting yourself in the mind of the viewer and thinking what key thing, in what order, you want them to get out of your communication, that will help guide your composition. Many designers get wrapped up in making something look beautiful and lose sight of what they’re trying to communicate - hence my comment about the headline. So, in your banner ad, think about the priority of the elements - headline, supporting graphic, brand sign-off (the priority of these elements will vary according to what you need to get across, how familiar the audience is with your brand etc). Think about where your eye will naturally fall on first sight and what information you will take away from the ad. It’s really like crafting a well formed, clear sentence but in visual terms. ---
**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\ **Post date:** [March 13, 2010, 10:50am UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/9 "2010-03-13T10:50:00Z")
> [@ceen284](#): > > I have just started to read about the law of thirds [http://desktoppub.about.com/od/designprinciples/l/aa\_balance4.htm](http://desktoppub.about.com/od/designprinciples/l/aa_balance4.htm), etc. Wow. Those are some of the worst examples of the _Rule Of Thirds_ I’ve ever seen! [These](http://images.google.com/images?hl=en-GB&q=rule+of+thirds) randomly selected examples explain it better. ---
**Author:** ![Alpine](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/alpine/32/17813_2.png) [@Alpine](https://boards.straightdope.com/u/Alpine)\ **Post date:** [March 13, 2010, 2:05pm UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/10 "2010-03-13T14:05:26Z")
I think there are a few things about design you can learn from books (please don’t flame me). Some books: The Principles of Beautiful Web Design, Jason Beaird Transcending CSS, Andy Clarke, Aaron Gustafson, Mark Boulton The Zen of CSS, Dave Shea and Molly E. Holzschlag Also, I don’t have much of an instinct either, so I look to examples I like and try to figure out why they appeal. If you haven’t already found it: [www.csszengarden.com](http://www.csszengarden.com) ---
**Author:** ![goBuffalo](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@goBuffalo](https://boards.straightdope.com/u/goBuffalo)\ **Post date:** [March 15, 2010, 4:31pm UTC](https://boards.straightdope.com/t/understanding-graphic-design-composition-more/532199/11 "2010-03-15T16:31:14Z")
thanks guys!