1

Basic Principles of Web Design• Analysing and Planning

– Setting The Site Goals– Identifying Your Target Audience

• Good Web Design– Web Screen, Resolution– Key Navigation Aspects– Ideas for Organization and Navigation– Effective Web Design

• A Web Site Design Model– Nonlinear presentation– One to two screens per page– Simple navigation– Small graphics files– Appealing visual effects

• To Get Neat Stuff on the Net, Copyright Law(exercise)

2

Lecture Objectives

• Understand the basic principles of Web design• Understanding a Web design model• Put the design principles and model into context• Design multipage Web sites

3

Analysing and Planning

• Who will work on the project

– Organizing the team (Management Roles, Creative and

Editorial Roles, Technical Roles)

• What are the goals of the project

– The clearer your goals the better!

• Who will use the finished product

• How will the project be implemented

GOOD WEB DESIGN BEGINS WITH THOROUGH PLANNING!!!!!!

4

Analysing and Planning

• What is the purpose of the site?

• What are the site goals?

• Who is the target audience?

• What functions will target audience perform while at the site?

• What/where is the content?

• How will the content be structured?

• How will users move through or navigate the site?

5

Setting the Site Goals

At this point in the process, you need to have answers to a few key questions:

• What is your company’s mission?

• Describe your company’s strengths and weaknesses.

• Whom do you see as competitors?

• Where do you see your business in 90 days, one year, and two years?

• What challenges do you see in achieving your business objectives?

• What business objectives/issues should this site address?

• Who are the targetted users?

6

Setting the Site Goals A few Sample goals for public Web Sites;

• Sell product/Services

• Increase public awareness of company/product/service

• Recruit potential employees

• Entertain

• Educate

• Communicate with customers

• Disseminate information

• Provide updates to product/services

7

Setting the Site Goals

A few Sample goals for private Web Sites;

• Faciliate employee communication

• Enable employees to self-maintain HR information

• Educate

• Archieve business documentation

• Track employee vacation time, billable time

8

Identifying Your Target AudienceKnowing who your target audience is can greatly affect how do you design and develop your Web site.• User group

• Functions Performed

• Ages

• Gender

• Web Experience

• Target Platforms (Operating System,Typical Home /Work User,

connection speed, Screen Resolution, Browser)

Examples:

- Parents/friends, view bus routes, 25-60, Male/female, Average

- Potential employees, research jobs, 18-25, Male/female, Avobe Average

- Potential campers, Research camp, 11-17, Male/female, Average/Above Average

9

Good Web DesignGood Web Design is not concerned with looking “flash” and “cool” but aims to help the reader locate and assimilate information more rapidly.

. Web Screen, Resolution, Display Properties

. Effective Web Design

. Ideas for Organization and Navigation

A good starting point for you:

. Just because you can, doesn’t mean you should.

. Always think about your site from the user’s point of view.

. Navigation is structured around the user’s needs

. Content, content, content…

10

Web Screen, Resolution, Display Properties

… Visual Disabilities …Frame of Reference … the screen that you will see on the monitor

If page width > web screen width = Horizonal ScrollingIf page height > web screen height = Vertical Scrolling

You must know the screen area you are working on

Monitor Type14”, 15”, 17”, 19”

Resolution Settings640x480, 800x600, 1024x768, 1152x864

As a result, display properties for a web design;means the best view settings for your page, where depends on yur purpose of your page.

Good Web Design

11

Good Web Design

12

Print Design Example

A technical book is organized in an information hierarchy of Entry Page, Table of Contents, Chapters, Pages and index. It may divide chapters into further levels of related information.

Entry Page

Table of Contents

Chapters, and Pages

index

Good Web Design

13

Key navigation aspects are;

– Sense of locationAwareness of the current context or location of a page!

– Link choices from a pageRailroad > driving in roads > on see or in the air > Web!

– Return to previously read pagesNew location return safely to starting point!

Good Web Design

14

Ideas for Organization and Navigation in On-Line

Though the shortest one, all the contents would have a lot to talk about.

So, you must plan, organize and present your information by a group of structured rules.

What is the best way to make a web site readable?

What should be your principals?

What information will be or could be grouped together?

