eCommerce Technologies
Adding Visual Appeal to eCommerce Websites
MIS 4453 -- Spring 2004
Instructors:Kelly Fish, Ph.D.John Seydel, Ph.D.
Student Objectives
Compare and contrast graphics image typesDiscuss why file size is an important consideration Perform basic image editing tasks using MS Photo EditorSummarize image design concepts for the WebDiscuss the web graphics development processAs time permits, reinforce/extend Flash skills Incorporate Flash objects into web pages Create rollover button using Flash Use tweening for animations
Graphics: A Two-Edged Sword
Communicative power: a picture’s worth a thousand words and is far more interesting and intuitiveInappropriate graphics, however, can destroy the messagePrinciples Difference/similarity to print Compressed image formats Simplicity Keep loading time in mind Design with the client in mind
Let’s explore these principles . . .
Comparing Web Graphics to Print Images
Resolution rather than DPI is what matters Typical resolutions
640x480 800x600 1024x768
Adding pixels to image doesn’t make it sharper, just bigger
Color depth: amount of memory allotted to a pixel 8 bit = 256 (i.e., 28) colors 24 bit = 16.7 million (i.e., 224) colors Thus, better color means bigger files
What’s the deal about bigger files?
Image Types for the Web
Bitmap graphics Uncompressed: BMP (don’t use!) Compressed:
JPEG: loads line at a time (more colors, 24 bit) GIF: loads increasing levels of clarity (interlacing)
Vector graphics (e.g., Flash): scalable, typically smaller, but require playerUsing a scanner (or digital camera) TIF is a typical format Needs to be converted to JPEG or GIF Demonstration
Some Basic Editing (via PhotoEd)
Capturing images from other websites (if given permission) Right-click Alternatively, screen print
CroppingResizing:
Simple, but can lead to deterioration of image quality Best to use software that resamples (e.g., FrontPage image
editor)Adding transparency (e.g., background image)
Choose pixel color to make transparent Must convert file type to GIF
Determining image properties (right-click on image) For width and height attributes For generating image maps
Touchup Includes: sharpen/soften; levels; pixel level modifications Use sparingly
Alternatives to PhotoEd: PhotoShop; PS Pro; FrontPage
Which to Use: JPEG or GIF (or Flash)?
JPEG: appropriate for photographs and other intricate imagesAdvantages of GIF: Typically smaller file sizes Features: animation, transparency, interlacing Applications: logos, buttons, icons, etc.
Vector graphics are thus an alternative to GIFFile size comparisons . . .
Some Image Design Guidelines
Use sparingly to avoid clutter and to control load timeArrange to achieve balance with text and white spaceMaintain contrasts when using background imagesKeep small (page should take no more than 10 seconds to load at 28 kbps)
Reduce size Less than 50 kb per image No more than 100 kb total per page Limit buttons to 2 kb and re-use when feasible
Also: use thumbnails and add warnings
Always specify width and height in markup; this reserves space while the images load
<img src=“images/logo1.gif” width=“250” height=“50” alt=“Logo” />
Effectiveness Through Simplicity
Good graphics provide emotional appeal Eye-catching Balanced Attractive
Of course, rational appeal is also needed Logical arrangement Useful information
Simple designs combine emotional and rational appealExample: ASU’s College of Business
Know Your Clients
First of all, who is the “client”?Actually a twofold clientele exists: Firm sponsoring the website Patrons of what the website offers
Small images for customers involved in Chatting Shopping Information searching
Large images for businesses dependent upon photos Real estate Art
Web Graphics Design Model
Integrates with web design model summarized in Table 2-1Three phases
Phase 2:Design andDevelopment
Phase 3:Web Site Testing
Phase 1:Front- and Back-EndAnalyses
Front/Back End Analyses
Needs assessment What kind of business Target customers Consider book retailer versus toy store
Internet service speeds available and bandwidth requirementsCost/benefit analysis
Use free graphics (sparingly) Use development tools that save time
Determine tools needed Scanner (quality?) Imaging and editing software (Flash?) Digital camera
Design/Development/Editing
Site logoColor coordination Background Text (employ good contrast) Colored text can reduce need for graphics
files (keeps load time down)Navigation buttons Images Attractive text
Photos: scanned or direct from digital cameraAnimated text (use sparingly)
Testing
Locally, where developedRemotely, through the web (from a remote server)Varying monitors Sizes Color depths
MacIntosh and Windows systemsVarious browsers and versions
Some More Flash (If Time)
Rollover buttons Example: EconDSci website Exercise
Shape tweening exerciseAnother look at the markup
Summary of Objectives
Compare and contrast graphics image typesDiscuss why file size is an important consideration Perform basic image editing tasks using MS Photo EditorSummarize image design concepts for the WebDiscuss the web graphics development processReinforce/extend Flash skills Incorporate Flash objects into web pages Create rollover button using Flash Use tweening for animations
For Next Time
Chapter 3 Hands-On Exercise (page 66) Scan/convert conference image Use PhotoEd and Flash (not PS Pro) Also, not Orlando!?
Flash exercises Complete previous exercise if not already done Create rollover button Create shape tweened image Incorporate on personal pages and conference
site
Any questions . . . ?
Appendix
Internet Service Comparisons
POTS: phone modem (56)ISDN: both analog & digital (128)Cable modem: sharing channel (768/10,000)T1: leased line (1,544)DSL: private line (640/9,000)T3: leased line (44,700)ATM: asynchronous transfer (622,000)Internet 2: mostly a concept (1,000,000)Where does broadband fit in?So what . . . ?!
Copyright Law & Intellectual Property
If it’s on the web, it’s copyrighted Seek permission to use Sometimes, fair use applies
Applies to graphics and software“Free” software: Shareware Freeware Beta versions
Let’s Do Some ComparingCreate a static button in Flash
Rectangle with rounded corners and gradient fill White text: “Home” Snap to grid: 8 x 2 (near top left of stage) Resize stage to 155x50 and then center button on
stagePublish (i.e., save as web page)Create GIF version
Click on File | Export Image Provide name and indicate type = GIF Then, in dialog box, select
Full Document Size Transparent Smooth
Create JPEG version in similar fashionNote
File size Quality (add GIF and JPEG to web page, then tinker)
Phase 1: Front/Back End Analyses
Needs assessment What kind of business (strategy, revenue model, . . .) Target customers; consider book retailer versus toy store
(ASU . . . ?)Evaluation of hardware/software (and other aspects of resource system)
Users: bandwidth, user agents, . . . Determine tools needed to build/provide website and deliver
product or service involved Imaging and editing software (Flash?) Development environment (e.g., VStudio) Trial versions available, but beware
Consider technology trends; recall Moore’s LawCost/benefit analysis
Costs: hardware/software, strategy development, web development/outsourcing, site management/maintenance
Benefits: faster/better service, customer loyalty, better CRM, flexibility, lower inventory, . . .
Phase 2: Design and Development
Home and content pagesText fonts, styles and colorHorizontal lines and tablesHyperlinks and navigation buttonseMail linksFrames and formsGraphic arts and images
Phase 3: Web Site Testing
Local-host testingTest on developer’s
computer
Server-side testingTest between server and
developer's computer
Client-side testingTest with various
configurations and browsers at different places and times
An Exercise: A Rollover Button
Open new file, set zoom, and turn on gridCreate basic button
Rectangle at 36 x 180 (2 x 10 on grid) Rounded corners (20 pixels) Stroke: 10 pixels and red Fill: red gradient
Add text (“Home”) Size = 24 point Font = Arial Color = White
Convert to symbol Rectangular select Click on Insert | Convert to Symbol Name btnHome and check Button box
Assign URL: Window | Actions | BrowserNetwork | getURL
Create rollover effects
Button Rollover Effects
Open button in symbol editor Note difference in timeline Only four frames: Up, Over, Down, Hit
Create mouseover effect Select “Over” frame and then Insert | Keyframe Modify button
Repeat for “Down” framePreview (click on Control | Enable Simple Buttons)Return to Scene 1 (standard editor) and modify location and stage sizeSave for web use (File | Publish)Test/modify the web page
Basic Shape Tweening Exercise
Open new file and Turn on grid/snap Zoom to 75%
Create circle near center (red stroke & gradient fill)On timeline, select frame 10
Click on Insert | Blank Keyframe Press Onion Skin icon
Use line tool to draw triangle slightly larger than circle (black stroke)Use bucket tool to fill triangle with gray gradient fillSelect frames 2-9 (press Control key and then drag)Turn off onion skinningRun the animation
With control bar (Window | Toolbars | Controller) Or drag playhead on timeline
Some Enhancements
Turn on looping (Control | Loop Playback)Reverse the action Copy frame 10 to frame 11 Copy frame 1 to frame 20 Tweening is automatically copied!
Now, run the animation