creating an app wireframe specification doc

How To Create a Wireframe and Functional Spec Doc

1

Copyright © 2011. All rights reserved.

2

How To Create a Wireframe and Functional Spec Doc. Part of the Making It Big In The iPhone App Market series.


While every precaution has been taken in the preparation of this eBook, the author assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

This eBook presents general information about technology and services that are constantly changing, and therefore it may contain errors and/or information that, while accurate when it was written, is no longer accurate by the time you read it. Some of the activities discussed in this eBook, such as advertising and corporate communication, may be subject to legal restrictions. Your use of or reliance on the information in this eBook is at your own risk and the author disclaims responsibility for any resulting damage or expense.


3

Table of Contents

Preparation Before Development Is Key To A Successful App................................................................... 4

The Importance of an App Specification Document ................................................................................. 5

Writing an App Specification Document .................................................................................................. 6

App Wireframe : What & Why ................................................................................................................. 8

The Breakdown of an App Wireframe ...................................................................................................... 9

Creating the App Wireframe .................................................................................................................. 10

Useful App Wireframe tools .................................................................................................................. 12

App Wireframe and Specification Document combination ..................................................................... 15


4

Preparation Before Development Is Key To A Successful App

Before you get started with developing your iPhone app, and long before you think about marketing it, two very important steps need to be taken:

1- Preparing your App’s specifications documentation and

2- Creating your Application’s wireframe.

Think of both steps as the blueprint development stage; this is where you sketch up your app’s features, the app slides as they’ll be presented to users, the technology needed and almost every other aspect. Both the specification document and wireframe need to be clear, concise and very detailed as your developers as well as designers will more than likely come back to both if they run into any road blocks, errors in coding or other type of hurdles in development.

The wireframe will show every visual slide, every visual function and most importantly, it will show interactivity, as well as input and UX1(not to be confused with UI2). The Spec Documentation is all about the functional aspects; it is one of the main aspects that will be used to guide your developers to create the perfect app. Do remember that when creating either the app wireframe or writing up the specifications document, one should never forget the users. It’s all too easy to become wrapped up in the functionality and specific details of the app build and forget to put yourself in your users’ shoes, or revert back to who you’re creating this app for.

1 UX (User Experience) – Wikipedia - http://en.wikipedia.org/wiki/User_experience

2 UI (User Interface) – Wikipedia - http://en.wikipedia.org/wiki/User_interface


5

The Importance of an App Specification Document

What is an App Specification Document and why is it so Important? Think about it—you’ve planned a huge adventure and you’re venturing into the middle of the Sahara desert, what do you take with you? The essentials I’m sure: water, possibly food, a compass and map for sure, right? Well, think of the Specification Document as your compass and map. It’s what your developers will use for guidance, as a blueprint of the entire app build.

Without an app specification document:

Developers may not account for some features

Developers will most likely take longer as they don’t have clear instructions and app-build direction

Developers will not be able to develop the app you envision

It really all comes down to your app developers not being psychic; it’s not their fault either. It’s up to you to tailor the perfect app specification document for your developers and to also have it available for them to use as a reference.


6

Writing an App Specification Document

The important thing to remember when writing the app specification document is to be as detailed as possible. However, there are several other very important general elements to keep in mind and that apply to all app spec docs.

STEP1.

Make sure you specify what the project outline is. Detail what the app will be coded in, what some of the main features would be and the sort of technology that would be required in the build. Make a note of what some of the tasks and requirements are for the developer.

STEP2.

Detail all your requirements. This is an important element of the app specification document and you should be as detailed as possible. Make a note of whether or not you want your app to work on both iPhones 3and iPads4, or specific versions of the iPhone. This would be a good section to also state whether or not you would like all rights to the work done to be handed over to you on completion of the development phase. Having this within the requirements is a great idea.

STEP3.

Once you have both the outline and requirements down, you’ll need to work on the main section—the specifications list. Here, you should detail every single point and aspect of the app itself. This could range from whether you want text to be imbedded on images or not, to more major elements such as the page turn animations used or the sound added to button actions. Be as detailed as possible and make sure you miss nothing out. 3 iPhone – Apple - http://www.apple.com/iphone/ 4 iPad – Apple - http://www.apple.com/ipad/


7

STEP4.

While not mandatory, the final section of an application’s specification doc should be you addressing the developer. In this section, you can point out important things you would like them to focus on, whether it’s attention to detail, quality assurance reminder or a reminder to stick to the milestone deadlines mentioned in the requirements section above. There should also be a section here where you request feedback from the developer about new, creative or additional unique features the app could bring to the table.