Looking at each group, how should the information within the group relate to each other?

What other relationships or connections between information should or could be present?

Good Web Design

15

Effective Web Design

• FocusGroup information in a logical order and organize your content.Relavant Information

• Consistency, Contrast, FunctionalityThe larger your Web site, the more attention you should pay to maintaining consistency across your pages.

• EfficiencyConsider dial-up users too.

Good Web Design

16

Effective Web Design

• NavigationUseful navigation structure

• PortabilityEverybody may not use all the latest Web technologies

• MaintenanceKeep your site fresh and up to date

• FeedbackLearn from the others

Good Web Design

17

Navigation

User A, entering the site from page 1 through the search results, but s/he can not see the home page or the other page!

No HOME, BACK or FORWARD links

Home

1 2 3

Good Web Design

18

Navigation

User B, can access any page from any page of the site.

Every page should feature a link back to the HOME. Where a page forms part of a sequence, NEXT and PREVIOUS links should be addes.

Good Web Design

19

Ideas for Organization and Navigation

Good Web Design

20

Ideas for Organization and Navigation

HierarchiesHierarchies

Good Web Design

21

Ideas for Organization and Navigation

Combination of Linear and HierarchicalCombination of Linear and Hierarchical

Good Web Design

22

Principles of Web Design

Web Design Differs from Print Design

• Nonlinear presentation

• One to two screens per page

• Simple navigation

• Small graphics files

• Appealing visual effects

23

Nonlinear Presentation

• Multidimensional• User / visitor / student-centered• Non-sequential• Multimedia approach

– Using more than one medium simultaneously

• NOT– Linear or sequential– Writer / producer / teacher-centered

24

One or Two Screens Per Page

• Home page– Complete picture of site– Includes corporate name, logo, key

information

• Content pages– Hyperlinks for

• Background information• Explanations• References

25

Simple Navigation

• Hyperlinks grouped together

• Each hyperlink connecting one category– Products– Services– Investor relations

• Hyperlinks placed on left, right or top of screen

• Common file technology

26

Smaller Graphics Files• JPEG

– Joint Photographic Experts Group– No more than two 50KB JPEG pictures– Navigation buttons smaller than 5KB

• GIF– Graphics Interchange Format– GIF images 1-2KB each

• Small graphics = speedy download

27

Appealing Visual Effects• Appropriate use of

– Style– Color– Layout

• Text– 10 pt Verdana 11pt Arial or 12pt Times New

Roman

• Color contrast– Light background, dark text

28

Web Design Model

Phase 2:Design and

Development

Phase 3:Web Site Testing

Phase 1:Front- and Back-End

Analyses

29

Phase 1.

Front- and Back-End Analyses

• Needs assessment (self and client)

• Client hardware & software evaluation

• Web technology trend analysis

• Web site cost-benefit analysis

• Selection of Web development tools

30

Phase 2. Design and Development• Home and content pages• Text fonts, styles and color• Horizontal lines and tables• Hyperlinks and navigation buttons• Email links• Frames and forms• Graphic arts and images

31

Phase 3. Web Site Testing• Local-host testing

– Test on developer’s computer

• Server-side testing– Test between server and

developer's computer

• Client-side testing– Test with various

configurations and browsers at different places and times

32

Summary

• Basic Principles of Web Design– Nonlinear Presentation– One or Two Screens Per Page– Simple Navigation– Smaller Graphics Files– Appealing Visual Effects

• Web Design Model

Phase 2:Design and

Development

Phase 3:Web Site Testing

Phase 1:Front- and Back-End

Analyses

33

• Write clearly and be brief

• Organize your documents for Quick Scanning (use headings to summarize

topics, use lists to summarize related items, don’t forget link menus, don’t

bury important information in text)

• Don’t use browser specific terminology

• Spell check and proofread your documents

• Don’t overuse images

• Use alternatives to images; use ALT attribute of the <IMG> tag.

• Use headings as headings

• Group related information within a page; separate sections visually

• Use consistent layout; (each section usually has the same page layout) use

consistent page elements and forms of navigation

• Use links if they are useful for your readers; explicit and implicit navigation

links, definition links or footnote links

• Use link back to home

• Use copyright info

• Don’t split topics across pages