Course Overview
This course focuses on introductory theories and techniques for web design. Our primary focus will be on the design of websites--how the visual and interactive aspects of websites are designed in ways appropriate for their users. We will cover an extensive range of technical features (coding HTML, CSS, and PHP, learning the basics of Dreamweaver, Visio, and Photoshop, for example), but our main emphasis is on using those technical features to create usable designs. By the end of the semester, you should be able to demonstrate the abilities to
- Use basic Gestalt theory to analyze and create effective graphical layout of web pages
- Use basic color theory to create effective color schemes for web pages (including both functional and aesthetic aspects)
- Understand the history of website design (in terms of both technology and design styles)
- Analyze and design for specific types of users and goals (in terms of both function and design styles)
- Use Dreamweaver to create and maintain websites, stylesheets (including collaborative features)
- Use Photoshop to edit and create images for Websites (including issues relating to appropriate file type and compression)
- Use Visio to map the basic structure of a website during the planning process
Textbooks
Lynch, Patrick and Sarah Horton, Web Style Guide (2nd ed). Yale UP. ISBN 0-300-08898-1. Listed as WSG in course reading assignments.
Note: WSG is actually available online at http://webstyleguide.com/ As far as I can tell, this is the full version of the print text, so if you want to save a few bucks, you can use the website version. I'm not making any guarantees about whether or not the site will be available all semester or whether or not the content of the website is the same as the print version, but I skimmed through some sections and it seems fine. (I prefer the print version, but I'm (a) an old person and (b) get the book for free.)
Niederst, Jennifer. Web Design in a Nutshell (3rd ed). O'Reilly. ISBN: 0-596-00196-7. Listed as WDN in course reading assignments.
You may need to also pay for additional disk space on Polaris from OIT if your projects take up more than the usual amount of space. This isn't typically an issue for this class, but it's something to keep in mind if your final project for the class involves video or a large number of digital photos, etc.
Usability reports due by 9 pm Sunday.
Final project proposal (email) due next Tuesday.
Tentative Schedule
The information below is all tentative. I'll let you know if/when things change.
Note: I'm currently making some adjustments to the schedule, but only for work after 9.30 (so most of September will remain unchanged except for posting of journal entries).
| Date: | Topic: | Reading (for quizzes): | Due at Start of Class: |
|---|---|---|---|
| 8.26 (tu) | Design | Read in class (no quiz): Web Design Basics (Gestalt Theory) [pdf] | J0: Survey (complete at end of class today) |
| 8.28 (th) | Design | WSG 1: Process | Bring the URL of one badly designed site to class for discussion. |
| 9.2 (tu) | Design | WSG 2: Interface Design | |
| 9.4 (th) | Tech + Tutorial | Usage Share of Web Browsers [wikipedia] Dreamweaver Tutorial [.doc version] (in-class) |
There will be a short quiz on the browser share reading. You don't have to memorize specific numbers or dates, but (a) pay special attention to the section on overestimation and underestimation and (b) be aware of general historical trends (i.e., the trends displayed in the stats in the rest of the article). Also, be sure you know your Polaris userid and password, because you'll need them for the Dreamweaver tutorial. If you don't know them, check with the OIT Helpdesk. |
| 9.9 (tu) | Design + Tech | WDN3: Designing for a Variety of Displays WDN 4: Beginner's Guide to the Server |
J2: Have your journal index online (in correct location and w/correct format) Note: I've moved J3 to Thursday, because it involved reading WSG3 (which was assigned for Thursday's class, not today's). For today, read WDN3 and 4 and have your journal index online. |
| 9.11 (th) | Tech + Design | .htaccess Tutorial (in-class) WSG3: Site Design |
j3: Interface Design and Site Design |
| 9.16 (tu) | Tech | Visio Tutorial (in-class) Discuss Site and User Goals Project |
|
| 9.18 (th) | Design + Tutorial | WSG 4: Page Design Photoshop for Web Design Tutorial |
|
| 9.23 (tu) | Design + Code | Visio Prototyping WDN 7: Intro to XML In class: Installing the Web Developer Extension for Firefox |
Site and User Goals Project Due |
| 9.25 (th) | Code | WDN 8: HTML and XHTML | Site Blueprint: |
| 9.30 (tu) | no class (fall recess) (i think) | ||
| 10.2 (th) | Code | WDN 9: Doc Structure WDN 10: Text Elements |
J6: Banner Image on Journal Demo Pages |
| 10.7 (tu) | CSS | WDN 16: CSS Fundamentals + WDN 17: Selectors |
J7: Recreate the page Zach distributed after his tutorial last Thursday using appropriate codes (as described during the tutorial). |
| 10.9 (th) | Graphics | WDN 12: Images and Objects | J8: Find 5 sites that you think can inspire the design for your topical site. (Content and form are always somewhat mixed, but for this journal entry think more about look: graphics, layout, etc..) Not so much the content, but the design.) Your journal entry should show screenshots of each site + discuss how each of them helps you think about the design of your site. |
| 10.14 (tu) | CSS | WDN 19: Basic Box Model |
Site blueprint (30-node version) due. Link from your journal index as P2: Site Blueprint. See the description of this assignment on the Projects page. |
| 10.16 (th) | Usability | Personas Reading (be sure to follow the links to the five concrete examples) + Usability reading Morae Tutorial |
J9: Based on cardsort reading from Tuesday (and discussion) cardsort the linkbin page into categories. You'll only use one subject: Yourself. Shoot for no more than six categories ("open sort": You create labels for the categories). If your initial pass results in more than six categories, examine the categories to see if any can be combined or broken up and distributed to other categories. Note: When you are creating the note cards, you may need to click the links for some of the items to get more information about what the linked resource covers. For the journal entry, list the category titles you come up with as H2 headings and the individual card labels as bulleted points under each category title. In addition to creating the online journal entry, you need to bring your index cards to class to receive full credit for the journal entry. |
| 10.21 (tu) | CSS | WDN 20: Color and Backgrounds
|
2 Personas: Based on the personas reading (and examples) from last week, do some background research and create 2 personas for potential users of your topical site. You can develop your own format for the personas, but that format should reflect the goals/structure of the examples. You must also write a short (four- or five-paragraph) summary of your research processes (how you got information about your primary users and applied them in writing the personas). You should post the summary and two personas as web pages in your course journal (make a link from your index page to the summary; the summary should then link to the two personas). (Note: Don't just upload Word documents or copy/paste Word text into Dreamweaver; these need to be web pages.) |
| 10.23 (th) | CSS | WDN 21: Floating and Positioning + Page Layout Reading (CSS) | Due by Sunday at 4 pm: Usability Proposal (Site, Tasks) via email (informal proposal) |
| 10.28 (tu) | CSS | WDN 18: Fonts and Font Properties + Next section of usability.gov: the test plan | Run Usability Tests This Week Discuss Photoshop mockup (right-click/ctrl-click to download the example .psd)
|
| 10.30 (th) | Type | WSG 5: Typography | Run Usability Tests This Week Topical Site Mockup Due (Photoshop document). Use a standard 1, 2, or 3 column grid and include lipsum.com filler text, appropriate fonts and colors, and any standard images (such as logo or banner). In class: identify and discuss main IDs and Classes for your layout, characteristics for each. |
| 11.4 (tu) | CSS | WDN 23: Lists and Generated Content | D1 Topical Site Due (placeholders for all pages; main page plus at least one page have somewhat developed content/layout). CSS in place (and being used). Discuss final project Review personas, then in-class workday on topical sites |
| 11.6 (th) | Code | CSS Layout Readings |
Usability Report Due by Sunday (11.9) at 9 pm. (Note: The CD-R can be turned in Tuesday in class, but email me the report itself on Sunday) In-class workday on topical site. |
| 11.11 (tu) | CSS | JavaScript (in-class tutorial) | Final project proposal due. Your client should have agreed, in principle, with the main points by this date. Turn in highlights reel (CD-R) for usability test Some links for work today (save to your u: drive): Lightbox 2 + zipped image samples for tutorial |
| 11.13 (th) | CSS | WDN 25: Managing Browser Bugs |
|
| 11.18 (tu) | CSS | WSG 7: Graphics | Topical Site Due |
| 11.20 (th) | CSS + Design | WSG 6: Editorial Style (including teamwork on formatting the rawtext.txt file) WDN 5: Accessibility |
|
| 11.25 (tu) | CSS | WDN 13: Tables | |
| 11.27 (th) | no class (Thanksgiving Break) | ||
| 12.2 (tu) | Crit | Workshop Final Projects | |
| 12.4 (th) | Crit | Workshop Final Projects | |
| 12.9 | Final Projects Due by 4 pm | ||