Quick Guide to Wireframes
A Beginner’s Guide to Website Design
Quick Guide to Wireframes
Table of Contents
How Wireframing Fits into the Overall Process 1
Determine the Flow of Your Site 1
Develop the Site Skeleton 3
Tips for Creating a Functional Website 6
Appendix A: Worksheet for Determining Functionality of Your Website 7
© Copyright 2011 Docstoc Inc. 1
Quick Guide to Wireframes
Wireframes are design tools that are used as visual guides to demonstrate the proposed
functionality, content and structure of websites. Wireframing is done to give your web design
team the ability to see how you envision your users interacting with your website. This
treatment will walk you through the basics of developing a wireframe that can be used to develop
Site architecture works much the same as classic architecture – a classic architect sees a finished
structure, but he or she must somehow convey the specifics of their vision to those who will
construct it. Those who have worked in that industry understand all too well why there is
frequently tension between the architect and the construction manager. The architect wants
everything to work the way it works in his or her head, and the construction manager needs to
make it work in reality – these two things are not always compatible.
Such is sometimes the case with building a website – you may have dreams of all sorts of
features and functions of your site, but the person who actually builds the site must be able to
feasibly make them work. This is not always an easy task, and this is where proper wireframing
comes in – the architect of the site works with the construction manager to create the dream of
what the site needs to do.
How Wireframing Fits into the Overall Process
The first four steps in the creation of a website are as follows (please see the separate document
titled, “Ten Steps to Creating a Functional Website”):
Step One: Determine the Functionality of Your Site
Step Two: Establish Your Domain
Step Three: Obtain a Hosting Site
Step Four: Design Your Site
Developing a wireframe is going to be particularly important for Steps Two through Four, as the
type of domain and hosting site will need to provide the proper capabilities for the site you
envision, and designing your site needs to start with an accurate wireframe.
Before you even consider a hosting site, you will need to know if it can accommodate what you
want to build, and this is where a wireframe can help.
© Copyright 2010 Docstoc Inc. 2
Determine the Flow of Your Site
The first step in this process is to visualize how you want your website to function. Appendix A
includes a worksheet that you can use to determine the functional elements of your website, and
a good way to visualize how you expect those functions to work together is to lay out a flow
chart that shows the basic components.
You can do this with a software program such as Microsoft Word or Excel, or there are other
programs that specialize in flow charts, such as SmartDraw (which offers a free trial before you
buy). Alternately, you can hand-draw the flow you visualize.
Product 1 Product 2 Product 3
Shopping Cart /
Develop the Site Skeleton
Rather than focusing on the aesthetics of the site (or the way you ultimately want it to look),
concentrate on the bare bones aspects of it. For example, think about your home page and what
you want it to include. This is not the time to get fancy, or to think about colors and schemes,
but rather to get the bare bones in place.
Keep it simple – if you only want one or two buttons on the home page then only include one or
two buttons in the wireframe.
© Copyright 2010 Docstoc Inc. 3
When you are satisfied that you have the
elements necessary for your home page, repeat
the process for each subsequent page (based on
your flow chart), until you have mock-ups for all
pages that your site will contain.
TIP: Number your pages! Your designer will
thank you for not leaving the order up to his or
The sample below was created with a trial copy of the software, SmartDraw, which makes it easy
to create your wireframe. (You can get your free trial copy at
There are many methods for wireframing – they don’t all look alike, and some other samples
borrowed from the web include the following:
© Copyright 2010 Docstoc Inc. 4
Tips for Creating a Functional Wireframe
As stated above, simplicity is a key factor. The more detailed design elements will come
later, when the actual site is designed.
Work in grayscale to avoid falling into designing before it is time.
Use a sitemap along with your wireframe.
© Copyright 2010 Docstoc Inc. 5
Remember who you want the end user of your site to be, and try to keep things as user-
friendly as possible.
Create the wireframe in a format that anyone who is not associated with the project can
read and understand.
Maintain consistency with your functional elements, in other words, if different pages
will contain a form to gather the same information, make the forms look the same on
If you plan to use affiliate advertising on your site, make sure you leave spaces for those
banners and/or ads.
If your site will depend on external sources, such as PayPal, find out what those
requirements are before you start laying them out, so that you can avoid having to change
them to comport with their specific requirements later.
© Copyright 2010 Docstoc Inc. 6
Appendix A: Worksheet for Determining Functionality of Your Website
Check each box that applies to what you envision your site accomplishing for you. If you are
unsure of whether you need a particular functionality, mark it with a question mark until you
obtain additional information.
/? Function Comments / Notes
Allow users to search the site.
Allow users to contact you via the site.
Allow users to sign up for e-mail alerts.
Offer products for sale / shopping cart.
Allow users to track orders.
Allow users to obtain data from a database
Include links to other sites.
Use custom or proprietary software.
Include downloadable brochures or .pdf
Allow photo enlargement / zoom.
Include audio and/or video streaming.
English to [language] translation.
© Copyright 2010 Docstoc Inc. 7