Class work, High-fi prototypes, toast

Class work #3

We’re getting into the nitty-gritty now. We were tasked with transferring our paper sketches onto the screen, so I created a digital mock-up of the toast interactive in Illustrator.

This slideshow requires JavaScript.

The first step was to create wire frames. The wire frames serve as a composition base for the main content, like the color and style.

Once the wire frames were set in place I created the content on top. Then user interface. Then UI feedback, the buttons and links are made a tiny bit lighter to indicate something was pressed. Lastly the gestures, showing where each interactive point is.

Here’s the page in all its glory:

 

toast_interactive

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s