Home arrow Style Sheets arrow Using the Golden Ratio in Liquid Web Page Designs
STYLE SHEETS

Using the Golden Ratio in Liquid Web Page Designs


At first glance, some basic principles of graphic design like the “Golden Proportion” and the “Rule of Thirds” seem to have nothing to do with web design. But the truth is that they can be perfectly applied when creating web page layouts to make them look more pleasant and harmonious to the human eye. If you wish to learn how to implement these two fundamental principles when building your own web sites, then keep reading. In this series of articles you’ll find an approachable guide to putting these concepts into practice with both fixed and elastic web page designs.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 6
July 02, 2009
TABLE OF CONTENTS:
  1. · Using the Golden Ratio in Liquid Web Page Designs
  2. · Review: using the golden ratio for a two-column web page layout
  3. · Using the golden proportion to build an elastic web page design
  4. · Including the previous CSS code in a basic (X)HTML document

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using the Golden Ratio in Liquid Web Page Designs
(Page 1 of 4 )

And now that you’re aware of the topics to be covered by this group of tutorials, it’s time to summarize the contents of the previous article (the first one in this seven-part series). In that part of this series, I offered a brief introduction to the golden ratio, explaining what it is, and how it can be utilized for building truly appealing web page layouts.  

Quite possibly, one of the most attractive aspects to applying the golden ratio in web design is that it only requires a basic notion of its meaning and historical origins, and practically nothing else. From that point on, even inexperienced designers can take advantage of its benefits by using a calculator or software that calculates this proportion for them. It’s that easy.  

Now, returning to the topics treated in the previous tutorial, in that case I demonstrated how to apply the golden ratio to building a fixed web page layout composed of the classical header and footer sections, a side bar and finally a content area.  

However, as the title of this article suggests, it’s possible to implement the golden ratio with liquid designs as well. In the next few lines I’m going to develop another practical example that will illustrate this process in a step-by-step fashion.  

Does this sound good to you? Then jump forward and start learning how to use the divine proportion for creating elastic web page layouts! 


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 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials