11

DesignDesign

• Describe the most common types of web site Describe the most common types of web site organizationorganization

• Utilize guidelines for web site navigation designUtilize guidelines for web site navigation design• Apply guidelines for web page designApply guidelines for web page design• Use guidelines for text usage on web pagesUse guidelines for text usage on web pages• Describe guidelines for using graphics on web Describe guidelines for using graphics on web

pagespages• Utilize guidelines for creating accessible web Utilize guidelines for creating accessible web

pagespages• Describe design principlesDescribe design principles• Describe web page design techniquesDescribe web page design techniques• Apply best practices of web designApply best practices of web design

22

Overall Design Is Related Overall Design Is Related to the Site Purposeto the Site Purpose

Consider the target audienceof these sites.

33

Web SiteWeb SiteOrganizationOrganization

HierarchicalHierarchical LinearLinear Random (sometimes called Web Random (sometimes called Web

Organization)Organization)

44

HierarchicalHierarchicalOrganizationOrganization

Characterized by a Characterized by a clearly defined home clearly defined home page with links to page with links to major site sectionsmajor site sections

Often used for Often used for commercial and commercial and corporate web sitescorporate web sites

55

Hierarchical Hierarchical Too ShallowToo Shallow

Be careful that the organization is not too shallow.Be careful that the organization is not too shallow.• This provides many choices and could result in a confusing and less This provides many choices and could result in a confusing and less

usable web siteusable web site• Information ChunkingInformation Chunking

George A. Miller found that humans can store only five to nine chunks of George A. Miller found that humans can store only five to nine chunks of information at a time in short-term memory -- the "seven plus or minus information at a time in short-term memory -- the "seven plus or minus two" principle. two" principle.

Many web designers try not to place more than nine major navigation Many web designers try not to place more than nine major navigation links on a page or in a well-defined page area.links on a page or in a well-defined page area.

66

Hierarchical Hierarchical Too DeepToo Deep

Be careful that the organization Be careful that the organization is not too deep.is not too deep.• This results in many “clicks” This results in many “clicks”

needed to drill down to the needed needed to drill down to the needed page.page.

• User Interface “Three Click Rule”User Interface “Three Click Rule” A web page visitor should be able to A web page visitor should be able to

get from any page on your site to get from any page on your site to any other page on your site with a any other page on your site with a maximum of three hyperlinks. maximum of three hyperlinks.

77

LinearLinearOrganizationOrganization

Used when the purpose of a site or Used when the purpose of a site or series of pages on a site is to provide series of pages on a site is to provide a tutorial, tour, or presentation that a tutorial, tour, or presentation that needs to be viewed in a sequential needs to be viewed in a sequential fashion.fashion.

88

RandomRandomOrganizationOrganization

Sometimes called Sometimes called “Web” “Web” OrganizationOrganization

Utilized there is no Utilized there is no clear path through clear path through the sitethe site

May be used with May be used with artistic or concept artistic or concept sitessites

Generally not used Generally not used for commercial for commercial web sites.web sites.

99

Web Site NavigationWeb Site NavigationBest Practices(1)Best Practices(1)

Make your site easy to navigateMake your site easy to navigate• Provide clearly Provide clearly labeled navigation in the same labeled navigation in the same

location on each pagelocation on each page• Most common – across top or down left sideMost common – across top or down left side• Provide “breadcrumb” navigation Provide “breadcrumb” navigation

Types of NavigationTypes of Navigation• Graphics-basedGraphics-based• Text-basedText-based• Interactive NavigationInteractive Navigation

TechnologiesTechnologies DHTML DHTML Java Applet Java Applet FlashFlash

1010

Web Site NavigationWeb Site NavigationBest Practices(2)Best Practices(2)

Accessibility TipAccessibility Tip• When graphics, DHTML, a Java When graphics, DHTML, a Java

Applet, or Flash is used for the Applet, or Flash is used for the main navigation of a web site, main navigation of a web site, provide clear text-based links provide clear text-based links on the bottom of each page. on the bottom of each page.

1111

Web Site NavigationWeb Site NavigationBest Practices(3)Best Practices(3)

Use a Table of Contents (with links to Use a Table of Contents (with links to other parts of the page) for long pages. other parts of the page) for long pages.

Consider breaking long pages in to Consider breaking long pages in to multiple shorter pages using Linear multiple shorter pages using Linear Organization.Organization.

Large sites may benefit from a site mapLarge sites may benefit from a site map or site search featureor site search feature

1212

Design PrinciplesDesign Principles RepetitionRepetition

• Repeat visual elements Repeat visual elements throughout designthroughout design

ContrastContrast• Add visual excitement and Add visual excitement and

draw attentiondraw attention ProximityProximity

• Group related itemsGroup related items AlignmentAlignment

• Align elements to create Align elements to create visual unityvisual unity

1313

Web Page DesignWeb Page DesignBest PracticesBest Practices

Page layout design Page layout design Text designText design Graphic designGraphic design Accessibility considerationsAccessibility considerations

1414

