Studio Week 3…

In week 3 studio we explored the stages of creating screen design interfaces. Throughout the process we were to consider the changes and behaviour of the interactive product. Templates available on vUWS allowed us to create our own screen design.

Our first task was to create a wireframe based on an exercise file from vUWS. During this process we were able to understand and visualise the placement of elements on the screen. An example was provided to understand the order of layers and the standard that was to be expected.


Screen Shot 2017-03-08 at 3.57.40 pm
Image: Hughes, G. (2016). Al-example UI workflow layer setup [photo]. Retrieved from

Below is the wireframe and composition created in Adobe illustrator

cat meme wireframe
cat meme


Afterwards we were tasked with creating another wireframe and composition based on the work ‘Making Toast’. Below is the finishing product.

UI feedback overlay

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s