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:
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!