OUGD504 - Design for Screen - CATEGORIES

Colored Man

Geoff J. Kim and Niek Dekker

An interesting concept for digital collages. Elements move on their own while you scroll to adjust the composition. Being able to see the details of the paper makes the site seem tactile even though it is hidden behind a screen. It would be beneficial if People of Print had scans of ripped paper and high quality images of the work so that the audience can see the unique texture and printing finishes through the screen. 

The interaction with the site is smooth and the simplicity of using negative space to communicate new compositions makes the user feel part of the experiential process. People of Print can benefit from these interactive features in order to immerse the target audience in print media. 

The categories section of the website provides opportunity to immerse the user in print media by taking influence from Colored Man and scanning off cuts and teared paper and placing them into the layouts. In order to achieve this, I need to solve the interface problems before adding the the user experience so that the site is objective. 

Drop Down Menu

Drop down menu bar is hard to find as it is hidden in the pop up box at the bottom of the site. This must first be activated before the 'categories' section is visible. I aim to speed this process up and make it more available for the user to browse the plethora of subjects. 

The current website hosts a categories drop down bar which is detailed however techniques and processes are mixed with disciplines which makes it hard to be objective. The categories section of the site is available so that the user can quickly and efficiently find briefs that have been labelled under specific disciplines of design, for example graphic design, illustration and fashion. 

Drop Down Menu Critique:

• Frustrating to use - They force you through hover tunnels: narrow invisible pathways that your cursor must move through with precision to keep a menu active leading to poor user experience.
• Don't transfer well onto mobile devices
• Too many options - Psychologists have discovered that having too many options actually demotivates customers.
• A well-designed, fully-functioning drop-down menu comes at a price. 

In order to avoid using the drop down menu, I sketched out potential wireframes and labelled interactions that make the user interface less frustrating.

Layout Concepts:

1-

Providing a large high impact image accompanied by large title typography will immediately inform the user on the discipline. Interacting with the image will be prompted by opaque arrows which the user can press to swipe from one discipline to the other. Depending on the selection at the top, small articles will appear below the image in relation to the discipline currently selected. The is a predominantly visual solution which will be more engaging than listed typography. 

2-

The gridded system creates consistency and balance which is easy for the user to interpret and organises the information clearly. A simple title and image will be engaging especially if the image is taken from the most recent or most popular article in that category. 

3- Digitally mocked up a more expressive and disjointed page composition that hosts cropped sections from print media such as off cuts and ripped paper. This, along with the skewed and rotated typeface, creates a natural and playful page composition that can potentially be really interactive.

I used ripped up pieces of coloured paper and also scans from off cuts, adding to communicate print through digital:

Viewing Category

Once a category is selected, a new layer will display an array of projects from that category over the top of the categories page. Presenting the projects as two columns and surrounding them with a lot of white space was inspired by my research into layout from Vignelli Canon as a lot of white space creates authority and hierarchy:

As the user interacts with the site and moves the mouse over an image, the project title is displayed across the screen:

Layering the title of the project over the content was inspired by Studio Laucke Siebien as it immerses the audience in the image based content and also presents the information as if it was a collage. 

Another reason for the layout being spread out is so that the typography can be legible when displayed over the top of the images.

I intended this page to be playful and communicate print because it is important to keep the user stimulated whilst they browse so that they don't leave the page. The high impact imagery and white space provides room for the content to breath.