Style Tiles and Mockups

Points

5

Assigned

March 21, 2019

Due

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

• 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, 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 GitHub.io URL.

Rubric

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

• 5 - 6: Your style tiles and prototype 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, prototype and a mockup, but they don't include all of the elements, or they were developed only as static comps/mockups instead of style tiles. 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.