Web Design by Jack Davis

1
Web Designby Jack Davis

• Based on
• The WEB WIZARDS GUIDE TO
• WEB Design
• by James G. Lengel

2
Chapter 1 Planning A Web Site

• Chapter Objectives- identify and describe the
  audience- site purpose- plan site structure-
  communications through site- planning table for
  a site

3
Audiences/Users

• Yahooligans!http//www.yahooligans.com
• Fidelity Investmentshttp//www.fidelity.com/
• National Oceanic and Atmospheric
  Administrationhttp//www.NOAA.GOV

4
Audience/Design

• YahooligansChildren - limited choices -
  pictures - simple words
• FidelityAdult Investors - information
  advice - quick and easy access to info.
• NOAA wide audience - researchers,
  meteorologists, and people who need weather
  information

5
User-Centered Design

• Organization-centered- built from company point
  of view- company vocabulary and structure
• Technology-centered- uses a particular set of
  tools- designed based on technology
• User-centered- considers target audience- what
  they need and how they work

6
Defining the AudienceDemographics

• age
• gender
• geographic location
• residence urban, suburban, rural
• level of income
• level of education
• race or ethnicity
• interest
• history (path of Web pages previously visited)

7
Defining the Audience

• Who are they?
• Why are they at the site?
• How did they get there?
• How old are they? Whats the age range?
• Where do they live?
• What gender? Why?
• How wealthy?
• History of dealing with this organization?
• What are the common characteristics?

8
Audience Definition

• The audience for the LeftyStuff Web site is
  potential purchasers of LeftyStuff products who
  have responded to one of LeftyStuffs banner ads
  and are interested in items designed especially
  for left-handed people Most are adults, equally
  divided among men and women, between 25 and 50
  years of age, who live in the United States or
  Canada, are sports-minded, and have family
  incomes greater than 50,000. Most have never
  visited the site before.

9
Sites Purpose

• What the users will be trying to do and why?
• Part is stated in the audience definition and
  part is in the organizations goals.
• Organization- increase the direct online sales
  of - make it easy to find the right item -
  easy to make purchases (credit card)-
  communicate the organizations goals

10
Financial Times News

• http//news.ft.com/news/home/us
• Whats the purpose of the Financial Times Web
  site?- provide news and advertising- ???
  (other)
• How would you define the audience?- age, gender,
  economics, history, ???

11
Goals Objectives

• Statement of purpose should contain both goals
  and objectives
• Goals state the desired long-term results, such
  as- to increase the direct online sales of
  tennis racquets by 30 over the next year-
  provide a wider range of services to readers

12
Goals and Objectives

• Objectives include specific means and methods
  used on the site to accomplish its goals- to
  provide online readers of the newspaper with
  hourly updates of key news stories

13
Organization and User Purposes

• Both types should be included in the purpose
  statement.
• A user-centered objective might be,to promote
  intelligent conversation about XYZ among all
  audiences
• An organization-centered objective to expand
  and broaden the reach of the program so it makes
  a greater impact on American education.

14
Evaluating Success

• How will you know if the web site achieves the
  goals?To measure you must have stated measurable
  goals and objects. Some measures might include-
  how much did product sales go up?- how many new
  readers registered?- how many hits on the
  site?- how many return hits?- how many e-mail
  requests?

15
Site Purpose

• Goals of the organization
• Goals of the user
• Objectives for display
• Objectives for interactivity
• Objectives for communication
• Objectives for technology

16
Planning Site Structure

• The layout of a web site typically includes each
  of the pages and functions of each part.
• It typically consists of a flow chart and a
  detailed written statement of functions.

Home Page
17
Complete Site Structure
Home Page
About the Home Page
Calendar of Events
Teaching Resources
Institutes
Faculty and Staff
Forums
Teaching Units
Discussion Topics
Faculty Pages
Synchronous Chat
Publications
Multimedia
18
Component Descriptions describes whats included

• Teaching Resources SectionThis is the largest
  part of the site, contains materials to help
  teachers integrate media and democracy topics
  into curriculum Teaching units full text
  available on-line Publication references to
  print and on- line publications with links
  Multimedia video, audio, image and slide
  material

19
Function Descriptions describe how the site works.

• Functions- Dynamic home page program staff
  need to change images and text on the home
  page weekly, without reprogramming- Database of
  resources viewers need to be able to search
  and retrieve teaching units from a large
  collection. Program staff need to be able to
  add new units to this database easily and
  index them.

20
Goal Function Description

