View
218
Download
1
Category
Tags:
Preview:
Citation preview
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
Recommended