Dribbble Shot by Nick Buturishvili

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!

Always Start By Sketching

Literally, the first step in ANY wireframing exercise should be paper sketching. To see what the sketches for the designs above turned into, you can check out this case study.

There’s no better way to ensure your designs get too complex too fast than by firing up a fancy design tool to do your first pass.

Sketching makes your life easier in a couple of ways:

• It lets you think freely, without the risk of getting to attached to your designs. The effort to make paper sketches is lower to making stuff in design softwares like Sketch.
• It doesn’t let you feel bad about “all the work you’ve done so far”, and lets you iterate on variations.
• Its free! Besides actually costing 0 dollars, sketching also frees you creatively. You don’t have to make sure everything is pixel perfect and pretty — go ahead and make a mess. Experiment with your thoughts to arrive at the solution that speaks to you.
• If you do think of starting off with “high fidelity” wireframes or designs first, then let Gordon Ramsay explain this to you:

Pls Listen to Gordon

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.

Think of wireframes (or wires) as the scaffolding to the building that is your final solution.

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:

• Keep it greyscale. It’s still too early in the process to pick out you hex codes and worry about gradients and shadows. Put that damn thing away! Building wireframes in greyscale lets people focus only on what’s important.
• You don’t need to wireframe EVERY SINGLE FLOW. Stay sane, don’t spend 4 hours designing the perfect login flow — focus on your core solution.
• Get them in front of as many people as possible. You can use Invision or Marvel to share designs with folks easily, even if you use pictures of your paper masterpieces.

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!

This article was written by Sahej Locham for ello

You can follow ello and subscribe to our publication to stay up to date with all the content we have planned for you.

You can also follow us on our other channels to stay up to date. If you’d like to write for ello, please reach out to us on Twitter. We’re always excited to work with others. See you out there!