Week 3

Wireframe

I want to achieve a narrative concept by revealing the brutal truth behind the screen at a TAB betting shop / pub. Kind of like if you were a customer betting on the Greyhound’s watching the screen. The narrative is then supported by the visual composition which allows me to use pan transitions and play with the idea of viewing on a screen to add a juxtaposing element.

 

5306

 

Basic thumbnails are drawn to communicate design elements and headings. I then would refer back to the wireframe which would highlight the main elements.

 

5309.jpg

 

5314

 

5313.jpg

 

Styleguide

 

styleguide

 

Screenshots

14

 

03

 

04

 

04-2

 

Atomic

I tried using atomic but have found it quite hard to make transtiotins fade from a hot spot to added image back to the original page. It works great for layers but it might be to intense for what I’m wanting. link bellow includes a demo of a few slides.

https://app.atomic.io/d/FkRzg4yFFK49

 

Invision

 

I prefer this since it combines the interactive images better. However I can’t work out how I’m going to add the HUD as Invision is hopeless with layers.

https://invis.io/QE8A0RA7X#/180513812_Background1-01

 

With both of these UI / UX software I wasn’t able to make the fading HUD also act as a hotspot to change page so I’m got to redesign the HUD to fit the header or footer.

If I had more time I would have tried to use a GIF to copy the same idea.

My current layout is this.

 

Buttons-02

 

Redesigned Interface.

IMG_5318

 

updated….

 

Screen Shot 2016-08-15 at 9.39.14 PM

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