2. Be Clear About Your Objective 
Many 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. And as a
final output it will help
designers, developers, architects and project managers
who evolves in the project makes sure everyone is in
sync.

3. Make it Functional, Not Pretty 
There are variations in how wireframes are 
presented. Fundamentally it is about the
functional parts of an application, e.g. that a
page will have 3 text boxes and 2 buttons. It’s
about function not form.

4. Draw on Your Experience 
You do not need skills in design or 
development. All anyone needs is experience in
using web apps or websites.

5. Decide Who’s in Charge? 
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
founders, the ones with the idea and vision
who understand the end goal.

6. Involve Everyone 
Maybe not at the first meeting that should
focus on simply getting the idea on paper.
Fewer, people involved makes this process
quicker. As the wireframe develops involve
other members of your team and your client’s
team. Equally designers have a good
understanding of user experience and can spot
potential problems in the flow early on.

7. Set a Deadline for Completing the Wireframe 
It is important to set aside predefined periods
of time and deadlines for deliverables to keep a
project moving. Follow up review meetings can
be much shorter or even done remotely.

8. Keep it clean 
If a particular page requires two text boxes and
a button then it should have just that, no
more, no less.

9. Avoid Designing Your Wireframe Too Much 
Wire framing is about the functional way in
which something operates it’s nothing to do
with presentation or design. A person should
try to avoid anything that could be construed
as design. This will almost always distract the
audience.

10. Remember that UI is not UX 
It can be extremely tempting to start thinking
about the use of presentation methods such as
AJAX. Remember that a wireframe document
is about the functional elements and not the
way they are presented or users interact with
them.

11. Think About the User 
It sounds obvious but it’s so easy to get caught
up in creating a wireframe and forget about the
user. The functional is what we’re focused on
but it is still important to consider the user
experience that is being created; for
example, too long form.

12. Don’t Get Lazy 
It’s often easy to say “the login page is obvious
let’s not include it in the wireframe”. 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.

13. Organize Your Wireframe into Sections 
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.

14. Number Your Pages 
A web application often consists of a number of
processes; a checkout is 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.

15. Look for Repetition 
Consistency within an application is helpful to
users, developers and designers. Repetition of
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.

16. Check it all Makes Sense 
The final document should be easy for anyone
to follow. If only a developer can understand
your wireframe then something has gone
wrong. Ask at least one person who has
nothing to do with the project if they
understand it.

17. Ads are Functional 
Many sites include advertising for
monetization, this may be as simple as Google
ads but it is functional and not design, so
include it.

18. It’s Not Just the Public Site 
Many sites have an administration area for
managing content. This may not be viewed by
many people but it is still important. This is
important information to developers when
designing the database.

19. Know When to Stop 
Make sure all relevant stakeholders have the
opportunity to give feedback but don’t turn
this exercise into painting the Sistine Chapel.
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.

20. 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.
There are a number of specific tools for wire 
framing, which provides an environment for
quickly adding and customizing common interface
elements. They have given it a hand drawn feel to
provide a visual lift while not actually being
design.

21. Consider Dependencies 
Everyone knows what a shopping cart process
is, right? Therefore it’s easy to wireframe and
put to one side. Not entirely. What if you’re
using a third party payment provider such as
PayPal? That may influence how parts of the
site must work. Research the areas where there
will be dependencies and make changes
accordingly. It’s easier to do it now than later.