Wireframing

Wireframing is a useful first step in the design process, allowing you to focus on defining the information hierarchy and user experience.

What is wireframing?

A basic visual guide used to suggest the layout of fundamental elements in a web interface.

Wireframing allows you to focus on:

• planning the general layout
• determing how the user will interact with your interface
• the range of functions available to your user
• the kinds of information displayed

Meet Balsamiq

Balsamiq is a wireframing application for quick mockups. It’s like sketching except that it’s digital, allowing you to easily tweak and rearrange your ideas.

I prefer low-fidelity wireframes because they allow you to focus on the core functionality and user experience while avoiding time-consuming specifics. Oftentimes if you deliver a wireframe that look “too finished”; the client might think it’s the final design.

This keeps the conversations focused on what matters: the user experience!

Distraction Free

Wireframing lets you work distraction-free because you don’t have to worry about picking fonts, colors or writing copy. You also have the freedom to try as many layouts or options you’d like. Moving around elements and playing with how placement effects on ease of use is a very rewarding experience. Put on some music and experiment!

Iterate

Remember that nothing is final. You will iterate on your wireframes before you move on to the prototyping stage; it’s almost unavoidable. Don’t be afraid to throw out ideas that don’t work and try out several layouts.

It’s better to spend the time iterating and experimenting with wireframes while the project is still lightweight and easy to change.

Think more, design less

This quote from Thinking with Type by Ellen Lupton really applies in the real world. I spend a lot of time thinking about the user experience and walking through every aspect of my design, asking myself questions like, “Do I need this?”; or “Is this too complicated?”; This critical thinking will prove invaluable when you get to prototyping.

The time you spend developing the user experience while wireframing will serve as a guide to building an awesome product.

Feedback is Welcome

It’s important to get feedback as soon as possible. Don’t be afraid to show your wireframes. Get some initial thoughts from the client. Sit some users down for informal usability testing. The sooner you let the client or user into the process, the sooner you know how successful your design is.

I often pair with my mentor, Stephanie, and get instant feedback on my decisions. We bounce ideas off each other all the time, leading to more developed user experiences and better designs.

Just remember to keep it simple, put usability first, seek out feedback and experiment.