EV Discussions : All about Wireframing

Posted by: Sergey on Feb 7, 2013 | No Comments

In today’s show, Ben, Hrishi and Sergey will share some tips on wireframing.

Wireframing is just a way of designing your website or app very quickly without getting into detail. It’s a way of sketching your high level ideas, combining online and offline tools.

(Image Source)

It can be very useful in different contexts: at a very early stage, when you just want to visualize an idea and communicate it to somebody else; when you want to share your thoughts with cross-functional people; as a continuous integrator, to show your client what you are working on, and to see obvious flows.

Wareframing should be related to a user story. It should be quick, even kind of ugly… If it looks very nice people will start to criticize small details. Because the focus is on functionality, sometimes it is good to remind designers that they should not stick to your design,

Sketching needs to come before wireframing. It all needs to be done by hand.

Don’t jump into wireframing before you have a list of what you are trying to achieve. First decide if what you are going to do will be mobile or web, then sketch it on paper. Wireframing is not a good way to test your ideas. You will find it hard to control the versions of your product while you are wireframing. The clearer you have in mind what you are trying to do, the better.

Some good tools on wireframing are Balsamiq, mockingbird, Hotgloo, WireframeSketcher and Fluid UI. You can even use Simplediagramms or Powerpoint just to get started.

We talk about a few links during the show. Have a look.

Sergey´s links:

http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/ - explains why high-fidelity wireframes are not always useful

http://blog.intercom.io/wireframing-for-web-apps/ - some pointer for best practices in wireframes

http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ - sketching and wireframing are not the same thing

http://uxmag.com/articles/ditch-traditional-wireframes - outlines some of the current problems with wireframing

Ben’s links

20 Steps to Better Wireframing

•. Make it Functional, Not Pretty
•. Set a Deadline for Completing the Wireframe
•. Remember that UI is not UX
•. Don’t Get Lazy
•. Number Your Pages

Is wireframing dead?

The whole high-level wireframe exercise? Forget it. My approach here is, get your UX-ers in a room with your techs, art directors, strategists etc…and everybody draw on the whiteboard. Then, spend less time illustrating the UI and more time illustrating the user touchpoints, the experiential activities.

Three reasons why wireframing tools suck.

Responsive Responsive Responsive (& Version control)

The ‘Boxing Glove’ Wireframing Technique