Wireframing

Wireframes promote exploring ideas

The low-fidelity make it clear that the design is not final, forcing the people involved to focus on the structure and development, rather than simple details or visual designs. Wireframes also promote fast and productive feedback sessions, since everything is so easy to make and to change.

Pen and paper

There are many softwares that you can use to develop your wireframes, but the majority of people start with sketching screens/products using just a pen and paper. Anybody can draw squares, and rectangles, and drawing things fast will help with getting ideas faster.

Disadvantages of Wireframing

As wireframes do not include any design, for some people in your team and some stakeholders, it will be hard to understand and visualize the concept. This means that you will need to make sure that you are the one who presents your own work. Make sure to communicate your concept until everyone understands it.

Users can also review the wireframes

You can definitely test your wireframes with users before launch, this helps you learn if the product is a good fit and whether it is ready for users. "The Wizard of Oz" prototyping testing method is perfect for this. Wizard of Oz allows concepts to be tested and modified. You can learn more about this method here.

Wireframe design tools

Let's discuss some of the amazing wireframe tools that are available to us!

Balsamiq

If you use Microsoft Office, you can use Balsamiq. It's very easy to use and it's been on the market for over 10 years, so you can trust the tool as a perfect fit for all your needs. Plans start at $9/month for unlimited users.

Adobe XD

It's free and is a one-stop-shop wireframe tool. You can design and prototype your wireframes with ease, and share them will all your teammates. Also, you can co-edit (collaborate) with others in real-time while online.

Figma

Free for 1 project, and one of the best wireframe tools for real-time collaboration. Figma also has prototyping option, and it's cloud-based. Since it's a web-based app, your team can easily log in from anywhere and access the wireframes.

InVision Freehand

If you prefer creating your wireframes on a whiteboard where everyone can contribute and revise, then this tool is for you.

Exercise: Wireframe for a welcoming screen

I am using Adobe Photoshop for this, but you can just use a pen and paper.

First, draw an iPhone X screen.

Then, draw a square as a placeholder for an image, or an illustration.

Draw a few lines under the image square as a placeholder for a description text.

Draw a button for the "Sign In" option.

And a text button for "Log In".

Conclusion

The best tool to use is the one that you are most comfortable with, fits the situation you are in, and gets the job done. Testing many ideas in a fast and cheap way brings a lot of value, and wireframing is one of the best way to do this.