Projects

Project One: Onboarding

Due February 28, 11:59pm CT

Project Description

You will create a compelling single-page site that features a sign-up process to get new users to join some type of project, such as an email list, a software beta test, or an open-source community. The goal of this project is to experiment with patterns of interaction that persuade someone to sign up for whatever it is you’re offering, which is not an easy task. Design for effortless, engaging entry of personal information. Include friendly, frictionless client-side tests and alerts for malformed, missing, or incomplete information.

Project Goals

  • Create a touch-friendly, mobile-first responsive web design
  • Experiment with design and interaction patterns for pleasing user experience
  • Design and execute a progressively enhanced page focused on system users and tasks
  • Apply design principles including typography, layout, color, and material design
  • Engage in agile, iterative web design and development, supported by version control

Deliverables & Milestones

  1. Sketches of your design. These can either be natively digital sketches, or paper sketches that you photograph. Whatever method you choose, save your sketches in a web friendly format (JPEG, PNG) and place them in a directory called _sketches in your repository.
  2. A video presentation of your work in progress. Host the video on YouTube, Vimeo, or another similar service and post the link to Basecamp. Your Basecamp post should also include the URL to your GitHub repository and representative sketches that you made in designing your interface. Include in the text of your post one or two specific things you would like feedback or help on from the instructor and other students in the class (due no later than February 10, 11:59pm).
  3. Substantive comments critiquing at least three other student projects (by Febraury 14, 11:59pm CT).
  4. An email to the instructor containing the project’s two final deliverables (by February 28, 11:59pm CT):
    1. A 4-5 sentence self-critique memo of your project and your progress in class to this point
    2. The https:// link to your project’s GitHub repository, which should include your sketches in a _sketches directory.

Requirements

  • Write only one valid well-formed HTML file, one valid CSS file, and one JavaScript file.
  • Encode source files in UTF-8/Unicode with Unix-style line endings (LF); entab with spaces, not tab characters
  • Indent HTML, CSS, and JavaScript files with 2 spaces per level of indent. Indent HTML when nesting tags. Indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries. Indent inside of all blocks in JavaScript.
  • Present organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks). A JavaScript framework for basic DOM manipulation is permissible, such as jQuery or a lightweight alternative such as Umbrella JS or Shoestring. Challenge yourself to use native DOM methods first.
  • Run all code through validators and linters to ensure the quality of your HTML, CSS, and JavaScript
  • HTML requirements:
    1. Use the default-served index.html file name in directory-based URLs, so that you can point to, for example, example.com/
    2. Write well-formed, valid semantic HTML. Projects whose HTML does not validate with the W3C HTML validator will receive a zero-point, failing grade. In the unlikely event that you discover a validation error or warning that is a genuine bug in the validator, you must acknowledge that bug in the memo that accompanies your project, and point to the relevant documentation, such as specifications or an existing reputable bug report, that your source is in fact correct. Get in the habit of validating and linting your HTML before you commit to Git.
    3. Use only structural, semantic HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout. All layout and design should be handled via CSS.
    4. Write valid HTML form elements in conjunction with <label> tags and the for attribute
    5. Present semantically structured text-based content to accompany all media elements (image, audio, video). Make use of the <figure> and <figcaption> tags
  • CSS requirements:
    1. Write one single valid, linted, error-free CSS file called screen.css. Do not create more than one CSS file for your project; all styles should be in the same file.
    2. Open screen.css with the minified Eric Meyer reset CSS styles
    3. Use only relative units (em, rem, vw, %) in your CSS; no px, pt, or other absolute units are permitted in your CSS
    4. Use only min-width media queries to enhance your mobile-first styles for larger screens
  • JavaScript requirements:
    1. Use JavaScript only for progressive enhancement. All site content and basic functionality (e.g., clicking links, viewing images and other media, scrolling, submitting forms) must still be accessible even in the absence of JavaScript.
    2. Never use on- or other deprecated event attributes in your HTML. Handle all events via event listeners in your JavaScript. The only element in your HTML that should contain any references to JavaScript should be a <script> element that loads your JavaScript file, and possibly also your DOM-manipulation framework. In other words, keep your JavaScript unobtrusive to progressively enhance your HTML.
    3. Avoid using JavaScript to manipulate your CSS whenever possible. Limit JavaScript to manipulating the DOM, including adding and removing state classes, and keep style information and transitions where they belong: in your CSS file.
    4. Use an immedately invoked function expression (IIFE), function closures, and other techniques to avoid polluting the global window namespace
  • Git requirements:
    1. Build a Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
    2. Include only the files and commits from this project in your repository
    3. Use only the command-line Git program on your computer; no commits made through the GitHub web interface

Project Two: Booking System Design

Due Thursday, April 11, 11:59pm CT

Project Description

For this project, you will work in self-selected teams of three or four students to design a booking system for purchasing tickets for travel, movies, concerts, or sporting events, or a similar system for ordering food online.

Project Three: User-Tested, Revised Booking System

Due Thursday, May 9, 11:59pm CT

Project Description

The final project of the course asks you to subject your group’s booking system project to a series of low-stakes user tests, and to develop and implement improvements to the project based on what you learn through your user tests.