Brush up on your Prototyping
March 28, 2007 at 1:31 am
Recently I've been trying to reorganize my efforts and pull my clients and coworkers closer during the planning and early design stages of a websites. In doing so, I've decided to hard nose myself into using prototypes (also called wireframes) for every project, not just the big ones. It's easy to think, "this site is so small, why take the time to prototype it — let's just bust it out and move on". What happens more often than not is that we end up with twice as much back-and-forth work and a muddled end result.
For those who are uninformed, or have never used prototyping as a method of planning, a prototype is a draft version of a website and is often the best way to gather feedback while planning and designing a website.
Low-fidelity prototypes
Low-fidelity prototypes are the fastest way to brainstorm and see your ideas, make your mistakes [and build off of them] and to see your progression.
Using low-fidelity prototypes (such as paper-based prototypes) is also the quickest way to get feedback on preliminary site architecture, design, and content. Use simple tools like paper, pen or pencil, scissors, Sharpie markers and sticky notes to create these low-fidelity prototypes.
High-fidelity prototypes
Traditionally you would transition from a low-fidelity prototype to a high-fidelity prototype to present a more visual illustration of the website. However, each high-fidelity option can be used on its own, or in conjunction with additional options.
- White Site
- Using a white site is often the best way to gather feedback from users while you are still planning and designing a website. Creating a white site involves building a text-only version of the site, with working links, but without graphic detail.
- Part of building a white site is developing a site map. The goal is to provide a single-page overview of your site that will act as a guide to constructing the rest of the wireframe phases. Remember, while a site map may list all of the features and links that should be contained with a website, it doesn’t tell you which features are the most important and where they should be located on each page.
- Grey Box Method
- Using the grey box method will help prevent becoming lost in font and color selection during the design planning of a website. By getting rid of the look & feel details, this helps to ensure the structure makes sense first. Think of a grey box prototype as a graphical representation of the layout and navigation using only conventional shapes and (usually) solid grey, black and white for color variations.
- Here are three examples that display the grey box method used for this site. The first is self explanitory, the second uses colors additional to the standard grey box method but still fits the mold of a grey box rather than a comp (see next item below), and the third is an even more fleshed out version of the grey box method.
- Obviously this is an extremely simple example as I had the concept in my head already and this was my own site. Normally there is more to the grey box prototype that would be displayed and depicted, especially if there are shapes, rounded corners, ad space requirements, or more modular content placed in a more graphically intense layout.
- Comprehensive
- A comprehensive, usually shortened to comp, is the layout of a proposed design showing the relative positions of text and illustrations before the specific content of those elements has been decided on.
Closing statements
I hope this information helps clarify some of the prototyping options available to designers, or perhaps it will inspire the use of prototyping as part of every project undertaking for those who stumble upon this entry blindly. Only recently have I began using prototypes to the extents described in this entry; for years I completely skipped over most prototyping methods (occasionally doing only a site plan) and began each project with comprehensive illustrations. This negligence cost me an abundance of time and profits over the years, however it has made me a proficient comp artist — so I guess it's not all bad...
I would also like to add that prototyping isn't just for website design, it can be applied just the same in other types of design or development projects; from print design to UI design.
References
Develop a Prototype – Design | Usability.gov
Jason Santa Maria | Grey Box Methodology
Comprehensive layout – Wikipedia, the free encyclopedia
Entry Summary
You’re currently reading “Brush up on your Prototyping,” an entry on Jeremy Helms
Comments
for this entry. If you have something to say, please consider adding your own.
You can also subscribe to an RSS feed of this entry's comments.
Classification
Categories: Design, Development
Related Entries
- No related posts
