LEARNING TO WIREFRAME
For our interactive map game we created a user experience map. This shows shows how users play the game and what happens in each stage of the entire interactive experience. For us to move on we now to create wire frames so we could then create prototypes.
I first created hand drawn wire frames as it is cheap and quick to produce. I drew this so I could see how each screen would look on a tablet. The screens with the stars are screens with animations on them. Unlike traditional wireframes where a image is drawn as a box with an x, I drew each screen in detail for example labelling a button so I could identify where each button navigates users. The users start off on the main title screen and have 4 options to either click ‘play’, ‘look at maps’, ‘facts’ or click ‘options’.
After creating this wireframe myself I asked my fellow team members to create a wireframe for the gameplay section as the wireframe above does not show each stage of the gameplay. The wireframes show each stage of the gameplay from entering level 1, bumping into an obstacle then winning on the leaderboard.
After creating these hand drawn paper wireframes we then created digital wireframes using Moqups. We used buttons and other tools to show the layout of each screen.
