Archive for November 2011

Consistency In Web Design



The human mind constantly searches for patterns in everything that it sees everyday, striving to find the unified picture as a whole. If the mind cannot find pattern in what it is seeking, it has a high tendency to look elsewhere.

When doing web design, it is important to design the website in such a way that makes it easier, not harder for the mind to see the pattern. It must be clear to a visitor he is still at the same site.

If objects with similiar functions are grouped together, its function will be easily understood and remembered. When designing an interface, it is important that all similiar tools used for navigation and accessing information should stay consistent. The webpage font, style, colour, layout, mouse over effects should also stay consistent. When the user clicks a link, he must recognize the connecting page is similar to the previous one, failing to do so will make the user confused and will prompt him to visit other websites.

If there are sound or animation used in navigation, the sound and animated effect should stay the same in all pages. For example, if an animation is turned on by clicking a flash button, it should be done the same way in the rest of the webpages.

One method of ensuring consistency is to use Cascading Style Sheets (CSS). By defining standard style properties in another document, it is possible to achieve the same look and feel to all your webpages that use the same style sheet. A style sheet, for example, can be used to make the text on every page 12 pt Verdana, all headings (h1) orange..etc. If the style of the site needs to be changed for any reason, only one document needs to be updated. Without style sheets, doing manual adjustments on every page is tedious and often result in errors and inconsistency.

Another way to promote site consistency is to use templates. A website template is a document that defines the structure of muliple pages in your site. For example, if the header and footer are standard across all pages in your site, they can be attached to the body of your document via an automated process, saving you time and typing errors. Many web editing softwares such as Dreamweaver offer templating function. Server-side technologies can also do the same job easily.

Consistency is very important in website design because it makes the reader do less thinking. Time is money. Your reader wants to find the information he needs quickly. Inconsistency design only slows down their surfing speed and make them lose interest in your site easily.

Web Design – Quick Navigation



The website should have a good and quick navigation buttons on the site. We know that not always the search engine finds your home page in the search results. If the search engine finds a page or link in your website, the user will not have options to go to the home page or any other page especially if you do not have short cuts or quick navigation links on each pages of the web site. In most cases, if a user ends up with a web page from your web site without a quick navigation links. They would go back to the search results and go for the next search result.

Such dead end pages should not be in a web site. These dead end pages will waste all the time you spend on the web design, the contents, the special graphical images and the search engine optimization. The main problem for not having a quick navigation link on the pages is that the users will not know how to go back to the previous page or home page, since the page remains a dead end.

The main cause for such errors is due to that web designers build websites having the front door facility. They believe that any user that visits the website will start his journey from the home page. However, you should understand that the search engines rank websites and the web pages. Therefore, there are high probabilities for the pages to be on the search results.

Most websites have site maps that can help the users to find all the information on links and web pages on the site. This can help in most cases for users to move and navigate around the site without much problem. At the same time, the links have to be in working condition and should download quickly. These are all the factors that have to be kept in mind while designing a web site.

Web Design – Project Lifecycle



The process of designing and developing a website can be quite overwhelming and challenging. A lot of thought, effort and discussions lead to the launch of a ‘perfect website’. Knowing how hard the entire process is, it will be a good idea to divide the website development process into different stages. This will also lead to effective team management and proper control to achieve maximum quality. Following are the steps of a web design project lifecycle:

1. Analysis

Why do you need a website? Make sure you have an answer to that one before even thinking of going further. It is particularly important in the case of Business Websites. A business must analyze why it wants a website (a business model) – to promote the business, generate revenue or offer support to customers. The website is going to a part of the system. How the web based application or website will help the existing system or the business should be basis of the analysis.

After analyzing requirements from a business perspective, it is then time to focus on user needs. Make sure you can clearly classify your target audience and establish functionalities the user will require. Never assume that you know what a customer wants. In fact it will be a good idea for a business to consult actual or potential users and discuss key factors that might affect the website (from a client’s perspective).

Input: Interviews with clients, supporting documents and mails, discussion notes, model sites etc.

Output: Cost, Size of Team, Hardware-Software requirements, supporting documents, approval, work plan

2. Specification

A ‘functional’ specification is a blueprint or a detailed plan of the website. After carefully considering business and user requirements, the next stage will be to form a website specification. What should be included in the menu, how content will be structured, how tasks should be generated etc. are some of the questions to be answered at this stage. A designer gets information on what should be presented and the programmer concentrates on functionality. Prototypes, mocked up web pages or illustrations of how a website will work are also prepared at this step.

3. Design and Development

Drawing from the information gathered in the above two stages, it’s time to determine the look and feel of your site. The web designer will create one or more prototype designs for your web site. A lot of suggestions and changes to be made are exchanged between the client and designer at this stage. Design is concerned with how the website looks and if it fits the client requirement. User Experience (UX) and Usability both come into play here. And once the layout/design is finalized, it will be safe to move to the next step of developing. The developmental stage is the point where the website itself is created. The developer takes all graphic elements from the designer and uses them to create an actual functional site. Developing requires a lot of technical knowledge and programming. Content writing for the website is also done in this stage. You can hire professional content writers or write the content yourself.

Close interaction between the design and development team is necessary at this stage. A well designed functional website should be the ideal output at this stage.

4. Testing and Delivery

At this stage, the entire web development team comes together to have a close look at minute details and test the website. Following is a checklist of things to test on your website before launching/delivery: (there are various tools and testers available online)