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 https://vuws.westernsydney.edu.au/bbcswebdav/pid-2721369-dt-content-rid-22535587

Below is the wireframe and composition created in Adobe illustrator

cat meme wireframe
wireframe
cat meme
Composition

 

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

wireframe
Wireframe
comps
composition
userface
UI feedback overlay
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