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 – 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)