GDS 220 Graphic Design for the Web
Course Content
(Archived from 2019)
Assignments
Projects
Exercises
- Exercise 1: Process Page (and publishing)
- Exercise 2: Skeleton Grid
- Exercise 3: Reverse Engineering
- Exercise 4: Site Architecture (Developing the Content)
- Exercise 5: Simple Bootstrap Page (Xmas)
- Exercise 6: Bootstrap Website (Movie Premiere)
- Exercise 7: Smart Menus with Skeleton (Contact Page)
- Exercise 8: Bootstrap Parallax Scrolling (Li'l Porgy's)
- Exercise 9: Adanced Bootstrap Website (Pro Show)
- Exercise 10: JQuery Lightbox (Portfolio)
Demos
Lectures/Discussions
Internet Resources
- Balsamiq (online sketching app)
- Bootstrap (official site)
- CSS Tests by Bruno Fassino
- Coggle (free online mindmapping tool)
- HTML special characters cheat sheet
- HTML5 Semantic Elements (W3C Schools)
- iPad mock-up (from wellgraphic.com)
- Jotform (free web based form processor)
- Lorem Ipsum Generator ("greek" text)
- Remove Line Breaks (online tool)
- Start Bootstrap (free themes)
- Web Browser Elements (for mock-ups)
- Wireframe Sketching App
Class Handouts
- Client Brief (Example)
- Common Graphics Formats
- Core Fonts Specimen Sheets
- Desktop picture with monitor resolutions:
(1024x768) (1280x960) (1680x1050) - Keyboard Shortcuts: Common Macintosh
- Keyboard Shortcuts: Common Windows
- Vocabulary Wheel
- Web Browser Screenshot (for sketching)
- Web browser test pattern (for measuring browser windows)
- Web Design CSS Cheat Sheet
- Web Design CSS Code Snippets
- Web Design Javascript Code Snippets
- Web Design Site Maps (examples)
- Web Design Statistics
- Wireframe Web Layouts (Examples)