Assignment 1 - Moodboard

Weight: 20%

Due: Friday September 9 @ 11:59PM

Due: Friday September 9th @ 11:59pm

Scenario

You are starting out a new web development project and need to do some initial planning on what the look and feel of the site is going to be. Your client (client could be yourself) was very vague with their description of the design of their site and they did not give you any specific colors, fonts, or ui ideas.

Your job is to build a mood board based on a vague description (which you will define yourself). The mood board is used to gather examples and ideas organically. Add structure and group content with notes so that you or a hypothetical colleague could look at this later and understand it.

Content To Gather on your Moodboard

• Color pallettes (3-5 colors per pallete)
• Typography (2-3 type faces per group)
• Screenshots of user interface (ui) elements on at least 3 other websites
  • headers and hero sections
  • navigation
  • lists
  • cards
  • call to action
  • 1 section of content that shows good visual hierarchy

Resources

• 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 mood board in Figjam and add the vague description to the top of the board in large text
2. Set up areas in your moodboard for grouping the required content
3. Add content to the moodboard

• See the rubric for how many variations are needed of each content type
• Images of websites should be clickable links so that you can navigate back to the original site when needed

4. Add brief sticky notes to your moodboard as makes sense to you, there needs to be a minimum of 1 note per content type (8 sticky notes minimum)
5. Export your mood board as a PDF

• Make sure that it is easy to scan and look at in pdf format

6. Follow Submission guidelines below

Marking Rubric

This assignment will be marked out of 20 points.

Concept and Notes: 5 points

• Leading idea and description is present and visible on the board
• Leading idea is not written with any tech jargon, it is thematic or conceptual
• There are a minimum of 8 notes
• Notes describe how the content relates/connects to the leading idea/description

Visual Hierarchy: 5 points

• Your moodboard uses visual hierarchy to group content
• Typography in screenshots reflects good visual hierarchy
• Layout and design of UI elements in screenshots reflect good visual hierarchy
• Critique visual hierarchy in screenshots

Color and Typography: 5 points

• 3 distinct color pallettes
• 2 different groups of type faces

Screenshots: 5 points

• Screenshots depict distinct variations of the same UI element
• Screenshots are specific and easy to understand
• Screenshots link to original sources in moodboard

Submitting Your Assignment

In order to receive a grade, you must:

1. Export your moodboard to a pdf
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. Zip the pdf of your moodboard
4. Submit the PDF along with the link to your active moodboard