EightShapes, LLC is a user experience design firm specialized in web sites and web applications.

Quickstart on Prototyping with Wireframes

Here at EightShapes, we’ll use prototypes for internal experience demonstrations and summative research on potential design solutions via usability testing. When we create wireframes modularly separate from deliverables, that affords us opportunities to dynamically reuse those low-fidelity screen designs across a range of context simultaneously: an early wireframe review, a usability test plan, and even the clickable prototype itself.

This video demonstrates how we reuse wireframe files to quickly assemble a prototype that links those page designs together through a browser-based experience. The prototype file may be disposable after the artifact is exported or the usability testing cycle is complete, but the wireframes can evolve during (last minute changes happen!) and after the test as they are used in other artifacts too. Since wireframe files are dynamically linked, if one changes before the prototype is used, just open the prototype and reexport.

Another implicit benefit is that you need not necessarily use InDesign wireframes; a similar approach could use placed artwork from Illustrator (AI), Photoshop (PSD), or screenshots for that matter.

Creating Prototypes with EightShapes Unify from Nathan Curtis on Vimeo.

(apologies for the quality when full screen; we’re working with our provider to improve this very soon!)

RSS 2.0  |  Trackback

Comments (5)

  1. [...] The site is loaded with awesome resources, including video tutorials like: Quickstart on Prototyping with Wireframes [...]

  2. Milan says:

    Very cool. I’ve downloaded the templates and am stoked to start using them. Step 1 : how do i customize them so that they use my company’s logo, colors, etc?

  3. Milan,

    Customization is described here. Note that the Logo-specific details are out-of-date in that they refer to an earlier version that including non-printing elements. The current version omits this complexity to simplify things…



  4. Ray says:

    I’m sure you heard this before, but you guys are just brilliant. I came out of traditional print production where style sheets and page grids rule.

    Thanks for this. I just wish I’d seen it sooner.


  5. [...] website Eightshapes preview video Quickstart prototyping with wireframes Eightshapes on Twitter June 1, 2010   //   Free Software, Uncategorized [...]

Add a Comment

Email addresses will not be published. Required fields are marked *