FADN303 Web Design
Roski School of Art and Design
University of Southern California Spring, 2017

Instructor: Joe Potts, Email: josephpo@usc.edu
Classroom: Harris Hall 112D
Class time: Friday, 2:00 p.m. - 4:50 p.m.
Office hours: Friday, 12:00 p.m. - 2:00 p.m. (by appointment)

Please Note: Assignment briefs may be fine-tuned and adjusted throughout the semester to better reflect material covered in lectures and demos. Please check frequently and e-mail instructor with any questions.


  1. Assignment #1
    Just ASCII About Me (10 points)

    Due:

    Assignment 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 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 two or three (2-3) examples that you find and paste them into a Sublime Text or Brackets HTML document as inspiration and reference. Then, using Brackets or Sublime Text, design three (3) comps of your own ASCII mark as a brand for yourself (do not use an online ASCII generator; you must design your logos “by hand”). 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 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 next week (January 20). Based on the feedback that you receive, you will then make any revise and develop one (1) of those logos and have the final iteration printed and pinned-up at the beginning of class the following week (January 27).

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



  2. Assignment #2
    IxD Research Blog (10 points)

    Due:

    Assignment Brief

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

    Write a brief written critique (at least 200 words) of any three (3) websites of your choosing. You may do more, but the minimum is three. 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 deficiencies 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 also include at least one screengrab of the website in question, and include information about the studio or designer who created the site.



  3. Assignment #3A
    Style an Interview (10 points)

    Due: Friday, February 3, 2017

    Assignment Brief

    Using Brackets or Sublime Text, Style an interview using the HTML heading or “hierarchy” tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, the paragraph tag <p>, the anchor tag (i.e. make a link) <a href="…">, and at least one image <img src="…">. In addition, you must also create a minimum of 2 CSS classes to differentiate the interview voices (one for each interview voice).

    The interview may be something that you have conducted yourself, or can be sourced from somewhere else. Use a linked CSS stylesheet to control style specifications such as background-color, text color, font-family, font-size, and font-weight.

    Next week in class we will upload your HTML file to your class directory and make sure that the document is properly linked from your main index HTML.



  4. Assignment #3B
    D for DIV: Art Forgery with CSS (10 points)

    Due:

    Assignment 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: Quick and Dirty CSS Rothko,

    You must choose two (2) of the following examples from the list below. (Or you can select one (1) from the list below, and a second of your choosing. Upload your HTML files to your class directory and make sure that the documents are properly linked from your main index HTML.



  5. Assignment #3C
    Full HTML/CSS Layout: Make Your Homepage! (30 points)

    Complete version due:

    Assignment 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 Assignment #1, hidden in the comments of the HTML and CSS source files
    • A visual identity for yourself
    • Page anchor links for all class assignments (nine 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 assignments through this website, so anticipate space for four more assignments. Each assignment area should have an image and a design brief of what your project is about.


    Grading Rubric for Assignment:

    Our project production schedule will consist of three phases:

    • Phase One (5 points): Research, Ideation and sketching (project statement and research references)
    • Phase Two (5 points): Prototyping, Composition, and Refinement (site maps, wireframes, and final design)


    • Conceptual (3 points): Website and formal in-class presentation communicate a clear, conscious intent and stance towards an issue or idea (either formal or critical)
    • Discurssive (3 points): Formal in-class presentation effectively communicates the designer's process, intentions, interests, and outcomes, and enables a productive critique of the work presented
    • Formal (3 points): Website composition reflects understanding and effective use of the elements (color, shape, texture, space, form) and principles (unity/harmony, balance, hierarchy, scale/proportion, dominance/emphasis, similarity/contrast) of design and visual communication
    • Novelty (3 points): Formal in-class presentation and website composition reflect a command of web conventions and an effort to innovate, challenge, or subvert the assumptions and expectations that users may typically bring to digital experiences
    • Technical Proficieny (3 points): Website reflects appropriate use of HTML/CSS syntax, semantic tags, structuring, file naming conventions, folder structure, and general best practices for web design



  6. Assignment #4
    Photo Essay Gallery (20 points)

    Complete version due:

    Assignment Brief

    Gather 20–30 photographs as a set or series that tells a story or evokes a series of emotions in the viewer.

    Design an interactive photo gallery that showcases that series of images. Extra credit: incorporate parallax elements into the design



  7. Assignment #5
    meta website / a test of what you know. (100 points)

    Due:

    Assignment Summary

    Using the kit of parts that we have assembled in class so far, create a site that demonstrates a knowledge of each of these elements. Your site should be useful to you as a place to go in the future if you need to use these resources, and also could be useful to another person learning about web design.

    Assignment Details adjective: meta 1. (of a creative work) referring to itself or to the conventions of its genre; self-referential.

    This project involves building a meta website, in other words, a website about the building of websites. In it, you will use the tools that we have covered this semester, and are also welcome to use any other tools you may have encountered or be familiar with that go beyond the scope of what we've been able to do in class.

    Your website, when finished, should serve several purposes:

    1. It will demonstrate and annotate your understanding of the foundational skills and tools of web development covered in this class: HTML5, CSS, and a small amount of javascript / jquery.
    2. It will serve as a kit of parts that you can use to build future websites with, by copying and pasting certain parts of the code, and applying them to whatever designs you may end up making in the future.
    3. It will be something that you can add to in the future as you learn new skills, tools, and techniques

    Below are listed a number of features that your website must contain, along with point values assigned to each feature. Some of the features are non-negotiable, others are optional, and will increase the point value (and thus the grade) of your site.

    Non-negotiable:

    1. STRUCTURE: 35 pts
      A semantically correct HTML5 structure (nested within a container div) with clean and consistent tabbing to indicate openings and closings of tags. This structure must include: header, nav, section, and footer tags.
      [extra points for correct usage of article and aside tags]
    2. SIZING: 15 pts show at least one element on the page with a fixed pixel size, and another that uses vh / vw to adjust size according to percentage of viewport width/ height:
    3. EXTERNAL LINKS IN HEAD 15 pts.
      - A separate, linked CSS file containing the styles for your webpage. (5pts) - A link to 2 external CDNs within the tags of your document (could be google fonts, jquery, bootstrap, uilang, etc.) (10pts)
    4. NAVIGATION 10pts
      A navigation menu using nav, ul, and li with a fixed position (could be fixed to top, bottom, or anywhere else on the page) 2 Extra points for having the items in the list appear side by side.
    5. LINKS. 10 pts (5 each.)
      At least one link to an external page, at least one link to an anchor tag (#) on the same page All of these things add up to 85 points. If you do all of them successfully, You will have a "B" on your site.

    Optional inclusions. Each successful inclusion adds the points listed.

    1. IMAGES: up to 4pts
      • 1. Put an image in a div as a background image in CSS
      • 2. Put an image in a div using an img tag.
    2. CSS Float Property: 2pts
      Successfully demonstrate the use of the CSS 'float' property (http://f1.fadn303.net/pages/week-04-css-float-property/)
    3. CSS Transform and Transition properties: 2pts
    4. POSITIONING AND Z-INDEX: up to 4pts
      • Demonstrate and label use of CSS Position property and values
        position: static|absolute|fixed|relative|initial|inherit;
      • Demonstrate use of z-index property to organize things on the page in terms of one thing being in front of or behind another thing (hint, having one object be position: fixed; and another position: static; or position: absolute; can be a good way to show this).
    5. SCRIPTS: 2 pts each (up to 4 pts)
      • use an existing jquery script within your page, i.e.:
        - implement parallax on your page using stellar (http://markdalgleish.com/projects/stellar.js/)
        - smooth scroll to an anchor link on the same page (https://github.com/cferdinandi/smooth-scroll / https://github.com/cferdinandi/gumshoe) 2. toggle classes on your page using uilang (http://uilang.com/)
    6. CUSTOM FONTS: 2 pts
      • use a custom font using @font-face tag
      • use a custom font using google fonts
    7. MEDIA QUERIES: 2 pts
      use a media query to identify at least one size break-point in order to create a responsive site OR use bootstrap's media queries and grid.

    As you can see, for any overachievers out there, it is possible to get up to 105 points (out of 100) on this assignment. This allows you to pick and choose the items that you'd like to use, or to go all out and use them all to get some extra credit.

    All of this should be appropriately labeled on the page, and clearly commented in the tags.



  8. Assignment #7
    Real Clients (30 points)

    Due:

    Assignment 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 for Assignment #7

    • Process – Project Statement (5 points):
      Minimum 100-word printed statement 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