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/Less, along with new knowledge of static site generators, to create a responsive site based on your designs.

Goals

• 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 Less.
• Develop interactive components that work across devices and for all users.
• Recognize the role of partials in creating web pages.

Process

Research + Planning

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

Design

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

Develop

1. Set up a new Glitch project and GitHub repo
   1. Remix this Glitch project
   2. Create a new GitHub repo named “project4”.
   3. Follow the instructions to connect Glitch and GitHub.
      You’ll be connecting the Glitch project you just remixed and your new “project4” repo.
2. 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).
3. Do an initial code review with your professor.
   • This will confirm that your markup is in good shape and your site architecture is solid.
4. After your markup has been signed off on, create mobile-first styles for your homepage based on your comps.
5. Have a design checkin with your stakeholder.
6. Create the additional pages and elements per requirements.
   • You will have an additional stakeholder checkin while this work is in progress.
7. Present your finished product to your colleagues and stakeholder.

Submission

1. Create a pull request for code review and final submission.
   • Include PR template questions and your responses.
2. Send me a link to the pull request via Slack DM by 11:59pm on 12/16.

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 or Less, not CSS, for writing your styles.
• Your code should make use of HTML and Sass/Less 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.

Schedule

• Oct 14 · Project introduction
• Oct 21 · Project kickoff meeting
• Oct 22 · Priority guide due
• Oct 28 · Initial comps due; Design review
• Nov 4 · Final Comps due; Begin writing markup
• Nov 11 · Initial HTML review complete; Project setup complete
• Nov 18 · Homepage styles complete; Design review with stakeholder
• Dec 2 · All pages fully styled
• Dec 9 · Interactive component finalized
• Dec 16 · Project due date; Present final project

Rubric

Google Sheet example