Web Design by Jack Davis Based on The

Web Design by Jack Davis Based on: The WEB WIZARD’S GUIDE TO WEB Design by James G. Lengel

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

Audiences/Users • Yahooligans! http: //www. yahooligans. com • Fidelity Investments http: //www. fidelity. com/ • National Oceanic and Atmospheric Administration http: //www. NOAA. GOV

Audience/Design • Yahooligans Children - limited choices - pictures - simple words • Fidelity Adult Investors - information & advice - quick and easy access to info. • NOAA wide audience - researchers, meteorologists, and people who need weather information

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

Defining the Audience Demographics • • • 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)

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

Audience Definition The audience for the Lefty. Stuff Web site is potential purchasers of Lefty. Stuff products who have responded to one of Lefty. Stuff’s 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.

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

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

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”

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”

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 broaden the reach of the program so it makes a greater impact on American education. ”

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?

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

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

Complete Site Structure Home Page Teaching Resources Teaching Units Publications Multimedia Calendar of Events About the Home Page Forums Faculty and Staff Discussion Topics Faculty Pages Synchronous Chat Institutes

Component Descriptions describes what’s included • Teaching Resources Section This 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 online publications with links * Multimedia: video, audio, image and slide material

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.

Goal – Function Description • A good way to develop the site’s structure is to list the goals and objectives specified. Then, for each one, write a statement of functionality. Purpose To inform audiences about XYZ happenings. 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.

“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.

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)

Interactivity is the key difference in Web applications User’s 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

Web app Planning Table Start with purpose and list site components. Purpose Structure Function Media To inform Calendar of user can audiences Events: list link to about … of events … teaching Text, with small icons for each event … resources and …

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

Design Follows Function Audience + Purpose => 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 organization’s identity

Examples • Professor Lengel’s site http: //www. bu. edu/jlengel/cmc/onlineindex. html • Dorling Kindersley Web site http: //www. dk. com/uk/ • Harvard http: //www. harvard. edu/ • espn. com http: //www. espn. com/ • Radford University http: //www. radford. edu/

Display of Information • Early Web designs copied format from magazines and newspapers but - printed doc’s are taller than they are wide, screens width > height - print is high resolution - magazine, 2000 dots per inch - newspaper, 300 dots per inch - computer, 75 dots per inch - printed documents – no navigation

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, 4: 3, 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)

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”.

Answer the navigation questions. • BMW http: //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?

Feedback and Interaction • Should be evident on the site’s list of purposes. • Implicit collection – user doesn’t know • Explicit collection – user realizes - forms - discussion boards (asynchronous) - chats (synchronous)

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.

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

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 organization’s identity - feedback and interaction

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 hasn’t 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

Text Easier to Read if: • Black text on white background • 10 -12 words per line • Standard 12 point system fonts Times, 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

Text Easier to Read if: (continued) • Avoid words in all caps (only for warnings) DON’T CLICK HERE!!! • Make sure headings contrast with body text. (let’s 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.

Text Easier to Read if: (Continued) • Balance the page from top to bottom and right to left. • Memorize this: “The 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.

Designing for Eye Appeal • http: //www. webwhirlers. com/colors/combin ing. 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.

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

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

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?

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?

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

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.

Writing for the Web • Keep it short: Ruthlessly restrict text to the 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

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

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 that’s relatively new

Chapter 5 – Multimedia Elements Standard Types of Multimedia Files • Animation Files • Sound Files • Video Files • Databases

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

Sound Elements • Tools for editing sounds - Macromedia Sound. Edit - Record. Sound - Sound. Forge - Cool. Edit • After editing a sound file, must choose a compression method and a codec (the algorithm) used to compress the sound file

Sound Files • Audio Streaming The 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 sender’s side, and a plug-in on the receiver’s side. Real. Audio, Quick. Time Streaming, & Windows Media are examples of Audio Streaming Software.

Video • Real. Video -. ram files – Any application, wide range of quality settings • Quick. Time 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, i. Movie, Final Cut Pro, Media Cleaner Pro

Chapter 6 – Selecting Tools, Organizing Files, and Creating Templates • Software Tools • Role of the web designer • Organization of web site elements

Web Site Building Tools • WYSIWYG Editors - Page. Mill, Go. Live, Front. Page, and Dream. Weaver • Code editors – assist in authoring HTML, XML, Javascript & others - Home. Site, BBEdit, and Hot. Dog Pro • Save as HTML functions - Microsoft Word, other word processors

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

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

Table Template Example • <!DOCTYPE html PUBLIC "-//w 3 c//DTD XHTML 1. 0 Strict//EN" • "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> • <html> • <head><title>Web Page Table Template</title></head> • <body leftmargin="0" topmargin="0" marginwidth="0" • marginheight="0"> • <table width="100%" border="0" cellspacing="0" • cellpadding="0" height="100%"> • <tr><td width="100 px" height="440 px" rowspan="2" bgcolor="red"> • Menu or Contents Area </td> • <td width="400 px" height="60 px%" bgcolor="blue"> • Title Area </td> </tr> • <tr><td width="400 px" height="380 px" bgcolor="green"> • Contents Area</td></tr> • </body> • </html>

Chapter 7 – Assembling the Pages • • Backgrounds Grids and Borders Text Placement Images Sound and Video Feedback Forms Linking Web Pages

Background Colors and Images • Remember dark background colors make it difficult to read text - in HTML <body bgcolor=“#6666 FF”> - in CSS body {background-color: ”blue”} - or <body style=“background-color: blue”> • Background Images - <body background=“sailboat. jpeg”> • backgroundexample. html

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

Embedding Sound and Video <body> <p> Here's a sound file. <a href="eighties. Jam. wav" target="_new"> Play a sound file. </a> </p> </body> soundexample. html

Image Maps • Here’s an example http: //www. teachingdemocracy. gse. harvar d. edu/partners. htm

Chapter 8 - Testing • Be thorough - Windows running Netscape - Windows running IE - Macintosh on both browsers • In particular, test on older versions of browsers if you’re looking to reach a wide diverse group of users • Design without browser specific extensions <marquee>, <blink>

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

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

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

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, don’t just get experienced users