Exploring Web Interface Design Through Paper.

 Having fun with paper and user interfaces.

Having fun with paper and user interfaces.

For our latest project, Craftwork, we had to get hands-on with a material and ignite the creative process through play and experimentation.

 

PAPER AND PLAY

I choose paper as my material to experiment with due to the many colours available and its versatility. It can be cut, glued, folded, etched, used in all sorts of exciting and ways and it is so readily available that the possibilities are endless. I Started by getting some large sheets of coloured paper and hand cutting shapes out of it with a scalpel. I had no idea of what I was trying to create, but I was enjoying the process of cutting, folding and scoring the paper. The nation of play is essential for the creative process as it enables designers to open up their thinking, and fully utilise the right side of their brain without worrying about the technicalities of the outcome. In this early stage of the process, play allows the mind to wander without limitation which can be great for ideas generation. Cutting random shapes out of paper turned out to be strangely therapeutic, and I enjoyed the process despite having no idea how this project would unfold (no pun intended). 

 Early experimentations with paper.

Early experimentations with paper.

Through tutorials and self-experimentation I decided I wanted to go along the route of icons and iconography using paper as the primary medium for creating them. I have lots of familiarity working with icons in a digital environment so taking it physical could be an intriguing route. The notion of an icon is that it communicates a message, process or function through a simplified pictorial view that is easy to interpret. After a few days of experimenting with this, I wasn't going anywhere so started to think about other ways this project could develop. 

 

MATERIAL DESIGN

A significant point of reference was the work carried out by Google when they created the material design system. They played with the paper, lights and shadows to create different icons and layerings of interface designs. This analogue approach was incredibly refreshing in a time where the internet was oversaturated with Digital mockups, UI designs and interfaces that all look very similar and flat. Unlike with product design, interfaces are almost a completely digital entity. Although the best user interface designers use paper sketches and Post-it note UX brainstorming sessions, the initial drafts of the UI are Digital, almost all of the testing is digital and the outcome, of course, digital as it is designed for on-screen use. Google's approach of using physical paper for products that will never be tangibly used or touched the same way paper would be, meant creatives were able to approach the medium of user interface design from an entirely new perspective.

 Left. Google's Material Design icons for Gmail and Calendar created with paper. Right. Google's Material Design layered sheets of paper.

Left. Google's Material Design icons for Gmail and Calendar created with paper. Right. Google's Material Design layered sheets of paper.

As I continued my experimentation with paper, I started to recreate some of the user interface work from the Google material design team to see how it really felt. I created tangible app screens with circular buttons and headers from different coloured paper. As I continued to create different types of interfaces, I started to play with the idea of creating physical versions of websites. I liked this idea because the sites we use most frequently have all been carefully crafted to ensure a seamless user experience yet most people probably don't realise the extent to which websites and meticulously designed. I decided to focus on the worlds most famous sites such as Facebook, YouTube and Google and this started to cross over into the area of brand recognition. When most of us visit these iconic websites, we think of the function we want to carry out whether it's to message a friend, find a video or search the web for a question. We pay little attention to the layout design and then branding colours that have been so carefully selected to create an entirely controlled and considered experience. 

 Paper experiments creating simplified mobile interfaces.

Paper experiments creating simplified mobile interfaces.

PAPER INTERFACES 

Armed with around 20 sheets of A4 paper in different colours, a craft knife, guillotine, ruler and glue stick I was ready to start experimenting and creating physical paper versions of websites. I had to examine the layering of interface designs. With Facebook, for example, the background is a light grey, and the blue strip across the top is an iconic part of the web design that we now all immediately recognise. White boxes on top of the background contain friends' status updates, images and more - the white creates contrast and lets users focus in on content, a fundamental part of the experience that many never notice. Before sticking any elements down, I tested how many different layers were required before the webpage was recognisable as Facebook.com. Facebook's strong brand recognition meant a simple grey rectangle with a blue strip across the top was significantly recognisable.

 Trying to represent Facebook's interface with as few elements as possible.

Trying to represent Facebook's interface with as few elements as possible.

With over 2 billion monthly active users, Facebook is seen millions of times a day in every country. People across the world are continually being exposed to this design language so in many ways it has become iconic. Unlike branding or packaging design, interfaces don't get the same recognition, perhaps because they have a functional role that steals the attention away from the aesthetics; never the less, it's a crafted piece of design that has an emotional and symbolic significance. The same way the patented Coca-Cola contour bottle or the McDonalds' Golden arches are synonymous with their brands, the user interface design of Facebook or Google can now be a crucial part of the brand recognition. This can affect loyalty, user behaviour, the design of competitor UIs and add to the brand's monetary value.

 Can an interface become an iconic piece of graphic design?

Can an interface become an iconic piece of graphic design?

I created paper versions of Facebook, Netflix, YouTube and Google. In a digital world, building something like this is relatively straightforward; it involves different rectangles and circles arranged on a page. Adobe Illustrators rulers, smart-guides and align tools mean it's effortless to create boxes and shapes the same size in perfect row or column. In the physical space, however, this is much more challenging as each rectangle had to be carefully measured and precisely cut to ensure it was the same size. Before being stuck down on the page, it also had to be delicately aligned manually. So much precision is required to line up shapes perfectly that my attempt inevitably resulted in some paper elements being a millimetre or two out of line. Despite the inaccuracies in alignment, this added to the end result as it emphasised that the web pages were made from sheets of real paper, not an on-screen render. The imperfections enhanced the aesthetic value. 

 

TO CONCLUDE

This experiment really showed me how a user interface design itself without any text or detailed imagery can be iconic, recognisable and so easy to distinguish. In the case of my experiment, the more iconic websites with simpler designs such as Facebook and Google were more easy to recognise than a site such as Netflix where the user interface design relies heavily on detailed imagery and video thumbnails. We are not used to analysing the proportional relationship of objects on a webpage. However, when we simplify them down to the core shapes, it's easy to see that our brains are very good at picking up on where things are and what things do. By removing all of the clutter, these simplified pages showed essential parts of the interface highlighting the success of the experience designers at these companies. This level of design is something that is invisible to most users, so I really enjoyed using this project to shine a light on something we benefit from every day that goes unnoticed. 

craft13.jpg

The fact that this was all done through physical paper gave the end result and more curated look as if these web pages our one-off artefacts. If this were done digitally, it would've taken less than five minutes, but in a physical environment, the amount of care precision is appreciated to a much greater extent.