Apple iPhone 6S TV AD
The narration over the top of the video is fast paced in order to keep up with the high energy and quick changes of the interface. This, along with the music, keeps the audiences attention as they are constantly stimulated by high impact shots of the phone and its famous intuitive user interface. The advert demonstrates the new interface using real subjects. This makes the advert familiar to current iPhone generation owners so that they aspire to get the new and updated version. Seeing the people interacting with the new and improved features demonstrates how simple and compatible the phone is in real life, also increasing desire.
As my solution is a web page that will be viewed using a website, I looked into ways other websites demonstrate there user interface. To achieve this I discovered a site called Hover Stats:
Hover Stats
Here is a demonstration of how the site engages the user and introduces them to the conceptual sites in an engaging way:
Stage 4: Adding project to Library
Introduces the stamp tool in order to add projects to the personal library:
Stage 10: Returning back to original page by simply clicking off the layer:
Uses an enlarged mouse to animate the interaction.
The site automatically begins to play the most recently added webpage using either a curser or a circle to represent the mouse moving around the screen. In a similar way to how I have screen recorded websites for my research. The videos show how the site works by demonstrating the interactive features and links. This is more appropriate for my solution as it is a web page that will be predominantly viewed on a computer screen. Using the mouse as if it was an actual user puts the site into better context which makes the site easier to interpret for a new user.
Using After Effects, I introduced this technique to demonstrate moving from page to page and also the interactive elements and put them all into one video:
Stage 1: Introduction
Introducing the new People of Print logo and account symbol at the start draws the audiences attention due to the high contrast colours and white space:
Stage 2: Home Page
Showing how the user can interact with the images in order to find out the project title and name so that they can click for more information.
Enlarging the mouse when it clicks confirms the page interaction with the audience watching the video.
Stage 3: Viewing a project
Demonstrates how viewing a project using a new layer can make the content more engaging and easy to refer back to the previous page. The page composition is exactly the same when viewing any project therefor I have only demonstrated this once.
Stage 4: Adding project to Library
Introduces the stamp tool in order to add projects to the personal library:
This will also introduce the ability for the user to easily follow the designer on social media.
Stage 5: Viewing personalised Library
Interactive typography presents a familiar image of the article so that the user can recognise the project associated with the name:
Stage 6: Suggested articles
Also demonstrates adding an article to your library using the stamp tool.
Stage 7: Categories
Stage 8: Viewing a category
Interactive images with layered typography
Stage 9: Techniques and Processes
Stage 9: Viewing a 'Technique and Process'
Interactive image presents the title/designers name once the mouse is on the object:
Stage 10: Returning back to original page by simply clicking off the layer:
Uses an enlarged mouse to animate the interaction.
Displaying my solution using this method gives the client a better understanding of how the site map works as well as introducing the new interactive features and account.
Placed my website into Google Chrome as from previous feedback and research I identified this as the most popular web browser:
Seeing my solution in the context of a web browser makes it look more official. I am pleased by how well the site fits on the screen size, compared to the original site:
No comments:
Post a Comment