After having worked through descriptions, flowcharts, storyboarding and UI charts a design can be transferred from paper to screen.
Below is a mock up of my ‘Making Toast Interactive’, created using Adobe Illustrator.
First I created the grid and basic wire framing within the outlines of the media the interactive is designed for, in this case the iPad.
Once the wire framing was in place I added in the main content.
After the content had been added I created the interactive elements such as the buttons and the progress bar.
The next layer in my illustrator file included the highlights, the highlights in this interaction occur when the user touches certain elements. This is illustrated bellow with a bold yellow.
The last layer in my illustrated mock-up was a gestures layer, showing the gestures used to navigate through the content.