User Experience and Design

Harvard Extension School  
Fall 2020

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. Graphics and Images
  2. JPEG
  3. GIF
  4. PNG
  5. SVG
  6. WebP
  7. Comparison of Image Formats
  8. Working with Images
  9. Overview: User Experience
  10. Strategy
  11. Scope
  12. Structure
  13. Skeleton
  14. Surface
  15. Creating Links

Session 07 - Images / User Experience and Design, slide1
Graphics and Images, slide2
Graphics: Purpose, slide3
Graphics Formats for the Web, slide4
file or file or file -- Does it matter? , slide5
Graphics: Vector and Bitmap, slide6
Colors, slide7
Color Depth, slide8
Indexed Color Systems, slide9
Bitmap images: Size and Quality, slide10
Graphics Formats for the Web, slide11
JPEG, slide12
JPEG Compression, slide13
JPEG Compression Artifacts, slide14
GIF, slide15
Palettes, slide16
Palettes: Exact, Adaptive, Web 216, slide17
Adaptive Palette: Shift and Dither, slide18
GIF Images and Bit Depth: Color Shift, slide19
GIF Images and Bit Depth: Dither, slide20
Compression for Indexed GIF, slide21
Compression and Dithering, slide22
Transparency, slide23
GIF Animation, slide24
PNG, slide25
Compression for Indexed PNG, slide26
Compression and Dithering, slide27
Transparency, slide28
SVG, slide29
Basic SVG Shapes, slide30
United States Flag, slide31
Harvard Division of Continuing Education Shield, slide32
Massachusetts Map, slide33
Icons, slide34
SVG - Increasing Importance in the Future, slide35
SVG and D3 JS Library, slide36
WebP, slide37
Comparison of Image Formats, slide38
Cartoon Art, slide39
Working with Images, slide40
Start with Original PSD/AI/etc. or High Resolution 24-bit PNG, slide41
User Experience and Design, slide42
Overview: User Experience, slide43
Elements of User Experience, slide44
Elements of User Experience, slide45
Nine Pillars of Successful Web Teams, slide46
Planning and Designing a Site: Resources, slide47
Strategy, slide48
Who are our Users?, slide49
What Audiences can be identified?, slide50
Audience(s), slide51
Audiences for an Academic Department, slide52
Audiences for a Fitness Club, slide53
Scope, slide54
Content, slide55
Think About the User, slide56
Structure, slide57
Structuring Content, slide58
Organize, slide59
Structural Models, slide60
Hierarchical, slide61
Biological, slide62
Open Directory Project, Yahoo! Categories, slide63
Too deep or too shallow?, slide64
Sequential, slide65
Organic, slide66
Site Architecture, slide67
Label, slide68
Labels - Are there conventions?, slide69
Skeleton, slide70
Page Components, slide71
Wireframes and Sketches - "Low" to "High" Fidelity, slide72
Navigation Systems, slide73
Harvard College, slide74
Breadcrumb Navigation, slide75
Clamshell navigation, slide76
Dropdown/Popout Menus, slide77
Multiple Navigation Modes, slide78
Surface, slide79
F-Pattern, slide80
Non-Designer's Design Book, slide81
Non-Designer's Design Book, slide82
Colors, slide83
Home Page -- Don't Make Me Think (Steven Krug), slide84
Don't make me think, slide85
Creating Links, slide86
The Scent of Links, slide87
Deep Linking, slide88
Old Example from Logan Airport (BOS) - Old Site, slide89
Old Example from Mass RMV, slide90
"Click Here", slide91
"Click Here", slide92
"Click Here" to prompt an action, slide93
"Learn More" Links: You Can Do Better, slide94

Presentation contains 94 slides