• A good way to develop the sites structure is to
  list the goals and objectives specified. Then,
  for each one, write a statement of functionality.

Purpose
Structure
Calendar of Events section Viewers will find
a listing of various types of events
workshops and institutes, offered by the program
staff. Online discussions and chats offered by
the program. Viewers can search events by
topic, date, and other criteria.
To inform audiences about XYZ happenings.
21
Speccing Out the Flow Chart

• Adding important characteristics to the flow
  chart will make it more useful.- filename-
  graphics to be used- menu items- multimedia
  elements- input forms - etc.

22
Web Site Components

• Text most efficient for many types of
  communication (html)- Text to be printed is a
  problem, one solution is to use PDF files
• Images (gif, jpeg, others)
• Multimedia- animation (Macromedia Flash)-
  sound, video- virtual reality (VR)

23
Interactivity is the keydifference in Web
applications

• Users are interactive when they
• choose (select their next topic or page)
• participate in animations (usually via choices)
• search find
• buy sell
• manipulate (move screen objects)
• construct
• converse
• play

24
Web appPlanning Table

• Start with purpose and list site components.

Purpose Structure Function Media
Calendar of Events list of events
user can link to teaching resources and
Text, with small icons for each event
To inform audiences about
25
Chapter 2 - Designing Display and Navigation

• Chapter Objectives- to review the ways that
  text, images, and multimedia can be
  displayed- to develop systems that allow users
  to find their way through the site- to
  describe methods for collecting user feedback
  and supporting interactivity- to understand role
  of corporate identity in web site design

26
Design Follows FunctionAudience Purpose gt
Design

• Most Web site functions fall into one of these
  categories.- The display of information.-
  Navigation through the site.- Choosing,
  searching, and finding- Feedback and
  interaction- Communicating the organizations
  identity

27
Examples

• Professor Lengels sitehttp//www.bu.edu/jlengel/
  cmc/onlineindex.html
• Dorling Kindersley Web sitehttp//www.dk.com/uk/
• Harvardhttp//www.harvard.edu/
• espn.com http//www.espn.com/
• Radford University http//www.radford.edu/

28
Display of Information

• Early Web designs copied format from magazines
  and newspapers but- printed docs are taller
  than they are wide, screens width gt height-
  print is high resolution - magazine, 2000
  dots per inch - newspaper, 300 dots per
  inch - computer, 75 dots per inch- printed
  documents no navigation

29
Screen Resolution

• Dots per inch, pixels, and resolution all refer
  to the density of a display medium. A pixel
  (picture element) is represented by one dot on
  a computer screen. All computer screens have
  nearly the same aspect ratio, 43, 4 units wide
  and 3 units high. Most monitors now are 800
  pixels wide and 600 pixels high. (New ones are
  1024 x 768) The page must fit within the browser
  window, so the web designer should plan on a
  space of 760 wide by 420 high. (10.1 in x 5.6 in)

30
Site Navigation

• The Web site should provide the answer to these
  questions on every page.- Whose site am I
  looking at.- Where am I in the site.- What else
  is available at this site?- Where should I go
  next?- How do I find what I am looking for?
• Remember navigation is closely related to use
  cases.

31
Answer the navigation questions.

• BMWhttp//www.BMW.com
• - Whose site?- Where am I?- What else is
  available?- Where should I go next?- How do I
  find what I am looking for?

32
Feedback and Interaction

• Should be evident on the sites list of purposes.
• Implicit collection user doesnt know
• Explicit collection user realizes- forms-
  discussion boards (asynchronous)- chats
  (synchronous)

33
Image Logos Identity

• Color many organizations have an official color
  scheme, if so use it to promote identity
