Download 2 - Business Information Management

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
1
• To Get Neat Stuff on the Net, Copyright Law(exercise)
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
2
Analysing and Planning
GOOD WEB DESIGN BEGINS WITH THOROUGH 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
3
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?
4
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?
5
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
6
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
7
Identifying Your Target Audience
Knowing 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
8
Good Web Design
Good 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…
9
Good Web Design
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 Scrolling
If page height > web screen height = Vertical Scrolling
You must know the screen area you are working on
Monitor Type
14”, 15”, 17”, 19”
Resolution Settings
640x480, 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.
10
Good Web Design
11
Good Web Design
Print Design Example
Entry Page
Table of Contents
Chapters, and Pages
index
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.
12
Good Web Design
Key navigation aspects are;
– Sense of location
Awareness of the current context or location of a page!
– Link choices from a page
Railroad > driving in roads > on see or in the air > Web!
– Return to previously read pages
New location  return safely to starting point!
13
Good Web Design
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?
14
Good Web Design
Effective Web Design
• Focus
Group information in a logical order and organize your content.
Relavant Information
• Consistency, Contrast, Functionality
The larger your Web site, the more attention you should pay to
maintaining consistency across your pages.
• Efficiency
Consider dial-up users too.
15
Good Web Design
Effective Web Design
• Navigation
Useful navigation structure
• Portability
Everybody may not use all the latest Web technologies
• Maintenance
Keep your site fresh and up to date
• Feedback
Learn from the others
16
Good Web Design
Navigation
Home
1
2
3
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
17
Good Web Design
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.
18
Good Web Design
Ideas for Organization and Navigation
19
Good Web Design
Ideas for Organization and Navigation
Hierarchies
20
Good Web Design
Ideas for Organization and Navigation
Combination of Linear and Hierarchical
21
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
22
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
23
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
24
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
25
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
26
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
27
Web Design Model
Phase 1:
Front- and Back-End
Analyses
Phase 2:
Design and
Development
Phase 3:
Web Site Testing
28
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
29
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
30
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
31
Summary
• Basic Principles of Web Design
–
–
–
–
–
Nonlinear Presentation
One or Two Screens Per Page
Simple Navigation
Smaller Graphics Files
Phase 1:
Appealing Visual Effects
Front- and Back-End
• Web Design Model
Analyses
Phase 2:
Design and
Development
Phase 3:
Web Site Testing
32
• 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
33