Web Site Design Process

Steps to a well designed Web site

Analysis Design Development Implementation Evaluation and maintenance Promotion

Analysis
Identifying client requirement Analyzing the target audience Define the site objective

Identifying Client Requirement

To create a Web site that satisfies the client, you must have a clear understanding of the client requirements. The important questions that you must ask are: Why does the client need a Web site? How would the Web site impact the existing business setup of the client? The answers to the above questions would indicate the purpose of the site.

Analyzing the Target Audience

Who is the information for?
Do you have more than one audience? Can you serve them all with one Web site?

What are the information needs of your audience? What are their habits, characteristics, culture, technical capabilities, etc.
Are they likely to start with the Web or another information source?

Attributes of the Target Audience

User demographics
It include various characteristics such as age, gender, technical proficiency, and access methods, they influence the content and design of Web sites.

User goals
Why would users visit the Web site? Why would they return to the site?

User activity patterns

To use a specific service, provided by Web site, a user would have to follow a certain procedure, which includes a set of action.

An understanding of user activity patterns can greatly help in devising efficient methods for performing activities on a Web site.

Cognitive pattern and psychology

To understand the characteristics and behaviour of a target audience, we can use concepts from field of learning psycology.

Defining the Site Objectives

Define the objectives based on an understanding of the client and user requirements. Attributes of Web site:

Site Functions and Features

What does the cient expect from the Web site? What does the user expects from the Web site?

What would enhance user performance on the site?

What unique features can the site offer that its competitors are not offering? The answers to these questions would help you identify the functions that the site is expected to perform.

Defining the Media Elements

Defining the Project Magnitude (Scope)

Design
Design site struture Design the visual interface and layout of elements Creating prototyes and obtaining feedback

Designing Site Structure

The structure and navigation of a Web site should be designed to link the relevant topics throughout the site, without making the user feel lost in documents.
We can use different web design models: Linear Tree-Like Dynamic Structure

Use different approaches where appropriate. They can be mixed together on the same site.

Linear Hypermedia
Markup enforces linear structure (examp1)
Table of Contents

next

.
prev

Linear Hypermedia
Appropriate for:
Naturally linear content (converted book, documentation, lengthy content)

Advantages
Simple navigation, easy to understand

Disadvantages
Limited navigational flexibility,inappropriate for more complex content

Tree-Like Content
For hierarchically-structured content Markup, page structure defines the hierarchy
Web site with subject areas Web site as a catalog, or index
acts as a drill-down database interface

Tree-Like Content
H

Tree-Like Content
Design issues Need extra navigational tools for the user Design must distinguish location, place within the collection Need to carefully design hierarchy according to desired functions Common design for all documents Distinguishing design features for different places in the hierarchy Consistent navigation model tools placement

Dynamic Structure
Documents generated dynamically, from a document database.
Customized content, based on user preferences Content automatically updated as new content is added. In principle, allows for content structured using complex database queries.

Dynamic Structure: Issues

Cost
Need sophisticated backend databases Need structurally marked-up data (SGML, XML) Complex programming to generate content

Design
Complex design for navigation, indexing

Site Structure (How)

Home Page

Subject Area

Subject 2

Subject 3

Detailed Content

Detailed Content

Detailed Content

Site Structure (cont)

Level 1 - Home page
The <h1> Heading catches your attention
Make it the same as the <TITLE> metatag, Both echoing the domain name and target keywords.

The <h2> sub-heading draws you into: The introductory text, which communicates:
The site Purpose The site Contents

The objective of the Home Page is to stop visitors moving on immediately.

Home page usability issues

Design the home page to make sense for an 800 x 600 display without scrolling Intuitive navigation links then enable you to go deeper into the site for specific content. Multiple menus or routes Keep it fast, with very limited graphics on the home page.

Site Structure (cont)

Level 2 - Subject Areas
Based on destination content areas Expand on the Keywords for each area.

Level 3 - Detailed Content

As appropriate Maximum 3 clicks to access any content.

Designing the visual Interface

