Session 07 - CSS Wrap-up / Image Essentials / User Experience and Design

Harvard Extension School  
Spring 2021

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. Housekeeping
  2. Navigation Systems
  3. Navigation and Lists
  4. Lists as Side Navigation
  5. Dropdown Menus
  6. Breadcrumb Navigation
  7. Image to Replace Text - for a logo, wordmark, etc.
  8. CSS Rounded Borders
  9. CSS Shadows
  10. CSS Gradients
  11. Images Essentials
  12. JPEG
  13. GIF
  14. PNG
  15. SVG
  16. WebP
  17. Comparison of Image Formats
  18. Working with Images
  19. Elements of User Experience
  20. Strategy
  21. Scope
  22. Structure
  23. Skeleton
  24. Surface

Session 07 - CSS Wrap-up / Image Essentials / User Experience and Design, slide1
Housekeeping, slide2
Navigation Systems, slide3
Harvard College, slide4
Navigation and Lists, slide5
display: none, slide6
Lists as Side Navigation, slide7
Lists as Navigation, slide8
Dropdown Menus, slide9
Dropdown Menus, slide10
Dropdown Menus: Vertical, slide11
Breadcrumb Navigation, slide12
Breadcrumb Navigation, slide13
Image to Replace Text - for a logo, wordmark, etc., slide14
CSS Rounded Borders, slide15
CSS Shadows, slide16
box-shadow, slide17
Text Shadow, slide18
Text Shadow, slide19
Opacity - RGBA - red, green, blue, alpha, slide20
Opacity, slide21
CSS Gradients, slide22
linear-gradient, slide23
radial-gradient, slide24
Images Essentials, slide25
Images and the Web, slide26
Graphics Formats for the Web, slide27
image or image or image — Does it matter? , slide28
Graphics: Vector and Bitmap, slide29
Colors, slide30
Color Depth, slide31
Indexed Color Systems, slide32
Bitmap images: Size and Quality, slide33
Graphics Formats for the Web, slide34
JPEG, slide35
JPEG Compression, slide36
JPEG Compression Artifacts, slide37
GIF, slide38
Palettes, slide39
Palettes: Exact, Adaptive, Web 216, slide40
Adaptive Palette: Shift and Dither, slide41
GIF Images and Bit Depth: Color Shift, slide42
GIF Images and Bit Depth: Dither, slide43
Compression for Indexed GIF, slide44
Compression and Dithering, slide45
Transparency, slide46
GIF Animation, slide47
PNG, slide48
Compression for Indexed PNG, slide49
Compression and Dithering, slide50
Transparency, slide51
SVG, slide52
Basic SVG Shapes, slide53
United States Flag, slide54
Harvard Division of Continuing Education Shield, slide55
Massachusetts Map, slide56
Icons, slide57
SVG - Increasing Importance in the Future, slide58
SVG and D3 JS Library, slide59
WebP, slide60
Comparison of Image Formats, slide61
Cartoon Art, slide62
Working with Images, slide63
Start with Original PSD/AI/etc. or High Resolution 24-bit PNG, slide64
Elements of User Experience, slide65
5 Planes in More Detail, slide66
Planning and Designing a Site: Resources, slide67
Strategy, slide68
Who are our Users?, slide69
What Audiences can be identified?, slide70
Audience(s), slide71
Audiences for an Academic Department, slide72
Audiences for a Fitness Club, slide73
Scope, slide74
Content, slide75
Think About the User, slide76
Structure, slide77
Structuring Content, slide78
Organize, slide79
Structural Models, slide80
Hierarchical, slide81
Biological, slide82
Open Directory Project, Yahoo! Categories, 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
Navigation Systems, slide93
Surface, slide94
F-Pattern, slide95
Non-Designer's Design Book, slide96
Non-Designer's Design Book, slide97
Colors, slide98
Home Page -- Don't Make Me Think (Steven Krug), slide99
Don't make me think, slide100

Presentation contains 100 slides