j u an va a m o nde
funny dunny
LIVE BRIEF THREE
INDIV I D UA L DOC U M E N T
2
live brief three
P O S I T I O N D E S CRIPTION & T EA M E VA L UATION I chose this project for a few reasons. Most importantly I saw that it dealt with a real issue and unlike SRD Change, it gave the team working on it to actually create the content. Working with Abby Lopes once more and several of my friends within the established group were just other advantages. So when I entered the classroom and encountered the Funny Dunny team, my team, for the first time this semester, feelings of apprehension washed over me. I realised that I was the odd one out, not having participated in this project from the start, Russel made a comment... but after that, everything went pretty damn smooth! My role in this team has been pretty concrete, with each team member allocated specific tasks at the beginning of this semester. I was allocated the website, a calendar or poster (which developed into the manual upon consultation with Dena and Kumi) and eventually I was asked to do signs to explain how to use the and clean the toilets. The team structure and interaction I’ve noticed is starkly different to SRD Change. Everyone has their area established, there are teams within the team and although there is minimal interaction between the different smaller teams, they always produce anything when asked. I think the idea of having people work in a specific niche that they consider their own, say with Russel Alex and Nazareth in animation, everyone feels a lot more comfortable and the team as a whole functions better. SRD Change by contrast, had everyone essentially competing to create the poster or logo that would get chosen. There was ideas swapped and suggestions made, but essentially it was a group of individuals working on the same thing. I’m really enjoying the different working landscape the Funny Dunny team has offered me. Jana, Mark and I have kept up to date with each other’s work, and although incorporating Marks aesthetic has been challenging at times, since I’m used to more freedom, it is for that same reason been a great learning experience. I look forward to working with this team for the remainder of the semester.
Although I was free to come up with ideas and research on my own, getting direction on what content was appropriate or required necessitated meeting with Dena and Kumi of the Institute of Sustainable Futures at UTS. For me this was an excuse to have an outing to the city. The meeting and subsequent meetings went very well with Dena and Kumi. They are very professional, intelligent people and at the same friendly and approachable. We discussed different approaches and visuals for the signs and the manual, as they preferred I left the website till
after they had an internal meeting with their Information Technology team. The manual came about because they had created a pamphlet for an installation of toilets that will be made in Victoria and they needed to create a friendly information booklet that explained the basics of usage and cleaning. They gave me their draft to base my content on. Thankfully they were happy for me to not base my visuals on it. The signs came about after they showed me an installation of the toilets in their building and explained that people were having serious issues using them properly.
“RUSSEL MADE A COMMENT... BUT AFTER THAT, EVERYTHING WENT PRETTY DAMN SMOOTH!” Someone suggested I make signs to inform people and I got straight into developing sketches. I suggested that we keep in contact through a Basecamp account that I would set up and a DropBox for file sharing (since the free Basecamp plan has no file sharing.) Several weeks after the first meeting, Dena informed me that she was ready to meet with me and discuss the content for the website. Different technologies were
also discussed, and Dena stressed the importance of a content management system for users to easily add and edit content. But after I suggested we look at it as merely a hypothetical project for UWS, with ISF taking what they would from my finished project, it was decided that I could just come up with several concepts that unified with the rest of my team’s aesthetics and go from there.
3
live brief three
B AC K G RO U N D RESEARCH The research for this project was comprised of multiple stages. The first stage was concerned with familiarising myself with the aims of the project and its background. Although I was vaguely aware of the project and what it was about, I came into it not knowing too much. In the first class I was given The Funny Dunny Live Brief 3 document which helped immensely in addressing the areas of the project which I knew little about. By reading this document thoroughly, I learnt about the mentality and attitudes that were driving the project, (that being, sustainably minded thinking) It described the challenging yet rewarding creative thinking demanded of the Funny Dunny team members and it gave a lay man’s overview of how the urine diversion system worked. The second part of my research involved conversing with Dena and Kumi in meetings at the Institute of sustainable futures to deepen my understanding of the development of the project, and how things were going with the rollout of toilets, what was needed, and what approaches would be appropriate. Dena and Kumi explained how the installation of toilets on their floor was proving difficult for toilet patrons to use, as it was not obvious to users how to sit. The final stage of my research was the process of gaining an understanding of areas in which was asked to create something. For the toilet signs I was asked to develop for Dena, I researched the fields of Information Design and Way-finding, reading such books as “The Information Design Handbook” by Jenn and Ken Visocky O’Grady, “Envisioning Information” by Edward R. Tufte and “1000 signs” edited by Carlos Mustienes and Thomas Hilland, For the manual redesign I went through resources I had collected in my time as part of the SRD Change team in the previous semester. I used those examples of brochures I had collected as visual and print design inspiration. One brochure in particular, of Gloria Jeans provided a great template for designing my grid and proportions around. Its warm and organic visuals and incorporation of a mix of graphic
“READINGTHIS DOCUMENT THOROUGHLY, I LEARNT ABOUT THE MENTALITY & ATTITUDES THATWERE DRIVINGTHE PROJECT” media also was very useful in the design process. Doing research for the web site was a sizeable undertaking for me as I had unfortunately forgotten a lot of what I once knew about web design, and I was not very familiar with current trends and the development of current web technologies due to not working on a single web project since last year. But thankfully I had invested in a couple of great web books earlier which were more than enough to get me back into the rhythm. “Designing with standards” by web standards godfather Jeffrey Zeldman, reminded me of the subtleties of great web design, that is designing with the user in mind, and “Stylin’ with CSS - A Designer’s Guide” by Charles Wkye-Smith was essential in helping me get back into my habit of coding CSS websites in textedit hour after hour.
4
live brief three
TO I L E T S I G N AGE R E S E A R C H + D ESIGN 1. In the first image you can see my early sketches of ideas and concepts for the toilet signs. On this page in my sketch book I was trying to come up with possible icons for “how to sit correctly,” “don’t stand up,” and “don’t use harmful chemicals,” which I would later substitute for an “only use biodegradable chemicals” sign. You can see examples of where I used the traditional disabled icon and a computer user icon as the guides for my “how to sit correctly” sign. I tried to mimic the computer user icon’s use of geometrical shapes and their arrangement and proportions. My original idea for the chemicals sign was to use the skull & crossbones superimposed over the outline of a spray bottle. I later settled for only creating a sign that explains which chemicals to use because I felt that such a sign would make one which tells people what chemicals NOT to use, would then be made redundant. In the second image can be seen a collection of the main images I found on the internet as inspiration and guides for the creation of the toilet signs. The most important things in this collection are the toilet profiles which helped me greatly when it came to drawing a vector of a toilet in illustrator. Another great help was the two examples of signs that mean “do not stand.” These were very helpful when trying to come up with different poses and arrangements for that sign. But perhaps the most helpful was the image which Dena sent to me, depicting a toilet with a cross section, it is the first example I see which demonstrates the visuals of the urine diversion toilets and since I knew the toilet’s very design was detrimental to the process of using it, I immediately began to incorporate it into my design as you can see in some sketches above.
5
live brief three
TO I L E T S I G N AGE R E S E A R C H + D ESIGN 2. In these images you can see my early digital work for the signs, all of which remain heavily based upon my initial research and sketches. In the first image are my attempts at comparing different poses for the “no standing” sign. It was a bit laborious because I needed the arm position to appear natural and yet easily work with the function of the sign. In the second image you can see how I’ve used a “no smoking” sign as a guide for creating my own red circle with a line through it. From my research in way finding I had discovered that it is important to use conventions whenever possible, since the aim is to communicate effectively and efficiently, the ability to utilise something people already find familiar is a great advantage for a new way finding and information design graphic. Also in this image are my first digital attempts at creating my own version of the cross section toilet silhouette based upon the image Dena sent me. Using simple geometric shapes and balanced proportions I aimed to reduce the urine diversion toilet to its most basic form in order to maximise clarity in communicating its message. In the third group of images you can see my attempts at creating a working version of the “no standing” sign. Using my experiments with different poses in the previous image and the red circle I had made using the “no smoking” sign as a guide, my first toilet sign was starting to take shape. In the last group of images is my first attempt to make a sign related to cleaning, I created a silhouette of a generic spray bottle and to imply it was a biodegradeable cleaning product, to work in tandem with the words that would accompany it I wanted to include a visual element of nature. The first thing I chose was a flower, which worked nice conceptually, but the visual execution wasn’t refined enough.
6
live brief three
TO I L E T S I G N AGE R E S E A R C H + D ESIGN 3. The first image on this page is the inspiration for the illustration which I would eventually use to imply “biodegradable” on my cleaning sign. It was more visually dynamic than my flower thanks to the varying thickness and the use of subtle detail doesn’t reduce its effectiveness. Below you can see my finished toilet signs for four of the signs requested of me by Dena and Kumi. Although for the purposes of re-designing their manual I must also come up with one that indicates how to dispose toilet paper.
7
live brief three
M A N UA L PA M PHLET R E S E A R C H + D ESIGN 1. Originally one of the tasks that had been allocated to me had been a poster/ calendar which would have functioned as a piece of informative and educational media placed inside the cubicle door or outside a public toilet for example. This task altered slightly when I met with Dena for the first time and she mentioned that her team had come up with a brief manual for how to use the toilet and how to clean it, for the installation of urine diversion toilets going into Victoria. It was suggested that I use their manual as a guide and create my own version instead of a calendar or poster. The first image shows the cover of the manual I was re-designing. The last two images are from a Gloria Jeans information booklet I had collected in first semester as a resource for sustainable imagery for the SRD Change project. I immediately thought of it and pulled it out of a folder. I thought that its 3 column format, friendly imagery, use of different media such as illustration and photos and the warm, organic textures were all great and highly relevant to the redesign of the Funny Dunny manual.
8
live brief three
M A N UA L PA M PHLET R E S E A R C H + D ESIGN 2. These are my preliminary sketches. I’ve experimented with different approaches to the visuals of the pamphlet cover, including different titles and arrangements. I wasn’t sure at the time exactly what I would be able to get from other team members by the way of imagery, so I gave myself creative licence for this preliminary stage, thus helping me throw ideas around more freely and encouraging the thinking process. These sketches are also where I play with the idea of using Firefox inspired pipe imagery. Below is a section of the firefox website depicting the faint picture of a pipe. I thought they worked great as simple visual elements, and I thought they went well with Mark’s vector aesthetic. I didn’t use them for initial manual mockups but after adding them into my web designs, they found their way into my most recent manual mockups.
9
live brief three
M A N UA L PA M PHLET R E S E A R C H + D ESIGN 3. These are my first digital mockups. All of the pages depicted are experiments with covers. I tried several different combinations of fonts, as the style sheet wasn’t concrete at the time, and I felt this was a good opportunity to produce examples of different font pairs for the Funny Dunny team and especially Jana and Mark to look at Only in a few instances here do I link with Mark’s aesthetic, which was something that certainly had to be addressed for later concepts. I felt the warm texture in the background worked well for the pamphlet, as well as bright colours overlaid over the top. The fonts I experimented with included Futura Condensed, Helvetica, Georgia and Rockwell. I used the same grid of equal thirds that the Gloria Jeans pamphlets used. i felt that it was a great grid for such a project, it gave content breathing space by still applied a sense of structure and unity.
10
live brief three
M A N UA L PA M PHLET R E S E A R C H + D ESIGN 4. The first image is of a more developed mock-up. I managed to incorporate refined images of pipes for the first time, and I stuck with Mark’s colour scheme whilst including a warm background texture. But I didn’t have Mark’s drips yet, something which I added in the next two images, which I also added some content to, based on the original manual’s content. Here I have included Mark’s drips as the main visual elements with the pipes as secondary elements. I have worked with font pairing I agreed on with Mark and Jana, Georgia and Helvetica.
11
live brief three
W E BS I T E R E S E A R C H + D ESIGN 1. The development of the website followed an odd pattern, because I was keen on getting back into the rhythm of coding CSS, but I wouldn’t get the content for the website from Dena until several weeks into the semester. I knew it was better to start coding straight away as it does take me a while to get used to coding CSS after a year. Event though I had zero content to work with, I still researched things that would be important regardless. Such as the possibilities of fonts online, the status of XHTML, HTML 5 and CSS 3, FLASH versus Jquery, all of these things were on my mind. But also I was eager to find inspiration for possible approaches, imagery, layouts, and navigation elements. In these images you can see my thumbnails where I planned out different layouts using different proportions and placement of elements. I find that doing these thumbnails makes coding much easier.
12
live brief three
W E BS I T E R E S E A R C H + D ESIGN 2. These are some of the websites which I encountered that I felt demonstrated an element of some sort, be it layout or visuals or interaction, that I could possibly use for the Funny Dunny website. The Yellow Bird Project was the most relevant as it has a very similar colour palette of yellow black and white, and it uses cartoony textured imagery. The pipes of the firefox website as I mentioned before were great examples of something which I think could be used as a secondary element to Mark’s drips. It doesn’t demand attention and suggests form and structure, acting as a framing device in media like websites or pamphlets.
13
live brief three
W E BS I T E R E S E A R C H + D ESIGN 3. Here are more thumbnails of layouts for the website. I began toying with the idea of having one dominating banner image. This later fell by the wayside thanks to a combination of firstly the realisation that I was, once again, veering away from using Mark’s aesthetic, and two my idea was far too time consuming to pull off in the time I had.
14
live brief three
W E BS I T E R E S E A R C H + D ESIGN 4. Here are the images for my brief but doomed idea of creating a centrepiece graphic for the website. You can see the process from sketch to digital inking and then to digital mock-up.
15
live brief three
W E BS I T E R E S E A R C H + D ESIGN 6. The screenshots of my web designs. The sites were coded and designed at different stages of the semester and all of the previous research for the website occurred throughout the whole semester so far and they can be considered to fall in between each concept. With each concept either I found things I wanted to take further, change or improve, or my tutor did. Dena and Kumi were delighted with whatever I showed them. In this first website concept, I began coding CSS for the first time in one year, and I got the hang of it quicker than I thought I would. I decided to try a fixed width website that was aligned left, giving the designer great control over its viewing by users. I also included a great jquery sliding box feature for the banner which I thought would come in useful.
16
live brief three
W E BS I T E R E S E A R C H + D ESIGN 7. Here I began to add dummy content and went with s stylish/designy feel. I’ve put a lot of effort into maintaining a balanced grid and having a high level of legibility and visual appeal. I wanted to have a unified design that really presented the content within it in an effective manner.
17
live brief three
W E BS I T E R E S E A R C H + D ESIGN 8. I had an idea of using a toilet related element with a vertical menu. I thought of using one of Mark’s simplified logo P’s above the links and when you hover over a link a drip appears under the link. I didn’t get to the stage of attaching drips to the links on hovering, but I did add a toilet paper texture to the menu as you can see.
18
live brief three
W E BS I T E R E S E A R C H + D ESIGN 9. My most developed web design. It uses Mark’s logo and my pipe imagery as a navigation bar. I have stuck with the jquery banner feature which here can be seen to be previewing Nazareth’s animation.