Assignment Information
3/29/24, 4:30 PM
GRA 310 Project Milestone Four Guidelines and Rubric
Overview
Web design is an iterative process, allowing designers to implement gradual enhancements, test for responsive user experiences, and adapt the design to evolving trends if needed. This
approach fosters creativity, minimizes errors, enhances functionality, and delivers user-centric websites.
Scenario
You are a freelance website designer who has been hired to design and build a functioning and compliant, service-based, responsive website. In Milestone One, you chose one of the following
clients and created a root for their website. In Milestone Two, you designed a low-fidelity wireframe for your client's website, and in Milestone Three, you added boilerplate, header, and footer
components to the HTML files using Bootstrap and then customized some of the design elements by editing the CSS style sheet. In this milestone, you are required to add content to the
Homepage and Contact page of the client website. You will also ensure these two pages are accessible, W3C compliant, and aligned with the client's brand style guide. Based on the instructor's
feedback, you will refine these two pages and add content to the remaining two pages of the client website-About and Services-in Module Seven as part of your project submission.
Client 1: Farm to Table CSA
Farm to Table CSA is a family-run farm that supplies organic and non-GMO produce and seeds. They run on a community-supported agriculture (CSA) model in which members of their
community can sign up to receive weekly shares of their harvest during the fall and spring seasons.
Client 2: Camp Woofs and Wiggles
Camp Woofs and Wiggles is a dog care company that provides dog day care and boarding, as well as training, grooming, and other services.
Client 3: Fernscape Interiors
Fernscape Interiors designs and installs indoor plants in private homes and corporate offices. It also offers plant maintenance services.
Directions
Add content to your website's Homepage and Contact page in Visual Studio Code for your chosen client. Then, make these pages accessible and validate them using the W3C Markup
Validation Service tool. This website's layout should be based on the wireframes you created in Milestone Two. You should also implement instructor feedback from previous milestones to
optimize the website. Refer to your chosen client's brand style guide in the Supporting Materials section to inform your design.
Step-by-step instructions and videos (in the Supporting Materials section of this milestone and the Required Resources section of this module) have been provided to guide you through this
milestone.
Note: You will use Visual Studio Code to complete this assignment. If you haven't done so already, refer to the Start Here area of the course for download instructions and guidance on
compressing (zipping) files.
Specifically, you must address the following rubric criteria:
Webpages
Develop the draft versions of the Home and Contact pages by adding content and stylizing them to match the client's brand style guide. Implement instructor's feedback from previous
milestones, where applicable. Then, upload each HTML page on the W3C Markup Validation Service to evaluate if each page is W3C compliant.
1. Add content to the HTML Homepage. Include the following details in your index.html file aligned with the brand style guide in your design:
A. Universal header with navigation
B. Hero image or image carousel
C. Secondary content
i. Use the provided brand style guide as a reference to create this content. You do not need to include more than two to three sentences.
D. At least two secondary images
E. Universal footer with business information, copyright, and social media links
F. Boilerplate, header, and footer components that are consistent with the Contact page
2. Add content to the HTML Contact page. Include the following details aligned with the brand style guide in your design:
A. Universal header with navigation
B. Business name, address, and phone number
C. Business hours
https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-...estone_Four_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3
Page 1 of 3 Assignment Information
i. Include reasonable business hours of your choice, for example, Monday to Sunday: 9 a.m. to 9 p.m.
D. Contact form
E. Universal footer with business information, copyright, and social media links
F. Boilerplate, header, and footer components that are consistent with the Homepage
3. Apply client branding standards to both HTML pages. Include the following details aligned with the brand style guide in your design:
A. All the primary colors and at least two secondary colors defined in the brand style guide
B. Typography consistent with the brand style guide
C. Image selection aligned with the client's needs defined in the brand style guide
4. Apply WCAG accessibility standards to both HTML pages. Include the following details in your design:
A. Alt text for all images: Ensure that the alt text is relevant and descriptive.
B. Typography: Ensure that the written content is readable and legible.
C. Color contrast: Ensure that there is sufficient contrast between background and foreground elements.
5. Implement a responsive grid layout on both HTML pages. Verify by resizing the browser to a smaller size.
6. Align your Homepage and Contact page HTML files with W3C guidelines. Include the following details in your response:
A. Upload your Homepage and Contact page HTML files on the W3C Markup Validation Service webpage to generate the initial W3C compliance report.
B. Address any errors that the evaluation may identify. Then, upload the updated page and generate the report again.
C. Take screenshots of the initial and final W3C compliance reports for each HTML page. Submit these screenshots for instructor verification.
3/29/24, 4:30 PM
What to Submit
Submit the following deliverables:
Root Folder
Submit your updated project website root folder created in Visual Studio Code and containing all the latest website assets as a zip file.
W3C Guidelines
Submit screenshots of the initial and final W3C compliance reports for the Homepage and Contact page in a Word document.
Supporting Materials
The following resources support your work on the milestone:
Resource: Client Files
Download and unzip this folder to access the files needed for this project. Each subfolder comprises a brand style guide and design files for the client logo related to your chosen client.
Client Files-Farm to Table
Client Files-Woofs and Wiggles
Client Files-Fernscape Interiors
Site Map
Use this document to inform your work. The same site map applies to all three clients.
Milestone Four Videos
These videos from Module Four and Module Five Required Resources will help you complete this milestone.
Module Four: Accessibility and SEO (Module Four Video)
Milestone Four: W3C-Compliant Webpages
Milestone Four: Troubleshooting Tips
Project Milestone Four Rubric
Criteria
Exemplary
Proficient
Needs Improvement
Not Evident
Value
Homepage
Exceeds proficiency in an
exceptionally clear, insightful,
Add content to the HTML
Homepage (85%)
Shows progress toward
proficiency, but with errors or
Does not attempt criterion (0%)
20
https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-...stone_Four_Guidelines_and_Rubric.html?ou=1544961&d2l_body_type=3
Page 2 of 3 Assignment Information
Contact Page
sophisticated, or creative
manner (100%)
Exceeds proficiency in an
exceptionally clear, insightful,
sophisticated, or creative
manner (100%)
Branding Standards
Exceeds proficiency in an
exceptionally clear, insightful,
sophisticated, or creative
manner (100%)
Adds content to the HTML
Contact page (85%)
Applies client branding
standards to both HTML pages
(85%)
omissions; areas for
improvement may include
ensuring all the elements of the
Homepage are functional, align
with the brand style guide, and
the universal components
follow a consistent design with
the Contact page (55%)
Shows progress toward
proficiency, but with errors or
omissions; areas for
improvement may include
ensuring all the elements of the
Contact page are functional,
align with the brand style guide,
and the universal components
follow a consistent design with
the Homepage (55%)
Shows progress toward
proficiency, but with errors or
omissions; areas for
improvement may include
accurately applying primary
and secondary colors, brand
typefaces, typographic
hierarchy, or selecting images
aligned with the client's needs
(55%)
WCAG Accessibility
N/A
Standards
Applies WCAG accessibility
standards to both HTML pages
(100%)
Shows progress toward
proficiency, but with errors or
omissions; areas for
improvement may include
including alt text for all images,
readable and legible
typography, and color contrast
across all HTML pages (55%)
Grid Layout
N/A
Implements a responsive grid
layout on both HTML pages
(100%)
N/A
W3C Guidelines
N/A
Aligns the Homepage and
Contact page HTML files with
W3C guidelines (100%)
Shows progress toward
proficiency, but with errors or
omissions; areas for
improvement may include
ensuring the initial and final
reports are submitted and that
there are no outstanding items
in the final report (55%)
3/29/24, 4:30 PM
Does not attempt criterion (0%)
20
20
Does not attempt criterion (0%)
20
Does not attempt criterion (0%)
15
Does not attempt criterion (0%)
10
Does not attempt criterion (0%)
15
Total:
100%
https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-...stone_Four_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3
Page 3 of 3
