Home arrow Style Sheets arrow Page 2 - Using the Rule Of Thirds for Web Page Layout
STYLE SHEETS

Using the Rule Of Thirds for Web Page Layout


Have you ever wanted to expand your web design skills and learn how to make your web sites more aesthetically pleasant to your visitors? You’ve come to the right place. In this group of articles you’ll find a friendly guide that will show you how to create harmonious web page layouts by using two fundamentals concepts taken from graphic design, popularly known as the Golden Ratio (or the Golden Proportion) and the Rule Of Thirds. This is the fourth part of a seven-part series.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 5
July 16, 2009
TABLE OF CONTENTS:
  1. · Using the Rule Of Thirds for Web Page Layout
  2. · Understanding the Rule of Thirds principle
  3. · Implementing the Rule of Thirds
  4. · The Rule of Thirds principle in web design layout

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using the Rule Of Thirds for Web Page Layout - Understanding the Rule of Thirds principle
(Page 2 of 4 )

As I expressed at the beginning, it’s possible to build harmonious web page layouts by applying another popular design principle called “The Rule OF Thirds.” But what is it, exactly? This principle is actually a simplified version of the “Golden Ratio.” It consists of dividing a composition (a web page in this specific case) into thirds, vertically and horizontally, in this manner creating a simple grid.

This makes sensed, since when the “Golden Ratio” is applied to a segment, the result is two segments where one is approximately twice the size of the other. So making this process simpler by dividing the original segment into thirds would produce similar results.

However, the best way to understand how “The Rule Of Thirds” works is by means of a graphic example. The diagram below shows how a web document whose whole width is 900px can be segmented into thirds of 300px each, which produces the grid that I mentioned before. Here it is:

As you can see from the above image, it’s extremely simple to create a background grid based on the “Rule OF Thirds” to build appealing web page layouts. Moreover, graphic editing software packages like Adobe Photoshop and Illustrator, among others, permit you to create grids like the one shown here in a snap, and export them directly as a background image on a web document. But actually, I’m getting ahead of myself, since this process will be discussed more deeply in upcoming articles of this series.

In the meantime, now that you have a clearer idea of what “The Rule OF Thirds” means, it’s time to learn how to apply it in the terrain of web design. With this idea in mind, in the next section I’m going to demonstrate how to build a three-column web page layout by using this rule.

To see how this will be done, click on the link below and keep reading.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials