WDD 230 - Web Frontend Development I

L02: Design Principles Document

Overview

This assignment has you plan and develop a design principles web page which you will publish and link to from your assignment portal home page. The objectives of the assignment are for you:

• to recognize and identify favorable design principles in existing sites,
• to recognize the application of responsive design on live sites, and
• to practice developing a valid HTML/CSS page using CSS Grid in the layout.

What you will build

You will be asked to replicate a particular page layout in three different views using your own colors and typography choices.

Instructions

File and Folder Setup

1. Create a file named "design-principles.html" within a new folder named "lesson02" in your local wdd230 repository.
2. Add the appropriate sub-folder to the lesson02 folder, i.e., styles and images.

Content

1. Choose three (3) of principles from the following list of design topics on which to present and find examples.
   • Visual Hierarchy
   • Hick's Law
   • Fitt's Law
   • Rule of Thirds
   • White Space and Clean Design
   • PARC: Proximity
   • PARC: Alignment
   • PARC: Repetition
   • PARC: Contrast
2. For each of the principles that you selected you will need to provide (see screenshot examples below):
   • the design principle,
   • the organization/company's name,
   • the web site address as a external hyperlink,
   • a mobile view screenshot of an organization's web page that, in your opinion, illustrates that principle, and
   • a brief description on how the design principle is exemplified on that page.

HTML

1. Use appropriate HTML to structure each "card" with the required content.

CSS

1. In the base.css file, style the page with your own color schema and typography choices.
You responsible to practice good design principles of alignment, color contrast, proximity, repetition, and consistent spacing in all of your work.
2. Use the Google Fonts API to select one or two fonts to use on the page.
3. Include the application of CSS normalization or equivalent at any level.
4. Use CSS Grid layout for the main area of the page to control the columns.
   🎦 Video: Review of CSS Grid Layouts
   - Referenced ⚙️CodePens: Basic Grid Layout Review | CSS Grid Layout using grid-template-areas.
5. Use CSS media queries to create three responsive views (small, medium, and large) of the page to change the number of columns in the main element to one column, two columns, and three columns, respectively.

Testing

1. Validate your HTML and CSS using the ⚙️ Web Developer Extension or equivalent tool.
2. Test your page in the latest version of your browser in responsive mode using the Inspect Device Toolbar (Dev Tools).
3. Use this audit tool to self-check your work for some of the required HTML elements and CSS content.
4. Use Dev Tools CSS Overview to check your color contrast.
5. Generate the Dev Tools Lighthouse report and run diagnostics for Performance, Accessibility, Best Practices, and SEO in both the mobile and Desktop views.
   It is best to test your page in a Private or Incognito browser window.

Submission

1. Update your course home page with a link to this assignment in the appropriate location.
2. Commit your local repository and push or upload your work to your GitHub Pages enabled repository on GitHub.
3. Return to I-Learn and submit your home page URL.