Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15,...

11
Design factors • Content – Fig.s 4-49, 5-4, 6-3 • Organization – Fig.s 2-10, 2-11, 2-12, 2-14, 2- 15, 5-17 • Performance • Aesthetic • Security

Transcript of Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15,...

Page 1: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Design factors

• Content– Fig.s 4-49, 5-4, 6-3

• Organization – Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17

• Performance

• Aesthetic

• Security

Page 2: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

A Sketch of a Web Page using Nested Tables

This figure shows a sketch of a web page using nested tables.

Page 3: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

An Example of a Frame LayoutThis figure shows an example of a frame layout.

It is recommended to draw an example of what you would like your Web page to look like before you get started.

Page 4: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

An Example of a Form

This figure shows a sketch of a proposed registration form.

Page 5: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Linear Structures

In this structure you can jump only from one page to the next or previous page

Link to previous page

Link to next page

This figure shows one common Web page structure, the linear structure, in which each page is linked to the next and to previous page, in an ordered chain of pages.

Page 6: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Augmented Linear Structure

This figure shows an augmented linear structure, in which you include a link in each page that jumps directly back to the first page, while keeping the links that allow you

to move to the next and previous pages.

first link jumps to previous page

second link jumps back to beginning

third page has three links

third link jumps to next page

Page 7: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Hierarchical Structure

This figure shows the hierarchical structure, which starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics, and so on.

In a hierarchical structure, users can move easily from general to specific and back, but not from specific to specific.

Page 8: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Combination of Linear and Hierarchical Structures

This figure shows a hierarchical structure in which each level of pages is related in a linear structure.

information about the play

the scenes

each level is linear

information about the acts

over

all s

truc

ture

is h

i era

rchi

cal

Page 9: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Content• Commercial information

– Company background

– Product information

• Non-commercial information– Industry information

• Transaction– Order

– Payment

– Shipment

• Entertainment?

Page 10: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Web page design

• Static pages– Content stays the same at all times– Informative elements – Using HTML codes (usually)

• Dynamic pages – Content varies from one time to the next– Interactive elements– Using DHTML & JavaScript (usually)

Page 11: Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

Design elements

• Content– Document

– Form

– Graphics

– Multimedia*

• Navigation– Link

– Frame

– Button

– Image map

• Appearance– Text formatting

– Paragraph, Header

– Table

– List

– Color

– Special effect*• Rollovers

• Menus