• Logos signs or symbols of an organization are
  very useful to establish identity (How many
  little children know what the golden arches
  mean?
• Font Special for logo
• Features Consistent with other pubs.

34
Chapter 3 Better Design

• Understand how to incorporate key design concepts
  to the entire site
• Guidelines for site design
• Use color, balance, alignment, and other tools
  for Web page eye appeal
• Sketching, prototyping, and testing Web design
  process

35
Observe First

• Before building any new web application, first
  look at other sites from your organization and at
  sites with similar purposes, review- display of
  information- navigation- choosing and finding-
  communicating the organizations identity-
  feedback and interaction

36
Most important location on a Web Page

• Publishers have learned that people look at the
  upper right portion of the right-hand page first.
• First point seen hasnt been established for web
  pages yet, but - top more likely than bottom-
  things below or right of scroll bar never seen-
  number of items should be 7 plus or minus 2,
  hrair limit- if you want something seen, put
  it near the top of the page with few competing
  items

37
Text Easier to Read if

• Black text on white background
• 10-12 words per line
• Standard 12 point system fontsTimes, Helvetica,
  Arial, Times Roman
• Serif font for body, sans serif for titles- this
  is Arial, this is Times Roman
• Use only two font sizes, one for titles and one
  for the body text

38
Text Easier to Read if(continued)

• Avoid words in all caps (only for warnings)DONT
  CLICK HERE!!!
• Make sure headings contrast with body text.
  (lets users scan easily)
• Separate paragraphs using a blank line or an
  indented first line, not both.
• Leave plenty of white space around text
• Build page around a single axis. We like things
  to line up.

39
Text Easier to Read if(Continued)

• Balance the page from top to bottom and right to
  left.
• Memorize thisThe simpler, the better. Chaos
  and clutter are the opposites of order and
  organization. A simple page with a few visual
  and text elements is easier to read than a page
  with a plethora of items competing for attention.

40
Designing for Eye Appeal

• http//www.webwhirlers.com/colors/combining.asp
• Primary colors red, yellow, blue
• Colors that are directly across the wheel are
  complementary. They work will together.
• Adding black to a color is called a shade.
• Adding white is called a tint.

41
Designing for Eye Appeal(continued)

• Alignment human eye likes things to line up,
  for example, the left edge of a picture and text
  column (single axis)- alignment should be the
  same from page to page
• Frames facilitate- constant titles and menu
  items
• Pay close attention to how scrolling will work on
  your pages

42
Web Site Design Steps

• Sketch the pages, consider the display of
  information text, images, video, tables, lists
  (pay attention to alignment)
• Build navigation menus, identification, and user
  control
• Consider feedback and interaction issues
• Decide how to include Corporate Identity
• Decide on type of text
• Color, contrast, and balance
• Frames alignment
• Scrolling

43
After Design - Prototype

• Use a WYSIWYG Web page editor or drawing package
  to create your online prototype
• Test the prototype with the target audience
• Ask the questions of prototype reviewers- Text
  readable? Useful images? Could you find
  information?- Is it clear where you are and
  where you going within the site?

44
After Design Prototype(continued)

• - Are all menu choices evident? How would you
  find X?
• - Who sponsored the web site?- What seems
  missing from this page? What could be
  eliminated?- On a continuum from simple to
  cluttered where would this page fall?- What
  changes do you recommend?

45
Chapter 4 Gathering and Preparing Text,
Numbers, Images

• Chapter Objectives
• To analyze your Web page to determine its
  component elements
• To learn the techniques for preparing text to be
  used on your Web site
• To learn the techniques for preparing numeric
  data for display on your Web site

46
Prepare a list of Elements

• Radford University Web Site
• How many images?
• Text Components?
• Banners, to be used throughout the site?
• Frames?
• Create a list of files that includes all the
  needed component.

47
Writing for the Web

• Keep it short Ruthlessly restrict text tothe
  absolute minimum needed by users.
• Pyramid Structure The journalistic style
  summarize the story in the first paragraph,
  covering the who, what, where, and when.
• Use subheads Allow users to scan
• Use bullets it conserves space and time
• Provide links to interesting/related asides

48
Numbers and Graphs

• Generally put together in a spreadsheet
• Build into tables in XHTML 1.0- can import tab
  or comma delimited spreadsheets into some HTML
  editors
• Graphs in spreadsheets- copy into editing
  program Photoshop, Microsoft Paint, - save as
  .gif or .jpeg files and pull into HTML
  document as images
• Similar process for other photographs images

49
Image Compression

• .GIF best for nonphotographic images such as
  logos, diagrams, maps, and other pictures with
  lines and areas of solid color
• .JPEG used for photographs and for images with
  complex colors that blend
• .PNG new lossless compression scheme thats
  relatively new

50
Chapter 5 Multimedia Elements

• Standard Types of Multimedia Files
• Animation Files
• Sound Files
• Video Files
• Databases

51
Animations

• Do you really need them?- Remember they are
  distracting to the user, (design for the
  expected audience)
• Adobe Photoshop simple ones, save a series of
  .gif files
• Macromedia Flash designed for creating large
  graphics animations, .swf files
• 3-D rendering programs very technical, requires
  an expert user

52
Sound Elements

• Tools for editing sounds- Macromedia SoundEdit-
  RecordSound- SoundForge- CoolEdit
• After editing a sound file, must choose
  acompression method and a codec (the algorithm)
  used to compress the sound file

53
Sound Files

• Audio StreamingThe file never downloads to the
  user but plays immediately as it arrives. Audio
  streaming transmits a constant, real-time stream
  of sound to the user and also lets you use much
  larger files. Requires a special server on the
  senders side, and a plug-in on the receivers
  side.RealAudio, QuickTime Streaming, Windows
  Media are examples of Audio Streaming Software.

54
Video

• RealVideo - .ram files Any application, wide
  range of quality settings
• QuickTime Movie - .mov files Any application,
  wider range of quality settings
• Windows Media - .asf files Any application,
  wide range of quality settings
• Video-editing software Adobe Premiere,iMovie,
  Final Cut Pro, Media Cleaner Pro

55
Chapter 6 Selecting Tools, Organizing Files,
and Creating Templates

• Software Tools
• Role of the web designer
• Organization of web site elements

56
Web Site Building Tools

• WYSIWYG Editors- PageMill, GoLive, FrontPage,
  and DreamWeaver
• Code editors assist in authoring HTML,XML,
  Javascript others- HomeSite, BBEdit, and
  HotDog Pro
• Save as HTML functions- Microsoft Word, other
  word processors

57
Microsoft Front Page

• An example of web page development in Microsoft
  Front Page- forms, tags, etc.

58
Templates

• Saves implementation time
• Can be implemented in tables or frames
• Table templates avoid navigational problems for
  users
• Frames used to be avoided but are now implemented
  in almost all browsers

59
Table Template Example

• lt!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-str
  ict.dtd"gt
• lthtmlgt
• ltheadgtlttitlegtWeb Page Table Templatelt/titlegtlt/hea
  dgt
• ltbody leftmargin"0" topmargin"0"
  marginwidth"0"
• marginheight"0"gt
• lttable width"100" border"0" cellspacing"0"
• cellpadding"0" height"100"gt
• lttrgtlttd width"100px" height"440px"
  rowspan"2" bgcolor"red"gt
• Menu ltbr /gt or ltbr /gtContents ltbr /gtArea
  lt/tdgt
• lttd width"400px" height"60px"
  bgcolor"blue"gt
• Title Arealtbr /gtltbr /gtlt/tdgt lt/trgt
• lttrgtlttd width"400px" height"380px"
  bgcolor"green"gt
• Contents Arealt/tdgtlt/trgt
• lt/bodygt
• lt/htmlgt

60
Chapter 7 Assembling the Pages

• Backgrounds
• Grids and Borders
• Text Placement
• Images
• Sound and Video
• Feedback Forms
• Linking Web Pages

61
Background Colors and Images

• Remember dark background colors make it difficult
  to read text- in HTML ltbody bgcolor6666FFgt-
  in CSS body background-colorblue- or
  ltbody stylebackground-colorbluegt
• Background Images- ltbody backgroundsailboat.jpe
  ggt
• backgroundexample.html

62
Readable Text

• 12 pt serif font for body
• Make headings larger and bolder
• leave white space around text
• Use tables and lists to organize text

63
Embedding Sound and Video

• ltbodygt
• ltpgt
• Here's a sound file.
• lta href"eightiesJam.wav" target"_new"gt
• Play a sound file.
• lt/agt
• lt/pgt
• lt/bodygt
• soundexample.html

64
Image Maps

• Heres an examplehttp//www.teachingdemocracy.gse
  .harvard.edu/partners.htm

65
Chapter 8 - Testing

• Be thorough- Windows running Netscape- Windows
  running IE- Macintosh on both browsers
• In particular, test on older versions of browsers
  if youre looking to reach a wide diverse group
  of users
• Design without browser specific extensions
  ltmarqueegt, ltblinkgt

66
Testing Display

• Test versus the three most common display sizes-
  640 x 480- 800 x 600- 1024 x 768
• In Windows, click Settings from the Start menu,
  then click Control Panel- double-click Display,
  set slider to desired resolution

67
Test Color Depth

• Most computers set their monitors to 16-bit color
  depth
• However, some are set to 8-bit colors
• Changing the resolution of the display, follow a
  similar procedure as used on resolution

68
Test Bandwidths

• Make sure to test downloading your page via a
  modem connection to the internet(56K connection
  speed)
• Depending on your audience, you may want to
  eliminate some intensive applications (video,
  pictures/images, or sound)

69
Most Important User Testing

• Find the various kinds of users as defined in
  your use cases
• Let them use the site and see if they can get
  what they want from the site easily
• Make sure to note anything they have difficulty
  with and make corrections
• Get a good cross section of users, dont just get
  experienced users