OUGD504 - Design for Screen - Communicating Print

In order for the site to immerse the user in print media, I researched into common characteristics of print that will be familiar for the target audience with the hope to include it in the site. These can help to inspire loading pages and interactive features.

Laser Printer sound:

The staggered and jerkiness of the paper as it is being fed out of the machine is reminiscent of print along with the sounds that the printer makes. This can potentially be used to transform the user from one site page to another, slowly revealing the information and intriguing the audience. Laser printers apply the ink with the ink jet moving from side to side, this can also be used to reveal a page of information.

CMYK circles:

Print CMYK marks:

CMYK marks can be the symbol for the personal account:

The widget can be subtly animated in order to draw the audiences attention to it and discover the new feature of the site:

Concepts for the icon used to add articles to the account page:

The noun project was really useful for getting icons associated with the manual printing process:

Stamp tool:

Reminiscent of the printing process:

Traditional:

Modern:

Pages:

This icon is often used as a shortcut to save or copy a link of article:

Decided on this stamp tool because of it's traditional style. This will be appropriate as the 'save' symbol because it is subtle and I can make it transparent so that it doesn't intrude on the large image.

Using After Effects I began to experiment with different animations that would create a more emotive user experience:

When the user decides the save a project, the logo at the top will animate by shaking from side to side, confirming to the user that the article has been saved.

Using the opacity tool allowed me to subtly introduce the user to the new web symbol and logo in a smart and clean way by using a lot of white space:

This introductory sequence can be played once the user first visits the site, or as a screen saver inspired by Mynameis...' website.

Went into the college's traditional print room in search for more inspiration:

Registration sheets:

Acts as a visual guide to make sure the print is accurately pressed in the desired place. These guide marks can be used to communicate print and produce emotions by the user, this can be used as guidelines throughout the website.

Printing Press

Traditional wheel used for a plethora of printing methods:

Texture from the printing bed:

In order to connote the natural characteristics of print media through the website, I photographed the messy nature of hands on processes:

These marks can be scanned and added to the web page so that the high impact images look as if they're sitting on paper.

The rags and clothes used to clean up ink from the surfaces:

These images can be cropped and manipulated in order to fill white space and connote print media.

Experimented with adding the print marks into the negative space:

Using subtle tones and textures from the raw materials doesn't distract the audience from the work and subtly creates a cohesive bond between the images on the page. This stimulates the audience and reminds them of the natural characteristics of print media.