Intro to Wireframing

Continuing our series on “Intro to User Experience Design”, this post focuses on one of the funnest aspects of it all — Wireframing. Once you’ve figured out who your target user is, empathized with their problems and reframed the problem, its now time to put pen to paper!

Sketching makes your life easier in a couple of ways:

Once you know generally what your solution looks like, its time to build what we call “wireframes”. Wireframes are the simplest visual reproduction of your designs. They communicate things like basic flow, structure and core components in your designs.

Besides being able to communicate your idea to other people, they help you iron out those pesky macro-details.

There are a ton of tools and softwares to build out wireframes, and they all offer a variety of fidelity. Some of our favorites ones are Sketch, Illustrator, Invision, Flinto, Balsamiq. You’ll notice that in that list there are some prototyping tools. Invision and Flinto are great for wireframing because they offer you only basic shapes to play around with. Block wireframes are quick and easy, but they give someone a visual anchor for conversations.

While wireframing, there are a few best practices to keep in mind:

Check this out for some inspiration for your wireframes:

Once you’ve built out your wireframes, you can move on to prototyping your solutions — which is the topic of the next post!

Related posts:

Ryan Smith quote tweets Adrian Wojnarowski, that Ryan and the Millers have entered into an agreement to buy the Utah Jazz. The Jazz and their stadium are part of a Trust to ensure they stay in Utah…

From an academic standpoint, engineering is, quite frankly, absurd. No other discipline, in my opinion, claims free thought and creativity while forcing students into such a drudging, draining…

With the 2019 Tour de France looming around the corner (starting 7/6/19), I thought to do a little digging into see how the race has changed throughout the years. This couldn’t be done without Thomas…