Wireframes: Making the blueprints

Every few days I field a call from someone, usually in the area, with little software experience – but they have an idea for an app, which they describe in a couple of sentences – and how much would that cost, approximately?

I wish I could give a clearer answer than “it depends”, but of course, that’s usually all I can say without more detail. Somehow, a would-be entrepreneur has to communicate the idea in a way that a software developer can understand and build it, without knowing most of the technical language we use. Half of that is describing your app functionality with user stories. The other half is wireframes.

User Stories are a story of how a user solves his or her problem with your app. They usually start out with “As a …, I want to …”. For example: “As a user of the app, I want to post a picture on my new social network. First I open the app and go to the Posts page. Then I click the New Post button and type a brief comment. I select the Photo button and choose the photo I wish to post. I click Submit and my photo is now posted.” Note the nearly complete lack of technical vocabulary in there – the programmer doesn’t need to know how to do it, just what needs to be done. That’s the part you can do well – you know what you want to do, and if you can describe it, we can probably have an idea of what it’ll take to build it.

Wireframes are the illustrations that go with the user stories. What does that Posts page look like? The user story example above implies the existence of a New Post button and a screen that comes up with the form to post your picture on, but where is the button located and what does that form look like? Is it a popup or a new screen or something else? That’s where the wireframes come in; when you supply them with your user stories, the programmer has a visual guide of what you’re talking about and what the interface looks like in general. And that’s what we can help with.

In the past, wireframes in particular have been intimidating to someone who’s just getting started; even the simplest wireframing tools felt like they were built for professional designers. But nowadays, we can usually build wireframes based on your app idea up front, before giving you a quote. This saves quite a bit of your time and helps you have a better idea of what form the app is going to take. And it’s much easier to solidify your idea and your app workflow once you’ve got a visual aid.

So if you don’t quite know how your app will look, don’t worry. Concentrate on writing about what it does, and maybe we can give you some ideas before you commit to it and we get started.