Five Principles of Design.

Balance, proportion, sequence, emphasis (contrast), and unity. Even though it is a separate concepts but they relate significantly to one another and have a remarkable symbiotic interconnection.

Balance


• Balance involves equalizing the weight on one side of a vertical axis with the weight on its opposite site.
• Balance involves placing a design elements on a page in a way that will make them look secure and natural, not top or bottom, heavy or leaning to the left or right.
• Graphic equilibrium -
  a) Symmetry, tends to be more traditional and formal.
  b) Asymmetry, more informal and playful in its approach to balance.
• Symmetry, bilateral symmetry (align layout elements by centering them evenly or opposite one another, so that if split, the two side basically mirror one another).
• Magazine covers, wedding announcements and academic journal are classic examples of symmetry.
• Bilateral symmetry can also emphasize harmony. Symmetry may help project the image of no-nonsense, traditional, to-be-trusted communicators.

Optical weight is a visual system of measure.

• Logically, optical weight works this way : like physical balance, design elements placed further away from the vertical axis weight more.


• Large elements tends to weight more than small elements.
• Dark areas weight more than lighter.
• Color tends to have more graphic heft than black and white.
• Brighter hues (such as primary colors) weight more than muted colors.
• Oddly configured elements attract more attention and hence weight more than their regularly-shape counterparts.
• Bilateral symmetry can also emphasize harmony. Symmetry may help project the image of no-nonsense, traditional, to-be-trusted communicators.

Asymmetry and Grids.


• Tends to be informal, playful and dynamic.
• Not centered up and equal on both sides.
• More complex and involves counter balance through the use of logistics and optical weight. And so it tends to be more challenging as an approach to balance.
• Asymmetry also tends to look more spontaneous and can bring tension and flexibility to page’s architecture.
  Example: Newspaper front page and section pages use asymmetry.
• Grid (modular)
  Today this grid approach tends to be the skeleton of newspaper in newly all other media.
  Example: Newspaper, web, and magazine’s page design

Proportion


• The next most logical step in planning is to decide upon shape and format and how you’re going to divide the space within that format.
• Proportion is the relationship between one element in a layout to the entirely of the layouts space or the relationship among elements within the design
  
• The efficient use of space.
• Standard paper size.
• Most pleasing paper size 1 1\2 x the width.
• Grounds thirds. The copy area takes roughly one-third of the layout space; the artwork takes up the remaining space.
  •Ground third was use as an underpinning within all the print ads, brochure work, and outdoor media.
• “Golden Rectangle” format (Dominant design configuration)
• Ground Thirds – space within a basic layout is divided roughly into 1/3 and 2/3 segments.
• X-height (2/3) and the length of the ascenders and descended (1/3). (This is what we call ‘scale’ in type structure)
• Most ads fracture space into roughly 2/3 Art : 1/3 Copy.
• Cinematographers and photographers split the screen or frame into 1/3 sky and 2/3 ground or vice versa.
• Some designers also break their space or plane into ground fifth or tenths or fourths.
• Basically the “ground thirds” idea is to AVOID breaking layout page or frame in half!
• The larger area also tends to dominate the space and emphasize what’s in it; that sense, ground thirds also helps sequence our vision.

Emphasis and Contrast


• Emphasis involves giving a single graphic element within a page or layout visual significance.
• Typically, every time when we look at a magazines cover, the front page of a local newspaper, website, photo or film frame, you see what the designer intended you to see first. This is precisely what emphasis is about : singling out and stressing one and only one element within a layout or frame.
• The point of emphasis simply is to have a point.
• Resist the temptation to emphasize too many things. When you stress too much you defeat your purpose and dilute the emphasis within the design.

Emphasis Strategies


• Size: It’s not the size of the graphic that counts, its how you use it. (2 basic style; run it big, or run it small)
• Imbalance: By teetering or skewing the main element, you explode the natural “at rest” posture of the layout, and emphasize the tilted item to attract attention.
• Selective focus: blurs the background and the foreground of an image. Our eyes look onto what’s sharp in the image and mostly disregard anything out of focus.
• Color: Sometimes color is use to dominate a layout.
• Isolation: Contrast, scale, detachment or the generous use of white or negative space.
  •Basically this strategy insulates the visual content from its format, making it stand out from the rest of the layout
• Unusual shapes - uneven borders, ragged edges: Using the same borders or ragged edges on photos within a feature, website or book also maintain unity and continuity.
• Juxtaposition: Miscues can capture our attention. Specifically, it is featuring the main element of a photography or a design by facing it in the opposite direction of the other subjects, elements or components.
• Contrast: This may be achieved literally by putting dark things against light things and vice-versa or figuratively by juxtaposing images depicting opposite qualities- rich and poor, young and old, dead and alive and etc.
• Incongruity: Incongruity or ‘transposition’ pulls an element out of its normal content and gives it especially unusual, ironic, sarcastic or humorous spin. It may suggest, “something is wrong with this picture”.

Unity


• Unity refers to the overall cohesion and collection of a layout’s part, especially as each separate element relates to the rest of the designs parts.
• Headlines, text, artwork and the other graphic nuances of a page should fuse, be in harmony, or at the very least compatible with one another.

Optical Center


• The spot where the human eyes tend to enter a page. (Normally our vision gravitates toward an area on the page slightly above exact center and just to the left.).

Sequence


• Not directing your readers carefully through a design is misdirecting them.
• It’s your responsibility to route the readers through your publications and other media.

Visual Movement


• The occidental eye tends to move left to right and top to bottom.
• Therefore, most publications, images, and web pages are designed with that dynamic in mind.
• However the normal reading and visual processing patterns may be redirected by color, optical weight, strong entry points, and other strategies.

“Z” readout


• Our visual pattern makes a sweep of the page starting from upper left and normally exiting lower right.

Sequence pattern


• The more important the story, the higher on the page it is positioned.
• The left side of layout is more valuable (that’s why the advertisers like to buy left hand pages)
• Generally the more important something is, the more likely it will sit high and to the left.

Back to Principles of Design