Session 07 - Image and Video Essentials / User Experience and Design
Harvard Extension School
Fall 2021
Course Web Site: https://cscie12.dce.harvard.edu/
Topics
- Image and Video Essentials
- JPEG
- GIF
- PNG
- SVG
- WebP - Web Picture
- Comparison of Image Formats
- Working with Images
- Elements of User Experience
- Strategy
- Scope
- Structure
- Skeleton
- Surface
Session 07 - Image and Video Essentials / User Experience and Design, slide1
Image and Video Essentials, slide2
Images and the Web, slide3
Graphics Formats for the Web, slide4
image or image or image — 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
SVG - Increasing Importance in the Future, slide31
Colorado State Flag, slide32
Harvard Division of Continuing Education Shield, slide33
Massachusetts Map, slide34
Icons, slide35
SVG Example - Molecule Viewer, slide36
SVG and D3 JS Library, slide37
WebP - Web Picture, slide38
Comparison of Image Formats, slide39
Cartoon Art, slide40
Working with Images, slide41
Imgix, slide42
Finding Images to Use, slide43
Placeholder Images, slide44
Start with Original PSD/AI/etc. or High Resolution PNG or JPEG, slide45
Responsive Images, slide46
Video: Then and Now, slide47
What's Changed since 2001, slide48
Video vs Images, slide49
Download vs Stream, slide50
HTTP Live/Dynamic Streaming, slide51
Video Quality, slide52
Video Hosting, slide53
Elements of User Experience, slide54
5 Planes in More Detail, slide55
Planning and Designing a Site: Resources, slide56
Strategy, slide57
Who are our Users?, slide58
What Audiences can be identified?, slide59
Audience(s), slide60
Audiences for an Academic Department, slide61
Scope, slide62
Content, slide63
Think About the User, slide64
Structure, slide65
Structuring Content, slide66
Organize, slide67
Structural Models, slide68
Hierarchical, slide69
Biological, slide70
Too deep or too shallow?, slide71
Sequential, slide72
Organic, slide73
Site Architecture, slide74
Label, slide75
Labels - Are there conventions?, slide76
Skeleton, slide77
Page Components, slide78
Wireframes and Sketches - "Low" to "High" Fidelity, slide79
Navigation Systems, slide80
Some navigation systems illustrated, slide81
Surface, slide82
F-Pattern, slide83
Non-Designer's Design Book, slide84
Non-Designer's Design Book, slide85
Colors, slide86
Home Page -- Don't Make Me Think (Steven Krug), slide87
Don't make me think, slide88
Presentation contains 88 slides
