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):

• Typography Choices
• Color Choices
• Heading Levels
• Imagery
• Logo - you may make minor modifications to the logo, if you can justify it to your client.
• A few user interface elements - these will be different for everyone. For example, a restaurant website is probably going to have some kind of menu. An online retailer probably will have a "Add to Cart" button.

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:

• Include real content, where necessary. Lorem Ipsum is easy to generate, but it isn't realistic.
• These are not final. You should create an iterate on your style tiles rapidly, but with thought. Think of these as sketching on screen.
• You and your partner should work on these together. This needs to be a collaboration.
• We'll show your mockups and style tiles in class for additional feedback and critique that you'll use when creating your prototype/templates

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:

• 5 : Your style tiles communicate the visual language that you've designed for your website. They include the necessary elements (described above). The design utilizes type, colors and UI elements that effectively mirror your website's goals. You also integrated your favorite style iteration into a mockup that shows the style elements in context. Everything was submitted according to directions.
• 3 - 4: You've developed the tiles and a mockup, but they don't include all of the elements. Style Tiles may lack needed detail. Everything was submitted according to directions.
• 0 - 2: Your style tiles, prototype or mockup show little attention to client needs, and lack detail to effectively communicate your design language. They may be missing required elements or a part is missing entirely.