The first thing you will need to consider when you create a web page is the size factor. Unlike printed design, where the output will always be seen under identical conditions, online design involves a discrepancy of viewing conditions. Not everyone has the same screen resolution and you have to be aware of this as you are setting up a design system.
(Click on image for larger size)
Until quite recently the smallest screen size which needed to be considered when designing a web page was 800 x 600, however nowadays we take 1024 x 768 as the basic smallest size. That said, 1024 x 768 does not mean that all of this space is available to you. Do not forget that the browser will be eating up quite a bit of this area. There will be a scroll bar on the right and the browser border on the left, and for these it is recommended that you subtract roughly 60 pixels from the width, i.e., 1024. On the top you will have the browser’s own interface components and for these you will need to factor in roughly 200 pixels. However, since people will be able to scroll down your web site the contents of the site can be as long as you need it to be. The important thing to be aware of is that informational and navigational components should stay within the the dark gray area of the diagram above, while the actual content of the site can and in most cases does flow downwards.
While many visitors of your site will in fact be viewing your work with a screen setting of 1024 x 768, there will be quite a few others that will be accessing your site with much larger screen resolutions. And thus one of the biggest challenges of web design lies in creating a site which looks good under all screen resolutions, so that people with small screens see all you have to show without getting a sense of being cramped, while folk with big screens do not feel that they are looking at a tiny “patch” which has no relation to the rest of what is displayed on their screen.
(Note: These size restrictions apply to all web pages, however are crucial to html web systems. Flash content can adjust it’s size to screen size settings and so Flash sites are far less restricted when it comes to size related issues.)
In almost all cases an html website will have three distinct areas which will need to be addressed during the design process: information, navigation and content.
Information: Put in a “header”, which is usually placed at the top part of the site, this is the area which gives information about what this site is all about and whom it belongs to. The name of the site, the owner’s name and contact info should be placed here. If you have a logo this is where that goes as well. If you have a corporate identity (color scheme etc), the informational area is designed according to the corporate identity standards. Usually this is the area of the site which gets customized and designed the most. As an example, background images as well as thumbnails which convey the content are often used to enhance the informational aspects of this section.
Navigation: This is the area where the buttons through which your visitors will access specific sections and pages are all located. This does not have to be one single area but can and often is broken up into 2, 3 or even 4 areas which are arranged to the left and right and the top or the bottom of the page. These buttons can be designed to look like buttons but can also just be plain text and in some cases even images.
Content: This is the text flow of your site. In a standard blog this would correspond to the posts, however any material to be read/viewed is content. As an example, what you are reading here, right now, is “content”. Quite needless to add, content can be text as well as visual material.
The following diagrams will give you some ideas as to how you can structure these three categories and you can obviously configure more of them based upon the basic principle:
The Grid: html websites are structured upon tables, which see to it that the visual components are aligned by default. Configuring this table and aligning visual elements within it are one of the most important phases of designing a website which “works” visually.
Unlike printed graphic design material, web sites are encumbered with a lack of enough elbow room to setting up effective semantic/informational hierarchies. When working in the printed medium designers will employ directional flow axes, which will “point” at informational components through usage of the negative (non-informational) space around them. Another tool for achieving this is “clustering” and yet another is the usage of diverse sizes for different visual and typographic elements. And all of these design tricks need one thing – negative space! However, when it comes to web design, we really do not have negative space since we are working within the boundaries of a tiny design “real estate” into which all of our content will somehow need to be placed in such a way that it all makes sense!
While during the early days of web design, all kinds of true design disasters based upon this lack of space were to be seen; in recent years graphic designers seem to have figured out a way of conveying very densely placed semantic hierarchies without having to resort to horrors such as animated gif headers and neon type ;-). The system which seems to have won a consensus for constituting good web design is actually not a new thing at all but can be traced back to medieval illuminated manuscripts, a time when book designers had a very similar problem concerning the lack of space, since book production materials were very costly and page space had to be used very efficiently. I am going to call this system “boxing”.
Typographic and visual material when placed into areas with distinct boundaries will create effective semantic hierarchies even when placed within a very small space and even in close proximity to one another, with no negative space to breathe and interact in. What seems to happen is that we visually organize the material that we are looking at through the actual boundaries of the boxes rather than the content which they hold. Once this perceptual organization has been achieved by the brain (within a matter of a couple of seconds at most) we seem to know exactly which way to go, what to read first, what second, where the headline is, what is more and what is less important on the page – even if things are placed at equal distances, have the same size and so forth. Thus web design, is more about generating a good system comprised of “semantic boxes” on a page, rather than placing type and visual material based upon their own inherent semantic hierarchy. The “boxes”, in short, become a design tool, very much in the way that book designers used them in medieval monasteries almost a thousand years ago!
An online application which I have come across may help with this sometimes quite difficult design task, especially when it comes to generating the code of your structure: http://960.gs/ The 960 grid system subdivides the page into many equal sized columns which are then utilized to create the bigger “boxed” areas of the table. This lets you subdivide the table cells in such a way that you can also create narrower columns within the table. So, I would definitely recommend that you try this out.