Identify the various activities involved in designing the visual interface of a Web site. The visual interface is the first thing that users notice on the web. Designing the visual interface of the Web site involves the following activities.

Identify a theme
Designing on paper Defining the interface controls Designing the interface graphics

Web Page Layout

Layout of web pages is very important Poor layout makes for Difficult navigation Hard to locate information on page Visually unappealing

Tables, tables, tables!

Use tables to lay out your pages! Make the table borders invisible A 2x2 table works well

Areas of a Web Page

Logo

Header

Menu

Content

A 2 x 2 Layout

Table within a table

The outer table

The inner table

Centered with three columns

Complicated design

Development
The Development stage involves the following activities Creating graphics Creating Web pages and templates Writing codes and backend development Developing and integrating multimedia components Usability testing

Creating Graphics
It include the images, buttons, or other graphics controls that form the visual interface. For creation we can use Photoshop or Macromedia Flash. Graphics should be optimized.

Creating Web pages and Templates

Select any web language such as HTML for creation of web pages. The basic structure of all pages is the same. Pages can be created using number of techniques such as text editors, HTML editors or WYSIWYG editors

Writing Code and Backend Development

Some commonly used technologies for background applications and procedures are:

Common Gateway Interface(CGI)

JavaScript Databases

Too many graphics for most home users.

Few graphics makes it more accessible to everyone.

Development (Cont)
Developing and Integrating Multimedia Components
Identify the multimedia components used in Web sites. Main elements are audio, video and animation. These elements make the interface more interactive and pleasurable for the user.

Usability Testing
The aim of usability testing is to incorporate user feedback in the design process, thereby ensuring maximum user satisfaction.

Implementation
To make the Web site available on the Web, you must transfer the site and all of its associated applications and resources from the development server to an actual Web server. Web sites are uploaded in two steps: Staging the Web site Uploading the Web site

Staging the Web Site

Before a Web site is uploaded on the Web server, you can perform a final testing of the Web site on a staging server. A staging server duplicates the actual server platform, but can be accessed only by the client and a test group of users apart from design team.

Testing Site Performance

Browser compatibitlity Down load time Broken links Accessibility Usability

Proofreading and Debugging

Uploading a Web Site

Booking a domain
The domain name of Web site determines the URLs that are used to address Web pages. We can register a unique domain name or use a hosting server account to address the Web pages. Example for XYZ Inc. URL can be http://wwwXYZ.com or http://www.LMN.com/XYZ (LMN is service provider)

Buying server space to host the site Uploading data on to the Web Server
Using FTP we can transfer files on the Web.

Testing the site on the server

Evalution and Maintenance

Evaluating a Site
During the site evalution, we may find problems in the following areas: Content User interface Technical

Conducting Periodic Evaluation

Maintaining a Site
Update a site Documenting the Site Maintaining Backups

Maintain it
Dates need to be correct Services need to be up-to-date Hours must be correct Peoples names, email addresses & phone numbers need to be correct Prices need to be correct Explore new technologies & encourage innovation

This document is living in the past.

Characteristics of a good web site

Well-organized Easy to navigate Attractive Useful Up-to-date

Make your site well-organized

Decide how you want to organize your information based on your users and what you know about them Ways to organize your site:
by department or organizational chart by audience type
marketing

by subject

Organized by department.

Organized by audience type.

Organized by subject.

Make your site easy to navigate

A well-organized generally drives the ease of navigation. Keep scrolling down to a minimum by keeping individual Web pages short. Always have links back to your home or major sections. Use color to identify for users where they are in your site.

No scrolling necessary to start navigating.

Standard tool bars and a brief menu for easy navigation.

Make your site attractive

Choose simple colors that compliment each other & work on most web browsers. Keep graphics less than 20,000 Bytes (20 kilobytes) to make them download reasonably on a home modem. Keep animated gifs to a minimum. Use graphics that compliment your image.

An example of a very unattractive site (best viewed online).

Toyota provides a balanced, attractive Web site.

Avoid backgrounds that wash out your text.

Make your site useful

