Transparent section (skip to 1.39 to view)

skip to 1.39 to view

When looking from behind the panels, edits had to be made as it was unclear what was happening when placed into AE to join all clips.

Completed Panels (Start play @ 35secs)

This is the panels completed, i have yet to add motion tracking, will do that once all other clips have been cut together. They were cut & chopped and sorted in Photoshop, put into motion in Flash and imported into After Effects to line up with green screen footage. Fun times.

Panels finished

Panels completed with all button presses & swf files in place!!! :)

Editing Advert (Panels)

Editing the advert has taken me longer than expected. Aligning the Flash footage and  getting timing accurate is quite precise and i have had to edit Flash SWF's many times to make them fit in with the footage actually shot. I currently have over 50 layers on After Effects. I hope this work shows in the final outcome!!! If not... here's a snapshot!! :D

Coffee Shop Shooting

Today we shot the coffee shop footage, this is the clip we will use to show social networking with the panels. 

Tritone & Panels

To combine the look of the panels and background decided to add a tritone to the video to bring it together.

In store Photography

I took some photos in a shop to place behind the panels and place into the green screen footage for scanning in store screen....

I took some photos in store to place behind the panels and place into the green screen footage for scanning in store screen.

Avatar advert problem

I am having problems with placing an avatar in the panels during the advert. I have thought up possible solutions.....

Panel Layout

I think this will be used as the final layout for panels. 

Panel Design

I have been trying to change the design of the panels. I like the overall layout but the design was a little boring and cheap looking so i have made several different changes and think i quite like the circle vibe throughout the panel. It breaks it up more and makes it look more spacious. 

This is a more refined version... I have edited away the lines on the circles to clean up the look a  little. :) 

Tidying up the circles to make the panel more slick. :D Not sure which looks best. 

Amending panels

With the panels, i felt the text at the top was too overpowering and the lines were too thick, taking up too much room and drawing attention away from interface. I think this is a cleaner, simplified layout for the panels and will work better. 

Some green screen footage for using to show the use of panels. 

Motion Tracking

Link to Motion tracking video demonstrating how the text will appear in the advert.

Kinect panels & app

I designed the panels and app with the same visual style. Around the edges, there's a soft glow, to give a border and break up the contrasting colours, making it not as sparse and more personal. I used information i have gathered and noted in my sketchbook of where i think buttons should be placed and why, i think all buttons are in relevant areas and the layouts are easy to understand and use. I will perhaps refine some of these ideas at a later date as i think they could be cleaned up a little to make them more visually pleasing. 

These are my designs for the kinect panels.

The first screen... choose app or guest card to log in. Big squares to allow accuracy when choosing. 

Hold mobile near square to allow information transfer between devices.

Kinect cameras will scan measurements. 

Basic display (silhouette an example of where you would see an image of yourself) 

When you make a selection the area will turn purple to indicate what you have selected. 

To select an area, the customer should hold their hand flat in the air, as above. 

When menus come from the sidebar, the avatar will still be visible, as will all options, although transparent and an additional glowing bar will appear to allow you to chose any extra options. 

The wardrobe will allow you to choose items while shopping and place them on a rail below. These items will then be transferred into the wardrobe and allow them to be tried on with the kinect cameras.

Design for the app.  

This will be the main menu/homepage. Simple, easy to identify icons and a window in the bottom left to show previously viewed/saved/scanned items, allowing you to click and buy or just reminding you again of the item, reminding you that you want(ed) it and hopefully prompting to buy. 

This will be the scanning option... simple target button in middle and button to scan. 

You can flip through items saved, the set up allows you to view multiple at a time, reminding you what you've chosen (not too many, too much choice is overwhelming.) 

A red exclamation mark, !, will appear above items that are running low in stock or above to be taken off the line, informing you it could be the last chance to buy. 

Kinect Panels

You have the option to change backgrounds, allowing you to view item in different environments. This is how the setting will look. 

When browsing the wardrobe, past & next items will be on view to show you what to try on next and also what you have just tried on to give you a better idea of what is going on with the wardrobe. If there was nothing on show, you wouldn't know what you were trying on and feel lost, and anxious as to what would be out next. This gives a better view of what is going on and a clear understanding of what you are doing. 

Spec

Image Sizes: 
The Icon for the application should be 72px by 72px. The size of the screen we're using is 800px high by 480px wide, so it's probably easiest if we size everything to fit that for the prototype and don't worry about alternate sizes. I was thinking the images of the clothes should be sized to about 540px high by 300px wide (at least for the pitch in Week 8). 

App layout

I thought that to prompt buyers, an image of an item of clothing/accessory would remind them of something they want and by clicking on it, it could allow them to buy & take them to their wardrobe to browse more of the items they liked. :) 

A light background is most common for showing items of clothing so this should be incorporated into the design. Sticking to the colour scheme above could confuse the colour and look of the item and should be considered when/if incorporating in the design. 

App Layout

By refining my initial designs, i decided to make the layout more spacious. I thought the colours were too similar and have introduced a lighter background colour for contrast. I think the app will go along these lines but work is still needed- i would like to make it more interesting while keeping it elegant. 

App Layout & Icons

I wanted to keep the icons simplistic, contemporary and understandable. Using the visual style guide, i decided on these for the initial design. 

The panel and app will have different interfaces. I would like the app to be simple and tie in with the icons. As this is the initial designs, they are likely to change.