DSGN 270

Assignment 2 - Website Wireframes

Weight: 20%

Due:

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

Scenario

You have finished the design asset gathering and mood boarding phase for a website, but need to draft the layout so that specific images, text, and links cant be organized.

While most of the text content and specific images haven’t been chosen, it’s necessary to get a minimal layout established.

Your objective is to sketch the desktop layouts for 4 pages on a website. You can choose which pages the site contains. If you’re unsure of what to do, create: home page, about page, products/services page, contact page.

Instructions

Required Wireframe Content

NOTE: If you would like to design an app instead of website, please contact me to discuss content variations

  • Each page should have a minimum of 2 sections of content excluding the navbar and footer.
    • A section requires a heading and content (text, images, cta…)
    • Add labels that clearly identify the purpose of each section. ie: “introduce brand”, “showcase popular products”, “demonstrate features”
    • Section headings should have actual working titles
    • Buttons and links should have user focused functional text
      • instead of “link” - “shop” or “read more”
    • paragraph text can be represented with lorem ipsum or swiggly lines
    • images are represented as boxes with an x going from corner to corner
  • Navigation bar
    • working titles for the 4 pages
    • circle to show logo position
    • 1 extra feature (ie: socials, contact link, dark mode toggle)
  • Footer
    • circles w/labels to identify social icons
    • copyright layout (can be squiggles)
    • general layout of footer content (nav etc)
      • you can use squiggles with a label, or write actual words
  • Content in your pages must include:

Rubric

Total: 20 Points

Design Overview Document — 5 points

  • Describe the topic of the website (1-2 sentences)
  • Outline the primary user flow in a numbered list
  • Identify 1 other user flow (brief description)

Wireframe Design — 5 points

  • UI elements are easily identified
  • The user flow is easy to follow in the wireframe
  • General proportions of UI elements are clear

Wireframe Content — 5 points

Your content should include:

  • at least 1 gallery type layout
  • at least 1 3 card layout
  • at least 1 long form text w/images section
  • at least 1 call to action section

Titles and Labels — 5 points

  • ctas, buttons, links all have descriptive text
  • Section titles exist and make it easy to understand what the section is about
  • Images and icons use standard and identifiable representation

Submission Instructions

  • In the text field, add a link to your figma file

Attach a zipped folder that contains the following:

  • design brief document
  • image files of your wireframes (make sure that they are labelled and centered for easy understanding)