How to interpret wireframes

OneBody Wireframes

If you've landed at this page, you've probably got questions like:

1. So what's a wireframe then?
2. How do I read them?
3. What about the UI?
4. When should they be used?
5. How'd you make them?
6. What are they not designed for?

---

1. So, what's a wireframe then?

A wireframe is a representation of how a page or series of pages might look in OneBody, when they are finished. Its like a quick sketch on the back of a serviette, and is designed to convey just enough information to get your message across.

2. How do I read them?

A picture's worth a thousand words, so:

3. What about the UI?

Because its a sketch, a wireframe is not prescriptive of how the UI will look. It will give some general guidance, but final rein is given to the developer concerned. We're using the AdminLTE template from almasaeedstudio.

4. When should they be used?

To sketch out a feature, mainly. If you've got heaps of pages and a cool idea of how they work together, then yes. If you've got a couple of fields to add to a page, then no, just document that in a github issue request.

5. How'd you make them?

With a wireframing tool: Balsamiq Mockups

6. What are they not designed for?

• To be a fait accompli. Their main point is to create dialog and facilitate iteration in a consultative way.
• To be overloaded with detail.