Basic advice for website building

Here we have gathered some general concepts to be considered before, during and after the design of a Website, and we pay attention to the anatomy of a web page, this time from the point of view of its design. At the end of the page we provide some additional resources for you to learn more. We have gathered and adapted these ideas from different sources, during several years. All these ideas should really be taken into account: they’re all common sense, after all.

General concepts for a website preparation.

Many experts in usability theory or user-centered design will compare the requirements of the design of a website to the architecture of a public building. What it would seem to us inexcusable in such a physical place, is not permissible either in a page.

A website must have clear objectives, either educative, commercial, advertising... and the user has to know what to expect from the start, especially in information-based sites (generally speaking).

Navigation through the website has to be easy, intuitive, and consistent. The user must know where he is in each moment.

The interface has to be as consistent as possible through the website: a same colour code, use of typography, positioning of the navigation elements... They are there to provide, at the same time, clues to inform about the specific place where we are, with a certain variety within the homogeneity of the whole site.

Update the information and eliminate obsolete or expired parts. The present information or the new sections should be found quickly.

The new visual or plugin-based effects, not yet supported by all the browsers and systems, and other tricks musn’t constitute the nucleus of the website, especially if they involve non-standard elements.

It’s better to use colour with some restraint and good taste, consistently and reasonably. Take care that the text is easily legible with the chosen colours or even for people with some kind of sight impairment (colour blindness, for example.)

The text should be concise, well structured and easy to read. The reading in screen is not as pleasant as in the paper (it’s a good idea to also provide in some cases a more extensive version to print or at least have the pages especially prepared to print correctly with no waste of paper or extraneous elements in the printed sheets.)

Use the typography with attention to detail; do not to mix many fonts and sizes in each page. The essential information has to be present in the page as editable text —the one you may copy and paste—, not as “text” graphics.

Tener en cuenta el tamaño y formato de las imágenes. Utilizarlas de forma pertinente, no como simple ornamentación. Consider the size and format of the images. Try to include meaningful images, not only as an ornamentation. If some images are merely ornamental, you may consider including them not as embedded images, but as backgrounds specified through CSS.

Background images can be nice and interesting, and give a distinguishing touch, but they must be avoided if they get in the way when you try to read the text, or if they really interfere with the rest of the design.

You should design the pages thinking about all the users, not only those that have the best display screens, computers and programs. The design must be evaluated under different resolutions and verify its validity for each.

Animations should be used wisely; they can frankly be annoying and vulgar, and they should be used only for a good reason, for example to provide a visual explanation.

Frames are a source of problems for the maintenance and indexing of a website and they confuse many users. It’s preferable to avoid them altogether and to use lateral or horizontal navigation bars instead.

It’s better to avoid the topics and certain indications that were so frequent in the first years of the net, like as “in construction” or “you need this configuration... to see this page”. Someone considered these messages this way: let us imagine a television program that instead of being broadcast showed “in construction”, or “you need a television of the brand So and So to watch this program”... A ridiculous situation, isn’t it? And no, you really don’t need to include a visit counter, lame awards and other paraphernalia and litter.

Different kinds of web pages.

Here we consider some of the main alternatives for the design of the web pages and the sites, for different levels in their structure.

Typically, a website starts with a home page or “cover” from which spreads a series of section pages that allow to access the different pages with content: catalogue articles, pages, product lists, cards, forms... This essential structure can get more or less complex, for example, introducing different subsections and deepening therefore the structure. In general it is not a good idea to create a very deep scheme of navigation, because it may confuse many visitors; for very extensive websites a homepage with not too much detail is preferable because otherwise it can also confuse; it is preferable to connect with the main sections and from these, to unfold the structure.

The criteria to design the corresponding pages in each level are different, regarding the organization of the space, the use of colour and images and the choice of typography. In general, we can consider some restrictions for each of the three levels (cover/sections/articles) which we detail in the following graphic:

Of course, there should be at least a certain consistency in the graphical and typesetting style of the three levels: if not, more than different levels, they might seem different websites. We must consider if we decide on a graphic style based upon:

photography,
realist imagery,
simple images in black and white or in colour,
comics-style images or cartoons,
simple icons (symbols, signs, signals)

or even an acceptable combination of more than one of these options: beware of bad mixes, though: they are hard to digest. For example, in a restrained design, corporate-like, you may include simple iconic images, but you should avoid cartoony images.

Cover pages

The cover page is a decisive element of the website. Since it will be in most cases the entry point of our site, the image that this page projects must be the one we intend to: the visitor must guess at least what is offered at the site —or feel some curiosity to navigate further inside to discover by himself. It’s worth the effort, then, to design a really unique, attractive and functional home page. Proportionally, we’ll invest much more time in this page than in most other pages of the website, but don’t forget that this is only one page and you may have many others —sometimes hundreds of them— to develop before the project is up and running.

