DSGN 270 Assignment 2 - Convention Treasure Hunt

In this assignment, you will be using the following tools to find, label and evaluate common navigation and layout conventions you find online:

• your operating system's screencap tool:
  • Screenshots in Windows 10;
  • Screenshots on Mac OS;
  • Screenshots in Linux;
• your phones screencap tool:
  • Android
  • iPhone/iOS
• Figma, Pixlr, or other drawing/image tools of your choice.

Instructions

Part 1: Navigation Breakdown

1. Select a large, multi-page website that includes the types of navigation listed below. Include the title and url at the top of this section.
2. Using one (or more) screencaps and an annotation tool of your choice, find and label an example of the each following:
   • Global navigation
   • Local navigation
   • Utility navigation
   • One (or more) of the following:
     • Breadcrumb navigation
     • Hamburger navigation (open menu)
     • Sticky header
     • Hero footer

Part 2: Hero Section Critique

1. Find a hero section with a Call-to-Action (CTA) that is either a very good or very bad example of visual hierarchy. This can be a different website than you used in Part 1.
2. Website summary: In 50 words or less, define:
   • the target audience that this website caters to;
   • the value/benefit this website provides to its users.
3. Call-to-Action Critique: In 150-200 words, and using terminology covered in class, evaluate the website's Call-to-Action:
   • Is it an effective Call-to-Action?
   • What action is the website asking its users to perform?
   • Evaluate its use of visual hierarchy, such as:
     • Colour and contrast;
     • Size and scale;
     • White/negative space;
     • Imagery;
     • Typography and content;
     • Repetition.
   • Include a screencap (and annotations, if desired) to support your argument.

---

Marking Criteria

This assignment will be marked on each of the following, for a total of 20 points:

5 points: Navigation identification

• All required navigation elements are shown;
• Correct identification of navigation elements;

5 points: CTA Critique

• Website audience, goals and CTA are sufficiently identified.
• Proper use of terminology covered in class.

10 points: Visual hierarchy of the assignment itself

• Effective use of annotation labels:
  • Are your labels easy to read?
  • Do your annotations look professional? Would you show them to a client/employer?
• Screencaps:
  • Images are embedded in your markdown page and not simply a text link;
  • Images are scaled and cropped as needed to not be wider than your markdown page (as seen in GitHub).
• Markdown elements are used correctly:
  • Headings are not used for body text;
  • Ordered and unordered lists are used appropriately;
  • Image links include alt text.
• Page is scannable:
  • Long blocks of text are broken up with headings and lists;
  • Important text is bold or italicized;
  • Horizontal rules used to separate the different sections of your assignment.

---

Submission Instructions

1. Submit your assignment as a repo named dsgn270-a2, with:
   • The text of your assignment saved in a README.md file in the root of your project;
   • Your name, course title and assignment title at the top of the page;
   • Screencaps stored as PNG images in an /images directory.
2. Zip your assignment and submit it to Brightspace.
3. As a comment to your submission, include:
   • a link to your GitHub repo;
   • a link to the live GH Pages site;