EDIT 6325Ninghua Han

2009. 9

1

Design and The User Interface

Introduction

2

The key to designing any web site begins at the planning phase.

During the planning phase, a design strategy should have been established with input from the client and all members of the team.

The design should be simple, easy to understand, easy to use, and follow the design principles.

Metaphor

3

A metaphor is a figurative representation that links the content of your web site to an established mental model.

Well-designed and targeted metaphors can be powerful communication tools.

4

This electronic shopping cart is one of the established metaphor

for e-commerce.

They are all metaphors to link to corresponding content of the web

site.

Metaphor

Consistency

5

Consistency is an especially important component of a Web site.

It applies to both the appearance of each page and how the navigation scheme works.

6

Consistency sample: http://lacountyarts.org/

This is a main page of Los

Angeles Country Arts Commission

website.

Consistency

7

All the subpages of this Web site keep using same style. One hue

stands for one page.

Consistency

8

A template is a precise layout indicating where various elements will appear on the Web page.

A template can aid the design process in several ways:Provide consistencyShorten the development timePrevent “object shift”

Template

9

Template Sample:http://bestmoban.com/

This website provides many

website templates that can be applied

to the web pages or the

entire web site.

This a Korean style template.

Template

10

This a European

style template.

Template

11

The media elements should enhance the content.On Web pages, less text is usually better.The number of levels should be reduced.The content should be always accessible.The content should be easy for users to learn the purpose of the

Web site quickly.The texts and background should always be tested.

Content

12

Balance in Web page design refers to the distribution of optical weight in the layout.

Optical weight is the ability of an element to attract the user’s eye. It is determined by its nature and size.

Balance is determined by the weight of the elements and their position.

Balanced Layout

13

A Web site can have three kinds of balance:Symmetrical balance

This is 2009 GIVENCHY Web

site. It keeps the black and white color style and symmetrical

balance layout.

Balanced Layout

14

This is Previous GIVENCHY Web

site. It also use black and

white color scheme and symmetrical

balance layout.

Balanced Layout

15

Asymmetrical balance

This Web site arranges nonidentical elements on both sides of central line.

Balanced Layout

16

No balance

There is no central line

for this website’s layout to arrange

elements.

Balanced Layout

17

Movement relates to how the user’s eye moves through the elements on the Web page.

In western culture, the tendency is to move through the contents of the Web site by going from the upper left to the lower right.

Movement is especially important in training and educational Web sites.

Movement

18

Color scheme immediately convey information and set the mood or tone of the Web site.

The beginner should avoid trying to work with too many colors at one time.

It is easier to work with dark objects on a light background than it is to work with light objects on a dark back ground.

Color Scheme

19

Many Web authoring programs include preset color schemes that can be applied to Web pages and entire Web sites.

Other authoring programs include themes. A theme contains a color scheme that has unified design elements for bullets, fonts, images, navigation bars, and other media elements.

Color Scheme

20

Yellow is Kodak

company’s theme color. It’s website

also uses yellow as

their website theme color.

Color Scheme

Sample:

21

Color scheme softwareAdobe Kuler

Color Scheme

22

Color Blender

Color Scheme

23

Color Schemer Online v2

Color Scheme

24

The Web sites need to keep fresh and functional.

The best design strategy is to include basic information such as the following consistently on every Web page:Contact informationLast modified dateCopyright noticeLink to home pageFAQs

Independent and Functional

25

Unify is a desirable design goal in multimedia web sites and can be achieved by maintaining consistency in shapes, colors, text styles, and themes.

A web designer need to consider two types of unify: Intra-page unify and inter-page unify.

Unified Piece

26

All of the multimedia elements in this website

work together to

create a unified piece and stands

for company’s

mission.

Unified Piece

Sample

27

User interfaces are designed to give users direct control over the Web site and interact with the Web site without even thinking about it.

Interactive Interface

28

The Disney Web site is always visually appealing, functional,

and user-centered.

Interactive Interface

29

Users should be able to quickly locate and access information at the Web site, as well as be able to return to the starting point without hassle.

Studies have shown that users favor menus with a minimum of five to nine links.

Link Effectively

30

Web users rely on context to help them determine where they are within the hierarchy of information at a Web site.

The Web-page designer needs to provide functional and contextual cues for the users.

Sense of Context

31

The same theme color, consistent navigation bar, titles, footers, and links of the Disney Web site are all

reinforce the users’ sense of context.

Sense of Context

32

A well-designed Web site gives users the opportunity to establish an ongoing relationship with the company or organization.

Feedback

33

All the people should have equal opportunity to access to the multimedia Web site.

The designer need to check government Web sites or the World Wide Web Consortium Web site to stay current on the changing laws and ensure that the Web sites you design are compliant.

Equal Access

34

Stay current on accessibility

laws to ensure that the web

sites are compliant.

Equal Access

35

HTML, XHTML, ANDWeb Authoring