This syllabus was written in the fall of 2000 for a journalism course taught by former UW-Oshkosh Department of Journalism adjunct faculty member Matthew Stanton. Note that many of the recommend links below now go to dead sites, but are included here for reference back on the coursework of the time.
SUMMARY:
Spring 2001 instruction for this course will be done by Matthew Stanton from 5:20 p.m. to 9:30 p.m. on Wednesdays in Clow 128. Additional class information will be posted online.
Students will be be exposed to the basics of current design techniques for online media. Particular focus will be given to Web sites aimed at editorial journalism, advertising and public relations. In-class workshops and out-of-class projects will be used to give students experience in the design and marketing of their own Web content.
Benchmark skills will include: familiarity with Web browsers, following good information architecture, creating compelling and functional graphic Web layouts, knowledge of HTML, experience with Photoshop, and understanding of the strengths and weaknesses of various online media formats.
REQUIRED TEXTS:
Web Design in a Nutshell by Jennifer Niederst
(1998, O’Reilly & Associates; ISBN 1565925157; Amazon | B&N.com).
Designing Web Usability: The Practice of Simplicity by Jakob Nielsen
(1999, New Riders; ISBN: 156205810X; Amazon | B&N.com).
Visual QuickStart Guide Photoshop 5.5 for Windows and Macintosh by Elaine Weinmann and Peter Lourekas
(1999, Peachpit Press; ISBN 0201699575; Amazon | B&N.com).
In addition to textbooks, students must also purchase Zip disks to save their work. Saving work on multiple Zip disks is highly recommended.
COMPUTER COMPETENCY:
Students are expected to understand the following concepts before the course:
- launching applications, opening and saving files on a Macintosh (or Windows PC)
- finding files on disks, creating folders and subfolders (aka directories, subdirectories)
- click vs. double-click vs. click-and-drag
- using pull-down menus in programs, knowing basic keyboard shortcuts (save, open, new)
- using the desktop clipboard (cut-and-paste, copy-and-paste) and related keyboard shortcuts
- using click-and-drag to make a selection of text or pixels of an image
GRADING:
Points toward a final grade will be awarded based on the following:
- weekly quizzes (1 point each; 10% of grade)
- midterm exam (30 points; 30% of grade)
- in-class project due at end of course (30 points; 30% of grade)
- final exam (30 points; 30% of grade)
A final letter grade will be given based on the student’s total points:
- A: 90 to 100
- A, B: 87 to 89
- B 83 to 86
- B, C: 78 to 82
- C: 73 to 77
- C, D: 68 to 72
- D: 60 to 67
- F: below 60
Students will be permitted to confer with each other on all in-class exercises except for quizzes, midterms and final exams. University guidelines regarding academic dishonesty, including policies for punishments, will be adhered to in this course.
ABSENCES:
Students are encouraged to attend all classes. Much of the learning will take place through classroom practice of production techniques. However, because it is understood that sometimes factors such as illness will prevent attendance, students will be permitted to miss two graded exercises without penalty. (This does not, however, apply to the two tests and the final project, which must be made up in event of illness or other problems.) If exceptional circumstances force them to miss more than two classes, students will be expected to discuss their absence with the instructor within a week of the absence, and makeup work will be assigned if appropriate. Failure to do so will result in failing grades for those assignments. Because it is assumed students will attend class if they are able to do so, no bonuses will be given for perfect attendance. Guest speakers or special presentations may be added without prior notice.
SCHEDULE:
Note: Times listed below may be subject to change throughout the course.
WEEK 1 – INTRODUCTION/OVERVIEW
- Course introduction, handout of syllabus; help e-mail; course URLs
- Discussion: Class expectations, students’ favorite Web sites
- Lecture: Overview of new media (CD-ROM, e-mail, Web, wireless, Palm); history of Internet formats, files and media; new media skills, jobs and salaries
- In-class Exercise: Features of Netscape and Internet Explorer; W3C, browser incompatibilities, screen real estate
- Lecture: How interactive media differs from print and broadcast; user experience design vs. content design; death-to-download ratios, design vs. user patience
- In-class Exercise: Quick walk-through of Photoshop, Dreamweaver
- Related Web sites:
WEEK 2 – INTRODUCTION TO HTML
- Quiz: Strengths and weakness of new media vs. old media
- Preclass Homework: Read Niederst, pp. 1-260; bring copy of resume
- Lecture: HTML vs. dHTML vs. XHTML vs. XML vs. WAP vs. ????; just text, no need to compile; parts of an HTML document – <HEAD> vs. <BODY>; metatags; text structure and presentation tags, Cascading Style Sheets
- In-class exercise: Reformatting sample text file into a Web page using Dreamweaver
- Lecture: Hypertext links, in-line images, imagemaps, simple tables, frames; the future of XML
- In-class exercise: Creating Web page resume in Dreamweaver, submitting resumes to Monster.com
- Related Web sites:
WEEK 3 – INTRODUCTION TO PHOTOSHOP
- Quiz: HTML tag usage
- Preclass homework: Read Niederst, pp. 265-303, Weinmann and Lourekas, pp. 1-262, 307-370
- Lecture: GIF vs. JPEG vs. PNG vs. SWF; pixels vs. picas, 72 dpi; Web-safe colors, dithering, anti-aliasing
- In-class exercise: Walk-through of Photoshop tools and features, editing an image (student’s photo), color correcting, saving
- Lecture: Walk-through of ImageReady tools and features, animation formats and techniques, optimizing images
- In-class exercise: Create animated banner ad; create and slice animated cityscape; place sliced images with text on Web page
- Related Web sites:
WEEK 4 – ELECTRONIC MEDIA DESIGN AND PRODUCTION
- Quiz: Image formats and colors for the Web
- Preclass Homework: Read Nielsen: pp. 2-160
- Lecture: User habits online, adcult and competition for attention, building and protecting brand (Nike vs. Union Carbine), online marketing (B2B vs. B2C)
- In-class exercise: Three-stage production of breaking news for a Web site
- Lecture: Viral marketing, cookies, ad banner networks, other ad models; banner ads, clickthroughs, campaigns; E-commerce, online auctions vs. brick-and-mortar stores; public relations and the Internet
- In-class exercise: Outline e-mail/Web promotion strategy for new product or idea; create banner ads; create art images for future promotions or news feature
- Special in-class exercise: Wisconsin Free Community Papers Web Site Design evaluations. For more information, see Dr. James C. Tsao (tel. 920.424.0352; email Tsao@uwosh.edu).
- Related Web sites:
WEEK 5 – INFORMATION ARCHITECTURE
- Quiz: Strengths and weaknesses of e-mail/Web as mass media
- Preclass Homework: Read Nielsen: pp. 161-390
- Lecture: Build on what users know, expect; labeling systems and metaphor; navigation elements; case study – a public library; searching systems and research tools
- In-class exercise: Pick a target niche/demographic, describe how/why audience will be targeted, storyboard a (news/ad/pr) Web site, create labels for sections
- Lecture: Learning discipline and editing, using focus groups, heuristics and interface standards (Windows vs. Palm vs. ????)
- In-class exercise: Create a Web-based project tracking outline
- Related Web sites:
WEEK 6 – ADVANCED PHOTOSHOP AND ANIMATION
- Quiz: Information architecture fundamentals
- Preclass Homework: Review Weinmann and Lourekas, pp. 1-262, 307-370.
- Lecture: Automated actions in Photoshop 5.5 / ImageReady 2.0, using filters and layer effects, monotones for the Web, importing EPS and Illustrator files
- In-class exercises: Create thumbnail page of photo gallery, create illustration from pieces of stock art
- Lecture / In-class exercise: Pre-midterm Q & A and review, preview of course final projects
- Related Web sites:
WEEK 7 – MIDTERMS
- Quiz: Photoshop and ImageReady, animation
- In-class multiple choice test (closed book); in-class competitive design exercise (open book)
- In-class exercise: The Web for fun, Shockrave and MP3, video games as models of user interface, networked / online games
- Movie: Max Headroom: 20 Minutes Into The Future
WEEK 8 – DYNAMIC HTML AND STYLESHEETS
- Quiz: General topics
- Lecture: Complex layout using tables; Flash, sounds, video, JavaScript, forms, CGI, server-side includes; dynamic HTML, Cascading Style Sheets; the Document Object Model (DOM); Active Server Pages, SQL, PHP, Perl, ColdFusion, Java; WAP and Palm markup; when too many bells and whistles kill a site
- In-class exercise: Create a response form for use on a Web site; create a frameset; create a JavaScript pull-down menu
- Lecture: Colored tables as graphics, Cascading Style Sheet/dHTML positioning (layers); Java applets; real-life JavaScripts (pop-up windows)
- In-class exercise: Create an image for use in a rollover (something which lights up); use JavaScript to create a rollover effect for navigation
- Related Web sites:
WEEK 9 – PROJECT MANAGEMENT
- Quiz: Review of cutting-edge technologies
- Preclass Homework: Create a SWOT analysis for final project; turn in list of existing Web sites which could serve as models, rivals
- Lecture: Creating a project profile, scheduling production, setting milestones
- In-class exercise: Create project profile for final project, create content checklist, discuss SWOT analysis findings with other groups
- Lecture: Working with hosting vendors; working with application service providers; working with contract services and freelancers; working with clients from heaven; working with clients from hell
- Related Web sites:
WEEKS 10, 11, 12, 13 – FINAL PROJECTS
- Teams produce work in-class, weekly status reports given to instructor
- Related Web sites:
- Uncle Jakob’s Designing Websites to Maximize PR
WEEK 14 – FINAL EXAM AND PROJECT DEADLINE
- In-class multiple choice test (closed book), in-class competitive design exercise (open book)
- In-class presentations of final projects (live demos)