Be sure to make a note of the following essential points within the specification document:

Make sure you note that your app should be developed based on the user interface guide provided by Apple5.

Make sure you state that the app is to be supported by all iOS6 and especially in iOS47.

The entire app should function fast and no single feature or action should ever lag or hint to the user that their iPhone is processing something or taking longer than normal.

Make a note of all the major features and all processes you would like to be included in the app.

A nice example of a simple, summarized app specification documentation, is that of a Children’s Storybook App that was part of an online brief on GeatACoder8 and is available to view here:

http://www.getacoder.com/data/projects/134655/iOS_app_requirements_doc.pdf 5 Official User Interface Guides – Apple - http://www.developer.apple.com/ue

6 iOS – Wikipedia - http://en.wikipedia.org/wiki/IOS

7 iOS 4 – Apple - www.apple.com/iphone/ios4/

8 GetACoder – http://www.getacoder.com


8

App Wireframe : What & Why

Once you have your iPhone application’s specification document completed, it’s time to focus on your app wireframe. But what is an App Wireframe and why can’t you just start developing, you ask? Two important questions that are going to save you hours upon hours of fumbled up dev attempts.

To put it as simply as possible, the app wireframe is the rough visual build of the app itself. Think of it this way, the most talented artists in the world don’t just apply paint to canvas, they sketch what they plan on painting with pencil first in order to visualize what it is they want to create; the core basics, the whole picture. The app wireframe is the same way, it’s drawing up every single slide and visual aspect of the app that users are going to interact with so that you have a visual representation of what it will look like fully fleshed out.

It’s imperative to note that the app wireframe is one of the most important aspects to building a successful application. It’s the starting block, the foundation, and without it, there’s little visual coordination and even less visual direction which most likely would end in nothing short of a disaster.


9

The Breakdown of an App Wireframe

An app wireframe consists of several different phases.

STEP1.

You need to find the perfect wireframe tool for you. There are both old, tried-and-tested techniques that work wonderfully and there are newer online tools that you can use to build your application’s wireframe. You have to pick and decide which works best for you.

STEP2.

Construct a wireframe identity sheet where you can list and identify specific issues you either run into during the wireframe build or possibly feel that could arise in the actual build. This sheet works as a description or added comments to each visual element you build into the wireframe.

STEP3.

Get your designers and developers in on the app wireframe build. The earlier they help you smooth out bumps and flesh out the app to its full potential, the better.


10

Creating the App Wireframe

The wireframe process is not a complicated one, but you need to be detailed and thorough in it. You have to be clear and point out all your objectives. It’s imperative that while you have the entire team helping out with the wireframe build that only one person is in control of it though.

Now, there are 2 routes to build your wireframe: you can either make a functional wireframe or a well designed one. What you’re after is the functional wireframe because the last thing anyone would care about is whether or not the initial wireframe looks pretty or not.

With that said;

STEP1.

Draw and plot down all the slides, include the major functional elements on each page such as the buttons, the boxes, form elements and so on.

STEP2.

Flesh out the wireframe and add very minor visual design elements. You don’t want to go crazy as this is far from the design phase—this is just to better form the full on app with something more than a black and white line map of the app as a visual.

STEP3.

While some developers claim it’s important to only focus on UI (user interface) while drawing up the wireframe and not so much the UX aspect (code and technology used) – I feel that is incorrect. You should remember that UI and UX go hand in hand, and the best way to push the envelope when it comes to user interface aspects is to have a good idea of what UX technology is involved, so be


11

sure to add that into your wireframe in footnotes at the end of each slide or in a table of its own.

STEP4.

While this may seem like a very minor step, it plays a big role in the presentation of the wireframe as it will be a point of reference during the entire development process. Number and label all your wireframe slides regardless of the tool you are using to build it, whether it’s a wireframe building app, online tool or simply pen and paper. Also, you should organize the wireframe into sections so that it’s clear and easy to navigate and follow.

In addition to the major steps in creating your applications wireframe, you should keep in mind who the app is for. This should be something you go back to time and time again during every single process. And while you’re doing that, also remember that during the wireframe build, it’s not only the visual elements that users will see that need to be drawn and planned out. Many apps have a backend where the admins control aspects of the app, either activation features or functions they need to take. You need to include all of this in the wireframe too, so if there’s a button admins need to click to allow users to register or access a certain part of the app, then that needs to be added as a slide of its own within the wireframe.

