DES 303

Roski, USC

DES 303 -
Web Design

Roski School of Art and Design

University of Southern California

Lecturer: Ian Besler

Email: ibesler@usc.edu

Classroom: Watt Hall #105

Demos

: Introduction, HTML, Markup, Page Sourcing, and the Web
  1. Lecture Slides: Class Introduction
  2. Demo: Basic <html> Tags (Download HTML Files)
  3. Video Tutorial: Basic <html> Tags
  4. Video Tutorial: Making ASCII Art
: HTML + CSS Stylesheets, Multipage Navigation
  1. Lecture Slides: Web Basics
  2. Lecture Slides: File Transfer Protocol (FTP)
  3. Demo: Linking HTML and CSS (Download HTML/CSS Files)
  4. Step-by-Step Instructions: Linking HTML and CSS
  5. Video Tutorial: Linking HTML and CSS
  6. Demo: Basic Multi-Page Navigation (Download HTML/CSS Files)
  7. Step-by-Step Instructions: Basic Multi-Page Navigation
  8. Video Tutorial: Basic Multi-Page Navigation
: DIVs, display Property, and Semantics
  1. Lecture Slides: CSS Box Model
  2. Demo: DIVS, ID and Class Attributes (Download HTML/CSS Files)
  3. Cheatsheet: Block-Level and Inline Elements (Download HTML/CSS Files)
  4. Cheatsheet: HTML5 Semantic Tags (Download HTML/CSS Files)
: Colors, Fonts, Images
  1. Lecture Slides: Colors and Images
  2. Cheatsheet: CSS Colors (Download HTML/CSS Files)
  3. Lecture Slides: Web Typography, Wireframing
  4. Video Tutorial: Fonts
  5. Cheatsheet: CSS Fonts (Download HTML/CSS Files)
: Dimensions, Position, Float
  1. Lecture Slides: CSS Page Composition
  2. Video Tutorial: Basic HTML and CSS Page Composition
  3. Cheatsheet: CSS Dimensions (Download HTML/CSS Files)
  4. Cheatsheet: CSS position Property (Download HTML/CSS Files)
  5. Cheatsheet: CSS float Property (Download HTML/CSS Files)
  6. Cheatsheet: CSS border-radius Property (Download HTML/CSS Files)
  7. “D for DIV” Demo: Peter Halley Laws of Rock (Download HTML/CSS Files)
  8. Step-by-Step Instructions: “D for DIV”: Peter Halley Laws of Rock
  9. Video Tutorial: “D for DIV”: Peter Halley Laws of Rock
  10. “D for DIV” Demo: “D for DIV”: Peter Halley Primary (Download HTML/CSS Files)
  11. Video Tutorial: D for DIV: Peter Halley Primary
: Pagination, Single-Page Scrollers
  1. Lecture Slides: Pagination, Single-Page Scrolling
  2. Demo: Single Page Scroller with On-Page Bookmark Links (Download HTML/CSS Files)
  3. Step-by-Step Instructions: Single Page Scroller
  4. Video Tutorial: Single Page Scroller
  5. In-Class Research: Single-Page Scroll
: CSS3 transform and transition Properties
  1. Lecture Slides: CSS3 transform Property and transition Property
  2. Demo: CSS3 transform Property (Download HTML/CSS Files)
  3. Demo: CSS3 transform Property with :hover (Download HTML/CSS Files)
  4. Demo: CSS3 transition Property (Download HTML/CSS Files)
  5. Step-by-Step Instructions: CSS3 transition Property
  6. Video Tutorial: CSS3 transform and transition Properties
  7. Bonus Demo: Photo Gallery with CSS3 transition Properties (Download HTML/CSS Files)
: CSS3 Animation, Midterm Preparation
  1. Lecture Slides: Functional Animation
  2. Demo: CSS3 @keyframes Rule Animations (Download HTML/CSS Files)
  3. Step-by-Step Instructions: CSS3 @keyframes Rule Animations
  4. Video Tutorial: CSS3 @keyframes Rule Animations
  5. Bonus Demo: Single Page Scroller with Animated Nav (Download HTML/CSS Files)
  6. Step-by-Step Instructions: Single Page Scroller with Animated Nav
: Midterm Presentations
: Spring Recess (No Class)
: jQuery Actions and Events
  1. Lecture Slides: JavaScript, jQuery, HTML <script> tag
  2. Video Tutorial: jQuery Basics
  3. Demo: jQuery Emoji Story 😃😃😃 (Download HTML/CSS Files)
  4. Step-by-Step Instructions: jQuery Emoji Story 😃😃😃
  5. Cheatsheet: jQuery Mouse Action Events (Download HTML/CSS Files)
