UI Design Intro
Project Brief
You will receive a basic example of a 3-screen wireframe and a sign-up process. This example wireframe is similar to what a User Experience (UX) Designer would create after researching the needs of the app's process and user. Your job is to act as the User Interface (UI) Designer and design the visual interface, including typography and color.
Copy Illustrator Template
Copy the Wireframe Illustrator 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"
Copy & Paste a Logo
You will need a logo to add to your app design. You can use a real company's logo or just find a random logo you like online (school appropriate).
Once you find a logo, right-click and click "Copy Image"
In Illustrator, right-click and click "Paste"
If you want to crop your image, go to the "Properties" tab on the right side and click "Crop Image"
In the first wireframe where it says "Logo" click and delete the box/text and move your logo into it's place.
Lock and Unlock Layers
In the "Layers" panel on the right, click the empty space next to your "Logo" layer to lock it.
Unlock the "Text" layer by clicking the lock icon.
Choose A Font & Adjust
Select all your text (click and drag to encompass all, let go)
Choose a font for all your text.
Create hierarchy within the text.
Change sizes of specific parts
Change the weight of the font (bold, light, etc.)
Adjust the size.
Choose a color for the text if you would like it to not be black.
Lock and Unlock Layers
In the "Layers" panel on the right, click the empty space next to your "Text" layer to lock it.
Unlock the "Lines" layer by clicking the lock icon.
Choose The Line Color
Select all your lines (click and drag to encompass all, let go)
Choose a color for the lines. Either:
Double-click on the stroke color swatch to open the Color Picker
Open the "Properties" panel on the right side.
Repeat for Buttons and Background
Lock and unlock the necessary layers.
Choose colors
You may want to go back and adjust other colors (such as text colors) as you go.
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.