UI Screen Designs

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.

 

Screen Shot 2017-03-13 at 9.34.04 am

Basic wireframing for making toast interactive

 

Once the wire framing was in place I added in the main content.

How To Make Toast Ipad content

Making toast interface with main content

 

After the content had been added I created the interactive elements such as the buttons and the progress bar.

 

Screen Shot 2017-03-13 at 9.35.15 am

Making toast interactive with buttons and 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.

 

Screen Shot 2017-03-13 at 12.10.41 pm

Making toast interactive with brighter yellow highlights

 

The last layer in my illustrated mock-up was a gestures layer, showing the gestures used to navigate through the content.

 

screen-shot-2017-03-13-at-9-35-59-am.png

Making toast interactive with gestures