: jQuery Photo Galleries
  1. Demo: jQuery Fancybox Lightbox Photo Gallery (Download HTML/CSS Files)
  2. Step-by-Step Instructions: jQuery Fancybox Lightbox Photo Gallery
  3. Demo: jQuery Fotorama Photo Carousel (Download HTML/CSS Files)
: jQuery Scrolling, Parallax
  1. Demo: jQuery Smooth Scroll Easing (Vertical) (Download HTML/CSS Files)
  2. Demo: jQuery Smooth Scroll Easing (Horizontal) (Download HTML/CSS Files)
  3. Step-by-Step Instructions: jQuery Smooth Scroll Easing
  4. Video Tutorial: jQuery Smooth Scroll Easing
  5. Demo: jQuery Scroll Snapping (Download HTML/CSS Files)
  6. Step-by-Step Instructions: jQuery Scroll Snapping
  7. Lecture Slides: Parallax Scrolling Effect
  8. jQuery .stellar(); Parallax Scrolling Effect (Download HTML/CSS Files)
  9. Step-by-Step Instructions: jQuery .stellar(); Parallax Scrolling Effect
  10. Video Tutorial: jQuery .stellar(); Parallax Scrolling Effect
  11. Bonus Demo: Skrollr JavaScript Scroll Animation (Download HTML/CSS Files)
  12. Step-by-Step Instructions: Skrollr JavaScript Scroll Animation
  13. Video Tutorial: Skrollr JavaScript Scroll Animation
  14. Bonus Demo: Skrollr JavaScript Animated Nav Menu (Download HTML/CSS Files)
  15. Bonus Demo: jQuery Sticky Positioning (Download HTML/CSS Files)
  16. Step-by-Step Instructions: jQuery Sticky Positioning
: Responsive Web Design (RWD), CSS3 @media Rule
  1. Lecture Slides: Responsive Web Design (RWD)
  2. Demo: CSS3 @media Rule Media Queries (Download HTML/CSS Files)
  3. Step-by-Step Instructions: CSS3 @media Rule Media Queries
  4. Video Tutorial: CSS3 @media Rule Media Query Breakpoints
: jQuery Mobile Navigation
  1. Lecture Slides: Navigation Drawers
  2. Demo: jQuery Side Drawer “Hamburger Button” Menu (Download HTML/CSS Files)
  3. Step-by-Step Instructions: jQuery Side Drawer “Hamburger Button” Menu
  4. Video Tutorial: jQuery Side Drawer “Hamburger Button” Menu
: Final Project Preparation
: Final Project Presentations

Projects

Exercise #1: “Just ASCII About Me” (20 points)

Due

Exercise Brief

Becoming acquainted with web browser developer tools is an important skill in learning how to read markup and navigate HTML and CSS documents. Start making a habit of looking at the source documents for websites that you regularly visit (for example Craigslist, Facebook, Wikipedia, etc.).

Read the following article: Tom McCormack, “Emoticon, Emoji, Text II: Just ASCII,” Rhizome (2013).

ASCII art (ASCII Art Instructable) is just one example of information that you can find “hidden” in website markup. Spend at least one hour visiting as many major websites as you can, viewing the source markup in the browser developer tools, and taking note of ASCII marks, logos, art, or other hidden messages in the source comments. ASCII logos are generally found inside of <!-- comment tags --> and often are near the top of the document.

Collect at least three (3) examples that you find. Then, using SublimeText, design your own ASCII mark as a brand for yourself (you can design the logo yourself, or use an online ASCII generator). You will include your ASCII mark at the top of all of the website HTML and CSS documents that you create throughtout the semester as a way of “branding” your projects.

Here are a few examples of sites that display ASCII logos, marks, and messages as comments in their source files:

Homework

Create your personal website for the class. Create a link to a sub-page called just-ascii-about-me.html and in the <!-- comments --> on that page paste:

  • At least three (3) examples of ASCII marks that you found hidden in the HTML comments of popular websites (NOT from the example websites provided above)
  • Your own ASCII logo or brand for your web design studio, which we will include in our HTML and CSS source files for all of our exercises and projects
Exercise #2: “Getting to Know U(RL)” (20 points)

Due

Exercise Brief

Create a simple, multi-page website with a consistent navigation interface as a way of introducing yourself to the rest of the class. The pages should be organized so that there is one webpage for each of the following prompts:

  • Your name (my-name.html)
  • Your ASCII logo, as either a JPEG or PNG image, or simply as text characters (my-ascii.html)
  • A list of a few brief details about your educational or professional background my-background.html
  • A designer or design studio that inspires your work (include an anchor link to their website and some images of their work) design-inspiration.html
  • An image and description of a non-designed object that you admire (it is up to you to interpret what a “non-designed” object might be), and why you like it (non-designed.html)
  • An “everyday” design object that most people use or encounter on a regular basis that you think is not adequately appreciated for its design qualities (everyday-object.html)

Getting to Know U(RL) Example Website (Download HTML/CSS Files)

Exercise #3: “D for DIV: Art Forgery with CSS3” (20 points)

Due

Exercise Brief

Use only HTML5 Semantic Tag DIV (Document Division) elements with background-color, border, height, margin, padding, and width specifications in a linked CSS stylesheet to create at least three (3) digital works of art forgery on three (3) separate webpages.

The dimensions of the work must be responsive to the browser window (i.e. they should not be composed with fixed-width wrappers) and all of the elements on the page should be interactive with a background-color change in response to the user's hover.

In-Class Example Exercise:

Peter Halley, Laws of Rock,

You must choose three (3) of the following examples from the list below to recreate or “forge” in markup.

Upload your HTML and CSS files to your class directory and make sure that the documents are properly linked from your main index HTML.

Project #1: “Go with the Scroll” (30 points)

Due

Due

Design Brief

Create a single page scrolling website that communicates a narrative or gives step-by-step instructions for some process or procedure. The design should take into account both image and text, and respond to the pacing and structure of the source material.

Your scrolling site must effectively and correctly implement:

  • Effective use of HTML5 Semantic Tag elements
  • On-page bookmark links
  • At least one (1) custom font using the CSS3 @font-face Rule (or Google Fonts)
  • At least one (1) CSS3 transform property
  • At least one (1) CSS3 transition property
  • At least one (1) CSS3 @keyframes Rule animation

Process Deliverables

  • Written Project Proposal (minimum 300 words, printed): Describe your single page scrolling or parallax concept and your user experience goals for the project.
  • Research References (printed): Provide a list of at least five (5) interesting web sites that you cite as inspiration for the project, either visually or functionally. For each website, provide a brief two sentence statement of what specifically you find inspirational.
  • Mood Board (printed, full-color): Create a visual research “Mood Board” with at least ten (10) reference images. These images should start to suggest the mood/tone of your project, exploring design components such as possible color palettes, typefaces, and descriptive adjectives.
  • Wireframes (printed, black/white): Wireframes are a simple diagram of the structure of the site
  • Comprehensives (printed, full-color): Comprehensives (comps) should depict the visual design of the website, including layout, typefaces, images, colors, etc.

“Go with the Scroll” Project Precedent

Project #2: “Show, Don’t Tell” Image Essay Gallery (30 points)

Due

Project Brief

Gather 20–30 images as a set or series that tells a story, conveys a message, or evokes a series of emotions in the viewer. The images can be photographic, illustrative, digital, or created through some other means. These can be images that you have created, or they can be appropriated, but you must credit the original creator of the images if you are using appropriated images.

Design an interactive photo gallery that showcases that series of images. Your interactive photo gallery must make use of the concepts of Functional Animation, and appropriately implement CSS3 Transforms, CSS3 Transitions, and CSS3 Animations.

Process Deliverables

  • Written project proposal (minimum 300 words, printed): Describe your photo gallery concept and your goals for the project
  • Website wireframes/comps (At least two (2) sketches or prints): Hand-drawn sketches of printed documentation of two different ideas that you have for how to design and layout your photo gallery project

Project Precedent

Project Precedent

What is a Photo Essay?

Themes to Think About:

  • Duration/Time
  • Narrative/Journey
  • Repetition/Difference
  • Layout/Navigation
  • Interface/Interaction
  • Expectations/Surprise
  • Novelty/Conventions
Project #3: “Make Your Homepage!” (40 points)

Due

Design Brief

Design a website to showcase your web design portfolio (feel free to use this website as a showcase for projects from other classes, as well, such as graphic design, fine art, photography, music, etc.) You will need to include:

  • Professional practice standards (functional directory folder structure, no broken links, bandwidth-appropriate file sizes)
  • Your personal ASCII logo/brand hidden in <!-- comment tags --> in the <head> on all pages
  • HTML5 Semantic Tags (i.e. <header>, <h1>, <h2>, <nav>, <ul>, <main>, <section>, <article>, <figure>, <figcaption> <footer>, etc.)
  • Flexible elements (dimensions specified in percentage % units or viewport width vw and viewport height vh units)
  • Interactive components (pseudo-class :hover)
  • CSS3 @font-face Rule embedded fonts (at least two)
  • CSS3 @media Rule media query breakpoints (at least two)
  • CSS3 transform Property (at least one)
  • CSS3 transition Property (at least one)
  • CSS3 @keyframes Rule animation (at least one)
  • jQuery Library (at least one)
  • A logo for your design “studio”
  • Page anchor links for all class projects, demos, and exercises. Each project link should have an image and a statement of what the project is about.
  • An “About” yourself page or section, with a biographical statement and a brand graphic or profile picture
  • A “Links” page with at least five (5) links to inspirational and reference websites

Process Deliverables

  • Written Project Proposal (minimum 300 words, printed): Describe your website concept and your user experience goals for the project
    Research References, Mood Board (both printed, full-color): Provide a list of at least five (5) visual references (these could be websites, apps, video games, fine art, graphic design, etc.) that you cite as inspiration for the project, either visually or functionally. For each reference, provide a brief two sentence statement of what specifically you find inspirational. Additionally, create a visual research “Mood Board” with at least ten (10) reference images. These images should start to suggest the mood/tone of your site, exploring design components such as possible color palettes, typefaces, and descriptive adjectives
  • Project #3 In-Class Research Share-Out
  • Comprehensives (printed, full-color): Comprehensives (comps) should depict the visual design of the website, including layout, typefaces, images, colors, etc. Seperate comprehensives are required for each media device (mobile, tablet, laptop)

Resources

Blogs, Magazines, and Podcasts
Character Encoding
Code Forums and Playgrounds
Color
Design Process
Domains and Hosting
Education
HTML5/CSS3
Image Resources
Inspiration
Interaction Design (IxD) and User Experience (UX) Design
jQuery
Organizations and Activism
Pattern Libraries
Practitioners
Professional Practices
Prototyping and Tools
Recommended Readings
Responsive Web Design
Semantics
Text Editors
Typography
Usability and Testing
User Interface

Students

(Thursday)

  1. Emily B.
  2. Hailey V.
  3. Hans S.
  4. Jacky T.
  5. Melina Mae C.
  6. Michelle J.
  7. Ramzi J.
  8. Selena S.
  9. Terri G.
  10. Vishesh K.

(Friday)

  1. Antonio O.
  2. Asia C.
  3. Jole L.
  4. Justyn G.
  5. Kevin C.
  6. MJ O.
  7. Rachel M.
  8. Stephanie I.
  9. Valery Z.

  1. Jasmin C.
  2. Hanna L.
  3. Ziru L.
  4. Mike M.
  5. Rocio P.
  6. Moris S.
  7. Ragini S.
  8. Abbie S.
  9. Cassidy V.
  10. Miriam W.

  1. Charmaine A.L.
  2. Rachel B.
  3. Jacqueline C.
  4. Ella C.
  5. Austin D.
  6. Yuejia H.
  7. Natalie L.
  8. Ryan R.
  9. Euri P.
  10. Leo Z.

  1. Zoe A.
  2. Sara D.
  3. Taejin K.
  4. Radhika K.
  5. Theodore N.
  6. Suriya P.
  7. Colleen P.
  8. Emma W.
  9. Emma W.
  10. Jane Y.
  11. Leon Z.

(Mon/Wed)

  1. Zara D.
  2. Claire H.
  3. Daniela K.
  4. Youna K.
  5. Sharon L.
  6. Emma P.
  7. Audrey W.
  8. Avram W.

(Tues/Thur)

  1. Sam B.
  2. Paige E.
  3. Audrey H.
  4. Lydia H.
  5. Emma H.
  6. Ariel I.
  7. Steven K.
  8. Kallista K.
  9. Jennifer L.
  10. Megan P.
  11. Nikoli P.
  12. Ethan S.
  13. Sergio S.
  14. Elena W.

  1. Sam C.
  2. Megan D.
  3. Katrina G.
  4. Gigi G.
  5. Angela H.
  6. Sarah H.
  7. Trey H.
  8. Christina J.
  9. Jeong K.
  10. Chloé M.
  11. Sarah N.
  12. Jonathan O.
  13. Catrin P.
  14. Sarolta S.
  15. Fiona W.
  16. Yining X.
  17. Sabrina Y.

Syllabus

Course Description

DES 303 Web Design is a workshop based course that focuses on advanced software applications in design through the exploration of design research, ideation, application, and execution. Students will gain a thorough understanding of design software usage, as they are applied in the field of design - specifically through web and interaction design. This course covers basic methods for the design and construction of user-centered internet websites using HTML5, CSS3, Javascript, and Photoshop.

The course begins with students analyzing and exploring the source documents (HTML, CSS) of web sites that they regularly visit in order to understand fundamental relationships between mark-up, semantics, and structure. It continues with an overview of software utilities used in the design and development of websites including text editors, FTP clients, and Adobe Photoshop, as used for digital imaging and compositing of artwork/photos. It then moves on to topics that include web design principles, architecture, navigation, and advanced graphic techniques. This is followed with intensive instruction on creating websites using HTML5, CSS3, and JavaScript. In-class instructions include class lectures, assignments, deconstructing case-study websites, and readings. Students will be given exercises and projects to be completed during and outside of class. This is a design studio course and projects will be graded based on execution of design as well as software proficiency.

Learning Objectives

  • To explore the most effective and current computer tools used in creating design for imaging and websites.
  • To explore the tools and techniques available through graphic software programs.
  • To raise awareness about design and its implementation in the digital environment.
  • To critically analyze and evaluate website designs.
  • To create a personal website showcasing student’s work by using dynamic web design techniques.
  • To gain a thorough understanding of web authoring and related graphic programs and to explore best practices for creating websites and digital files.

Prerequisites: DES 203 - Digital Tools for Design & DES 202 - Design II

Course Notes

Students are expected to attend all classes and arrive promptly. Attendance and timeliness will be recorded and will impact final grade. Due to the limited number of class hours and contact time, the in-class instruction will focus on lectures, demonstrations, and critiques. Students are expected to complete exercises, projects, and additional studio work outside of class – a complete listing of computer labs / hours on campus will be provided.

Mutual respect in the classroom is critical. Critique is a central component of design practice. Criticism will be constructive and is a response to the appropriateness of the idea and not the dignity of the individual.

It is imperative to meet the deadlines given. Every class session that a project is late the student will be penalized one letter grade (10%) of the total project grade. Every week the class will engage in a discussion topic that explores the impact that computing and the world wide web has had on culture at large, and design practice in particular. Discussion topics will be given during the class meeting the previous week.

  • Ask questions! If a topic or method being demonstrated is unclear or confusing, it is your responsibility to communicate with the instructor to help clarify the issue.
  • Additional critique, feedback, and troubleshooting cannot be effectively conveyed through email. Please email the professor to arrange a meeting during office hours to address these requests
  • Close all tabs, windows, and applications and restart your computer at the beginning of each class
  • Clear your browser history completely at the beginning of each class
  • Browse in “Private” or “Incognito” mode
  • Install and test on as many browsers (Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera) and devices as possible. If you’re encountering issues, try running it on another browser.

Technological Proficiency and Hardware/Software Required

  • Text Editor: SublimeText
  • FTP Client: Cyberduck
  • Internet Browser: Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera
  • Adobe Creative Suite: Illustrator, Photoshop

Supplies

  • Laptop computer
  • Sketchbook
  • Pens, pencils
  • USB thumb drive

Course Requirements & Grading

Grades will be assigned according to strength of the concept/design, process/implementation and presentation/craftsmanship.

Grading will be based on the following:

  • 30% - Technical Exercises
  • 50% - Creative Projects
  • 20% - Class Participation

Students are responsible for all assignments, including homework, in-class work, critiques, presentations, demos, readings, process and archiving work on removable media. It is the student's responsibility to submit missed work and information missed if absent. Attendance is crucial for the success of this class; students must attend class since information exchanged in a group discussion or setting may not be imparted through handouts or notes.

  • A  ……… 95-100
  • A- ……… 90-94
  • B+ ……… 87-89
  • B  ……… 83-86
  • B- ……… 80-82
  • C+ ……… 77-79
  • C  ……… 73-76
  • C- ……… 70-72
  • D+ ……… 67-69
  • D  ……… 63-66
  • D- ……… 60-62
  • F  ……… 59 and below

