SUMMATIVE: Style Guide & App
Project Brief
Make up a fake company and design a style guide and an app (9 screens).
Make deliberate choices in typography and color to create a specific vibe/style for your app.
Type Families: Old style, Transitional, Modern, Sans serif, Script, Decorative/novelty/display
Color Schemes: monochromatic, complimentary, analogous, triadic, split-complimentary
Past Student Projects
Copy & Open Illustrator Template
Copy the Style Guide & App template
If you aren't already signed in to Adobe, click "Sign in" in the top right corner and "Continue with Google"
Click "Copy to Files"
Open the Creative Cloud desktop app from your dock.
Right-click on the template and click "Open"
Company/App, Logo, & Product Photos
Think of a fake company that sells products.
Find a logo for your company (you may create your own or find one online).
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:
Logo
Description of the app/company
Color palette with 6 colors (identify using the HEX #)
Use a specific color scheme: monochromatic, complimentary, analogous, triadic, split-complimentary
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
Buttons: primary and secondary.
Design your Screens
Apply your style guide (logo, color, typography, buttons) to your screens
Adjust the screens as you wish.
The 9 screen wireframes are created to be:
Splash screen (just the logo)
Login
Sign Up
Sign Up Confirmation
Home w/ Product Categories
Category with Products
Product Detail
Search Results with Products
Profile
Save as a PDF File
Go to "File" > "Save As..."
Click "Save on your computer"
Make sure it is going to save in "Creative Cloud Files"
Change the Format to "Adobe PDF (pdf)"
Click "Save"
Turn in PDF to Canvas
Turn in your .pdf file on Canvas.
"I'm Done"
Bored? Check out the "I'm Done" activities.