Style Tiles and Mockups

March 21, 2019
April 04, 2019

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 three parts:

  1. Style Tiles
  2. Style Prototype
  3. 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, prototype and mockup to your project repository on GitHub as a PDF file.

  1. Output your static files as PDF files (you may have to combine them)
  2. In your project repository, create a new folder called "style" and place the files inside.
  3. On your root index.html file, which is the Project Hub, add an H2 with Date: Style.
  4. Add a link to the PDF files under your Style section. The links should be something like "style/web-styles.pdf".
  5. Add a link to your interactive prototype also (may be in CodePen or GitHub)
  6. After you've committed and synced your changes via GitHub Desktop, you can submit the project hub hyperlink via Blackboard Learn. Note: Don't link to the local version on your computer. You need to access the live version on the web with the URL.


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

Return to Assignments