Style Tiles and Mockups

Points
5
Assigned
March 30, 2020
Due
April 06, 2020

You understand the content of your website and have some ideas about its architecture. Now it's time to develop the visual language of the website. We'll do this in two parts:

  1. Style Tiles (or Style Prototype)
  2. Mockups/Comps

Create Style Tiles

Style Tiles (sometimes referenced as a mood board) allow you to communicate the personality of your website to a client - typography, colors, common UI elements - without designing the entire site at different breakpoints. After you've look at the adjectives used by your client to describe their business, you're going to put together a single canvas tile in Sketch. Your tiles should include (but are not limited to):

Your style tiles might look something like these tiles, used to create the RWD website.

You can use any vector-based program for this assignment, such as Sketch (free trial) or Adobe Illustrator to complete the style tile.



Create At Least One Small/Large Mockup

Using your sketches and content from last week as a guide, create a mock-up or comp that shows your style tiles in use on a small screen and a large screen to show the 2 extremes of your design in use. Unlike the abstract style prototype/style tile, these mockups should show the design elements as they would appear on an actual web page on your site.

Don't mock up every page of your website, just show the elements from your style tiles in use on a single "page" of your website. This could be the Home Page or Product Page, for example.

Your mockup is just a picture of your website - we'll continue to make design decisions once we get into the browser in the coming weeks.

You can use any vector-based program for this assignment, such as Sketch (free trial) or Adobe Illustrator to complete the mock-up.

A few things to note:


How to Turn In the Assignment

You'll be submitting the style tiles and mockup as a PDF file.

  1. Output your static files as PDF files (you may have to combine them)
  2. Submit your PDFs in the assignment spot in Blackboard.

Rubric

Use the following rubric to ensure you receive the highest possible grade for the assignment:

Return to Assignments