DSGN 270

Assignment 3 - Webpage Mockup

Weight: 20%

Due:

Late Penalty: 10% deduction for each day late. Submissions will not be accepted more than three days late.

Scenario

It’s time to make a hi fidelity mockup of the home page for a website. This needs to double as a proof of concept for your client as well as a visual guide for your frontend developer.

At this phase of the design process, it’s expected that minor changes may need to be made still. To enable a fast workflow, your mockup will be made using a design system that you will set up (use any plugins to generate this content that you like). You also need to create reusable figma components (these will be reviewed by your developers as well).

You can design for desktop or mobile. The design will be reviewed in Presentation mode and assessed for flow and overall design quality.

Instructions

1. Create a new design file and rename page 1 as "Mockups" and page 2 as "Component Library" 2. Create a design system of the colors and fonts that you will be using 3. Build the components needed for your site (see the rubric for requirements) 4. Design your mockup using placeholder content - figure out relative sizes of things, use lorem ipsum for text and unsplash or pexels for images 5. Replace placeholder content with authentic content and adjust design when necessary

Rubric

Design Overview Document — 5 points

  • Describes the topic of the site
  • Outline 5 user objectives in hierarchical order

Figma Design System — 5 points

  • Color system configured and labelled
  • Typography system added and labelled
  • At least 3 colors + black and white
  • Content is styled using the design system

Figma Component Design — 5 points

  • 3 styled reusable components
  • components are used consistently
  • components are organized on a separate page from the mockups
  • components are designed at a scale that fits on your mockup

Mockup Design Quality — 5 points

  • Design uses a 12 column grid for desktop and either a 4 or 5 column grid for mobile
  • Use a preset frame size of 1280px or 1920px for desktop. Any of the mobile options is fine for mobile design (if you go that route)
  • Visual hierarchy is well established and uses the principles learned in class

Mockup Design Content — 5 points

  • Content is authentic and on topic (no lorem ipsum)
  • There are 3 sections of content (excluding nav, footer, and page header)
  • headings go from h1 to h3 in nesting
  • Content includes the following UI elements:
    • card layout or gallery
    • images and text together
    • visible text links (can include icons)
    • primary and secondary buttons

Submission Instructions

  • In the text box of your submission, add a viewable link to the presentation version of your site and a link to your design space (don’t invite your instructor from figma, make sure that the link is set to view for anyone who has it)
  • Export and zip your mockup as an image file or pdf and attach the zip to your submission