Session 08 - Image and Video Essentials / User Experience and Design
Harvard Extension School
Spring 2022
Course Web Site: https://cscie12.dce.harvard.edu/
Topics
- Announcements - Spring Break
- Image and Video Essentials
- JPEG
- GIF
- PNG
- SVG
- WebP - Web Picture
- Comparison of Image Formats
- Maintain aspect ratio for images
- Working with Images
- Video: Then and Now
- Elements of User Experience
- Strategy
- Scope
- Structure
- Skeleton
- Surface
Session 08 - Image and Video Essentials / User Experience and Design, slide1
Announcements - Spring Break, slide2
Image and Video Essentials, slide3
Images and the Web, slide4
Graphics Formats for the Web, slide5
Does it matter? — image or image or image or image , slide6
Graphics: Vector and Bitmap, slide7
Colors, slide8
Color Depth, slide9
Indexed Color Systems, slide10
Bitmap images: Size and Quality, slide11
Images and Sizes, slide12
Graphics Formats for the Web, slide13
JPEG, slide14
JPEG Compression, slide15
JPEG Compression Artifacts, slide16
GIF, slide17
Palettes, slide18
Palettes: Exact, Adaptive, Web 216, slide19
Adaptive Palette: Shift and Dither, slide20
GIF Images and Bit Depth: Color Shift, slide21
GIF Images and Bit Depth: Dither, slide22
Compression for Indexed GIF, slide23
Compression and Dithering, slide24
Transparency, slide25
GIF Animation, slide26
PNG, slide27
Compression for Indexed PNG, slide28
Compression and Dithering, slide29
Transparency, slide30
SVG, slide31
Basic SVG Shapes, slide32
SVG - Increasing Importance in the Future, slide33
Colorado State Flag, slide34
Harvard Division of Continuing Education Shield, slide35
Icons, slide36
SVG Example - Molecule Viewer, slide37
SVG and D3 JS Library, slide38
WebP - Web Picture, slide39
Comparison of Image Formats, slide40
Cartoon Art, slide41
Wordmarks, slide42
Maintain aspect ratio for images, slide43
Working with Images, slide44
Imgix, slide45
Finding Images to Use, slide46
Placeholder Images, slide47
Start with Original PSD/AI/etc. or High Resolution PNG or JPEG, slide48
Responsive Images, slide49
Video: Then and Now, slide50
What's Changed since 2001, slide51
Video vs Images, slide52
Download vs Stream, slide53
HTTP Live/Dynamic Streaming, slide54
Video Quality, slide55
Video Hosting, slide56
Elements of User Experience, slide57
5 Planes in More Detail, slide58
Planning and Designing a Site: Resources, slide59
Strategy, slide60
Who are our Users?, slide61
What Audiences can be identified?, slide62
Audience(s), slide63
Audiences for an Academic Department, slide64
Scope, slide65
Content, slide66
Think About the User, slide67
Structure, slide68
Structuring Content, slide69
Organize, slide70
Structural Models, slide71
Hierarchical, slide72
Biological, slide73
Too deep or too shallow?, slide74
Sequential, slide75
Organic, slide76
Site Architecture, slide77
Label, slide78
Labels - Are there conventions?, slide79
Skeleton, slide80
Page Components, slide81
Wireframes and Sketches - "Low" to "High" Fidelity, slide82
Navigation Systems, slide83
Some navigation systems illustrated, slide84
Surface, slide85
Non-Designer's Design Book, slide86
Non-Designer's Design Book, slide87
Colors, slide88
Home Page -- Don't Make Me Think (Steven Krug), slide89
Don't make me think, slide90
Presentation contains 90 slides
