Designing the Elements of a Web Page - Designing the Grid
(Page 3 of 6 )
Before I go through the initial template design that will bring consistency to the page designs, let me give you a little reminder on content structure before the crazy splattering of information begins.
Keep the text length short; do not create very long pages no matter how interesting. If it is that interesting, split it into sections. The attention span of the visitor is short so the page content should follow suit.
Create a balance between too much content and a short paragraph. Stick to the salient points. Remember, the visitor is here to be informed and not to be intimidated by reams of information. Should the task of looking for cheap flights take a whole day to figure out? Of course not.
The first page will be the home page of the site. It needs to be designed correctly against the site theme and visitor interests. Going too heavy on the graphics is another balance issue that usually occurs at this point. Most people will not care about the graphic design skill of the designer unless the site is aimed at impressing a target audience who want to see flashy graphics. Concentrate on the consistent layout of the menus and content.
The main design ethic with graphics is the use of metaphors. Use graphical symbols that are familiar to the visitor and not some ambiguous graphic that results in confusion. It is all about semantics -- the meaning or interpretation of the graphic. This also applies to words or sentences. There are familiar symbols such as the UP and DOWN arrows, the PLAY and STOP symbols on the DVD recorder, etc. Use these familiar references and visitors will not get confused by graphical buttons and links.
Of course, there is no issue with using plain textual links throughout the site. In fact, most sites that concentrate on the content satisfy their visitors with this method. That said, if flash authoring is an attraction, create a nice appealing flash header at the top of the page, or a flash menu. If drawing is a skill that can be utilized, try Adobe Illustrator or Macromedia Freehand and weave some illustrative graphics for the site. As long as the balance between content and graphics is kept in mind, this will never be a problem.
Take a look at the mock representation of the initial design grid for the home page below:
This is very generic and serves merely as a guide to keeping the design consistent and intuitive. At this point, this is being designed on paper. It can also be done in Dreamweaver's design view or even Photoshop for slicing later. It is not important to decide on the final graphical look here though. This grid shows the generic areas.
At the top there is the top menu. This may be omitted if sufficient menu options are in the main menu. This depends on how many categories of links are needed. Look at the network diagram to decide what menus will be created and what the text links will read.
Below that sits the branding and the flash header. The animated header is not a requirement. If there is a visual message that can be conveyed through a little flash animation, this is a good place to insert that message. It can also vary in size and cover maybe two thirds of the page depending on what links need to be present on the home page. It may be noticed that there are sizes and font types inserted. This may be a good idea in deciding on the consistency of style.
The branding is a focal point and an absolute requirement. This is the site logo and mission statement. The branding is normally tight against the left hand top corner with the mission statement below the logo. For example look at YouTube and LoveFilm's branding:
Both are in the top left of the page. The logos are straightforward yet very powerful in invoking a branding that will be remembered. The mission statements help give more power to the branding -- "The best way to rent DVDs" and "Broadcast Yourself."
As far as the page width is concerned, designing against higher resolutions such as 800x600 and 1024x768 is pretty standard. The content section in the middle is normally the wider space. The sub menus on the left are again not required; it depends on the hierarchy structure of the information.
If the site has a great deal of content, do not squeeze the content width section too much. A general guideline is around 70-80 characters per line. Learn to use style sheets too. These can be used to define the entire layout as shown in the grid. The style sheet can define the margins, widths, length, colors, font type and size, border width and much more. This will reduce the repetition in the HTML code when designing the pages.
The right hand side of the grid shows "Ad Space." This is by no means required to be here at all. Neither does it need to be on the right hand side of the page since advertising can be placed in the other sections too. It is worth considering the possibility of advertising revenue and allowing for space somewhere; see the section on white space later in this article.
Let us absorb some important design tips next.
Next: Web Design Tips >>
More Web Standards Articles
More By Stephen Davies
/ 4 
