Style Sheets
  Home arrow Style Sheets arrow Fundamental Design Principles for Web Page...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Fundamental Design Principles for Web Page Layout
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 6
    2009-06-25

    Table of Contents:
  • Fundamental Design Principles for Web Page Layout
  • The Golden Ratio law of proportion
  • Practicing divine proportion with an (X)HTML file
  • Applying the golden proportion to web design

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Fundamental Design Principles for Web Page Layout


    (Page 1 of 4 )

    Many web site designers build beautiful pages, but if you ask them why they constructed a particular page in a certain way, they'll simply say that it looked good to them. There are design principles that predate the Internet; some of them even go back to ancient Greece and Rome, and they're as applicable today as they were then. If you still make pages that look good without knowing the science behind good design, this seven-part article series introduces you to concepts that you can consciously apply to your next web site design project.

    Building web page layouts is, in many cases, a self-taught process that frequently lacks a solid theoretical foundation. Of course, this doesn't apply to all situations and all web designers, but in general terms, people start quickly positioning columns and sections within a web document using a table-less approach, and everything seems to work like a charm, since the design they’ve just created is rendered consistently across most modern browsers.

    Unfortunately, things begin to spoil rapidly when you ask these same people why they assigned determined dimensions to the layout containers of their web pages. Again, in numerous cases, the answer will simply be: because they look good! While this type of answer is bearable and even comprehensible coming from beginners, this is quite unacceptable from experienced professionals. 

    And it’s truly amazing to see how many professional-looking web sites are currently developed without a minimal background in the basic principles of graphic design in general. This fact proves two things: first, the content of a web site really is king (yes, I think I’ve heard that somewhere else before), and second, inexperienced people can build appealing web sites.  

    However, learning some of those fundamental design principles doesn’t hurt at all; in fact, the experience can be not only instructive, but fun as well. So, with that idea in mind, in this series of articles I’ll be demonstrating, with a decent variety of code samples, how to implement concepts like the “Golden Proportion” and “The Rule of Thirds” for creating consistent web page layouts.  

    Hopefully, by the end of this series, you’ll have a more solid idea of how to apply these principles with minor hassles for building appealing, harmonious web sites, in this way empowering your design skills.  

    Speaking more specifically, this first chapter of the series will gently introduce you to implementing the “Golden Proportion” when building a fixed web page layout, so if you wish to learn how to do that, then start reading now! 

    More Style Sheets Articles
    More By Alejandro Gervasio


       · This introductory part of the series explains how to take advantage of the Golden...
       · Your tutorial is superb. However, in the css it is not clear how you applied the...
       · Thanks for the comments. As the article clearly explains, the widths of columns are...
       · Thank you for your reply. The main column has 307pixels which is okay...
       · It’s clear. Just look at the CSS code more closely. The width of the side bar is set...
       · Hi,Thank you for your reply.Now it's clear.Cheers!
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 3 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek