FADN 303 - Web Design

FADN 303 -
Web Design

Demos

: Midterm Project Phase One: Research and Ideation

: Spring Recess

: Final Projects (Sketching Phase)

Lectures

: Midterm Project Phase One: Research and Ideation

: Midterm Presentations & Critique

: Spring Recess

: Responsive Web Design (RWD)

: Final Projects (Research & Sketching Phase)

Projects

Project #1: “Just ASCII About Me” (10 points)

Due

Design 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 (The ASCII Art Universe) 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 possible, 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, print them on individual sheets of 8.5” x 11” paper. Then, using Sublime Text, design three (3) comps of your own ASCII mark as a brand or logo for yourself (do not use an online ASCII generator; you must design your ASCII logos yourself). 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.

Bring your three reference logos and comps of the three (3) ASCII marks of your personal brand logo printed out on individual sheets at 8.5” x 11” and have them pinned-up and ready for critique at the beginning of class, . Based on the feedback that you receive, revise and develop one (1) of those logos and have the final iteration printed and pinned-up at the beginning of class on .

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

Project #2: “IxD Research Blog” (10 points)

Due

Design Brief

Sign up for a Blogger, Tumblr, or WordPress blog and become familiar with using the dashboard controls (Blogger Support, Tumblr How-To, WordPress Support) by completing the following project: 

Write a brief written critique (at least 200 words) of at least three (3) websites of your choosing. Our interest here is not simply to “review” or “rate” these websites, but to carefully consider relationships between form/aesthetic, usability, functionality, and effective visual communication. For each website, ask yourself: What is working about this digital experience and why? What is not working and how could those deficencies be improved upon?

Remember the elements (color, shape, texture, space, form) and principles (unity/harmony, balance, hierarchy, scale/proportion, dominance/emphasis, similarity/contrast) of visual communication. Consider, also, your own understanding and expectations about the conventions and norms of Interaction Design (IxD) and usability: How do you expect a button to look and function? How do you expect menus, forms, and other interactive components to communicate their affordances?

Each written critique should be made as a single post on your blog. Each post must include a screengrab of the website in question, and must include information about the studio or designer who created the site.

Project #3: “It’s Called Style” (10 points)

Due

Design Brief

Style a webpage using the HTML heading or “hierarchy” tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, the paragraph tag <p>, the anchor tag <a href="…">, and at least one image <img src="…">.

The text must be something that you have written yourself, such as a term paper or written reflection from another class. Use a linked CSS stylesheet to control style specifications such as background-color, text color, font-family, font-size, and font-weight. Upload your HTML file to your class directory and make sure that the document is properly linked from your main index HTML.

Project #4: “D for DIV: Art Forgery with CSS3” (10 points)

Due

Design 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 two (2) digital works of art forgery on two (2) separate HTML documents.

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 Demo: Peter Halley, Laws of Rock,

Project #4 “D for DIV” Peter Halley Step-by-Step Walkthrough

You must choose two (2) of the following examples from the list below. Upload your HTML files to your class directory and make sure that the documents are properly linked from your main index HTML.

Project #5: “Make Your Homepage!” (30 points)

Due

Design Brief

Design a page layout with HTML5 Semantic Tags. This will be be your landing page for all your future assignments. You will need to include:

  • Your ASCII mark, logo, or brand from Project #1, hidden in the comments of the HTML and CSS source files
  • A visual identity for yourself
  • Page anchor links for all class projects (eight total links)
  • An “About” yourself paragraph 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

You will be turning in all of your future projects through this website, so anticipate space for four more projects. Each assignment area should have an image and a design brief of what your project is about.

Our project production schedule will consist of three phases:

  • Phase One: Research and Ideation (project statement and research references)
  • Phase Two: Sketching and Prototyping (style tiles, mood boards, site maps, and wireframes)
  • Phase Three: Composition and Refinement (sketches and design comprehensives)

Grading Rubric for Project #5:

  • Process – Project Statement, Research (5 points):
    Printed statement 200–300 words addressing scope, objectives, audience, and goals of your website, along with inspirational and research references
  • Process – Visual Ideation (Mood Board, Style Tiles) (5 points):
    Printed documentation of process including visual references, material inspiration, sketches, and ideation pertaining to mood, tone, voice, and visual communication strategies of website
  • Process – Wireframes, sitemap, design comprehensives (5 points):
    Printed information architecture schematics of page organization, pagination, structure, and final page comprehensives
  • Technical – Basic HTML5/CSS3 (5 points):
    HTML5 semantic tags, appropriate tagging and markup syntax, ASCII logos on all pages
  • Technical – Professional Best Practices (5 points):
    Bandwidth appropriate file sizes, HTML/CSS comments, CSS font-stack (graceful degradation), file naming conventions, folder structure, etc.
  • Technical – Interactive/Customization (5 points):
    Use of @font-face rule, hover pseudo-class

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

Due

Design 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 Animations, and CSS3 Transitions.

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

Due

Design Brief

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

Project #8: “Real Clients” (30 points)

Due

Design Brief

Create a responsive, multipage website for a real client: your portfolio, a small business, a student group, etc. using HTML5 and CSS3.

The site must make appropriate use of HTML5 semantic tags (<header>, <nav>, <section>, <article>, <figure>, <figcaption>, <footer>, etc.), embedded fonts (CSS3 @font-face rule), and the elements of responsive web design (fluid/modular page components, image size optimization, and CSS3 @media Rule media queries).

Check your site with the W3C Markup Validator, Google Developers Mobile-Friendly Test.

Grading Rubric

  • Process – Project Statement (5 points):
    Printed statement 200–300 words addressing scope, objectives, audience, and goals of your final website
  • Process – Visual Research (Mood Board, Style Tiles) (5 points):
    Printed documentation of research including visual references, inspiration websites, and ideation material pertaining to mood, tone, voice, and visual communication strategies of final website
  • Process – Wireframes, sitemap, design comprehensives (5 points):
    Printed information architecture schematics of page organization, pagination, structure, and final page compositions
  • Technical – Basic HTML5/CSS3 (5 points):
    HTML5 semantic tags, appropriate tagging and markup syntax, ASCII logos on all pages, HTML/CSS comments, file naming conventions, folder structure, etc.
  • Technical – Responsive (5 points):
    Flexible element dimensions (VW/VH, or %), CSS3 @media Rule media query breakpoints (at least two breakpoints), appropriate image sizes
  • Technical – Interactive (5 points):
    jQuery/JavaScript implementation, CSS3 animations, CSS3 transitions, @font-face rule, hover pseudo-class

Resources

Articles, Books, and Readings

Basics

Design

  • Beirut, Michael, et al., ed. Looking Closer 3: Classic Writings on Graphic Design. New York: Allworth Press, 1999.
  • Blechman, Nicholas, Christoph Niemann, Paul Sahre. Fresh Dialog One: New Voices in Graphic Design. New York: Princeton Architectural Press, American Institute of Graphic Arts, 2000.
  • Bush, Akiko. Design is Super. Metropololis Books, 2002
  • Gomez, Edward M. ed. New Design. Los Angeles. Gloucester MA: Rockport Press, 1999.
  • Green, Stephen. Information Design Systems. London and Boston: International Thomson Computer Press, 1996.
  • Heller, Steven. Design Literacy (Continued): Understanding Graphic Design. New York: Allworth Press, 1999.
  • Jacobson, Robert, ed. Information Design. Cambridge, MA: MIT Press, 1999.
  • Kennedy, Bill. HTML & XHTML: The Definitive Guide (6th Edition). O'Reilly Media
  • Lawson, Bryan. How Designers Think: The Design Process Demystified. Oxford: Architectural Press, 1997.
  • MacDonald, Mathew. Creating a Web Site: The Missing Manual. Pogue Press
  • McLuhan, Marshall. The Medium is the Message.
  • McNeil, Patrick. The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design. HOW Publisher
  • McNeil, Patrick. The Web Designer's Idea Book: The Ultimate Guide To Themes, Trends & Styles In Website Design (Web Designer's Idea Book: The Latest Themes, Trends & Styles in Website Design). HOW Publisher
  • Mills, Jason. WebWorks Typography. Gloucester, MA: Rockport Press, 1998.
  • Peterson, Bryan. Using Design Basics To Get Creative Results. Cincinnati, OH: North Light Books, 1996.
  • Pirouz, Raymond, Lynda Weiman. Click Here: Web Communication Design (Lynda Weinman's Web Design Guides). New Riders Publishing, 1997
  • Robbins, Jennifer Niederst. Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics. 3rd Edition. O'Reilly Media Publishing
  • Sparkle, Penny. Design in Context. Chartwell Books, 1987
  • Spiekerman, Erik. Stop Stealing Sheep. Mountain View, CA: Adobe Press, 1993
  • Tonfoni, Graziella. Information Design: The Knowledge Architect's Toolkit. Lanham, M: Scarecrow Press, 1998
  • Ware, Colin. Information Visualization: Perception for Design. San Francisco: Morgan Kaufman, 2000
  • Wong, Wucious. Principles of Form and Design. Van Nostrand Rienhold, 1993.

Schedule

Note: Schedule is subject to change. Please check
frequently and e-mail instructor with any questions.

: Introduction: HTML, FTP, Page Sourcing, and the Web

(#01)
In Class
Homework
Extra Credit
(#02)
In Class
Homework
Extra Credit

: HTML/CSS Foundations

No Class (Martin Luther King Day)
Homework
Extra Credit
(#03)
In Class
Homework

: Content Management Systems (CMS) and Image Formats

(#04)
In Class
Homework
(#05)
In Class
Homework

: HTML/CSS Foundations (Continued)

(#06)
In Class
Homework
(#07)
In Class
Homework

: Midterm Project Phase One: Research and Ideation

(#08)
In Class
  • Project #4: “D for DIV” Due
  • Project #5: Work Session and Desk Critiques
Homework
(#09)
In Class
  • Midterm Project Statement Due
  • Midterm Project Research References Due
  • Project #5: Work Session and Desk Critiques
Homework

: Midterm Project Phase Two: Sketching and Prototyping & Phase Three: Composition and Refinement

(#10)
In Class
Homework
(#11)
In Class
Homework

: Midterm Presentations & Critique

No Class (Presidents’ Day)
Homework
(#12)
In Class
  • Project #5 Due
  • Project #5 formal presentations and critique
Homework
Extra Credit
  • LA Art Book Fair: Attend the LA Art Book Fair, take a selfie with my project (“PROPS” at the Norma Studio table), post selfie somewhere (class blog is fine), send me the link by

: CSS3 Animations, Functional Animations, Signature Microinteractions

(#13)
In Class
Homework
(#14)
In Class
Homework

: Spring Recess

No Class (Spring Recess)
Homework
No Class (Spring Recess)
Homework

: JavaScript & jQuery

(#16)
In Class
Homework
  • Practice Your jQuery!
(#17)
In Class
Homework
  • Practice Your jQuery!

: Pagination, Scrolling, and Parallax

(#18)
In Class
Homework
(#19)
In Class
Homework

: Responsive Web Design (RWD)

(#20)
In Class
Homework
(#21)
In Class
  • Project #7 Design Comprehensives Due: Two pages, full-color, tabloid-size (17" x 11")
Homework

: Responsive Web Design (RWD) (Continued)

(#22)
In Class
  • Project #7 in-class work session
Homework
(#23)
In Class
Homework

: Final Projects (Research, Sketching, Prototyping Phase)

(#24)
In Class
Homework
  • Project #8 Project Statements: 200-300 word printed statement addressing scope, objectives, audience, and goals of your final website
  • Project #8 Design Research and Visual Reference: Printed documentation of research including visual references, inspiration websites, and ideation material pertaining to mood, tone, voice, and visual communication strategies of final website (Mood Boards or Style Tiles)
(#25)
In Class
Homework
  • Project #8 Wireframes and Sitemaps: Printed information architecture schematics of page organization, pagination, and structure

: Final Projects (Composition Phase)

(#26)
In Class
  • Due: Project #8 Wireframes and Sitemaps
  • jQuery Side-Drawer Navigation Menu
Homework
  • Project #8 Design Comprehensives: Printed design layouts for final project (mobile, tablet, and laptop display comprehensives)
(#27)
In Class
  • Due: Project #8 Design Comprehensives
  • Class evaluations
  • Project #8 work session and desk critiques
Homework
Extra Credit (2 pts.)
  • Listen to The Internet History Podcast Episode One: Mosaic (39 min.)
  • Write a 200-300 word reflection statement, post the reflection to your class research blog
  • Email me the link to your blogpost no later than on

Students

Syllabus

Course Description

FADN 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: FADN 203 - Digital Tools for Design & FADN 202 - Design II

Best Practices

  • 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, and use a script blocking extension (NoScript, ScriptBlock)
  • 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.

Standard Procedures and Ground Rules

Students are expected to attend all classes and arrive promptly. Attendance will be taken and can impact your grade. Due to the limited number of class hours and contact time, the in-class instruction will focus on lectures and critiques. Students are expected to complete projects, exercises, and additional studio time outside of class – a complete listing of computer labs / hours on campus will be provided. Mutual respect in the classroom is critical. Critique is inevitable. Criticism will be constructive, and is based in the appropriateness of the idea and not the dignity of the individual. It is imperative to meet the deadlines given, every class day a project is late the student will be penalized one grade (10%) on their assignment. 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.

Software tools to be utilized include:


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:

  • 40% - Technical Exercises
  • 40% - 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.

  • 95 - 100 A  = 4.0
  • 90 - 94  A- = 3.7
  • 85 - 89  B+ = 3.3
  • 80 - 84  B  = 3.0
  • 75 - 79  B- = 2.7
  • 70 - 74  C+ = 2.3
  • 65 - 69  C  = 2.0

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 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.

Discrimination, sexual assault, and harassment are not tolerated by the university. You are encouraged to report any incidents to the Office of Equity and Diversity or to the Department of Public Safety. This is important for the safety of the whole USC community. Another member of the university community – such as a friend, classmate, advisor, or faculty member – can help initiate the report, or can initiate the report on behalf of another person. The Center for Women and Men provides 24/7 confidential support, and the sexual assault resource center webpage describes reporting options and other resources.

Support Systems

A number of USC’s schools provide support for students who need help with scholarly writing. Check with your advisor or program staff to find out more. Students whose primary language is not English should check with the American Language Institute, which sponsors courses and workshops specifically for international graduate students. The Office of Disability Services and Programs provides certification for students with disabilities and helps arrange the relevant accommodations. If an officially declared emergency makes travel to campus infeasible, USC Emergency Information will provide safety and other updates, including ways in which instruction will be continued by means of blackboard, teleconferencing, and other technology.

Disabilities and Academic Accommodations

Any student requesting academic accommodations based on a disability is required to register with Disability Services and Programs (DSP) each semester. A letter of verification for approved accommodations can be obtained from DSP. Please be sure the letter is delivered to me as early in the semester as possible. DSP is located in STU 301 and is open 8:30am - 5:00pm, Monday through Friday. The phone number for DSP is (213) 740-0776.

Roski Admissions Information

For information and an application to become a Fine Arts minor, please visit the Art & Design Minors page. Please contact Christina Aumann in HSH-101 / aumann@usc.edu / (213) 740-6260 with any questions about a minor in Fine Arts. To become a Fine Arts major, please visit the Degrees Offered page. Please contact Penelope Jones in HSH-101 / penelope@usc.edu / (213) 740-9153 with any questions about majoring in art. Applications are due October 1st and March 1st every year.

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.

Readings

Acknowledgements

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