Web Page DesignWeb Page DesignLoad TimeLoad Time

Watch the load Watch the load time of your pagestime of your pages

Try to limit web Try to limit web page document and page document and associated media to associated media to under 60K on the under 60K on the home pagehome page

1515

Web Page DesignWeb Page DesignTarget AudienceTarget Audience

Design for your target audienceDesign for your target audience• Appropriate reading level of text Appropriate reading level of text • Appropriate use of color Appropriate use of color • Appropriate use of animationAppropriate use of animation

1616

Web Page DesignWeb Page DesignColors & AnimationColors & Animation

Use colors and animation that appeal to your Use colors and animation that appeal to your target audience target audience • KidsKids

Bright, colorful, tons of animationBright, colorful, tons of animation

• Generation X,Y,Z,etc.Generation X,Y,Z,etc. Dark, often low contrast, more subtle animationDark, often low contrast, more subtle animation

• Everyone: Everyone: Good contrast between background and text Good contrast between background and text Easy to readEasy to read Avoid animation if it makes the page load too slowly Avoid animation if it makes the page load too slowly

• Accessibility Tip: Many individuals are unable to Accessibility Tip: Many individuals are unable to distinguish between certain colors.distinguish between certain colors.

See See http://http://www.vischeck.com/showme.shtmlwww.vischeck.com/showme.shtml

1717

Web Page DesignWeb Page Design Browser Compatibility Browser Compatibility

Web pages do NOT look the same in all the Web pages do NOT look the same in all the major browsersmajor browsers

Test with current and recent versions of: Test with current and recent versions of: • Internet ExplorerInternet Explorer• Firefox, MozillaFirefox, Mozilla• OperaOpera• Mac versions Mac versions

Design to look best in one browser and degrade Design to look best in one browser and degrade gracefully (look OK) in othersgracefully (look OK) in others

1818

Web Page DesignWeb Page Design Screen Resolution Screen Resolution

Test at various screen resolutionsTest at various screen resolutions• Most widely used: 1024x768 and 800x600 Most widely used: 1024x768 and 800x600

Design to look good at various screen Design to look good at various screen resolutionsresolutions

<div align="center"><div align="center"> <table><table>....Page content goes here. The table may be given either a ....Page content goes here. The table may be given either a

percentage width or an exact width using pixels.percentage width or an exact width using pixels. </table></table> </div></div>

1919

Web Page DesignWeb Page DesignPage Layout(1)Page Layout(1)

Place the most important information Place the most important information "above the fold""above the fold"

Use adequate "white" or blank space Use adequate "white" or blank space Use an interesting page layoutUse an interesting page layout

This is usable, but a little boring. See the next slide for improvements in page layout.

2020

Web Page DesignWeb Page DesignPage Layout(2)Page Layout(2)

BetterBetter

Best

Columns make the page more interesting and it’s easier to read this way.

Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.

2121

Page Layout Design Page Layout Design TechniquesTechniques

Ice DesignIce Design• AKA rigid or fixed designAKA rigid or fixed design• Fixed-width table usually at left marginFixed-width table usually at left margin

Jello DesignJello Design• Page content typically centered and often Page content typically centered and often

configured with a table of percentage widthconfigured with a table of percentage width Liquid DesignLiquid Design

• Page expands to fill the browser at all Page expands to fill the browser at all resolutions. Often configured with a table resolutions. Often configured with a table width of 100%width of 100%

• New Trend: Use CSS to configure liquid design New Trend: Use CSS to configure liquid design page layout (see Chapter 10)page layout (see Chapter 10)

2222

QuestionsQuestions1.1. List the four basic principles of design. List the four basic principles of design.

View the home page of your school and View the home page of your school and describe how each principle is applied.describe how each principle is applied.

2.2. View View http://http://www.walmart.comwww.walmart.com, , http://http://www.mugglenet.comwww.mugglenet.com//, and , and http://http://www.sesameworkshop.org/sesamestreetwww.sesameworkshop.org/sesamestreet//. Describe the target audience for each . Describe the target audience for each site. site. How do their designs differ? How do their designs differ? Do the sites meet the needs of their Do the sites meet the needs of their target audiences?target audiences?

2323

QuestionsQuestions3. View your favorite web site (or a URL 3. View your favorite web site (or a URL

provided by your instructor). provided by your instructor).

• Maximize and resize the browser window. Maximize and resize the browser window. • Decide whether the site uses ice, jello, or Decide whether the site uses ice, jello, or

liquid design.liquid design.• Adjust the screen resolution on your monitor Adjust the screen resolution on your monitor

(Start > Control Panel > Display > Settings) (Start > Control Panel > Display > Settings) to a different resolution than you normally to a different resolution than you normally use. use.

• Does the site look similar or very different? Does the site look similar or very different? • List two recommendations for improving the List two recommendations for improving the

design of the site.design of the site.

2424

Text DesignText DesignBest PracticesBest Practices

Avoid long blocks of text Avoid long blocks of text Use bullet points Use bullet points Use short paragraphs Use short paragraphs

2525

