OUGD504 - Design for Screen - Development - Viewing a Project

Started to map out the wireframe when the user is viewing a project:

High impact images:

Overlapping the content in a similar way to the home page creates consistency throughout the interface. Again, this layout will disperse once the user scrolls down, making the images and text easier to distinguish. 

Large type for the title of the article makes it high impact so the user is likely to remember it. 

The header becomes problematic when text is applied to the composition:

To overcome this I can fill the menu section with a block colour so that the typography isn't layered and illegible:

During the crit with Only it was suggested I changed the opacity of the text box so that the menu bar didn't obtrude on the content but the user can easily distinguish the menu from the content.

With technology such as track pads and sensitive mouses, the user can easily adjust the position of the page therefor I believe the opaque menu would be most appropriate as it aims not to intrude on the content but also makes the navigation bar accessible.

Layered over the top of the page where the project was accessed, for example clicking on a project from the home page:

From my previous research I identified that layering links over the home page doesn't remove the audience from the context of the page and also makes it easier for the user to refer back to. To achieve this I used the crop mark symbol and rotated it 45 degrees in order for it to act as a close icon - Continuing the theme of print.

This was influenced by my previous research into Studio Laucke Siebien:

In order to be original, I aim to use characteristics of print to present the information. For example, the registration marks I photographed from the traditional printing press would be reminiscent of printing processes.

Introducing my designs to After Effects meant I had to simplify the layered interactive images and copy because I struggled to animate them spreading down the page. In order to overcome this, I made the images larger and used a half drop grid system to display the large, high impact images and text.

Intro:

Added the stamp tool which will be fixed, liked the menu, so that it is available all the time when the user is browsing.

Combining the homepage sequence with the viewing project animation demonstrates the layered page concept. Ultimately this makes it easier for the user to return back to the home page and continue browsing.

Home Page and Viewing a Project:

Using After Effects allowed me to navigate the site using a curser, using interactive features such as enlarging the mouse to represent a click. This was a much better way to present my website concept because the client/developer can get a better understanding of the animated and engaging features.