Menu
08/08 2009

Web Design Process

What are we trying to achieve?

As soon as we realize that we need to plan a site before even touching the computer we allow ourselves to think freely and give ourselves the chance to produce a quality piece of work. In order for a Website to fulfill it's requirement, it has to have a few key features:

  • Clear Navigation
  • Atmosphere
  • Organization
  • Hierarchy
  • Clever Design Concept

As the Web has developed and people have got used to the fact they can access information on the internet, more and more of them now expect a level of visual stimulation. This is achieved through the key features mentioned above.

Your design should fit the content, never the other way around, so the main stage of the design should be organising the content into a solid structure and in turn generating a sitemap of the hierarchy of the Website.

Preparation

Find out as much information as possible about the subject matter for the Website. The best way to do this is to gather all of the existing literature for the company or organisation such as brochures, letterheads etc. If these don't exist, then you should find out as much as possible by discussing the site with the client.

Another thing to keep in mind right from the start are all the main core issues to do with building any Website. This comes naturally after you have built a few sites but is quite important with regards to keeping the build flowing and looking ahead for any potential issues.

The lists below cover most of the things I have come across over my time Designing and building Web sites. If there are any I have missed, please contact me:

User environment

  • Browser's and minimum versions including Safari
  • Plug-Ins
  • Colour Depth
  • Screen Resolution
  • Accessibility
  • Droppings allowed (cookies)
  • Connection speed

Content Issues

  • Languages?
  • File and Folder Naming conventions
  • Meta keyword tags
  • Page Titles
  • Updated / Reviewed dates
  • Statistical expectations

Host Environment

  • Host/ISP information
  • Security – FTP access
  • Proofing site?
  • Backup server plan?
  • Hacker testing?
  • Proof delivery, final delivery location
  • Domain names registered / hosted

Server

  • Operating system (Win/Linux)
  • Server type
  • Script languages/Versions
  • In-built modules (PEAR)

When all this is in your mind you can go ahead and start with stage one of the main build.

Stage 1

Brainstorming can and if done properly, will unlock the interesting points behind your site and this is where you need to be creative and use a bit of intelligence. You need to identify the goals of the Web site and when brainstorming the site you should come up with all the points and areas relating to the following questions:

  • Why does the client need a Website?
  • What will this website accomplish for their business/organisation
  • What product or idea are we selling?
  • Who is the main audience? Are there other audiences to consider?
  • What do we want the client to do after their experience on the Website?
  • What is the overall message of the Website?
  • Who is competing for the audience's attention?
  • Anticipated hurdles/limitations?

Site Map - information architecture

First you will need to have done some brainstorming on your content. You need to have an outline so that you know how many pages there are and what information will be on each. With this information in hand you will build your site architecture, which should keep you organized.

To build your site architecture, you should 'map' out your content in a flow chart format. This will help you to visualize and prioritize your content. In a site flow chart you can measure how many clicks away from the home page everything is. You want to ensure that the information that is the most important is the least amount of distance from the home page. Providing architecture for your site is very important especially if you have a lot of material to present. When developing your flow chart remember that your goal in doing so is to identify how you want users to move through your site. It is also important to include databases and menus in your flow chart as a reference map to follow while you are building the site.

Developing content

Now that you have your site architecture figured out you should be pretty well organized to write your content.

Remember that your copy (text) should be organized as you would for an essay or report. This means that you should have obvious and meaningful titles and sub-titles to divide up your information. Information under these titles should relate directly to them. People surfing the internet tend to skim read so in order to find the information they are looking for, readers will often evaluate content through the page's titles.

When it comes to online copy 'less is more'. Don't clutter up your copy with junk. People tend to read less online than they would if they were holding a magazine or newspaper. Keep your paragraphs short and to the point -never try to fluff things up, it will only work against you.

Here are some guidelines for online copy:

  • Use good titles and sub-titles to organize your content.
  • Keep your content well edited and to the point.
  • Use HTML to mark up your text where appropriate (this is also good for search engine ranking).
  • Keep your font sizes in check. Titles should really never be bigger than 30px. When titles are too big it is analogous to screaming. Keep a good variation in your text sizes. If everything is 30px tall then nothing has emphasis.
  • Keep your line length down. If your website is set at 100% width, then hard code a width for your paragraph. It is very difficult for a reader to move from one line to another when your text block is 1000px long.
  • Left-align blocks of text. Reading a block of text that is centered is very difficult.
  • Break up your text. When a visitor sees an endless flow of text that goes on forever they can be easily turned off. Use images as examples to break up the text, use more than one page, or simply trim it down.

Let's Begin to Design

The best way to design a website is to pick your favorite photo-editor such as Adobe Photoshop, and build the whole site as a graphic first. Building in a photo-editor allows you to constantly second guess yourself and acheive a better look through your self-editing, revisionary process. This is also a good way to proceed because once you have achieved the look you want, you can use the document to slice up the graphical elements that you want to use.

Note: Although it is a very difficult thing to do, you must constantly ask yourself - "does this really need to be here?". One of the best things you can do for a website is give it enough room to breathe. Rule of thumb: Keep a good portion of your page available for "white space".White Space: is that area of a document or website that has no text or graphical elements. The importance of white space is that it provides the viewer with a place to 'rest' their eyes. It also allows the text room to breathe. When text is written right up to the edge it feels cramped and is difficult to read.

