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