Initial Wireframes

Start Small

Remember that we're moving fast as we can here so the best idea is to nail down the screens you have the clearest vision for. In the next few days, you'll want to have the main screen of onboarding and the additional user flows wireframed. This means that you'll want to probably put in a few extra iterations in to make sure you flesh out all the ideas you have.

The idea here is to get pen to paper and have some visuals to show for it at the end of this phase.

How to create wireframes

Don't be perfect

The the entire point off wireframes is to get your ideas as quickly as you can. So don't worry about pixel perfect wires here. Reference your moods and draw out your layouts based on those moods and keep it grayscale. Some people even suggest drawing on pencil and paper. RadNolan is not one to live without the undo button, so he sticks inside of Figma for wireframing.

Detailing

A big part of wireframing is working out the Information Architecture (IA) of the screens. This will be patterns you set and then re-use throughout the project. So make sure you are using real text and in some cases stock photos to really visualize the layouts. Go as detailed as you can without spending too much time.

UI Recreation

User Flow Mapping

Moodboarding

Initial Wireframes

Full Wireframes

High Fidelity