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