Transcript Adding Visual Appeal to eCommerce Websites

MIS 4453 -- Spring 2004
eCommerce Technologies
Adding Visual Appeal to eCommerce
Websites
Instructors:
Kelly Fish, Ph.D.
John Seydel, Ph.D.
Student Objectives
Compare and contrast graphics image types
Discuss why file size is an important
consideration
Perform basic image editing tasks using MS
Photo Editor
Summarize image design concepts for the Web
Discuss the web graphics development process
As 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 intuitive
Inappropriate graphics, however, can destroy
the message
Principles





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 player
Using 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
Cropping
Resizing:


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 images
Advantages of GIF:



Typically smaller file sizes
Features: animation, transparency, interlacing
Applications: logos, buttons, icons, etc.
Vector graphics are thus an alternative to GIF
File size comparisons . . .
Some Image Design Guidelines
Use sparingly to avoid clutter and to control load time
Arrange to achieve balance with text and white space
Maintain contrasts when using background images
Keep 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 appeal
Example: 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-1
Three phases 
Phase 1:
Front- and Back-End
Analyses
Phase 2:
Design and
Development
Phase 3:
Web Site Testing
Front/Back End Analyses
Needs assessment



What kind of business
Target customers
Consider book retailer versus toy store
Internet service speeds available and bandwidth
requirements
Cost/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 logo
Color 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
camera
Animated text (use sparingly)
Testing
Locally, where developed
Remotely, through the web (from a
remote server)
Varying monitors


Sizes
Color depths
MacIntosh and Windows systems
Various browsers and versions
Some More Flash (If Time)
Rollover buttons


Example: EconDSci website
Exercise
Shape tweening exercise
Another look at the markup
Summary of Objectives
Compare and contrast graphics image types
Discuss why file size is an important
consideration
Perform basic image editing tasks using MS
Photo Editor
Summarize image design concepts for the Web
Discuss the web graphics development process
Reinforce/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 Comparing
Create 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 stage
Publish (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 fashion
Note


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 Law
Cost/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 pages
Text fonts, styles and color
Horizontal lines and tables
Hyperlinks and navigation buttons
eMail links
Frames and forms
Graphic arts and images
Phase 3: Web Site Testing
Local-host testing
Test on developer’s
computer
Server-side testing
Test between server and
developer's computer
Client-side testing
Test with various
configurations and browsers
at different places and
times
An Exercise: A Rollover Button
Open new file, set zoom, and turn on grid
Create 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” frame
Preview (click on Control | Enable Simple Buttons)
Return to Scene 1 (standard editor) and modify
location and stage size
Save 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 fill
Select frames 2-9 (press Control key and then drag)
Turn off onion skinning
Run 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