Lesson 2

Wireframing

If you fail to plan, plan to fail

1. Planning

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.

2. Tools

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:

3. Google Docs

We'll start with some rough sketching. We're going to use the Google Docs draw app, with a template of app wireframes. We're also going to design our apps 'mobile first'

See *Wireframes and *Mobile First for more information.

We want to include the title of our app, a button to start the game, space for two images to display and finally a space to show the player scores.

This is looking a little busy. We could hide the player scores until play begins. This gives us space to put the images stacked on top of each other.

We could make things even neater by combining the title with the play button, and move it between the images to balance the layout.

We now know what we need to build and what it’s going to look like. Now 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.

*Mobile First

Web design used to be mainly for desktop computers, but as more and more people now use mobile devices to access the web it is best practice to design 'mobile first'. This means thinking about a mobile user's experience first, and then extending your design to desktop.

Go to the next lesson
Next Lesson