Home arrow Style Sheets arrow Fundamental Design Principles for Web Page Layout
STYLE SHEETS

Fundamental Design Principles for Web Page Layout


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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 13
June 25, 2009
TABLE OF CONTENTS:
  1. · Fundamental Design Principles for Web Page Layout
  2. · The Golden Ratio law of proportion
  3. · Practicing divine proportion with an (X)HTML file
  4. · Applying the golden proportion to web design

print this article
SEARCH DEVARTICLES

Fundamental Design Principles for Web Page Layout
(Page 1 of 4 )

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! 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- 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...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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