spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dlab
Developer News
Metasploit 3.2 Offers More 'Evil Deeds'
'Thank You Apple. Seriously.'
The Buzz: BlackBerry App Store Seen Next
 
  Proportions
 
 

According to Webster's dictionary, proportion is a "comparative relation between things or magnitudes as to size, quantity, number, etc."  In the design field, however, this rather broad definition is narrowed to designate only the relation of sizes and lengths between the parts of a composition.  In other words, proportions are about which parts are bigger than others---and why. (Proportioning principles applicable to a web page as a whole are the subject of another article.)

 

[Fig.1]
Fig. 1  Two lengths, a and b, constitute a "golden section" if b divided by a equals to a divided by the sum of a and b
No doubt that the foremost principle in choosing sizes for your logo's elements is following their "natural" sizes.  The text must be easily readable; the visual should be big enough for all its features to be evident.  However, within the bounds of naturalness there is a lot of space for minor adjustments which, despite being minor, may greatly affect the effect of the whole.  You should not be afraid of "wasting time" playing with sizes (as well as other aspects of your work, of course) and trying to find the best proportion.  

 Actually, ancient Greek and Renaissance architects have already spent much effort figuring out what may be the "ideal" proportion, the one most pleasing for the eye.  One of their most well known discoveries is the "golden section" explained by Fig. 1.  However, speculations based on mathematics are rarely applicable these days, because the forms we deal with are not those ideal colorless squares and spheres that entertained the minds of the ancients.  In complex forms we can so easily produce on computers, color and shape can greatly affect the impression of size (widely known examples of such effects are presented on Fig. 2), so you should compare not equal sizes but rather prominence, visibility, or impression of size.
[Fig.2]
Fig. 2  In (a) the disk looks less in diameter than the square; in (b) the white disk on black looks bigger than the black one on white

[Fig.3]
Fig. 3  Searching for the best proportion
Let's take the simplest case where we have a roughly square visual and a two-letter abbreviated title that we need to unite into a logo (Fig. 3).  The first attempt shows that this couple of letters (AZ) tends to fall apart leaving too much space in between, so it's a good idea to kern them together rather tight (a).  But with the size of letters on (a) they do not properly balance the visual.  After increasing the letters and trying out a number of different variants, the one shown on (b) proved to feature the best visual/text proportion, where the feeling that the two halves are of equal importance is the strongest possible---stronger than, say, in (d).  Why?  

 The shapes of both the visual and the letters are rather complex, and as a result their perceived size, or their prominence, differs from their physical size measured from one edge to the other.  If we simply level the physical heights, balance will suffer (d).  In such cases, our mind tends to divide a shape into a "core" and a "hull," and it's the "core" that we use to align things to each other.  Here, hulling the core off the visual is simple---the core is that inner light-blue square, and we righteously use its height as a ruler to choose the font size.  Moreover, if we measure the text using a copy of the core square (in [c] the copy is shown as red outline), we see that some important points of the letters' shapes are beautifully inscribed into it.

This example hints at one general principle used for choosing the right proportions: Whenever possible, try to find relations which are simple yet not immediately obvious.  If you can safely make two non-adjacent objects the same size, or one twice the size of the other, try it.  Imagine that there's a grid over your creation with the cell's size equal to the size of one of its elements; then all other elements will tend to "snap" to the lines of the grid, with the ultimate effect of simplifying and stabilizing the system of sizes and distances.  Experienced designers perceive this rule as if it were a natural "desire" of things to behave that way, and all they have is to follow this desire.

On the other hand, you should not oversimplify; a composition where all levels with all will be plain boring.  Instead, divide your work into two stages.  First, go wild and seek a glimpse of originality; play with forms until you see something interesting, and forget for a while about setting proportions.  And on the second stage, after you've found the main characteristics of all elements, you must fix or "nail" the composition with a couple of well-chosen proportional relations.

 

 One more example is shown on Fig. 4.  Now we have a bigger text with the same visual; actually we can still use the same approach and level the text with the inner square in the visual.  The result (a) is acceptable, although maybe just a little bit too ordinary.  Lots of logos use this layout.  Investigation shows that there exists one more stable, albeit much more dynamic, combination, namely the one shown on (b).  The key proportion here is the height of characters being half the height of the inner square---another simple proportion which is not obvious at once but which nevertheless fastens the whole quite well.
[Fig.4]
Fig. 4  The same visual with a bigger title


Comments are welcome
Produced by Dmitry Kirsanov and

JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2 · How to Use JavaScript to Validate Form Data
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Choosing the Right Online Backup Provider · Mother Avaya Nurtures Her Technology Partners · Software as a Service a Winning Model for Hotspot Provider

Created: Feb. 21, 1997
Revised: Feb. 21, 1997

URL: http://www.webreference.com/dlab/9702/proportions.html