SUMMATIVE: Style Guide & App

Past Student Projects

Company/App, Logo, & Product Photos

1. Think of a fake company that sells products.

2. Find a logo for your company (you may create your own or find one online).

3. Find photos of the products your company will sell on the app (6-9 product photos, 3 category photos)

Optional: you may copy over the 3 screens that you already designed for the UI Design Intro

Set Style Guide

Figure out the following for your company/app:

1. Logo

2. Description of the app/company

3. Color palette with 6 colors (identify using the HEX #)

   • Use a specific color scheme: monochromatic, complimentary, analogous, triadic, split-complimentary

4. Typography with 3 different headers (different sizes) and body copy

   • Be intentional about your type families: Old style, Transitional, Modern, Sans serif, Script, Decorative/novelty/display

5. Buttons: primary and secondary.

Design your Screens

1. Apply your style guide (logo, color, typography, buttons) to your screens

2. Adjust the screens as you wish.

3. The 9 screen wireframes are created to be:

   1. Splash screen (just the logo)

   2. Login

   3. Sign Up

   4. Sign Up Confirmation

   5. Home w/ Product Categories

   6. Category with Products

   7. Product Detail

   8. Search Results with Products

   9. Profile

Turn in PDF to Canvas

1. Turn in your .pdf file on Canvas.

"I'm Done"

Bored? Check out the "I'm Done" activities.