From the page index we must provide access to the main pages or sections of our Web, although it’s not a good idea to fill the space with long descriptions of these. If we want a general index that includes all the pages and sections, it’s more functional to add to a connection to a separate page with a comprehensive sitemap. The information-saturated style of many web portals and some blogs isn’t always recommendable for website projects; the excess of options can be intimidating and confusing for many visitors. Many webs that previously had this busy, overcrowded look have decided on a change in the cover and to make it simpler. Most recent portals and older portals redesigns tend to display a more reduced information load in the cover page.

The new features in the website can be announced, either with a small message, or with a link to a page where it is explained in detail. Services like Freefind.com automatically create a page with the new features, so it’s easy to know what’s going on at the site. But perhaps the best solution is adding a RSS feed, the most versatile and powerful system to let your visitors now if there’s new content at your website. Most CMS systems (used in blogs, for example) will create RSS summaries automatically when you add new entries.

In the home page it may be even easier to use visual language than written explanations. The texts must be concise and clear, indicating what we will find in the web or provoking the curiosity and interest of the visitor. Probably, it’s in the home page where we can use the imagination and creativity more intensely. A previsible structure is not necessary: we can, we must surprise and amuse. It’s a good place to use something with impact, like a film of Flash or some good mouseover effect. Beware with large file sizes, though! There’s nothing worst than a page that never seems to finish downloading. Your visitor probably will run away if he has to wait too long.

The best thing to find inspiration for your home page is browse the web and to see other inspirational sites. There are thousands of good ideas out there. Read magazines, open your design and art books, take a walk and look around. Some books are particularly useful for the design of pages, for example the very practical and utilitarian “graphic design recipe book” by L. Koren and R. Wippo Meckler.

Section and sub-section pages.

The Web must be based on well structured sections that logically group related pages. A section page will give access to related articles; when adding new articles it will be enough to add a new link to the parent section page. In order to identify the sections and to distinguish one from the rest, you may want to use a particular color palette for each section, perhaps a particular icon or an exclusive image.In many webs you will see a navigation bar in which it is indicated in what section we are with a different color, or similar modifications: just take a look at the navigation bar on the top part of this page. You will see the current section and subsection highlighted.

In order to decide the design of the section pages, we don’t have to forget the simplicity of changes or updates in the future; for example, there should be room for new links to the pages that will be added later. Finally, in most cases frames should be avoided. This navigation system doesn’t offer significant advantages compared to a navigation bar within the same page and, indeed, frames suffer a long list of disadvantages, and the fact most users hate them isn’t the least. Except for special cases, for example, a catalogue of product images, frames aren’t an advisable option.

Content pages or article pages.

These are actually the website pages that count. The rest is only the accessway, something we have to add to reach the content pages more easily. They are key parts of the whole website, of course, but most pages in a website are articles or other kinds of basic content pages. Like in a printed book: the cover and the index are only a tiny part of the weight of the book, but a good cover design is what makes many buyers decide on purchasing it or not.

Article pages should be designed with one special intention in mind: clarity. They should display their information being as user-friendly as possible. Use always very readable text, with an optimal layout and carefully measured line widths. The illustrations should not get in the way: they are there to add some more meaning, and the colour should be used with more restraint than in a cover page.

Distributing the text in columns, something so normal in printed media, implies some difficulties in web pages. The unity you see on your screen isn’t a paper sheet: it’s something else, a variable width window, and text in columns will not behave or cannot be read in the same way as you would in a normal paper page. This is something that some designers who come from magazine design field don’t seem to understand! The webpages are inherently something else and you cannot just apply all the tecnhiques you’re used to with your Quark Xpress or your Pagemaker.

One of the most practical solutions for page layout, and used very often is an assymetrical columns distribution. The narrower column contains links, additional information, small illustrations and other elements, while the main, wider column contains the body text and the bigger images.

Remember that when you’ve finished with an article, it shouldn’t be necessary to jump back to the parent level: the user has to have other options beside pushing the Back button. You should provide one or more navigation bars that carry the user to the main sections or subsections, anb buttons to go forward and backwards, and move around quickly in the page. If the article has a certain lenght, a button to go straight to the top of the page will also be welcome.

To learn more.

There are many good online resources to learn more about web design. Take a look at some of the following links, for a start:

La The Style Guide(formerly from Yale University), is the online version of one very popular textbook. Imprescindible.

La Sun Systems style guide, a document detailing every kind of ideas to develop well-structured and functional websites.

The Zen of Web Sites, another web with lots of interesting advice.

La The Style Guide from the Library of Congress of the United States.