Requirements for Assignments

  • Do not discard any of your work or research. You will be asked to turn in all research and iterations of your progress with each project. Research may be stored in sketchbooks, documented through photos or in e-journals formats such as blogs by other digital means.
  • All homework and assignments must be submitted on time, in the format outlined. Late assignments will be docked one full grade for each week they are late.
  • All work to be critiqued must be ready for display at the start of class. Hardcopies should be cropped and pinned to the wall by the start of class. Project images should be saved in the appropriate formats and ready to present. Please consider presentation and its display.
  • Please proof read and spell-check your work. Writing and designing use different sides of the brain. It is common for designers to misspell familiar words. All cited work must include a bibliography.
  • Label all work that is handed in clearly! Work submitted via email attachment should include the student's name in the document name. (e.g.: lastname_firstname_assignmentname.zip)

Attendance

This is a studio-based class. Attendance is crucial to the success of the student. Please note that the design area adheres to the following attendance policy:


  • After missing the rough equivalent of 10% of regular class meetings (3 classes) the student's grade and ability to complete the course will be negatively impacted.
  • Being absent on the day a project or assignment is due can lead to an “F” for that project or assignment. Absence will be excused if accompanied by a doctor's note.
  • It is always the student’s responsibility to seek means (if possible) to make up work missed due to absences, although such recourse is not always an option due to the nature of the material covered.
  • It should be understood that 100% attendance does not positively affect a final grade.
  • Any falsification of attendance may be considered grounds for a violation of ethics before the University Office of Student Judicial Affairs.
  • Tardies can accumulate and become equivalent to an absence. 3 tardies = 1 absence.
  • Attendance will be taken using sign-in sheets available the first 20 minutes of class and may be circulated again at the end of class.
  • After a first warning, students who persist in the following disruptive activities: sleeping, texting, emailing or online browsing for purposes other than class research, will be given a tardy for that class session.
  • Students will be considered absent if they leave without the instructor's approval before the class has ended.

Academic Conduct

Plagiarism – presenting someone else’s ideas as your own, either verbatim or recast in your own words – is a serious academic offense with serious consequences. Please familiarize yourself with the discussion of plagiarism in SCampus in Part B, Section 11, “Behavior Violating University Standards”. Other forms of academic dishonesty are equally unacceptable. See additional information in SCampus and university policies on scientific misconduct.

Support Systems

Student Counseling Services (SCS) – (213) 740-7711 – 24/7 on call
Free and confidential mental health treatment for students, including short-term psychotherapy, group counseling, stress fitness workshops, and crisis intervention. engemannshc.usc.edu/counseling

National Suicide Prevention Lifeline – 1 (800) 273-8255
Provides free and confidential emotional support to people in suicidal crisis or emotional distress 24 hours a day, 7 days a week. www.suicidepreventionlifeline.org

Relationship and Sexual Violence Prevention Services (RSVP) – (213) 740-4900 – 24/7 on call
Free and confidential therapy services, workshops, and training for situations related to gender-based harm. engemannshc.usc.edu/rsvp

Sexual Assault Resource Center
For more information about how to get help or help a survivor, rights, reporting options, and additional resources, visit the website: sarc.usc.edu

Office of Equity and Diversity (OED)/Title IX Compliance – (213) 740-5086
Works with faculty, staff, visitors, applicants, and students around issues of protected class. equity.usc.edu

Bias Assessment Response and Support
Incidents of bias, hate crimes and microaggressions need to be reported allowing for appropriate investigation and response. studentaffairs.usc.edu/bias-assessment-response-support

The Office of Disability Services and Programs
Provides certification for students with disabilities and helps arrange relevant accommodations. dsp.usc.edu

Student Support and Advocacy – (213) 821-4710
Assists students and families in resolving complex issues adversely affecting their success as a student EX: personal, financial, and academic. studentaffairs.usc.edu/ssa

Diversity at USC
Information on events, programs and training, the Diversity Task Force (including representatives for each school), chronology, participation, and various resources for students. diversity.usc.edu

USC Emergency Information
Provides safety and other updates, including ways in which instruction will be continued if an officially declared emergency makes travel to campus infeasible. emergency.usc.edu

USC Department of Public Safety – UPC: (213) 740-4321 – HSC: (323) 442-1000 – 24-hour emergency or to report a crime.
Provides overall safety to USC community. dps.usc.edu

Disclaimer

Some elements of the syllabus may be changed at the instructor’s discretion. If there is any aspect of this syllabus which you do not understand, or to which you take exception, please let the instructor know within the first week of class.

Acknowledgements

This syllabus was developed from curricula originally created by Jeff Cain, with additional material developed from curricula by Jamie Cavanaugh and Aaron Siegel.