Better Perspective in WireFraming

The biggest mistake any website owner could take in any development project is to plunge right into the water without any plans whatsoever. Failure to devise any plan is a sure passport to failure that would eventually end in tears. Sure, a good developer can start coding right away without any diagram for a guide, but that is one hell of a risk not worth taking.

One of the most important initial steps in the planning process is WireFraming. Any ideas you have in mind while conceptualizing your visions could start to take shape through WireFraming. Ideas will become buttons and boxes that users will enable to interact with. Through this article, I want to take you to the process of WireFraming-the tools and tips to make the process smooth and enjoyable.

The Objective

The temptation to fire right away with the coding is but natural. Every developer suffers in thinking that the idea is just so simple that you can do it straight right away without any further ado. The fact is, no project is simple enough and any experienced web developer knows that a myriad of unforeseen issues will come up later on without a warning. Challenges and headaches await you if you don’t start things out right the first time.

WireFraming will help you identify issues in time and in cost effective method. It is by far easier to make huge changes in a paper screen rather than modifying thousands of codes already in place. Also, putting in paper the intended plans and concepts will raise further ideas and adjustments that lead to better changes. The final output will be the guiding principle of the designer, developer and project manager making sure that they will work on according to plan.

Functionality First

WireFrames is all about the fundamental parts of an application; it is variably presented in a different tool available. It focuses mainly on the function, like a page will be having 3 text boxes and 5 buttons and not inclined to form or design. This is called an austere approach wherein WireFrames are based on the functional elements such as dropdowns, boxes, buttons etc. and ignoring anything related to design or layout.

Experiential

Design development does not require intensive skills; you only need good experience in using web apps. The more experience you have, the better; however, you don’t need to master relational databases to render WireFrame.

Who’s the Boss?

It is critical to have somebody to stand in charge of the whole WireFraming process. He/she will be responsible in keeping it up to date and will manage changes and feedback consistently. In the case of a starting-up site, this role is naturally delegated to the founder of the site. He is the one who primarily have the vision and the idea and knows exactly the end goal. In the case of clients, the web designer takes on the role of the one in charge.

Team Work

During the development of the WireFrame, it is best to involve everyone in its development; it will make things speed up a little bit with team work. If you’re integrating your app with the existing databases make sure you coordinate well with the database owner to check if all the data fields exists in their DB before you add it to your WireFrame. Designers have a good hand in understanding the user experience and can early detect potential problems at hand.

Deadline

Just like any other work, a predefined set of time is important to keep the project moving with a goal. WireFraming can take one day or more depending on the application size. Set a period of time to accomplish things and stick to it faithfully. Meetings and other reviews can be done for a short period of time or sometimes in the convenience of remote conference.

Avoid Overdoing Your WireFrame

Keep in mind that WireFraming is not for the aesthetic purposes; it’s for functionality. So every aspect that leads to overdoing it and might be construed for a design should be avoided to save time and effort. Things like that almost always distract the audiences. A little effort of adding a color blue can lead to long hours of conversation of how blue should be the blue. It is easier to leave the designing aspect to the designers.

With the User in Mind

It is easy to work continuously with WireFrame and forgetting about the user while in the middle of the engaging effort. Although WireFraming is based on the functionality it is still important to consider the user’s experience at the back of the developer’s mind while creating WireFrame. One of such consideration is the registration form. While you may enjoy yourself creating a three page registration form, bear in mind that no user will probably waste his time trying to fill up huge amount of data in it.

Don’t Get Lazy

Make sure you are WireFraming everything and not excluding things that you think is obvious to the viewers like the Log In page. Everything is counted for and none should be ignored. At the end of the WireFraming process you should have a document that can be seen like a final tally of everything.

Organizing WireFrame

Organized working attitude always counts. Break your WireFrame document in such a way like that of a website into sections such as products, news, and user accounts. This way you will develop a good flow of work with little room for errors.

Numbering Your Pages

Part of organizing the process is numbering your pages. A checkout is a good example, although linear in nature sometimes users can choose other paths like leaving out a step. Label your documents and each page with particular action along with clicking a button that would take a user to advance.

Repetition

Consistency and repetition in an application is proven to be helpful to users, designers and developers. The repetition in the groups of elements therefore is a good thing. Such repetitions like when a user enters an address should be in the same fields of the same order. Take note of these repetitions while WireFraming for a high value work.

Checking Your Document

Your final document should be easy to follow and understand. If a developer finds it incomprehensible, it is a sign that there is an underlying problem somewhere and something has gone wrong. Try testing it by asking a person outside the project if he can comprehend it.

Incorporating Ads

A lot of websites today use Google Adsense for the monetization of their site. Google Adsense is a straightforward ad that is functional and including it in your WireFraming could prove to be beneficial.

Not so Public Data

The administration section of each site contains data that is not shown to public such as resetting passwords, viewing registered user’s profile etc. Although not seen by the public the importance of these data does not decline. The importance of this section in database is in the developer’s disposition.

Hitting the Brakes

It is important to hear the entire stakeholder’s side of the comment through their feedback but that doesn’t entail you to redo all things that you’ve started. Three drafts are enough to say “it’s done.” The first draft should get the idea across the paper; the second should reflect all the feedback from the designers and the developer; the third should the final polishing act.

Getting the Right Tools

Traditional tools such as pen and paper sometimes prove to be useful especially when scribing something that comes out in snap thinking. It is much faster that turning on a computer when ideas struck you. You get thoughts and ideas recorded as the concept evolves.

Once you’re starting to work with the document, have handy tools beside you that you are comfortable with. Developers use Project Managers, Microsoft Visio, PowerPoint or Adobe Fireworks. My opinion would be for the convenience-since WireFraming is documenting rather than designing and utilizing interactive tools in creating HTML might not be the best choice.

Balsamiq is one tool used for WireFraming; it provides an environment for snappy customizing and adding common interface elements. It has a hand drawn feel to it to provide a visual lift.

Considering Dependencies

If you think WireFraming shopping cart process is easy, think again. Third party payment provider such as PayPal may influence how parts of the site must react. Study carefully those areas where there will be dependencies and change it accordingly. Troubleshooting it sooner will save you troubles.

I hope my article have provided you enough knowledge when it comes to WireFraming process and how to effectively approach it. The bottom line in all of these is to save you of all the trouble you might stumble upon through an unorganized level of work. Working in a fault-free environment could reflect in the output.

You May Also Be Interested In:

1. Web & Graphic Design Tips That Will Help You If You Get Stuck
2. The Most Common Design Mistakes That Web Developers Make
3. 5 steps to get inspiration from the trivial objects around you