Basic web page structure and layout

kunal — Thu, 26 Nov 2009 12:04:01 +0000

Once you’ve sorted out the site map, avoid firing up your graphics package. It’s a good idea to sketch out page layout ideas on paper before working on your PC or Mac. Not only is this quicker than using graphics software, but it also allows you to compare many ideas side by side. At this stage, you shouldn’t be too precious about the design—work quickly
and try to get down as many ideas as possible. From there, you can then refine your ideas, combine the most successful elements of each, and then begin working on the computer.

Although the Web has no hard-and-fast conventions, themes run throughout successful websites, many of which are evident in the following image of a version of my Snub Communications homepage.

A website’s navigation should be immediately accessible—you should never have to scroll to get to it. It’s also a good idea to have a masthead area that displays the organization’s corporate brand (or, if it’s a personal site, whatever logo/identity you wish to be remembered by, even if it’s only a URL). The homepage should include an introduction of some sort that briefly explains what the site is about, and it should have some pull-ins to other areas of the site. These pull-ins could be in the form of news items that link to recent product launches, completed projects, and so on.
Most websites require a method for people to contact the site owner, and at least one clear link to a contact page is essential.

Avoid constantly changing the design throughout the site. In print, this sometimes works well and provides variation within a book or magazine. Online, people expect certain things to be in certain places. Constantly changing the position of your navigation, the links themselves, and even the general design and color scheme often creates the impression of an unprofessional site and makes it harder to use.

Ultimately, however your site ends up, and whatever your design, you need to ensure your creation is as usable as possible. A good checklist—even if the points may seem entirely obvious—is as follows:

Is the site easy to navigate?
Is it easy for users to locate content on each page?
Is it easy for users to find what they need on the site?
Are download times kept to a minimum?
Is the site suitable and relevant for its target audience?
Does the site use familiar conventions?

If you can answer yes to all these things, then you should be on the right track!

Information architecture and site maps Before you begin designing a website, you need to collate...

Related posts brought to you by Yet Another Related Posts Plugin.

csslearn.com » web page structure

Basic web page structure and layout