Skip to main content

Assignment 4 - Website Mockup

Weight: 20%

Due:

Scenario

You have been hired to build a website and need to do a quick mockup of the homepage to provide a proof of concept to your client. The mockup will allow you to get feedback and make design changes prior to getting into any code.

When building mockups, you can save a lot on design and development time by creating a design system, for this assignment, you will also be required to establish a basic design system (colors and fonts etc).

Requirements

  • Desktop mockup artboard should be either 1280px or 1920px wide
  • Desktop mockup uses a 12 column grid
  • Mobile wireframe artboard can use any of the phone presets in Figma
  • Mobile wireframe uses a 4 or 5 column grid

Notes

  • As the client is hypothetical, this is a great opportunity to challenge your own ideas about design and website layouts. Try using a color pallette that you wouldn’t normally choose or experiment with UI design patterns that you haven’t worked with before - Remember it’s much easier to be bold with design on a mockup than it is when you’re at the development stage.
  • For your design system, you can work off of one generated by a plugin, but it must be customized for your design, points will be deducted if stock colors and typefaces are submitted
  • you can be your own client

Instructions

  1. Create a design system for your mockup (use a separate page in your design file)
  • Colors
  • Fonts
  • One other field (ie: shadow)
  1. Create a mockup that makes use of UI components
  • Components should be created in the same page as your design system
  • UI elements that must be componentized:
    • elements that would be used on other web pages of the same site(header, footer, nav)
    • elements that are repeated on your landing page
  1. Create a low res mobile wireframe of your mockup
  • Demonstrate how the design would resize onto a mobile device
  • This is a minimal design, placeholder text for long form text and shapes for images, but use the correct titles to make it easy to follow
  1. Export your files:
  • Pngs or pdfs for your design files (desktop and mobile)
  • Make sure the file naming conventions are appropriate for sending to a client (for the mockups) or using in a project (for the stylesheets)

Marking Criteria

This assignment will be marked out of 20 points, which will be given for each of the following:

Mockup Design: 5 points

  • Use of a grid to organize content
  • Effective visual hierarchy
  • Good use of contrast and spacing
  • 5 sections of content (header, footer, nav, and two others)
  • Uses 1920 or 1280 px artboard

Mockup Usability: 5pts

  • Layout is easy to navigate and understand
  • UI elements are consistent
  • At least 1 call to action
  • UI elements reflect good design convention (or challenge convention effectively and without sacrificing usability)

Design System and Components: 5 points

  • All colors and fonts are applied using the design sytem
  • Design system and components are in a separate page in the same workspace
  • Components are applied correctly (so that if you change the primary component, the applied component will reflect those changes)
  • Exported stylesheet is usable
  • Reusable elements have been converted into components

Mobile Wireframe: 5 points

  • All content from the desktop mockup is accounted for
  • low resolution for content but approprately considers spacing and layout
  • Realistically relates to the desktop variant
  • Uses grid
  • Uses one of the phone default screen sizes

Submission Instructions

In order to receive a grade:

  1. Zip all your exported files into a single zip folder named dsgn270-a4, with:
    • Exported pdfs or pngs of your design’s artboards saved in a folder called mockups/
    • Exported design system files inside styles/
    • A README.md file with:
    • The title of this assignment
    • Your name
    • A brief description of the client and what the website is for (2-5 sentences)
    • If you’ve chosen to challenge design conventions and principles, a paragraph that explains your concept and reasoning.
  2. Submit your Zip file to brightspace in the appropriate dropbox
  • IMPORTANT In the text box of your submission:
    • submit a viewable (read-only) link to your design (do not add your instructor to the project with an email from Figma)