Chapter 4 Webdesign

8/3/2019 Chapter 4 Webdesign

1/19

Chapter 3

Building an E-commerce Website


2/19

A Systematic Approach

Design of web sites undergo a life cycle

called System Development Life Cycle(SDLC)

SDLC is a systematic and orderly

approach to solving system problems:Planning

Systems analysis

System designBuilding the system

Testing the system

Implementation and Maintenance


3/19

Systems analysis

Business objectives: A list of capabilities

you want your site to have

System functionalities: A list of types of

information systems capabilities you will

need in order to achieve the business

objectives

Information requirements: Theinformation elements that the system

must produce in order to achieve the

business objectives


4/19


5/19

Logical Design


6/19

Physical Design


7/19

Dynamic page generation tools

The contents of a web page are stored

as objects in a database, rather than

being hard-coded in HTML

Different Web application servers existthat are capable of understanding and

translating the dynamic web

development tools:CGI, ASP, PHP, cold fusion, JSP, etc

need specialized servers working together

with the web servers


8/19

Web Application Servers Software programs that provide the

specific business functionality requiredby a web site including Catalog

display, Transaction processing,

Audio/video server, Auction server,B2B server

Web server software does not provide

these tools. Hence it has to worktogether with web application servers


9/19

Tools for Interactivity and Active Content

For the Client Side:

JavaScript / Microsoft's VBScript: Aprogramming language that is used to

control the objects on an HTML page

and handle interactions with a browser

Java Applet: Java is a programming

language that allows programmers to

create interactivity and active contenton the client machine -- thereby saving

considerable load on the server

Microsoft developed ActiveX


10/19

For the Server Side Java server pages (JSP): Like CGI and ASP,

a web page coding standard that allowsdevelopers to dynamically generate web pages

in response to user requests

Cold Fusion: An integrated server-sideenvironment for developing interactive web

applications

PHP: (Hypertext Preprocessor) an open source

general purpose scripting language that isespecially suited for web development and can

be embedded in to HTML


11/19

For the Server Side Common Gateway Interface (CGI): A set

of standards for communication between abrowser and a program running on a

server that allows for interaction between

the user and the server Active server pages (ASP):A proprietary

software development tool that enables

programmers using Microsoft's IISpackage to build dynamic pages


12/19

Other things to consider Personalization Tools

Online customer tracking tools such as logfiles containing customer visit history --- asin the cookies and data capture functionsof web servers

Tools to identify customer paths andpreferred responses such as data miningtools

The Information Policy SetPrivacy policy:Accessibility rules:Financial reporting policies


13/19

Web page Design Process Four primary aspects of web design:

Content: includes the form and organizationof a site's content. It must be able to inform

and persuade users

Visual: the screen layout used in a siteincluding graphics elements for decoration

or navigation

Technology: used to implement the site

such as HTML and those client side and

server side interactivity techs

Economics: to give purpose to the site or

reason for the site to exist


14/19

Step 1: Talk about Goals Important Question to address:

What is the mission or purpose of theorganization

What are the short and long term goals of

the site

Who are intended audiences

Why will people come to your site

Will they come back if they come to visit

your site at all Establish a clear, well documented idea of what

you are about to do

Measurable goals


15/19

Step 2: Audience Discussion Profile your audience: who they are, what

they want to do Create scenarios for each user group: tales of

users visiting the site

Competitive analysis: involves evaluating thecompetitors sites based on some features and

criteria such as download time, page size,

layout, look and feel,


16/19

Step 3: Requirement Specification Questions to address:

What pieces of content does the site need? What sort of functionality will be required?

Identify content and functionality

Get your Content Inventory

Group and label content Define major sections of website

Technical Requirement: the type of

technology required Visual Requirement: the design parameters

like fonts, colors etc


17/19

Step 4: Site Structure The skeleton that holds the body / content

together Logical Structure: shows how the user

views things

Physical Structure: URL, File paths etc Site Structure listing

Architectural Blue Print

Global and Local Navigation System


18/19

Step 5: Visual Design Layout Grid: is a tamplate that describes web

pages showing positions of content,navigations, branding ...

Design Sketches and page mockups: are

used to establish the look and feel of the site

Mockups: represent the actual site, by

integrating the design sketches with layout

grids. They do not necessarily include content.

They are the basis for a web-based prototypes /even actual site


19/19

Documenting The process1. Goals

1. listed composes the first chapter of your documentation after Introduction

2. User Experience

1. Audience Definition2. Scenarios

3. Competitive Analysis (Summary)

3. Site Content

1. Content Grouping and Labeling

2. Functional Requirements

3. Technology Requirements

4. Visual Requirements

4. Site Structure

1. Site Structure Listing (Summary)

2. Architecture Blue Print

3. Global and Local Navigations

5. Visual Design

1. Layout Grid (Including the diagram made)2. Position of Navigation

3. Design Sketches

4. Page Mock-ups (Including graphics)

5. Web based prototype

6. Appendix

1. Appendix A: Competitive Analysis

2. Appendix B: Content Inventory3. Appendix C: Complete Site Structure Listing (Optional)

Documents

Chapter 4 Webdesign