WDD 230: Web Frontend Development I

14: Final Project - Assessment Criteria

Overview

The final project is designed to be a comprehensive assessment of the course learning outcomes. You will be given content and functional specifications as if you were contracted to plan, design, and build a prototype website for small business.

Assessment Tools

Assessment Criteria

✅ HTML

Develop web pages that are semantic and valid using contemporary Hypertext Markup Language (HTML).

✅ CSS

Style web pages using valid, contemporary Cascading Style Sheets (CSS) and avoid all HTML presentation markup.

✅ JavaScript

No errors and well organized. Handle events and interactions within the browser including JSON and remote APIs..

✅ Web Design Standards Design and build a website that is responsive, accessible, usable, and visually appealing.
Contrast (This is most often measured using CSS Overview):

Evaluates the effective use of contrast in text, colors, and elements to ensure clarity and emphasis.

Considers the visibility and readability of content against the background, assessing the degree of contrast to guide the user's focus.

Repetition:

Assesses the consistent application of design elements (such as colors, fonts, and layout) throughout the website for a cohesive and professional appearance.

Considers the implementation of repeating patterns or styles to establish visual unity and reinforce branding.

Alignment:

Examines the alignment of text, images, and other elements to ensure a visually organized and structured layout.

Considers the proper use of alignment to guide the user's eye flow and create a harmonious visual hierarchy.

Proximity:

Evaluates the placement of related elements in close proximity to enhance the user's understanding of relationships between content.

Considers the appropriate grouping of elements to minimize cognitive load and improve overall user experience.

Overall Composition:

Assesses the overall composition of the web design, considering the balance and harmony achieved through the application of Proximity, Alignment, Repetition, and Contrast (PARC).

Considers how well the design principles contribute to a visually appealing and user-friendly interface.

Visual Appeal:

Evaluates the aesthetic quality of the design, considering the attractiveness and visual appeal to the target audience.

Considers the creativity and innovation in design choices while ensuring alignment with the overall purpose and branding.

Adherence to Branding Guidelines:

Assesses how well the web design aligns with established branding guidelines, evaluating consistency in colors, logos, and other visual elements.

Considers the integration of brand identity into the overall design without compromising CRAP principles.

✅ File and Folder Naming Conventions

All folders and files follow the course naming rules and conventions.

✅ Responsive Design

All the pages in the site support responsive design for multiple viewports including the use of media queries, change of layouts, srcset (responsive images), and dynamic menus.

Interactive elements like buttons and links should be large enough (48x48px), or have enough space around them, to be easy enough to tap without overlapping onto other elements.

✅ Usability

Keep the design simple and avoid unnecessary complexity. Users should be able to navigate and understand the interface without confusion. There should be consistency in design elements throughout the site including in terminology and in the general layout or order of the header, navigation, and footer.

Users should be able to find information and move between pages effortlessly.

Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read.

Image display dimensions should match natural aspect ratio. Use Lighthouse-Best Practices to inspect.

✅ Performance

Optimize the website for fast loading times. Users are more likely to abandon a site if it takes too long to load.

The total transfer load limit for this class is 500Kb.