Lesson 1

Wireframing

If you fail to plan, plan to fail

The planning process is absolutely vital when building an app. If you just sit down and start sketching it’s possible to explore multiple options for what your app could do and look like.

There are a tonne of tools out there for making basic prototypes. You can get a very long way with tools like fluidui.com or proto.io. But actually, nothing really beats a pencil and some paper. The key thing is to get the idea out of your head and into a medium where you can play around with it.

A huge part of the development process is Googling, reading, thinking, sketching. Let’s get to it:

We'll start with some rough sketching. We're going to use the Google Docs draw app, with a template of app wireframes.

If we want to ask users a series of questions, there are multiple ways we could present them:

1. As a list:

2. One by one:

For our purposes, let’s display the questions one by one. It’s simpler and more focused.

It would be nice to display a running score. Let’s mock that up:

We now know what we need to build and what it’s going to look like. Let’s dive into the HTML

Wireframes

Wireframes are basic designs that are incredibly useful for planning the user experience of a digital experience, before a single line of code is written.

Originally, wireframes tended to be long lists of specifications and page elements but today they are often very visual representations of the app or website that is going to be built.

If you’re thinking of commissioning an application, or working with a developer, often bringing wireframes (however sketchy!) can be a useful starting point for discussion and design.

Go to the next lesson
Next Lesson