If you are unique, youre already useful! If you are not unique, how do you differ from similar Web sites?
Is your content unique? Is your approach unique? Is your audience unique? Are you more up to date? Are you better organized? Are you more comprehensive?

Keep your site up-to-date

In an organization, make this part of someones job. Pay them to do it. Its worth it. If a person is currently the documentation person or the flier person, consider that person to be your Webmaster.

Ways to present information

Hierarchical organization Image maps Tables Frames

Hierarchical organization
Menus in progressive order of most general to more specific Pros
always gives impression of organization

Cons
Not really necessary unless you have a collection of something Makes user travel through a number of levels to get to their information

Hierarchical organization.

Image Maps
Links are in an image or picture Pros
Allows for greater artistic creativity Dont need to use browser-dictated fonts

Cons
Takes longer to download Can be tricky to set up

Imagemaps can provide easy means of navigation.

Tables
Standard text, images or links are arranged in tabular format with or without borders Pros
Allows creator to place items on a page Looks neat

Cons
Can be tricky, but tables are amazingly useful to the designer.

Tables provide Web designers with control over layout.

Tables also provide simple organization of information.

Frames
Divides the browser's window into two or more scrollable areas Pros
Can provide an area that makes updating or changes very simple Can help with navigation

Cons
Used improperly can make a huge mess!

Frames can be used to provide a static navigation window.

Static navigation windows can be along the bottom.

Tips for frames

Use in a site that rarely, if ever, goes out to other links on the World Wide Web. Use a frame to hold a static banner at the top or bottom. Use a frame to hold a navigation bar at the top, side or bottom of your Web site.

General Things to Remember & Consider

Emulate a site you like. Try your color scheme before you get too far. Keep things simple. Use the ALT attribute in the IMAGE tag
provide alternatives to framed sites and graphic intensive sites

Provide a search function if possible.

Test text colors against background colors.

General Things to Remember & Consider

Avoid requiring users to fill out a form to gain access to your site. Avoid a counter unless you know that will enhance your site and that the number will impress whoever its supposed to impress. Dont link to something that is going to exist in the future.

General Things to Remember & Consider

Avoid having more than one spinning, whirling, clicking, moving icon or graphic on a page. Make hyperlinks intuitive so as to avoid the click here text. Dont advertise other products or companies unless it meets your goal, generates revenue or helps your audience.

General Things to Remember & Consider

Avoid detracting from the image of your excellent Web site by posting all of your awards on the front page. Provide text toolbars when appropriate. Provide templates to multiple Web developers to maintain a consistent look. Develop standards for your Web site.

General Things to Remember & Consider

Limit fonts and headings on each Web page. Attempt to use HTML tags that have layout built-in to ensure a layout, such as a hierarchical listing. If you are familiar with hard-copy page layout principles, use them in Web design.

Remember Your Hard-Copy Publishing Rules

For example
Provide white space for easy readability Limit font usage and typeface usage Limit text column width Balance graphics and text on a page Use complimentary colors with contrast Standardize on a heading font and text font Balance the page layout with top/bottom and right/left margins

Suggested Page Elements

Organizations logo or seal Authors e-mail address Mailing address, phone Documents URL (helpful when printing) Links to related local pages Navigational aids: button/text bars

Internet service provider

An Internet service provider (abbr. ISP, also called Internet access provider or IAP) is a business or organization that offers users access to the Internet and related services. In the past, most ISP's were run by the phone company. Now ISP's can be started by just about anyone. They provide services such as Internet transit, domain name registration and hosting, dial-up or DSL access, leased line access and colocation. Internet hosting services run servers, provide managed hosting, and include the Internet connection.

Some Good Design of 2005

http://alistapart.com/

http://orderedlist.com/

http://www.folietto.at/

http://avalonstar.com/

Designing an online Bookstore (case study)

Analyzing the Requirements for the web Site
Identifying Client Requirements :
Client wants We want to sell maximum number of books to customers and at the same time provide an environment and experience that entice a customer to visit our site again and again. The Web site should be a one-stop online book store for children.