High Fidelity

Changes from wireframes

When you've done this enough, you shouldn't need to make too many changes to the layout or information architecture during the switch to high fidelity mockups.

If you find when you update a rectangle to an image, or if you are adding shadows or color to buttons that you need to change spacing and layout around, then feel free to make those changes!

Wireframes are purely to get you to the point where your ideas and the general layout are fully mapped out. There will be changes and that's okay!

Choosing colors

Coolors.co Is a great platform for finding good color palettes. Make sure you keep accessibility and color contrast in mind when applying the colors.

Components

If you're using Figma, they have a handy tool where you can access and change all instances of a color to another color. This is a super nice way of updating to hi-fi mockups.

Another way is to work with components at the wireframe level. This will make it so you simply duplicate your frames and change the component's to update everywhere.

Wrapup

Please share your work in Discord! We will be very encouraging!

UI Recreation

User Flow Mapping

Moodboarding

Initial Wireframes

Full Wireframes

High Fidelity