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.
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.
We talk about a few links during the show. Have a look.
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
- •. 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
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.
Responsive Responsive Responsive (& Version control)
- Grab a big pad of post-it notes
- Grab a felt tip pen
- Sketch each page on a single post-it
- Draw a single user-journey through the system.
- Concentrate on the ‘happy path’, i.e. ignore contingencies for now. That’s it!
- Use a simple layout
- But be thorough
- Featured Content
- Screen Resolution
- SEO (Search Engine Optimization)
Pick the right tools