Project two first deliverable

Project Description

Some of the very worst designed websites you’ll come across are for banking, credit card payment, HR portals, and other non-optional websites for certain classes of customers or workers. Self-selected teams of 3 students will redesign a website assigned in class. Additionally, you will add a compelling log in page, as if this were an on-line course for sale. Your redesigned should employ sound principles of human-computer interaction, user experience, and emotional design.

Project Goals

• Conduct a task analysis for creating a user-centered design
• Select 3 page of the website to redo. Two content pages and one process page. The process page should be a html form page. Like a sign up page or a purchase page. One content page should be the home page.
• Apply design principles including color/material, typography, accessible media, and grid-based design.
• Execute a progressively enhanced, touch-friendly, mobile-first responsive design focused on system users and tasks.
• Write informative text content; catch error conditions and guide users accordingly.
• Experiment with design and interaction patterns for pleasing user experience.
• Engage in agile, iterative web design and development within a team-based work-flow on GitHub, via pull requests and code reviews.

Requirements

• All source files in UTF-8/Unicode character encoding.
• No code-generators like WYSIWYGs, Bootstrap, or other off-the-shelf frameworks
• HTML, CSS, and JavaScript files should both be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries.
• Must pass HTML and CSS validators!
• HTML requirements:
  1. Only structural, semantic uses of HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout.
  2. Valid HTML form elements, written in conjunction with <label> tags and the for attribute.
  3. Semantically structured text-based HTML content to accompany any media elements (image, audio, video)
• CSS requirements:
  1. CSS file should open with a set of reset styles. Meyers, and the Form section of Normalize.
  2. Use at least two min-width media queries to enhance your mobile-first styles for larger screens.
• JavaScript requirements:
  1. JavaScript that throws no uncaught errors and is loaded unobtrusively (no JavaScript event attributes in your HTML, in other words; attach events to any elements requiring interaction).
  2. JavaScript that uses only asynchronous methods and callbacks