Session 07 - Image and Video Essentials / User Experience and Design
Harvard Extension School
Fall 2023
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?, slide56
Video vs Images, slide57
Download vs Stream, slide58
HTTP Live/Dynamic Streaming, slide59
Example Video, slide60
Video Quality, slide61
Video Hosting, slide62
Video and Accessibility, slide63
WebVTT Caption format example, slide64
Elements of User Experience, slide65
5 Planes in More Detail, slide66
Design and UX Resources, slide67
Strategy, slide68
Who are our Users?, slide69
What Audiences can be identified?, slide70
Audience(s), slide71
Audiences for an Academic Department, slide72
Scope, slide73
Content, slide74
Think About the User, slide75
Structure, slide76
Structuring Content, slide77
Organize, slide78
Structural Models, slide79
Hierarchical, slide80
Biological, slide81
Too deep or too shallow?, slide82
Sequential, slide83
Organic, slide84
Site Architecture, slide85
Label, slide86
Labels - Are there conventions?, slide87
Skeleton, slide88
Page Components, slide89
Wireframes and Sketches - "Low" to "High" Fidelity, slide90
First Low-fidelity Skeleton for a Project, slide91
Navigation Systems, slide92
Some navigation systems illustrated, slide93
Surface, slide94
Non-Designer's Design Book, slide95
Non-Designer's Design Book, slide96
Colors, slide97
Home Page -- Don't Make Me Think (Steven Krug), slide98
Don't make me think, slide99
Presentation contains 99 slides