Navigation

Navigation is a very important part of your site. You need to ensure that people can get where you most want them to go easily. For larger sites you may have menu items that contain other menu items also called 'cascading menus' or 'drop down menus'. How many items you have in your menu will help you decide how to lay it out.

Generally there are two types of navigation, vertical and horizontal. While it is ok to get creative on your site, you want to ensure that your number one goal is achieved through your menu - good navigation. People are used to the two aforementioned types of menuing and therefore it is usually best to stick with them. Try to keep as much of your information as possible as close to your root (home) page. A good rule of thumb is to allow your menu to have one sublevel - two if you must.

Shell

Your navigation should form part of the site's shell. It is important that you maintain a consistent design for your site so that people retain a sense of 'where they are'. This is not to say that every page must have the same layout but if you are going to get creative with different page layouts then certain recognizable elements should remain the same and your navigation should be included in these. Generally a site's shell can be divided into these common parts:

  • Header - contains information to identify who you are and what you do. (logo, tag line, color)
  • Navigation
  • Footer - usually contains copyright, address, links etc.

Shell Dimensions

There are two categories of dimensions: Fixed Width and Flexible Width.

Fixed Width:

Most of the Internet still designs for a standard 800px x 600px monitor. If you are going to design a fixed width site, it is recommended that your site is no wider than 760px. The extra 40px allows room for scroll bars and the browser frame. To accommodate larger monitors consider centering your site on the page.

Flexible Width

Designing a flexible width website is accomplished using percentages as widths instead of pixels. As mentioned before, you should keep in mind that someone with a large monitor will be seeing things differently than someone with a smaller monitor.

Fixed vs Flexible Widths Tip

Check your display frequently at different monitor resolutions and make your compensations for both.

Grids

Using an underlying grid to layout your page is key in organizing the forms on your page. The perceived lines of the grid lead the viewer's eye up and down and from side to side. If the elements on your page are near a grid line, move them to be directly on the line. Aligning elements with each other also helps to give your page visual structure by strengthening the feeling of the grid.

Grids do not have to be checkerboards, nor do they have to be symmetrical, or vertical, or horizontal. Grids can be diagonal, overlapping or whatever you can come up with. What you are trying to attain is the division of your page in a regular and easily comprehensible way. In this fashion the relationship of the elements on your page is made clear. Using a grid to structure your page is a guideline. Sometimes you can draw attention to an element of importance by 'breaking the grid'.

In website design there are two areas called 'above the fold' and 'below the fold'. Depending on how you are designing your site, you will want to take into consideration what a viewer will see before they have to scroll down. The area that is first viewable is said to be 'above the fold' and is a very important area. If you overwhelm your visitor or don't provide the right content here, they may continue surfing and give your site a skip before they've even bothered to scroll down. Make good use of the grid here to show your visitors that your site is clear and easy to use.

Color

On the web we work in a color space called RGB (red, green, blue). RGB is an additive color system seen by projected light. When all of the colors are on our screen at once we see white. You ADD colors to get white.

CMYK it is a subtractive color system seen by reflected light and therefore used for printing. You SUBTRACT colors to get white.

When we reproduce these colors for online viewing we use a hexidecimal code to tell the computer how to translate the color. It is a 6 character string -mouse over the swatches at right to see their hexadecimal codes. Each grouping of two characters stands for a value of either red, green, or blue.

Using combinations of shades and tints of these colors is one way that a designer may choose a color scheme.

Using these colors in different proportions will give a different mood to your site.

Remember that there is a psychology to color. People associate different moods with different colors. If you were building a site for tropical travel destinations you would probably want to use warm colors to give a sunny warm atmosphere and provide your clients with the feeling they are looking for in the subject matter you are presenting. Use color psychology to your advantage. It is not very complex but rather quite intuitive.

Remember how large type font can be compared to visual screaming? Well the same comparison can be made when using bright, highly saturated color. Generally it is best to use subtle coloring on your site except for in areas of emphasis. Another good rule to remember is that the best color combination for reading is black text on a white background.

Before you launch - checklist

Navigation

  1. clear and easy to use.
  2. Does not have too many 'tiers'.
  3. All links are tested and work.
  4. All areas of your site are easily accessible.

Color

  1. Shell and main elements are consistent throughout pages.
  2. Review at 8 bit, 16 bit and 32 bit.
  3. Text color is easily readable.
  4. There is not too much 'screaming' color.

Graphics

  1. Images have height and width attributes.
  2. Images have description labeled in 'alt' attribute.
  3. Images are optimized.
  4. There are no unecessary graphics.
  5. Download time has not been compromised by too many graphics.

Compatibility

  1. Testing at the very least has been done in Internet Explorer, Netscape, and on a Mac.
  2. Testing at 640 x 480, 800 x 600, and 1024 x 768 monitor resolutions.
  3. You have tested for plug-ins and provided links to downloads where needed.

Design

  1. You have included white space.
  2. You have page organisation through use of a grid.
  3. You have defined a mood for your site that relates to the subject matter.
  4. You have not cluttered your page.

Production

  1. Page Title, META keywords, META description have been added.
  2. Page has been spell checked and proof read.

Links

  1. Links have been tested.
  2. There are no links to files residing on your hard drive.
  3. All links leading off of your site open in a new window.

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the html and css category. Here are some other related articles also in this category.