Project 4: Collaborative Redesign

In Brief

Redesign a site based on the findings of your stakeholder’s heuristic evaluation and use your current knowledge of HTML and Sass, along with new knowledge of static site generators, to create a responsive site based on your designs.

Purpose

Redesign a site in order to solve established usability issues.
Experience collaboration with a stakeholder.
Create a responsive design using your current knowledge of HTML and Sass.
Develop interactive components that work across devices and for all users.
Recognize the role of partials in creating web pages.

Process

Research + Planning

Have a project kickoff meeting with your stakeholder
Create a priority guide for your homepage using this template
- Need a refresher on priority guides? See the week 1 reading.
- Due date: 10/24 by midnight EST (see in your timezone)
- Format: Google Doc
- File name: Please use your first initial and last name (for example: aweger)
- How to submit: Add your file to the redesign-pg folder inside our shared GD431 Activities folder in Google Drive
Share the priority guide with your stakeholder in your shared Slack channel.

Design

Based on your priority guide, create mobile and desktop comps for your homepage.
- Due date: 10/29 by 4pm EST (see in your timezone)
- Format: PDF, PNG or JPG
- File name: Please use your first initial and last name (for example: aweger)
- How to submit: Add your file to the redesign-comps folder inside our shared GD431 Activities folder in Google Drive
Present your comps to your stakeholder and professor to get initial sign off on the design.

Develop

Follow the setup instructions
Based on your priority guide, write semantic markup for the homepage content and create HTML partials for repeated elements in your design (e.g., header, navigation, footer).
Do an initial code review with your professor.
- This will confirm that your markup is in good shape and your site architecture is solid.
After your markup has been signed off on, create mobile-first styles for your homepage based on your comps.
Have a design checkin with your stakeholder.
Create the additional pages and elements per requirements.
- You will have an additional stakeholder checkin while this work is in progress.
Present your finished product to your colleagues and stakeholder.

Submission

Create a pull request for code review and final submission.
- Include PR template questions and your responses.
Send me a link to the pull request via Slack DM by midnight EST on 12/18 (see in your timezone).

Requirements

Overall

The design should be responsive, working on mobile devices as small as 480px wide and other devices up to 1280px wide.
You should use Sass, not CSS, for writing your styles.
Your code should make use of HTML and Sass partials.
In addition to a homepage, your final site should also include:
- A minimum of 3 interior pages, including a 404 error page
- A web form
- An interactive element: either an accordion or a tabbed panel

Web form

This form should have a minimum of three inputs (e.g., contact us, subscription, donation, order form).
This form should use HTML5 validation.

Interactive element

This may use either vanilla JavaScript or jQuery.
Must be usable with a mouse/trackpad and keyboard.