Smart Tips for Wireframing by Indrajit basu

Steps to Better Wireframing

byIndrajit Basu

Project CoordinatorData-Core Systems

10

www.datacoresystems.com

Learning by knowledge sharing

What is Website Wireframe ?

A website wireframe is a visual guide that represents the skeletal framework of a website. It deals with the page layout or content arrangement of a website, including interface elements and navigational systems, and how they work together.

The wireframe normally doesn’t depict typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.



Common Mistakes to Avoid

Possibly the biggest mistake in any development project is failure to plan.

Wireframing is one of the first steps in your planning process and arguably it’s one of the most important ones. This is when the idea starts to take shape as an application.



1. Be Crystal Clear

Projects are rarely simple and anyone with experience will know what a myriad of unforeseen issues and challenges await you if you go down this route. A wireframe will help you identify many of these issues in a way that is time and cost effective. It is far easier to make changes to a collection of paper screens than after you have written a thousand lines of code.

The process also helps to create a better understanding of the application. Putting it down on paper raises questions and ideas and leads to changes. The final output will be a blueprint from which designers, developers, architects and project managers will work and makes sure everyone is in sync.



2. Functional, Not Pretty

Wireframe is meant to deal with the functional parts of an application, e.g. a page will have 3 text boxes and 2 buttons. It’s about function (boxes, buttons, dropdowns etc) not captivating graphics.

It’s better to ignore anything that could be seen as design or layout. While developing a wireframe, you do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you don’t need to understand relational databases to wireframe.



3. Know Your Role

Make sure someone owns the wireframe process. They are responsible for keeping it up to date and managing feedback, changes etc.

In the case of a start-up this is often the ones with the idea and vision to understand the end goal. It doesn’t matter who it is so long as ‘someone’ is in charge.

But at the same time, make sure you involve both the development team and the customer’s team during the development of your wireframe. For example, if you are integrating your app or site with existing databases then make sure the DB owner can check that all the data fields exist in their database before you add them to your wireframe. Collecting a user’s cell number is no good if there is nowhere to store it. Designers, on the other hand, should have a good understanding of user experience and can spot potential problems in the flow early on.



4. Set a Deadline

It is important to set aside predefined periods of time and deadlines for deliverables to keep a project moving.

The initial wireframing session could be one day or several, depending on the size of the application. Set a period and stick to it. Follow up review meetings can be much shorter or even done remotely.



5. Be Organized

A website or app is often divided into sections such as news, products and user account. Break up your wireframe document accordingly, for much easier reference.

We often tend to say, “let’s skip the login section, that is already implied”. Make sure you wireframe everything. At the end of this process you should have a document that can be stepped through just like the final website. Every step counts and none should be ignored.



6. Use Page Numbers, Be Smart

A web application often consists of a number of processes; a Shopping Cart Checkout Module can be a good example. Often these are linear but sometimes users can choose different paths such as skipping a step.

Clearly number the pages in your document and then label which page a particular action (such as clicking a button) takes the user to.



7. Be Consistent

Consistency within an application is helpful to users, developers and designers. Consistency in groups of elements can therefore be a good thing.

For example, wherever a user enters an address it should be the same fields in the same order. Look for these areas of repetition as you wireframe.



8. Know When to Stop

Make sure all relevant stakeholders have the opportunity to give feedback but don’t turn this exercise into painting the Monalisa.

Typically I would say three drafts should get the job done. The first gets the idea onto paper. The second reflects feedback from other parties such as developers, and designers. The third should be the final polish, after the approval from the customer.



9. Choose the Right Tools

Pen and paper is often the way to start. It is much easier and faster than using a computer and lets you get thoughts and ideas down, as the concept evolves.

Once you start creating the document our advice would be to use the tool you’re most comfortable with. Developers for example may use Microsoft Visio, project managers can use PowerPoint, Designers may prefer Adobe Fireworks.

Wireframe should be a document rather than something interactive like a webpage. The latter can be a distracting and therefore creating HTML is probably not the best thing.

Several free and paid tools are also available for wireframing like Balsamiq, Mockingbird, Pencil Project, OmniGraffle, Cacoo etc



10. It’s Not Just the Public Site

Many sites have an administration area for managing content, viewing registered user profiles, resetting passwords etc.

This may not be viewed by many people but it is still important. Sometimes it can contain data that is not publicly available (a user approval button) but significant for the administrator.

This is important for the developers when designing the application. This point should always be considered while designing the wireframe.




THANK YOU

Smart Tips for Wireframing by Indrajit basu

Technology