On Wireframes & Spec Docs

Building an app is like building a house. You need property, plans, contractors, materials, decorations and a time line.  You start with an idea that turns into a vision, but unless you are also a programmer – which I’m not – you will need to be able to communicate that vision. That’s why there are wireframes and specifications documents. 

A wireframe is the sketch of a work of art before the paint is applied; it’s the model sheet of a cartoon character before the succeeding thousands of drawings, each varied slightly from the other, result in animated movement. The wireframe communicates the basic architecture and component parts of your future app and how they will interact with each other as well as interface with the your future user.

On paper the wireframe will look much like its name implies: boxes containing words in block letters and linked to other boxes, or not.  So once your wireframe is built you need to apply color and animation, or content and design. You need to provide the materials that will ultimately guide and define your user’s experience. You do this with the spec doc.

There is no industry standard for creating an app spec doc, what some prefer to call a storyboard. But the advantages of the spec doc are clear:

• It allows the app creator to both solidify and communicate her vision.

• It enables the building contractors, in this case the art designer and program developer, to move forward in lock step with the creator to realize that vision while avoiding unnecessary surprises.

• It provides a common language for the creation of both app and team.

A well-crafted spec doc will define the project purpose, outline its features and functionality, and provide the content so that the contractors can set to work building the foundation, raising the roof beams and walls, and decorating them, both inside and out.  Together, the wireframe and spec doc function like architectural blueprints.

The spec doc for Beware Madame la Guillotine is now 87 pages long and contains a dozen colors, each one related to a different app feature or element. I say “now” because although the spec doc we started with was fairly complete going in, it has continued to be refined and updated as both Art Designer, Beth Lower, and Program Developer, SmartyShortz LLC, have made suggestions and improvements and sought clarification to the original along the way.

Progress Report: The proverbial house is built and we’re busy painting walls, hanging fixtures and tending to the landscaping.

Be the first to try Beware Madame la Guillotine: Click Here

Stay tuned for interviews with Beth and Chris, coming soon…

Image: Sneak preview of task #1 of the Time Traveler Tours Treasure Hunt at Le Café Procope. Design by Beth Lower.