LUDIC INTERFACE DESIGN/
WHAT IS A LUDIC INTERFACE? It is the name for an innovative and interactive type of interfaces. Ludic interfaces are playful interfaces. A ludic interface design can be many types of different digital interfaces. Some examples include, web interfaces, iPhone apps, touch screen technology and processing.
ANALYSING FROM THE UNLEASHED DEVICES AND LISTENING POST AT THE WATERMANS ART CENTRE/ ‘UNLEASHED DEVICES is a playful exhibition in which artists have reconstructed, remixed and reinvented everyday electronic devices. Working in this way, the artists change our understanding of the possible use of data and purpose of technology. These exhibits not only challenge our conception of technology but also of music, art and design.’
I would also say that it is a participant type of interactive media as without participation it would not move or work properly.
MOUSE INTERACTION/ This interactive media uses a regular PC mouse, large tv screen and includes headphones with sound. It would appear that the optical mouse is connected to a PC hidden inside the box that the mouse and headphones rest on. The PC is then connected to the tv screen showing the process and interaction of what the participant INTERACTIVE SUNDIAL/ does with the mouse. You can My first example is an interactive move the mouse around and watch sundial which included a electronically controlled sundial and on the screen as you create what seems an unlimited amount of a standard lamp. As the lamp is shapes which follow one particular moved by the user or participant, pattern as the structure. The sound sensors on the sundial sense the also comes from the headphones angle of the light hitting them and being connect to the PC as you move the sundial accordingly. It interact with the device, the sounds moves and rotates on its base and settles in a position so that the lamp were calm, simple sounds and not complex or musical in anyway. imitates sunlight. The dial shows the time as it would on a traditional You can also click to change the sundial. I would assume that there shape. The mouse as a device is an input, the screen and headphones is a circuit board as hardware are the output devices. The device with some very simple software shows that you can use a mouse installed which is connected to the and PC to create. This particular sensors which send the signal to device is only very basic so I the computer which then makes a would not see a purpose for it as a calculation and the sundial moves around to what it believes to be the tool for interaction unless further developed into something which correct position. users and participants could have more interaction and explore there I don’t see where or when this own creativity when using it, and interactive device would be used to make it more enjoyable and other than as an experiment but addictive. I would not say that it it does show creativity and is is a ludic interface at this stage as interesting to its participant. I feel it is only an experiment and not a final outcome of what it could I would say that this design is part of ludic interface design as it takes potentially be, however if it were developed into something even something ordinary with a simple more interactive and interesting purpose and changes it in a way then it could be used on a web so that it can be used to interact site for example or perhaps even a with in a more interesting and fun way but without loosing the original game. So you could say it has both practical and also entertainment purpose of what it is for, which in values. this case is telling the time.
tombryant.gdnm.org
LUDIC INTERFACE DESIGN/ ANALYSING A WEB INTERFACE/ I have chosen to analyse the web interface of www.wefeelfine. org. The first impression that the site gives me is that it is very information based due to the simple layout and colours. I believe that this is a good choice for sites that hold a lot of information as the user is not always wanting to go through introduction pages and have distracting animations for example on each page. It also has a professional yet interesting look and use of colour. I would in fact like to edit the site myself as I believe the text paragraphs are possibly to wide and would be easier read and digest if they were not as wide. The site is an exploration of human emotion on a global scale. ‘Since August 2005, We Feel Fine has been harvesting human feelings from a large number of weblogs. Every few minutes, the system searches the world’s newly posted blog entries for occurrences of the phrases “I feel” and “I am feeling”. When it finds such a phrase, it records the full sentence, up to the period, and identifies the “feeling” expressed in that sentence (e.g. Sad, happy, depressed, etc.). Because blogs are structured in largely standard ways, the age, gender, and geographical location of the author can often be extracted and saved along with the sentence, as can the local weather conditions at the time the sentence was written. All of this information is saved’.
The result is a database of several million human feelings, increasing by 15,000 – 20,000 new feelings per day. We feel fine uses a series of ‘playful’ interfaces, the feelings can be searched and sorted. This offers responses to questions like: do Europeans feel sad more often than Americans? Do women feel fat more often than men? Does rainy weather affect how we feel? What are the most representative feelings of female New Yorkers in their 20s? What do people feel right now in Baghdad? What were people feeling on Valentine’s Day? Which are the happiest cities in the world? The saddest? And so on. ‘The interface to this data is a selforganizing particle system, where each particle represents a single feeling posted by a single individual. The particles’ properties – colour, size, shape, opacity – indicate the nature of the feeling inside, and any particle can be clicked to reveal the full sentence or photograph it contains. The particles careen wildly around the screen until asked to self-organize along any number of axes, expressing various pictures of human emotion. We Feel Fine paints these pictures in six formal movements titled: Madness, Murmurs, Montage, Mobs, Metrics, and Mounds.’ We Feel Fine believe their website is ‘an artwork authored by everyone. It will grow and change as we grow and change, reflecting what’s on our blogs, what’s in our hearts, what’s in our minds’. From reading about the website I would conclude that they use a ludic interface.
tombryant.gdnm.org
LUDIC INTERFACE DESIGN/ iPHONE APPS/ Many iPhone apps are ludic interfaces.
www.universe.daylife.com This web interface attempts to create new constellations for today’s night sky by continually I could look into making an iPhone analysing the contents of over app as one of my Ludic Interfaces. 20,000 international news sources, After researching I have fond suggesting a modern mythology that you can download a free based on global media coverage. programme from Apple which allows www.wefeelfine.org Universe portrays all information you to create your own apps which as being interconnected. ‘ Any This site presents a contemporary you can then publish at a cost. word, quote, person, photo, topic portrait of the World’s emotional or story can become the centre of landscape. It uses a database of iBeer. Interact by tilting the phone, the universe, causing all other items more than 12 million individual also by shaking it which makes the to rearrange themselves in relation sentences collected over 3 years beer froth up. from personal blogs. I really like the to the selected item. This way of viewing information is reminiscent visual concept of this design and of the way we, as humans, find the data that is being shown experience reality as individuals interesting. each from our own perspective. www.thewhalehunt.org www.tenbyten.org ‘In May 2007, I spent nine days Every hour, 10×10 automatically living with a family of Inupiat selects the top 100 words and Eskimos in Barrow, Alaska, the pictures in the world, based on northernmost settlement in the what’s happening in the news. It United States. I documented then presents these words and their traditional whale hunt with pictures in an interactive ten by a plodding sequence of 3,214 ten grid, and allows navigation to photographs, taken at fivepast grids, so that history becomes minute intervals for seven days, browseable. In this way, these and at even higher frequencies in hourly snapshots, when stitched moments of high adrenaline’. This together, form a continuous method established a constant photographic tapestry of human “photographic heartbeat” that more or less matched the changing life’. pace of his own heartbeat. He www.justcurio.us/ ‘Justcurio.us then developed a framework for Is an anonymous question and experiencing this story, allowing answer system with one simple the user/participant to rearrange rule: to ask a question, you the photographic elements of the story to extract multiple sub-stories must first answer someone else’s question. Question yields answer focused around different people, yields question. Strangers helping places, topics, and other variables. strangers. The questions can be about anything the best Beatles album, your saddest moment, your biggest regret, your best childhood memory, the meaning of life, whether you should break up with your girlfriend, the best crepe place in Paris, the best cure for loneliness. Anything at all.
tombryant.gdnm.org
JONATHAN HARRIS/ Jonathan Harris designs mostly online projects that ‘re-imagine how we relate to our machines and to each other’. The tools he’s uses are computer science, statistics, storytelling, and visual art.
LUDIC INTERFACE DESIGN/ IDEAS/DEVELOPMENT/ Initial Design for my first ludic interface. Looking at use of colour, layout and practicing my HTML skills I have come up with my first idea. This would be the first page which is linked to a series of other pages. The concept behind it is ‘the journey’, this reflects that Web pages are temporary graphic the design itself will take you on images created when browsing a journey through different web pages/interfaces. Also visually software interprets HTML instructions. As long as all browsers the footprints are indexical icons agree on the conventions of HTML relating to the context. I have tried there is the illusion of solidity or to relate the style to that of the permanence in the web. But behind superbad.com website. The idea is that the links will be within the the graphical illusion is a vast body images of each colour footprint and of text files — containing HTML code — that fills hard drives on perhaps leave the existing links, computers at locations all over the however they will take the user/ world. Collectively these instructions participant to an unexpected web page not relating to what the link make up what we call ‘the web’. entitles. But what if these instructions are interpreted differently than Journey Idea, journey to UCA intended? Perhaps radically differently? LONDON IDEA/ - Web interface that takes you on a journey of London. The web browser is an organ of - The main page will have images of perception through which we ‘see’ the web. It filters and organizes a London, some text. huge mass of structured information - Clicking on one landmark will send that spans continents, is constantly the user to a different page with a landmark in a different part of growing, reorganizing itself, the UK or world. I may have text shifting its appearance, evolving. explaining the link between these The Shredder presents this global structure as a chaotic, irrational, two places. I am thinking about a day trip to London to gather raucous collage. By altering the HTML code before the browser photos of various sites around reads it, the Shredder appropriates London, including the art galleries the data of the web, transforming it and museums. Maybe collect other into a parallel web. Content become information. abstraction. Text becomes graphics. Information becomes art. Website Reference. Looking at existing websites for a guide to London, it’s landmarks and other attractions. www.allinlondon.co.uk/landmark. php THE WWW/ The web is not a publication. Web sites are not paper. Yet the current thinking of web design is that of the magazine, newspaper, book, or catalogue. Visually, aesthetically, legally, the web is treated as a physical page upon which text and images are written.
Tom tombryant.gdnm.org Bryant GDNM
Journey website. May use this site for reference for another of my ideas. www.journeyon.co.uk/
LUDIC INTERFACE DESIGN/ IDEAS/DEVELOPMENT/ I have been thinking about using an image of something (possibly my face) and using text to make up the image. The user will be able to click on certain words that make up the image which will take them to another page. Another Idea is to design and make an iPhone app. The idea of having an image of something, in the case footprints, which relates to the ‘journey’, made up of text. I found some nice footprint images and used Adobe Photoshop to carry out an experiment of this idea. COLOURFUL WEB DESIGNS/ Looking at existing web interfaces that have strong use of colour. This could relate to ludic design and colour is something which I will need to consider when developing my interfaces.
Tom Bryant GDNM tombryant.gdnm.org
USING TYPE/ Looking at type based designs as I have chosen to do an experiment that is type based for one of my ludic interfaces. The idea of having an image made up of text is quite appealing and ludic so perhaps this is something to experiment with using Adobe Photoshop. I have also looked at some web interfaces that use a persons face on their main page. I like the way that this emphasizes that it is a personal website and not that of a business for example which, could have information about the business itself and people within a hierarchy of employment. The website is for your own work that know one else has produced. You are in effect using it as a tool to promote yourself as an individual within the graphic design industry. You could potentially use your website to present your work at an interview for example or have your web address held as a link on other websites and perhaps even a business card or similar. It is possible to see from the image to the left above that using a large image of the person creates a more personal feel to the website. After all it is a personal website that I will have for my own portfolio and contact information. This design also maintains a modern and contemporary style.
LUDIC INTERFACE DESIGN/ THE CENOTAPH, LONDON/ It commemorates specifically the victims of the First World War, but is used to commemorate all of the dead in all wars in which British servicemen have fought. The link could be to the site at which many battles were fort in the first world war or any other war zone area for example. Each time you click it could link to a different place. Possibly have a library of 20 war zone sites.
IDEA?/ An image of the UK made up of text. Some of the text can be clicked on which opens a page with information on that particular landmark or place. Is this ‘ludic’ enough?
LONDON IDEA/ Looking at landmarks in London and how they can relate too another landmark/location. The web interface will be ludic as you will expect to be diverted to a page about the first landmark image but instead you are taken to something else, but that relates.
JOURNEY IDEA/ DOCUMENTING MY JOURNEY TO UCA/ I started to document my journey to UCA as part of my second ludic web interface idea. Just to recap, the idea will be image and moving image based showing my journey as a ludic piece of web interface design. I may also use varying type.
WEB INTERFACE MOCKUP USING HTML CODE/ I have taken an existing code and experimented with the HTML by changing the wording and the layout.
I feel this will be an interesting design visual as it will be made up of text. It could also serve a purpose for people who don’t know that much about the UK.
TYPE/ Looking at common fonts used on the web as I will need to consider these when designing my ludic web interfaces or any type of web page in future briefs.
Verdana Myriad Pro Arial tombryant.gdnm.org Tom Bryant GDNM
Century Gothic
LUDIC INTERFACE DESIGN/ PROCESSING/ I attended a Processing workshop at UCA which taught me the basics of processing. I found it quite interesting what you can create as am interactive interface. Learning the code is not something which is easy, it is very mathematical in a way, however today I have been researching into processing and will post up my experiments from yesterday and today. I will be using one a or several processing designs for one of my final ludic interfaces. Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production. Some points on processing software. Free to download and open source. Interactive programs using 2D, 3D or PDF output. For GNU/Linux, Mac OS X, and Windows. Over 100 libraries extend the software into sound, video, computer vision, and more‌
Tom Bryant GDNM tombryant.gdnm.org
ANALYSING THE PROCESSING CODE/ Void setup() { size (640, 400); This refers to the size of the box that the processing animation is contained within. void mousepressed() { This and the rest of the parameters bellow it controls what happens when the mouse button is pressed. In this instance, a blob is created at any point within the box containing the animation.
LUDIC INTERFACE DESIGN/ LUDIC JOURNEY/ I will use Adobe Flash to animate text that will scroll across the screen. The text will be describing my journey to uni, not a particularly ludic piece of information or interesting at first thought, however I plan to make the interface ludic in its design.
Working on my Flash experiments and am very close to a final.
As I have been working with Flash, gradually my confidence has been building with using the programme and I have been able to try out more creative techniques for creating my experiment. The next stage is the audio files that I have been collecting from my One of the words will be set as a journey. The design itself is quite button so that when it is clicked you modern and contemporary, this was are taken to the next step of my intensional as I wanted to give it journey which again will be scrolling this feeling. The reason for this is text. I will try to make the text as that this project is strongly related visual interesting as possible and to web interfaces and my research plan on using 2-3 different font shows that modern websites use sizes and 2-3 different colours for very limited colour and effects, at the whole design. One of the words the same time this is a positive as for each sentence will be a button you can clearly see the information linked to the next sentence. Also, that is being presented. I won’t have a voice over but will have the audio that I have been I have chosen to leave out the documenting from my journey to footprints image made from type UCA. for now as I’m undecided on where to have it in the animation. It may The idea is a journey within a look out of place even thou it is journey. You have buttons to take made from type, the style of that you to the next sentence which is type of design does not really fit a journey itself and the context is within this experiment about my journey.
tombryant.gdnm.org
LUDIC INTERFACE DESIGN/ LUDIC JOURNEY FINAL/ I have developed this idea further by starting a new Flash ActionScript 3.0 file. I have furthered my knowledge with Flash by researching tutorials and generally experimenting with the programme and have come up with what is a final piece. I need to render it as .mov file or similar. I have designed the opening scene to have an introduction. Inspiration for the colour and type are taken from my research of web interfaces. If you look carefully it is possible to see the first sentence within the jumble of words scrolling across the screen at a 45 degree angle. I feel that as a concept, the layout and style are ludic in themselves within the context of interface design. There are buttons which link to the next stage of the journey, however the other button/s link to a previous page or other page along the journey that is unexpected. I would say that it could be further developed as an interface for an information based website or simply, just for fun with more pages and more buttons and effects. With regards to the layout I have used the rule of thirds and the golden ratio. I have also tried to create the type so it flows from top left to bottom right in the traditional way of reading English text and I am aware that perhaps to make the design as a visual concept more ludic I could perhaps experiment further with the layout. Overall I would say that the experiments are ludic.
tombryant.gdnm.org
PROCESSING FINALS/