DSGN 270

Assignment 1 - Design Moodboard

Weight: 20%

Due:

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

Moodboards are a useful tool for figuring out the look, feel, and even functionality of a website or app (they are used in other fields of design as well). They are essentially collages, and like collages they can take on many forms and purposes.

Our primary use case for a moodboard is to brainstorm, ideate, and acquire early design research deliverables.

Objective: Create a moodboard that outlines UI and design asset ideas for a website or app

Find examples of important user interface elements on websites out in the wild. Become familiar with elements that you will likely be creating throughout the semester, discover your sense of web design style.

You will also be putting together collections of design assets that you will be using throughout the semester. For this assignment, put together 2 variations of color palettes as well as 2 groupings of type faces. They should be distinct and express different identities, moods, and emotions.

Applying Design Principles

Along with gathering design assets and finding examples of UI elements, your moodboard must also embody principles of design effectively. Moodboards are used for both communication (with team/clients) and discovery(of what you’re building).

Content Requirements

  • 2 distinct color palettes
    • each should have a: black (not #000000), white (not #ffffff), primary color, secondary color, (optional) tertiary
    • include a note about what the identity/mood/emotion(s) you’re trying to evoke and your reasoning for it
  • 2 distinct typeface sets
    • heading font, paragraph font, (optional) brand font
    • include a note about what the identity/mood/emotion(s) you’re trying to evoke and your reasoning for it
  • UI element collages
    • required: navigation bar (mobile and desktop), footer (mobile and desktop), header sections, 3 card layout
    • your choice: any elements found on ui patterns
    • include a note about what you liked about the design of the elements that you chosen (focus on the elements, not the content in the images)

Resources

  • primary field of research Search the web. look at sites that you like
  • UI Patterns: Examples and descriptions of specific ui elements
  • Material Design Manual: Google’s Material Design Guide contains examples of UI elements that you can look for
  • Google Fonts

Instructions

  1. Create a moodboard in figma
  2. In a “Leading Idea” section, describe the types of sites or topics of sites that these moodboards are inspiration for. Also describe (in point form) the moods and tones that you’re going for
  3. Create a new section for each collection of content. label it appropriately
  4. Add and organize the content in a way that represents principles of design while staying true to the mood that you’re aiming for
  5. Add notes (using sticky notes) to the board. Use a mix of positioning notes and adding comments to connect your motivations for your choices to your content.
  6. When you feel like you’ve gotten it ready, Export images of the moodboard collections (each collection should be a separate image file)
  7. Label your images appropriately
  8. Submit the images to D2L along with links to the design space (make sure that they are viewable)

Marking Rubric

This assignment will be marked out of 15 points. For full marks, your moodboard should embody principles of visual hierarchy as discussed in class

Concept and Notes: 5 points

  • Leading idea and description is present and visible on the board
  • Notes are easily connected to the content they describe
  • Notes are not generic
  • Notes communicate your concept effectively

Color and Typography: 5 points

  • 2 distinct color palette collections
    • Colors work together well (if they don’t there’s a reason for it)
    • Colors have sufficient contrast for web readability
  • 2 different collections of type faces
    • Each group needs 2-3 fonts with clear labelling on their use cases
    • Fonts express the personality described in the notes
    • Fonts follow best practices to design for web

Screenshots: 5 points

  • Screenshots have enough context to be understandable
  • Screenshots capture the correct content
  • Screenshots are well organized
  • Screenshots are cropped effectively when necessary

UI Element Concepts: 5 points

  • UI element images depict a consistent style or capture a mood
  • Mood described in notes is effectively depicted
  • Elements don’t sacrifice usability for aesthetic (or when they do it’s a fair trade off)
  • Elements represent good use of design principles and are visually interesting/have character

Submitting Your Assignment

In order to receive a grade, you must:

  1. Export your moodboards to a pngs
  2. Get a viewable link to your moodboard and paste the link in the text box of your submission (do not send an email invite)
  3. submit the images and add the link to the text box in your submission