Text DesignText Design“Easy to Read” Text (1)“Easy to Read” Text (1)

Use common fonts:Use common fonts:• Arial, Helvetica, Verdana, Times New Arial, Helvetica, Verdana, Times New

RomanRoman Use appropriate text size: Normal, 12 Use appropriate text size: Normal, 12

pt, size=“3”pt, size=“3” Use strong contrast between text & Use strong contrast between text &

background background Use columns instead of large areas of Use columns instead of large areas of

horizontal text horizontal text

2626

Text DesignText Design“Easy to Read” Text (2)“Easy to Read” Text (2)

Bold text as needed Bold text as needed Avoid “click here” Avoid “click here” Hyperlink key words or phrases, not Hyperlink key words or phrases, not

entire sentences entire sentences

Separate text with “white space” or Separate text with “white space” or empty space. empty space.

Chek yur spellin (Check your spelling)Chek yur spellin (Check your spelling)

2727

Graphic DesignGraphic DesignBest Practices(1)Best Practices(1)

Be careful with large graphics! Be careful with large graphics! • Remember 60k recommendation Remember 60k recommendation

Use the alt attribute to supply Use the alt attribute to supply descriptive alternate text descriptive alternate text

Be sure your message gets across Be sure your message gets across even if images are not displayed. even if images are not displayed. • If using images for navigation provide If using images for navigation provide

plain text links at the bottom of the page.plain text links at the bottom of the page. Use animation only if it make the Use animation only if it make the

page more effective and provide a page more effective and provide a text description.text description.

2828

Graphic DesignGraphic DesignRecommended Practices(2)Recommended Practices(2)

Choose colors on the web palette if consistency across Choose colors on the web palette if consistency across older Windows/Mac platforms is neededolder Windows/Mac platforms is needed

Use anti-aliased text in imagesUse anti-aliased text in images Use only necessary imagesUse only necessary images Reuse imagesReuse images Keep images as small as possibleKeep images as small as possible If there are a large number of images, or the page is If there are a large number of images, or the page is

dependent on them consider creating a special text-only dependent on them consider creating a special text-only version of the page.version of the page.

2929

Designing for Accessibility(1)Designing for Accessibility(1)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Images & animations. Images & animations. • Use the alt attribute to describe Use the alt attribute to describe

the function of each visual.the function of each visual. Image maps. Image maps.

• Use the client-side map and text Use the client-side map and text for hotspots.for hotspots.

Multimedia. Multimedia. • Provide captioning and transcripts Provide captioning and transcripts

of audio, and descriptions of video.of audio, and descriptions of video.

3030

Designing for Accessibility(2)Designing for Accessibility(2)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Hypertext links. Hypertext links. • Use text that makes sense when read out Use text that makes sense when read out

of context. For example, avoid "click of context. For example, avoid "click here."here."

Page organization. Page organization. • Use headings, lists, and consistent Use headings, lists, and consistent

structure. Use Cascading Style Sheets for structure. Use Cascading Style Sheets for layout and style where possible. layout and style where possible.

Graphs & charts. Graphs & charts. • Summarize or use the longdesc attribute.Summarize or use the longdesc attribute.

3131

Designing for Accessibility(3)Designing for Accessibility(3)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Scripts, applets, & plug-ins. Scripts, applets, & plug-ins. • Provide alternative content in case Provide alternative content in case

active features such as JavaScript, Java active features such as JavaScript, Java Applets, Flash are inaccessible or Applets, Flash are inaccessible or unsupported.unsupported.

Frames. Frames. • Use the <noframes> element and Use the <noframes> element and

meaningful titles.meaningful titles. Tables. Tables.

• Make line-by-line reading sensible. Make line-by-line reading sensible. Summarize.Summarize.

3232

Designing for Accessibility(4)Designing for Accessibility(4)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Check your work. Check your work. Validate. Validate.

http://validator.w3.orghttp://validator.w3.org Test for AccessiblityTest for Accessiblity

• Use tools, checklist, and Use tools, checklist, and guidelines at guidelines at http://www.w3.org/TR/WCAGhttp://www.w3.org/TR/WCAG

3333

Best Practices ChecklistBest Practices Checklist

Table 7.1 in your TextbookTable 7.1 in your Textbookhttp://terrymorris.net/bestpracthttp://terrymorris.net/bestpracticesices

•Page Layout•Browser Compatibility•Navigation•Color and Graphics•Multimedia•Content Presentation•Functionality•Accessibility

3434

QuestionsQuestions1.1. View the home page of your school. Use View the home page of your school. Use

the Best Practices Checklist (Table 7.1) to the Best Practices Checklist (Table 7.1) to evaluate the page. Describe the results.evaluate the page. Describe the results.

2.2. List three best practices of writing text List three best practices of writing text for the Web. See your text for the rest of for the Web. See your text for the rest of this question.this question.

3.3. List three best practices of using graphics List three best practices of using graphics on web pages. View the home page of on web pages. View the home page of your school. Describe the use of graphic your school. Describe the use of graphic design best practices on this page.design best practices on this page.