Briefing for websites and apps

For a web- and app developer to bring out an estimate for your site or app, it’s important that the briefing be as specific as possible.

Often, offer requests that come in are of one of the following types:

  • A list of features
  • A few sketches of the site or app
  • A few visual mockups of the site or app

Each of these types of briefs will yield a lot of questions from my end, before the project can get started.

How do you turn your idea for a site or app, into a briefing that can get a developer started?

Suppose you have an idea for a chat app for high school students. That sounds fun. Chatting is fun. Chatting is something you do with others, and there’s already plenty of chat apps out there. Clear enough, right? A developer however needs a litte more than that to get to work. So what do you send them?

 

A list of features

– Users have a name and profile picture
– You can chat about each course
– You can send pictures
– …

A list of features can be a good first step for you to decide what your app has to offer. But it’s not specific enough for a developer to estimate the amount of work it entails. To name just a few questions:

  • How are students going to register? Will there be any verification of their identity?
  • How will the app know which courses exist? Who will maintain the list, and where?
  • How will the app know which courses a particular student is in? Where will this be maintained?
  • Will pictures be downloaded and opened automatically or will they require a tap?
  • How will the student know about incoming messages?

 

A diagram

site diagram

A diagram is a visual list. It expresses the structure a little better was well as the relationship between screens. Therefore it can serve just fine as an introduction to a project’s general structure. However it doesn’t go into which elements exist on each screen and how they will react to actions of the user. Any one page could easily exceed all of the others combined in terms of amount of work.

 

Sketches

app schetsen

Making sketches can assist you in deciding what screens the app will have to offer and roughly what their layout will be. They will take you few steps forward, but they won’t tell the developer anything about how the app works. To mention just a few questions:

  • Where do you say who you are?
  • There seem to be profile pics next to the student names. Do students set those? Where do they do that? How do they navigate there? If they don’t set a picture, what will the app show instead?
  • How do you go from a chat to the list of courses?
  • How do you exit a chat (so you no longer receive messages)?

 

Visual mock-ups

app mock-ups

Mock-ups are detailed visual examples of one or more screens that the app or site will feature. The textual and visual content of elements are made up, to make the mock-ups look like the real deal.

These can make for a nice visual impression to show potential users, clients, partners and investors. They can also bring about a vast feeling of progress and leave you craving to see the product come to life. However, even beautiful pictures won’t tell your developer how the app is supposed to work. Hence, they will fire another round of questions at you, such as:

  • What does the button in the top right do? Why is it there, and will it always be there?
  • Who are the faces in the list of courses? What happens if there’s more than two participants in a chat?
  • What comprises the list of courses? How is it retrieved, where from, and how often? Is the list of courses the same for every student?

However beautiful your mockups are, they won’t help your developer estimate the amount of work. They demonstrate the visual style of screens and their elements, but not what brings them about and how they work. As for the workings of your site or app, the visual style hardly matters.

 

Wireframes

app wireframes

Wireframes are schematic layouts of every screen in your site or app, accompanied by descriptions of every screen element, how it works, why it’s there, and what happens when they are interacted with: how the screen elements change based on what the user does.

This is precisely what a developer needs to estimate the amount of work that will go into bringing your site or app to life, and give you a good estimate of development costs.

The making of wireframes will simultaneously assist you in deciding exactly how your site or app works, without being distracted by pretty pictures. Rather:

The quality of a piece of software, such a website or an app, depends entirely on how it works, rather than how it looks. This will decide if your product is pleasant to use, and if your users and customers will keep coming back.

The wireframes can then function as a solid basis for a suitable visual design. Upon receiving the full visual designs, a more precise offer can be brought out by the developer.

Want to learn more about wireframes? Need some software?

Read the words of others on the difference between mock-ups and wireframes.

 

Many find it challenging to completely specify a prospective product. As a specialist in interactive media, I can greatly assist you in this process. Need some help specifying your project?

Let’s talk.