The nature of UI development is so complex that fitting it into a set of rules is simply not possible. But Wireframing is an extremely important step in the planning process of a website. It allows you get a clear picture of what information will be needed on each page before design. The only way to become an expert in this field is through a constant practice and effort to better the results by learning more out of small mistakes.

1. 10 Steps to Better Wireframing
by
Indrajit Basu
Project Coordinator
Data-Core Systems
www.datacoresystems.com

2. 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.
www.datacoresystems.com
Learning by knowledge sharing

3. 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.
www.datacoresystems.com
Learning by knowledge sharing

4. 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.
www.datacoresystems.com
Learning by knowledge sharing

5. 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.
www.datacoresystems.com
Learning by knowledge sharing

6. 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.
www.datacoresystems.com
Learning by knowledge sharing

7. 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.
www.datacoresystems.com
Learning by knowledge sharing

8. 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.
www.datacoresystems.com
Learning by knowledge sharing

9. 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.
www.datacoresystems.com
Learning by knowledge sharing

10. 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.
www.datacoresystems.com
Learning by knowledge sharing

11. 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.
www.datacoresystems.com
Learning by knowledge sharing

12. 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
www.datacoresystems.com
Learning by knowledge sharing

13. 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.
www.datacoresystems.com
Learning by knowledge sharing

14. THANK YOU
www.datacoresystems.com
Learning by knowledge sharing