Hi Fidelity Design Mockups

Usability Testing In Class Practice

• see slides from day 7

Design Assets

While not necessary, it’s a good idea to set up your design assets like colors and fonts prior to building components. This allows you to make stylistic changes globally with little effort.

Set up Colors, Fonts, and Grids

Figma Design Systems Tutorials

Colors

• Remember from our earlier classes of color selection (these are some suggestions to work from): - 1 primary color: the main theme of the site (a good option for having 3+ shades) - 1 secondary color: a complementary color (also good for having 3+ shades) - 1 accent color: used for buttons, hover, interactions (this color should be clear on your theme colors)

Activity: Use a Plugin to Generate Colors and Fonts

• Search the figma community plugins for a color generator
• Generate a couple colors

In Class Design Along

I will go step by step (following the steps below) to make a small high fidelity navbar, hero section, and 3 card layout. The goal is for everyone to be able to design along with me and ask questions as we go.

Hi Fidelity Mockup Steps

1. Prep your design assets first (only uses colors and fonts from your defined styles)
2. Set up your grid on the main frame (used for creating the layout)
3. Sketch out a wireframe to follow
4. Get image and icon assets
5. Start Designing
6. When Finished, review labels and groupings —> Optimize

Lab Time