Style Guide Pracitce
UI Style Guides
UI Style Guides are part of a "Design system" and are design standards for UI elements and interactions. They:
Ensure product consistency
Help designers and developers communicate and collaborate better
Include standards for typography, layouts, color palettes, buttons, fonts, logos, icons, alerts, loaders, and sliders, etc.
Copy & Open Illustrator Template
Copy the Style Guide Practice 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"
Choose an App to Practice With
Choose one of the 4 apps with screenshots on the template.
Drag it over to the empty box on the artboard.
Copy Colors
HEX numbers, which use the RGB color space, are used for coded designs such as websites and apps.
Select the first black square under the "Color Palette" area
Click on the "Eyedropper" tool.
Click on a color in the app. This will change the color of the square.
Go to the "Properties" tab and click on the "Fill" color swatch.
Click the three lines in the right corner and make sure "RGB" is selected.
Copy the HEX #
Paste the HEX # into the text box under the square.
Repeat for 5 more colors used in the app.
Copy Buttons
Use the eyedropper tool to copy the color of the buttons and the text color used in the buttons.
If the button shapes are not corners, adjust them to align with the shape:
Click on the button.
White circles should show up inside of each corner.
Drag the white circles in to create more rounded corners.
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.