Key elements to remember when creating a functional wireframe is that it’s not so much an element you and your team want as an interactive resource, but more so a document, a point of reference that guides them on. Starting out with pen and paper is by far the easiest and most convenient way to start—draw a few rectangles here, a few buttons there and flesh out from that.


12

Useful App Wireframe tools

While pen and paper might not be for everyone, there are so many different tools available online to help you develop the perfect app wireframe. There’s everything from old school non-techy, blank ready-to-use printable image wireframes and stencils to extremely complex and technical software that one can use simultaneously to collaborate with their entire team during the wireframe build process. It all comes down to what you and your team are comfortable with using, and below, you’ll find a list of both the basic resources and the more tech-savvy ones too.

Basic Resources

The iPhone app notepod 9

This is one of the coolest and most fun to use resources that almost all app developers have and use, especially those that are always one the move. This notebook has pages shaped like the original iPhone and is scaled the same too.

The Iphone Stencil Kit 10

This kit is mainly for UI and helps you quickly etch/sketch down user interface elements on paper with ease. There’s also a stencil pad that you can get to go with the kit itself.

App Sketchbook 11

The best resource if you want to stick to low tech, but without the hassle of drawing the slides themselves. The app sketchbook is great and comes ready with original sized iPhone templates to work from as well as rulers and guidelines and a clever note section.

9 Notepod - http://notepod.net/ 10 iPhone Stencil Kit – UI Stencils - http://www.uistencils.com/iphone-stencil-kit.html/ 11 App Sketchbook - http://appsketchbook.com/


13

Graphical Resources

There are plenty of graphical resources for you to use, everything from entire vector packs consisting of iPhone UI elements to digital stencil source files. If that’s not enough, you can find complete graphic UI libraries for download and use.

Vector Elements - http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/

Graphical Screen Elements - http://320480.com/

Digital Stencils - http://graffletopia.com/stencils/437

Digital UI App Library - http://mockapp.com/

In addition to these basic tools, you’ll find online resources and software to help you with the entire wireframe build process.

Such web based tools include:

Mockingbird12

A great resource where you can click and drag elements to build your wireframe faster than ever.

Pidoco13

Similar to Mockingbird, but allows you to collaborate with other team members online.

12 Mockingbird - http://gomockingbird.com/ 13 Pidoco - https://pidoco.com/en


14

If you would like to combine both very low-tech with high-tech tools and use something where you have a little control over in terms of visual creation and also the ease and speed of doing so digitally, then there are tools for that too.

Convenient middle ground tools include:

CogTool14

A standard wireframe builder where you get to draw and add every element yourself directly into a frame/slide prepared, or you can custom create that too.

Balsamiq15

A simple, easy to use collaboration platform that simply connects users together to tweak and edit a simple wireframe where all elements can be custom created by the users or generated from the available UI library.

14 CogTool - http://cogtool.hcii.cs.cmu.edu/

15 Balsamiq - http://www.balsamiq.com/products


15

App Wireframe and Specification Document combination

Now that you have the application’s specification document and wireframe ready, you’re ready to start with the actual development stage. There are however a few last things to always keep in mind while creating both the wireframe and the spec documentation.

First, regarding the tools you can use to create both the wireframe and the spec documentation: You’re not limited to what’s available online.

Many times, developers become upset as they feel limited in some way due to there not being any UI elements or resources tailored to their specific app and needs. That should not be the case for you: simply create these resources—create the tools necessary to help you plan a better application. You can get simple custom wireframe builders created using services found on sites such as Elance16 and oDesk17 at extremely competitive prices, setting you back only a bit budget-wise. But the reward of developing the perfect wireframe to get you started far outweighs what you would pay to get it created.

If paying for the premium tools available online is not something you’re willing or permitted to do based on your budget, then don’t look farther than Apple itself. You can download Dashcode18 from the Apple website.

The main thing to remember while creating a truly functional app wireframe and specification document is that the end result needs to be tailored to your potential user base. So no matter how much you’d like to see a certain feature implemented or how unique you think a certain element would be, if it is not tailored and suited for your users, scrap it.

16 Elance – http://www.elance.com 17 Odesk – http://www.odesk.com 18 Dashcode - xCode - http://www.developer.apple.com/xcode

creating an app wireframe specification doc

Documents

functional spec doc

app specification document

specification document

spec documentation

user interface

functional wireframe

applications wireframe

rights reserved