Top Banner
Design methods Discuss basic design concepts Apply lowest common denominator Define and indicate when appropriate to use frames and menus Compare and contrast intrapage, intrasite and intersite hyperlinks Discuss the rationale for selecting links Discuss the role of volatility in web design Apply the linkage matrix to web design
22

Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Dec 26, 2015

Download

Documents

Nathaniel Black
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Design methodsDiscuss basic design concepts Apply lowest common denominator Define and indicate when appropriate to

use frames and menusCompare and contrast intrapage, intrasite

and intersite hyperlinksDiscuss the rationale for selecting linksDiscuss the role of volatility in web designApply the linkage matrix to web design

Page 2: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Lowest Common Denominator

Resolution Pixels: 640x480 (or less)

Color depth 256 (or less) Netscape palette: 216 colors Perhaps most applicable for non-

developed countries

Page 3: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

640x480

Page 4: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

800x600

Page 5: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

1024x768

Page 6: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Elements in Creating a Web Site

Content text and artwork effectiveness and affectiveness something compelling

DesignProgramming

Page 7: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

TextEffective

complete accurate easy to read clear useful to at least one defined audience concise

Balancing act

Page 8: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Text Hints

Be specific when it is to your advantage “We have been in business 26 years” vs

“We have been in business a long time”

Use active voice “You will receive a discount” vs.

“A discount will be given to you”Use logical groupings

location, alphabetic,time, etc

Page 9: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Text Hints (cont)

Layout (alignment)Typeface

limit to 2 or 3 on a pageType size

72 points in an inch 8 point type - minimum 12-18 point - bulk of screen

Color

Page 10: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Text Arrangement

Proximity volatility, relationship

Alignment centered for effect left aligned for standard columns for long passages

ContrastRepetition

Page 11: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Text: Contrast and Repetition

Identify focal pointMake differences starkAvoid underlining and boldfaceUse serif typeface for body and sans

serif for headersUse color for contrastUse repeated, consistent use of colors

Page 12: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Page FormattingMenus

fast to load columns (indented), tables

Hot regions (i.e., parts of store)Frames

i.e., menu, header, details allow for simultaneous display for all browsers supporting HTML 3.0 often need more screens and complex navigation

Page 13: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Home Pages

Greet usersHave catchy headlineGive overview of things to followInclude all company’s key informationList main areas you can go from thereDon’t put favorite sites on home pageDon’t ignore text-based Web users

Page 14: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Linkage and Web Design

Intrapage hyperlinks good for longer pages bookmarks

Intrasite hyperlinksIntersite, or free, hyperlinks

Page 15: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Intrasite LinksPurpose

Compose meaningful threads Provide links between business relationships Provide alternative to intrapage linkages (150 lines

upper limit/page; 2-3 screens/page)

Selection factors Ease of maintenance Use Load time (>15 secs) Number of screens, levels (<4)

Page 16: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Intersite Links

Search for free links should be accurate, complete,

related, compatibleAdd information for customerMust be checked periodicallyAvoid free links on home pageMay impact impression

Page 17: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Linkage RulesUse hyperlinks wellA page with no links or graphics is

boring Intrapage links with more than150 lines Intrapage links every 10-20 lines

Too many hyperlinks One or two links per paragraph 7 +/- 2 links per page (except lists or products)

Use linkage matrix

Page 18: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Linkage Guidelines

Be concise, direct and accurateConsider your sponsor’s needsConsider link colorsrelate to one or more specific

user groups (one or more threads)

Page 19: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

More Hints for Creating Web SitesUse icons to create clear navigational paths

with a theme (but also include text-based links)

With storefronts, give your customers a way to pay order form toll-free telephone number fax line

Return button at bottom of each pagePut contact name,address at bottom

Page 20: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Hints for Using Multimedia on Web SitesThe use of multimedia should match the

needOnly use quality photos

use clipart, saved images (noncopyrighted) if photos aren’t good

cartoons are good for presenting socially taboo subjects

Use audio sparinglyDon’t use too much bandwidth

100K or less

Page 21: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Still More Hints for Using Multimedia on Web Sites

Still graphics logo on website smaller version of logo on main page avoid “angry fruit salad” don’t clutter

Moving graphics save movies at ftp site bullets and borders can attract attention use seasonal themes in bullets and borders

Page 22: Design methods zDiscuss basic design concepts zApply lowest common denominator zDefine and indicate when appropriate to use frames and menus zCompare and.

Steps in Creating Web PresentationsStoryboardingPrototypes

evaluating threads evaluating multimedia proving a design concept works

Walkthrough testing headings and hyperlinks scrolling (6x4 inches or 640-480 pixels) - try to keep everything on screen fully visible disclaimers, update and contact info