A recent survey was done asking a group of university students 'Which website has the best design'. There was no clear agreement and each student had their own preference ranging from simple, light and basic text-based sites to heavy Flash based sites with animation at every turn. What this survey showed above all else was that there is no 'right' way to design a website. Imagine how dull the internet would be if all web sites were identical and provided the same information.
|
"The three main components that typically make up an effective website are content, style and function." |
The three main components that typically make up an effective website are content, style and function. Content is primarily the text and pictures, the part of the site that 'tells the story' and gets your message across. Style is the look and feel of the site. Style deals with everything from the page layout and eye catching graphics to the way content is displayed and even the look and feel of the navigation. Function is what makes it all work and come together, it is actual working of the navigation, taking visitors from page to page.
Deciding where to start depends on the type of web site you want to design. Should it be design or functionality led? The answer in most cases is neither. The starting point for any successful web site should always be strategy first. Here are two examples, an online bank and a branded soft drink producer's site. The online banks web site will obviously be driven by functionality, since without it the site would be useless. Consequently the soft drink producers site may be driven more by design to make it more appealing but the functionality aspect can not be ignored either. In the end not many customers would use the online bank if it did not look appealing or nice and the soft drink site if it were to produce server errors all the time would not make the brand look too good.
One you have a strategic plan in place the next step would be to design or sketch out the layouts and overall look and feel of your pages. There are a few ways you can do this varying from using colored pencils and paper, Photoshop or similar programs or even using HTML. Using HTML however may take more time and effort so it comes down to personal preference and how much time and money you want to spend on the layouts.
Hue, Saturation and Luminance
Color would have to be one of the main elements that make up a website and can also ruin the whole image of the site if you don't design and select your colors carefully. Some sites out there use color to their advantage and know what colors compliment each other while other sites out there are just a complete mess of colors. Some common mishaps or disasters involve blue text on a red background, foreground and backgrounds so similar the text is almost impossible to read and light brown on a yellow background, which is commonly used.
The first step you need to take if you want to combine colors well and create easy to read text is to forget the red, green and blue and start thinking in terms of Hue, Saturation and Luminance (HSL). HSL is used in almost every graphics package including Photoshop and Paint Shop Pro. Hue is the base shade and is expressed in terms of a circle. At zero degrees you will get red, 120 creates blue and 240 for green. Saturation is the strength of the color and the luminance is the amount of light present.
When you work with HSL, if you fix two of the values and vary the other you will usually get a variety of colors that combine well with each other. Sometimes however you may want color pairs with strong contrasts instead of colors that look nice together. To create this effect simply pick colors from the opposite side of the color wheel and add or subtract 180 from the hue value.
To create the look you want, it is always a great idea to design a range of creative sites, especially if you re designing it for someone else then they can have a choice of what they would like. On the other hand if you are designing a site for a well established brand name then you will most likely be restricted to their colors and logo as it most likely would already have a strong and well established look. You will also have to take into account the target audience you are aiming at as this will affect the sites function and overall design. For example a site designed for the porn surfer will look very different to a site aimed at computer technicians.
Another aspect you may consider is nationality. If you take a look at some Japanese sites compared to western designs you will find various differences. As I outlined before there are so many design choices that you can create. Design a variety of different looks and be bold. Let your client choose the one they like. After all they are the ones paying the bills. Whatever you do, be creative.
Testing your site is an absolute must if you do not want users complaining about the design and functionality of your site. It is often a good idea to test each page as you buildit and check that the links are correct and that everything is functioning as it should. If you leave the testing till the very end when the site is complete chances are you will only be able to make minor tweaks until the next substantial redesign. It is a great idea also to set up a test panel using your friends, family or co-workers as they will give you the honest feedback you need to improve the site.
You should also test your web site across all the common browsers, machine types and operating systems to ensure that it operates how you want it no matter who is viewing the site. At the start of this article I mentioned the survey and how each student had his or her own preference of which site has the best design. Although they were all very different they all had some common factors that made them a good design; they did not make mistakes with color; they all had well designed and functioning navigation and all were easy to read. Sticking close to these guidelines should ensure a successful website design.
SUBMIT