Wireframes, communicate the Interface
I have now spent some time putting the Wireframes together for Its4aCasue.com. Wireframing (and prototyping IMO) are critical to getting the whole thing right. It helps convey the concept of how it will all work without having to actually build the application.
So what’s a wireframe? A wireframe in software design (particularly web applications) are mocked up User Interfaces that emulate the key elements of the User Interface. Such as what needs to appear on the screen, roughly where to position it and understand what the focus for that screen is. The next step is to make the wireframes interactive, so when you click on a button it ‘emulates’ taking you to the next screen – these are prototypes.
Wireframes for me replace the old ‘back of a napkin’ concept, where you convey enough of an idea to be able to have a meaningful conversation without completing the vision to stifle any creative imagination the viewer needs. Wireframes serve many purposes, and below I go through some of the methods and benefits I have discovered.
Sketching the UI
I know some people like to put the wireframes together using interfaces that look like the end product. I actually like using sketch like interfaces to promote some creativity when people are viewing the interfaces. When I used to build Java Desktop apps, I would use the Napkin look and feel to try and accomplish the same thing. A sketched look actually means you don’t have to be so strict about positioning of elements or be pixel perfect. As long as you are communicating elements such as where buttons and headers appear, you are getting the message across.
Interactivity
Its important to be able to transition your Wireframes to prototypes. Prototypes are working versions of the wireframes. Why go to all the effort of designing screens if you can’t navigate between them?! Again, sketched prototypes are a powerful (and quick way) to communicate interactivity. Demonstrate the flow a user needs to go through and communicate what should be displayed when a certain button is clicked.
Focus on What’s Important
Wireframes and prototypes help you focus on what is important in the design. What should the page focus on; is it the form, the search box, some content or something altogether different? By wireframing it first, you are communicating what are the important elements on that screen. This is another benefit ’scribbled’ screens have over screens that are attempting to look like the finished product. If you don’t fill the finished design with all the elements such as add banners or images it looks, well……unfinished! Wireframes are supposed to look unfinished so placing a box with a cross through it as a place holder for an ad is perfectly fine.
Testing
In my opinion, this is the single most important benefit you get from Wireframes and Prototypes – the testing. You get to test your interface before you spend a fortune building the real thing. You can test it yourself and challenge your concepts or you can work it with a focus group. You cannot underestimate this benefit. Start testing concepts like; should this 3 screen flow be achieved through Ajax? Is it dumb to complete this form through Ajax? Is there too many screens in a sign up process? or is the main focus on the screen a Search Field, but everyone is missing it!?
Wireframe hugely benefit what is done day to day when building the application. With the Its4aCause project, after I completed the wireframes, I was able to pass them over to a designer and basically then prioritise which screens I want them to work on. And I can always come back and make changes within the wireframe and completing the interactive model before building the real screens.
This concept is part of a development model that I use called “Top Down” Development that I will be writing a blog about very soon. Also, the tools of wireframing can either make this task enjoyable or a chore. I will be discussing that in a blog soon too.
Hi there,
Interesting and concise article. People indeed just love the sketch look of wireframes, especially in the early stages of design process. And the Napkin l’n'f was historically one of the first tools to provide the means for sketch prototypes. That look’n'feel was the source of inspiration for a similar theme in Adobe Flex. I completed and incorporated that theme into this wireframing/prototyping tool called FlairBuilder (http://www.flairbuilder.com), that I’m developing.
FlairBuilder now offers you both a sketchy and a clean theme, while having the same level of interactivity. It can do basic page to page navigation, as well as more advanced interactions. All these on top of a set of fully functional widgets.
Again, thanks for sharing your thoughts with us and I hope you’ll also give FlairBuilder a try.
Cheers,
Cristian
Thanks for your comment! Good to see other people are aligned with this thinking. I will definitely have a look at flairbuilder, I am currently using OmniGraffle to do wireframes, and have used Balsamiq, so always looking for great new tools.
That Microsoft zune specializes in as being a Compact Media Player. Genuinely browser. Genuinely activity piece of equipment. Maybe down the road it may perform a better choice inside individuals parts, until then that’s a superb tactic to handle together with focus on a person’s songs as well as video tutorials, as well as without the need of expert in that way. Typically the iPod’s strengths really are it is world wide web perusing and even applications. In case all those reasonable alot more convincing, possibly it’s your best option.