cis1203 web design principles - part 2

1

Designing and Organizing a Web Site

CIS1203

2

Learning Objectives1. Website layouts (slides 35)

2. Home Page (slides 67)

3. Website organizational structures (slides 817)

4. Accessibility (slide 18)

5. Usability & Consistency (slide 19)

6. Browser compatibility (slide 20)

7. Screen resolution (slide 21)

8. Color schemes (slides 22 24)

9. Contrast (slide 25)

10. Content (slides 2627)

11. Website navigational structures (slides 2841)

3

Website layout: 2 column layout header,

footer and two columns; navigation on

the left side

4

Website layout: 3-column layout header,

footer and three columns

5

Benefits of both 2 Columns and 3-Columns layout

2-Columns Layout:- Large content area

- Larger pictures

- Better font choice

3-Columns Layout:

- e-Commerce benefit by promoting their products.

- Online users focus more on the center

6

Home Page

Home page should answer basic visitor questions:– Who are you?– What do you do?– Where can I find what I want or need?– Why should I be interested in your products or

services?

7

Home Page

8

Website organizational structures

1. Linear structure– A series of pages linked in sequential order to

perform a certain task like registration or payment process.

– Advantage: pages flow in sequence.– Disadvantage: the user has to click through

several pages to move forward or backward.

9

Website organizational structures (continues)

2. Webbed structure– Pages are linked together without regard for how the

content fits logically– Advantage: users can move quickly from page to

page– Disadvantage: users can easily got lost within the

website

10

Website organizational structures (continues)

11

Website organizational structures (continues)

3. Pure hierarchical structure– Similar to business organizational chart– Information is organized in levels– Home page at Level 1 (top-level)– Main topic pages at Level 2– Additional details about main topics at remaining

levels– Advantage: site structure matches content

organization (topic oriented structure) – Disadvantage: users can get lost with too many levels

12

Website organizational structures (continues)

13

Web Site Organizational Structure (continued)

4. Mixed hierarchical structure– Combines structured organization with cross-

linked pages– Advantage: combines the features of both

hierarchical and sequential structures

– Disadvantage: users can get lost with too many levels

14

Web Site Organizational Structure (continued)

15

Website organizational structures (continues)

Site organization– Should enable visitors to find actionable content

quickly and easily– Be neither too flat nor too deep– Logical and intuitive

Avoid a structure that is either too flat or too deep– Structure that is too flat is uninteresting– Structure that is too deep is difficult to navigate

16

Website organizational structures (continues)

17

Website organizational structures (continues)

Extending this structure to add additional levels may create a too deep structure.

18

Accessibility

Web accessibility: Designing Web pages so that Web resources are available to people with disabilities

W3C guidelines for accessibility– Visual/auditory content is supported by alternative

content– Color alone should not indicate a link– Suitable contrast for background/foreground colors– Simply worded text– Navigational links are clear and consistent– Page content is consistent across all pages

19

Usability & Consistency

Web usability– Designing Web pages to help all visitors

accomplish their goals at a site quickly and easily Consistency across all pages

– All pages should have a common “look and feel”– Elements in same position– Standard color scheme

20

Browser compatibility Browser compatibility: Different browsers

might display websites slightly different Make sure pages are running the same in

different browsers such as IE, Firefox, Chrome, Safari…etc.

Page layout– Fixed-width pages fit in a maximized browser

window for a specific screen resolution– Liquid design creates pages that size with the

browser window

21

Screen resolution

Should have a mobile version of website for mobile devices

Screen resolution is the number of dots on the screen.

Popular screen resolutions include 800 x 600, 1024 x 768, and 1280 x 800

22

Color Schemes The phrase color scheme implies a certain

harmony between the colors. Given a harmonizing set of colors, a reasonably

designed layout will "come together.

In the absence of harmony, colors can clash or otherwise affect each other badly.

23

Color Schemes

Powerful communication tool Wrong colors may communicate the

wrong message Color suggests emotion and

associations Adding color changes the look of

pages without adding to file size

24

Color Schemes

Contrast

Contrast: Use dark text color on light background or the opposite.

What is wrong?

25

26

Content: Design Options– Use simple, direct language avoid industry

terminology– Use bulleted and numbered lists– Use dark text color on light background– Use a familiar font and at least a 12-point font size– Check spelling and grammar, and proofread– Less text is usually better because more content

requires more levels– More levels add to confusion and frustration for user – Reduce levels by providing hyperlinks (links)– All multimedia (graphics, animation, sound, and

video) should complement content, not be the focus

27

Make sure content always accessible Users do not read a Web page; they scan

it, looking for keywords/links First-time visitors to a Web site generally

spend less than 60 seconds on the Web page

Web site must capture visitor’s interest Text still the primary element used to

convey information; text must be readable Always test your color and background

combinations

Content: Checklist

28

Website navigational structures

Characteristics of good navigation1. Clear text labels or icons

2. Easy to use

3. Consistent across all pages

4. Aligns with the meanings of the content

5. Attractive to the users

29

Website navigational structures

Navigational elements (internal links)1. Embedded text links

2. Clickable table of contents and top-of-page links

3. Navigation bars

4. Navigation menus and tabs

5. Breadcrumb trail

6. Site map

7. Rollover links

30

Website navigational structures (continues)

1-Embedded text links– Link positioned inside a paragraph– Text in link should clearly describe what page

visitors will see• Use Zax Phones• Do not use Click here

31

Website navigational structures (continues)

2-Clickable table of contents and top-of-page links– Use to navigate between topics on a long Web

page– Allow visitors to read subtopics and return to the

top of the page without scrolling

32

Website navigational structures (continues)

33

Website navigational structures (continues)

34

Website navigational structures (continues)

3-Navigation bars– Navigation bar is a series of graphic or text-based

internal links– Often found at the top or bottom of Web page

35

Website navigational structures (continues)

36

Website navigational structures (continues)

4-Navigation menus and tabs – Navigation menu is a list of internal links– Navigation tabs are similar to file folder tabs– Both are used to conserve space on a page

37

Website navigational structures (continues)

38

Website navigational structures (continues)

5-Breadcrumb trail– Hierarchical navigational outline– Provides visitor with feedback on path taken to

current page– Use in conjunction with other navigational

elements

39

Website navigational structures (continues)

40

Website navigational structures (continues)

6-Site map– Web page that shows a summary of all the linked

pages at the site

7-Rollover links– Hidden links that appear when mouse is “rolled

over” an animated image– Avoid rollover links

41

Website navigational structures (continues)