Guide to Using Wireframes

VIEWS: 5,026 PAGES: 8

More Info
									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 2010 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
your website.

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.

                                              Home Page

                     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
her imagination.

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
     each page.

    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
       or list.
       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.
       Other function:
       Other function:
       Other function:

© Copyright 2010 Docstoc Inc.                                                        7
r .pdf
       Allow photo enlargement / zoom.
       Include audio and/or video streaming.
       English to [language] translation.
       Other function:
       Other function:
       Other function:

© Copyright 2010 Docstoc Inc.                                                        7
ames                                                                       7
To top