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:
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.
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:
When all this is in your mind you can go ahead and start with stage one of the main build.
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:
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.
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:
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 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.
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:
There are two categories of dimensions: Fixed Width and Flexible 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.
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.
Check your display frequently at different monitor resolutions and make your compensations for both.
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.
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.
This article is in the html and css category. Here are some other related articles also in this category.