August 2010

The University of Edinburgh

The SoW (Save our World) Project

An interactive informative flash website

Study on the inspiration and creativity origins, and the importance of aesthetics in interaction design.

Makri Antigoni Master of Science (Design and Digital Media) School of Arts, Culture and Environment The University of Edinburgh August 2010

-1-

August 2010

The University of Edinburgh

I owe my deepest gratitude to my parents that nurtured my creativity since I was a child, to my wonderful sisters that always support me and to all my friends and classmates who in hard times kept up the spirit. I would also like to thank my supervisors John Lee and Jules Rawlinson for their guidance and inspiration and the entire faculty for the unforgettable experience that offered me.

-2-

August 2010

The University of Edinburgh

ABSTRACT
The dissertation emphasises the design process for the creation of an edutainment website. The development of the SoW (Save Our World) project demanded considerate study and use of the principles of aesthetic web design in purpose to absorb the users and instill into their minds awareness over the environmental issues. In the first part of the text, I focus on the initiation of the design process, on how the designer gets initially inspired and ultimately creative. Brainstorming and creative thinking can influence and evoke the creations of the designer simultaneously with the subconscious mind which has the most critical reflection on every part of his work. In the second part, I discuss the power of aesthetics as one more design element that can lead the work of the designer and play a key role on the process of inspiration and creation. I extend my research proving the fact that aesthetics can effectively contribute to the ultimate purpose of the interactive design: the engagement of the user. Keywords: design, web design, aesthetics, inspiration, creativity, brainstorming, education, information, entertainment

-3-

August 2010

The University of Edinburgh

TABLE OF CONTENTS
ABSTRACT ............................................................................................................................................ 3 REVIEW OF LITERATURE ............................................................................................................ 7
THE PROCESS OF INSPIRATION AND CREATIVITY TOWARDS AN AESTHETIC DESIGN ........ 7 Introduction ............................................................................................................................................... 7 The first chapter analyses how a project definition idea evolves into a final design project. When I first tried to figure out what I would like my project to be about was when I conceptualised the first questions that I wanted to answer in my writing: ............. 7 Brainstorming ............................................................................................................................................ 7 Creative & Lateral Thinking ................................................................................................................... 8 Creativity and the Subconscious mind ............................................................................................. 10

The more unconscious the creation, the more powerful (Yeats) ................................... 10
Conclusion ................................................................................................................................................ 11 AESTHETICS & DESIGN ........................................................................................................................ 12 Aesthetics .................................................................................................................................................. 12 Aesthetics and Interaction Design: ................................................................................................... 13 Aesthetic attitude ................................................................................................................................... 15

PROJECT OVERVIEW ...................................................................................................................... 16

PROJECT DESCRIPTION ....................................................................................................................... 16 Motivation: ................................................................................................................................................ 16 Concept: .................................................................................................................................................... 16 TECHNOLOGIES ................................................................................................................................... 18 METHODOLOGY & EXECUTION ....................................................................................................... 19 Inspiration ................................................................................................................................................. 19 Design Objectives ................................................................................................................................... 22 Design Components .............................................................................................................................. 23 Information navigation Design: .................................................................................................... 25

CONCLUSION .................................................................................................................................... 26

-4-

August 2010

The University of Edinburgh

DVD CONTENTS
The DVD that accompanies the following writing consists of: 1. The folder Written which includes the present pdf named as SoW_so971087 which is the theoretical part of my final project. I would recommend that the reader should firstly read the part Review Literature of my thesis before he starts examining the Website that I created in its context. The Project overview part could be easily read while the website is being tested. 2. 3. 4. The folder Video Demo includes the SoW demo.mov video with a tour in every single part of the website. The folder Illustrator which includes all my graphic creations for the website The folder Flash website which includes all the files needed for the Website in order to be uploaded. The user can find the main .swf file that he execute use to interact with the website without the need of internet while by pressing on the main.html he can view the website locally. Otherwise, the website is uploaded at the following address: http://ddm.caad.ed.ac.uk/mscpages/0910/s0971087/soWebsite/main.html

I would definitely recommend that the reader should view the website from the .swf file once when I uploaded the website I had to lower the analysis to make it viewable from every computer. The experience through the .swf file can be much better though.

-5-

August 2010

The University of Edinburgh

INTRODUCTION
Design is ubiquitous and the essential element in what we communicate. In every building, advertisement, map, poster, web page and TV program, design is always present characterising everything that exists or happens around us. Even if common people that are not interested in design issues dont pay attention to all these elements, they are always subconsciously or consciously influenced. The objective of the designers is to create exceptional designs in terms of aesthetics and also to use their visual thinking and their knowledge over visual communication to be persuasive and capture the interest of the clients. Designers always have a different look on the world and a visual thinking of what they want to create. Without even noticing it they naturally become observant of everything around them, victims of their own tactics. It is quite challenging to examine what are the processes that are hidden behind the inspirational and creative moments and what are the factors that reflect on the designers work. It is quite hard to approach processes of thinking but there is a huge interest when such a research can lead to new methods that enhance the creative thinking. Chapter Summary: Initially, I examine how designers come up with the constant demand for mass production of ideas. Thereby, I observe that aesthetics in the design can reconcile the taste and style of the artist with the users requirements and the demands of the customers. In the second part, I continue the discussion over the importance of the aesthetic element particularly in the interactive design when the designer aims at the information and the education of the audience. The final chapter analyses the motivation, the concept and the execution of the project and the means by which it reflects the gathered through the research. Project purpose: The project aims to fuse aesthetic 2d graphic design and internet technology by producing an artistically designed Flash website, that also combines education and technology. The project presents a functional example of how the internet can be a valid tool of education and awareness when the designer emphasises on the aesthetics of the web design.

-6-

August 2010

The University of Edinburgh

REVIEW OF LITERATURE
THE PROCESS OF INSPIRATION AND CREATIVITY TOWARDS AN AESTHETIC DESIGN

Introduction
The first chapter analyses how a project definition idea evolves into a final design project. When I first tried to figure out what I would like my project to be about was when I conceptualised the first questions that I wanted to answer in my writing: What are the factors that inspire the designer and enhance his creativity? Where does creativity for inspirational and aesthetic design come from? "An idea is our visual reaction to something seen - in real life, in our memory, in our imagination, in our dreams." (Audette, 1993) The process of accomplishing our project ideas goes hand-in-hand with the examination of how the ideas come in the mind of the designer. How does the thinking process work for the designers and how are they capable to respond decently to the constant demand for original and inventive ideas that their position imposes? It was really bizarre for me to pass from the moment when I was staring the white scene of the Illustrator application waiting for a sign that would activate me to start designing to the moment when some pixels were put together in an interesting way depicting something promising on the screen. It may take ages of preparation and brainstorming or just a moment of enlightenment to make an aesthetic choice. Research questions: What is the source of the inspiration and creativity of the designers?

Where does creativity for inspirational and aesthetic design come from?

Brainstorming
Brainstorming was a technique proposed by Alex F Osborn in 1939. ((Rawlinson, 1986) Brainstorming works as a tool to bring out ideas in respond to a specific problem. It is not only about trying to find an exotic, innovative concept but even use of a more practical idea to implement in a creative and powerful way. There are four basic rules that characterise brainstorming (Donald W.Taylor,1958),(Osborn, 1963) 1. No criticism. Judgment is being suspended until later. All the different ideas are supported. The participant can generate in that way more unusual ideas.

-7-

August 2010

The University of Edinburgh

2.

Unusual ideas are useful. New, different ideas can provide new perspectives and lead to unexpectedly successful solutions. Focus on the free-wheeling nature of the session.

3. 4.

Quantity matters. As Linus Pauling, an American theoretical chemist and biologist underlined The best way to have a good idea is to have a lot of ideas. Focus on combination and improvement. A number of poor ideas seeds can be associated and combined to form a more interesting and innovative one.

It is quite impossible to create designs without having a brainstorming session first. One of the basic obstacles that designers have to overcome before they start designing is to distinguish between the concepts and ideas that they come up with, the idea that they can take further. The train of thought towards a final idea is probably the most time consuming procedure. The purpose is the elaboration on potential ideas that are promising and feasible at the same time,and the combination and the connection between them. Brainstorming is A means of getting a large number of ideas from a group of people in a short time. (Rawlinson, 1986) Although brainstorming traditionally is supposed to be a group technique, it can be applied as an individual procedure as well. Group brainstorming allows the interaction between different persons, sharing of opinions and experiences and the effective development of an idea whereas during the individual brainstorming, the criticism is blocked and a number of ideas can be produced freely through the methods of doodling, sketching, drawing mind maps, diagrams etc. When it comes to the designers, brainstorming is often a personal procedure. One of the basic goals they pursue is to reach a desirable aesthetic result. The contribution of many people to the creation of a single design project can have negative results considering the gaps between designers aesthetics. A mix of tastes would reflect on the design and return unsatisfying results. This fact can restrict the designer to individual brainstorming but this doesnt mean that he will never be affected by other people. A second opinion,or a random critical eye on his idea can always be determining and influence seriously his design line.

Creative & Lateral Thinking

Creative thinking is The relating of things or ideas which were previously unrelated (Rawlinson, 1986) As Edward de Bono analyses in his The mechanism of mind the human brain uses the incoming information to create patterns. The human mind during perception normally follows patterns that information systems have created initially. That restricts the thinking process and hinders creativity. At the point where the individual manages to freewheel his

-8-

August 2010

The University of Edinburgh

thoughts, to avoid the logical and conventional way of thinking and cut across the patterns creative thinking initiates. This is what differentiates the creative thinking from the analytical. While analytical thinking is used to define unique, convergent ideas-answers to the problem that will be lately analysed and executed, creative thinking proposes a look for divergent ideas and a further examination of the options even if they look irrelevant to the problem hence lateral thinking. (Rawilson,1986) Although creative thinking is commonly considered as a inherent talent, in reality it is an ability that everyone has at some point and can develop or improve. One of the well known lateral thinking techniques is the de Bonos six thinking hat system. The technique was used by ode Bono to facilitate the creative thinking process. Using the metaphor of the hats he proposes that the thinker will choose between the different types of thinking strategies and will find himself answering questions that will consequently enhance his thinking.(Bono1995) The following diagram explains the symbolism of each one of the six hats:

Diagram 1

-9-

August 2010

The University of Edinburgh

Mentioning the above method of de Bono I want to stress on how people can control and pursue their thinking in order to become more creative. When de Bono discussed the lateral thinking he was trying to help towards the facilitation of the decision making process. At this point, I would propose that this technique could even be helpful for the designer who is set to produce and implement an idea. Starting with the blue hat and moving clockwise between the hats of the diagram above, the designer can achieve a faster response to the demands of a project, a methodical classification of his thoughts and a direct change from the state of brainstorming to the state of designing. The technique of the Six Thinking Hats proposes that the designer should guide his mind to change between different methods of thinking and hence become more creative and efficient in using his artistic talent. It could be conceived as a paradox the fact that o Bono invented a system that introduces a patterned led way of thinking to enhance the lateral thinking(thinking out of the box).

Creativity and the Subconscious mind

The more unconscious the creation, the more powerful (Yeats) Working on a design project includes work that cannot be controlled. Designers as well as artists usually face the phenomena of lack of creativity and inspiration which makes it impossible for them to proceed and undertake their ideas, or even come up with new ideas. One of the controllers of designers creations on papers or pixels is the communication with their subconscious mind. (Meyer, 1907) When designers are experiencing the brain drain period, they feel unable to start and wait patiently for the idea to strike. After many haphazard attempts that usually take them back to the same zero point, they often turn to research. Perusing galleries, inspirational websites, blogs, magazines and books, they look for similar projects that can make them feel confident and trigger their creativity. This procedure may not have immediate results but it always affects the designers creations. At some point, sooner or later a simple doodle or sketch that firstly seemed faulty on the paper, starts to unexpectedly make sense and look more and more interesting. A hidden power, a reserve of creativity starts sparkling and that could be the starting line. This is the moment when the designer recognises the desirable form for his design. One of the basic sources of a muse is the tons of information that reveal when the designer communicates with his subconscious mind. Subconscious mind is a quite ambiguous state of mind or state of the soul that has been translated in many ways during the years. In this article referring to the subconscious we aim to comment on every feeling, influence and idea that is stored in someones mind unwittingly,

- 10 -

August 2010

The University of Edinburgh

without his awareness. Subliminal messages end up existing somewhere beyond the consciousness and although the individual cannot realise their existence, they keep influencing his actions, his perceptions and his personality. The designers creations are influenced by his experiences, his mood, his personality, the stimulus he gets from the real world and nothing is as spontaneous as it seems initially. Subconscious is where some of his creative and imaginary thoughts are hidden until a moment when unconsciously will influence the work of the designer. For Voronski, artistic images are created intuitively, i.e., within the context of the accumulated experience of previous generations existing in the sphere of the subconscious.(Fizer, 1963) It is known that the right brain processes information in an intuitive way and this is what subconscious is thought to be. The subconscious such as Extrasensory perception (ESP) is always present when an incident occurs, able to store the information that an individual senses. Does this mean that the subconscious has magical powers? Yes and no, depending upon how you define magical. The subconscious does have a lot of powermore power than most people even dream they have at their disposal. Creativity, intuition, and imagination are functions of the subconscious mind, and the results in reality depend upon the information stored in the subconscious. (Elliott, 2006) Just like every artist, the designer creates images that project what is preserved in his subconscious mind. The pieces of his work are directly influenced by his perception of the world. As Fizer stresses He [the artist] experiences a continuous longing for them and, in his nostalgia, creates sagas, legends, sings songs, and writes novels; in brief he creates art. Thus art is a way of re-creating or finding our such images. (Fizer, 1963) During the first creative moments, the artist is mainly led by the uncontrollably powerful subconscious, a servant of his own mind. The abilities of an artist in his creations is totally connected to the processes of his mind. There was no possibility for art composition if man was not able to distort and amplify the real world facts using his imagination, his unconscious emotions and his artistic insight.

Conclusion
When it comes to the designer, not only as an artist but also as a professional, the creative process becomes more complex and ambiguous. Usually the designers are supposed to follow a business document (creative brief) which contains all the details that they need to know about the project they are taking on. The goals and objectives of the project are specified and they only ensure a direction which the designer has to follow. The actual difficulties though are met on the path towards the accomplishment. The relative process is controllable through methods that enhance creative thinking like brainstorming and the six hats system or merely controllable if we also consider of the effect

- 11 -

August 2010

The University of Edinburgh

that the subconscious mind has on the creations. Moreover, there is a variety of additional factors that can stimulate his work. The design brief, the concept of the design, the targeted audience and the desirable communication with the audience that he wants to achieve are just the most outstanding of the influences. The added factors in most cases can be really helpful for the designer in terms that he can be more considerate on what is the expected outcome and his motivation accrues automatically. On the other hand, it is inevitable that a strict direction given by a customer can restrict the externalisation of the designers talent and be opposed to his taste and personal artistic style. This is the point where the notion of aesthetics can interfere to the compromise of the designers personal design principles and the clients or users demands. The aesthetic factor in design is proved to guarantee the pleasure of the audience. The designer trying to adjust his own style and follow the design principles he commonly finds himself trapped between the irrational customer requirements and his knowledge of design. Obeying the rules of aesthetic design the designer can successfully carry through a project without overcoming his design principles. Worki ng towards aesthetics can be one more manipulating factor of the users creativity. Moments of inspirational and creative sparks can be transferred onto the screen in a beautified fashion.

AESTHETICS & DESIGN

Introduction
This chapter comes up with the idea of aesthetic design and how aesthetics is important for the interactive design. The literature explored for this part deals with aesthetics in interactive design and the importance of the visual appearance for the fruitful communication with the user. Based on personal experiences, when I think of educative or informative websites, they automatically bring to mind the image of dull interfaces, grid patterned layouts decorated only with text and exclamation marks. In this section, we will argue that the aesthetic element should be considered in the processes of developing an informative website that aims on the communication and dissemination of the information and on the strong influence of the audience. Research questions: Why should aesthetics be inherent to interactive design?

How can aesthetic design be as attractive and engaging to awaken consciousness over an important global problem?

Aesthetics
Aesthetics: The term Aesthetics derived from the Greek aisthetikos () which means esthetic, sentient and was coined by Alexander Baumgarten to express the perception of objects or phenomenon via the senses. Although different meanings have been applied to

- 12 -

August 2010

The University of Edinburgh

the term during the years, this is the common meaning and the one that I was interested in while writing this paper. Aesthetic Experience: Although in reality we can experience aesthetically everything that is around us most of the times the phrase aesthetic experience refers to visual arts. For example, when it comes to Web sites, we should consider that one of the first senses that the user exercises when interacting with a webpage is the vision or the auditory if any. Before he starts interacting he first conceives the messages that the screen gives him and translates them to aesthetic experience.

Aesthetics and Interaction Design:

If we go back and study theories of the Roman architect Vitruvius(first century BC) we will meet his three qualities firmitas(stability), utilitas(utility), venustas(beauty) that a building must exhibit. A structure must be functional, useful and aesthetically considerable. (Tractinsky, 2004) Apart from the field of architecture where the Vitruvian principles are still intuitively followed we can even detect the three elements in the wide IT field. The meaning of the firmitas brings into mind the hard core programming crews working tirelessly towards the creation of systems that will be characterised by stability, accuracy, robustness and safety. The second requirement of utility can be easily corresponded to the human computer interaction (HCI) discipline that pursues the design of usable information technologies that are correspondent to the needs and the demands of the user and focus on the satisfaction of all the rules for ideal and simple interaction between the human and the machine. The third requirement of beauty is still addressed by the HCI field and although until recently the importance of aesthetics seemed to be ignored in the IT disciplines, lately the conviction that user satisfaction is not only dependent on the usability and robustness of the systems, but also on factors like the beauty, learnability** and excitability** prevails. In the design of an edutainment web site aesthetics are used in purpose to achieve excitability. Excitability treats the user experience not as something predictable and fixed but as a situation that is not foreseeable and can evolve in various ways once the user is not aware of all his options before he interacts with the interface. Excitability is the ability that adds the feeling of excitement in the user experience that allows him to express himself and respond emotionally to the stimulus that he gets.Excitability happens when there is more to the use situation than just use (Christensen, 2004) Usability tests examine all the primary interaction of the user with the interface before occupying himself with the main intended task, and its principle direction is to simplify the process and make it blossom undisturbed. Excitability proposes a more ambiguous and

- 13 -

August 2010

The University of Edinburgh

therefore intriguing and memorable experience where the user is not aware of what he will face and is called to make choices that will influence his interaction with the interface. While usability is thought to be one of the prominent contributors for the effective web design we should always consider other factors; even if they have been ignored for a long time, they are still there to influence the quality of the user experience. Discussing over the effective interaction design (Alben, 1996) includes in his prerequisites for qualitative experience the aesthetic experience referring to aesthetically and sensually satisfying elements of a product and the cohesive and consistent design. Beyond the aspects of functionality and usability, aesthetics focusing on the presence of the design have the power to engage and that justifies why it consists a topic of interest lately. Lately, there are many arguments over the aesthetically ugly websites and this is quite expectable if we consider that it is opposed to the users common aesthetics. Although aesthetics is not a neglected dimension of research in the area of webdesign it seems that there should be more focus on it, rather than the current way, as it is a factor that effects all the aspects of human perceptions and actions. The satisfaction that the user gets from his experience with a system as well as the perceived usability can be influenced by the aesthetic quality of the websites interface. Our brains become more flexible and acceptable when interacting with beautiful objects . This can be a reference to the halo effect, a cognitive bias which observes that the positive feelings about a trait can be transferred in another possibly unrelated trait. In the same way that a handsome person would seem more intelligent, popular and better adjusted to the society, an aesthetic website will appear to be more usable because people have the sense that good designs work better. This Aesthetic -usabilityeffect is an example of the halo effect. (Norman, 2003) In Normans book "The Design of Everyday Things" (Norman, 1986) he proposes that design should obey certain principles that will ensure that it will be obedient to the users needs and demands (user-centered design as he names it). Visibility, feedback, constraints, mapping, consistency and affordance are the words that characterise the user-friendly design that he introduced, neglecting the value of other elements of the design like the aesthetic. Later, on the publication Emotion & Design reconsidering his first reductive approach, Don Norman comments on the importance of the attractive designs and states: Beauty and brains, pleasure and usability - they should go hand in hand. The aesthetic preferences of people have an important impact on their requirements and judgement. Studying about the user satisfaction Gitte Lindgaard tried to produce concrete proofs about the time that people need to judge the visual appeal of a website and her research suggested that the accession will only take 50 ms and thats the time that the web designers have to impress the audience. (Lindgaarda, Fernandesa, Dudeka, & Browa, 2006)

- 14 -

August 2010

The University of Edinburgh

This is another proof that the visual appeal of a website is so important and the first impression that the audience gets. This is the critical point when he decides whether he will keep navigating or he will quit, showing his dislike for the general sense that he gets. As soon as there is something filling the pixels of a website scene, intentionally or not visual communication follows. Every website is characterised by its graphic design and the communication that is accomplished is closely depending on the design synthesis. Colour choices for the different elements of the website communicate different things. From the basic decisions over fonts and colours, up to the embedment of more impressive and stimulating multimedia elements there is always an impact on the visual communication that is accomplished with the user. Visual effects can be quite powerful towards the direction of the communication and when the web designer has knowledge over how to use them to create an aesthetic experience he is automatically able to control and provoke the communication he wants. (Thorlacious, 2007)

Aesthetic attitude
The aesthetic attitude is defined by Stolnitz (Stolnitz, 1960) as disinterested and sympathetic attention to and contemplation of any object of awareness whatever, for its own sake alone. He differentiates the aesthetic attitude to the attitude that people have customarily in everyday life known as practical perception. This refers to the way that people conceive things around them in correlation to their utility and their practical value. The ordinary reason why people are concerned about the objects around them is to help them in a way to achieve a goal which lies beyond the experience of perceiving them (Hospers, 1969) Aesthetic attitude on the other hand is a different way to experience and focus on an object regardless of motivations like curiosity, profit and utility, for its own sake. It represents the idea of interacting with an object aiming impartially for the experience. To maintain an aesthetic attitude the individual has to forget or disregard some ethical or religious values and prejudices and become sympathetic to the object. When perceiving an object aesthetically, what happens is a total absorption to the experience that it offers. When it comes, for example, to the experience of a movie or a song, the individual perceives the aesthetic attitude by pay attention and not getting distracted by any other external factors. Reading through relevant articles, I would propose that in the context of human computer interaction and more specifically when a piece of work embeds educational purposes the ultimate achievement would be to provoke the aesthetic attitude of the audience. In his writings Stolnitz stresses that aesthetic attitude can not only happen when the user interacts with a beautiful object but it can happen with any object. Arguing on that, and after appreciating the power of the aesthetic attitude, I consider the aesthetics (meaning beauty)
1 1

FROM the Introductory Readings on Aesthetics edited by John Hospers

- 15 -

August 2010

The University of Edinburgh

as an important factor to stimulate and provoke the deepest communion between a user and the interactive material. Even if separate and irrelevant to the actual notion of aesthetic attitude, aesthetics can trigger the interest of the audience and give the will to experience it deeply and impartially, hence acquiring an aesthetic attitude.

PROJECT OVERVIEW
PROJECT DESCRIPTION
Motivation:
The project combines my passion about aesthetic design and my respect to the ideal of activism. My main vision about the SoW website was to approach web design in a different way and experiment with the reaction of the audience to an artistic, enriched graphically microcosm embedded in a website. Trying to reconcile the two divergent philosophies of entertainment and education I wanted to prove that the best way to educate successfully young people is through entertainment and intense audiovisual aesthetic experiences. That is the philosophy of the website created in the context of the dissertation and the methods used to create were led by and corresponding to this principle.

Concept: The website is a case of online electronic edutainment. The two main objectives
are the information and the amusement of the user. The basic part unfolds a whole world in a miniature that is an interesting explorative space where the user can spend time to navigate and get the information over the specific area of interest. The SoW project reveals a 2d virtual world illustration that consists of a representation of the natural environment and a house depiction restricted to the limits of the screen. The websites core consists of three stages. When the user moves between the stages he experiences the different sense that the differentiated graphics create. Starting with a devastated, polluted dark scene we move between the stages and end up to an ideal colourful, fertile ecosystem where everything looks healthy and flourished. Every stage has a number of interactive elements and animations and the content appears in the form of text messages appearing when the user hovers over different graphic elements. While navigating, the user can explore the hidden advice that is corresponding to the specific objects.

- 16 -

August 2010

The University of Edinburgh

The three stages depict three different states of the same scenery. While the user gets the information and walks around the stages he feels the huge impact of his actions and how critical is to follow the given environmental advices. The different stages of the project express how amazingly different the environment can be if people acquire ecological thinking and ecological consciousness. At the same time, it offers an understanding toward the environmental issues, including human interactions and effects and informs the user on how he can achieve a more ecological behavior. The basic aim of the SoW project is to provoke the users close interest. In this example of an edutainment project I dont intend to make the user come back to the website but engage him effectively during his first interaction with it. The small amount of information that the website offers basically ensures that the user will be able to assimilate all the content and get the significant knowledge over the subject. Trying to satisfy his curiosity the user will be found to interact subconsciously with the messages appearing in the explorative environment. Focusing more on the graphics while the information reaches the user in a simplistic way of messages on the screen will work like a metaphor. Simple, inconsiderable changes in peoples everyday habits can lead to huge improvements and even rebirth of our environment whereas ignorance and apathy can have the opposite results. Why the environmental issue? What I was experimenting with during my work on the dissertation is how a website developed with emphasis on its aesthetic design can be more attractive to the users, have an emotional impact on him/her and provoke appropriate thinking towards a subject and especially towards a global issue. I support that people need a strong incentive to start acting and pass from the state of simple knowledge to the state of acting. The point is not only to make people aware of the environmental problem. Lately, it can be said that media and partly educational and other social institutions has worked (indisputably not satisfactorily) towards the enlightenment and the forewarning of people but the same time succeeded in terrifying people over the catastrophic consequences of their indifference. People considering the environmental as one of the most prevailing global issues of the past few years started to feel unable or too small to help with the vast problem. I will not focus on the illumination, but rather on the sensitisation of the community on the environmental issues, in the sense that it could promote a better attitude. People need to be convinced that it has the power to change things for the better by little efforts on their part. Simple everyday choices that will be more eco-friendly can be of vital importance. Lately, its more a need than an obligation for everyone to become more considerate and sensitive over the huge environmental problem. Hence, the environmental problem seems to

- 17 -

August 2010

The University of Edinburgh

be the perfect experimental subject to choose once the awaking of people over such issues is imperative.
Targeted audience: In order to design properly the website graphics I had to define the target audience. Thinking of the potential of the website and the educational and entertainment role of its existence I preferred to add the playful and explorative elements that commonly attract the interest and pique the curiosity of youngsters. Moreover, the environmental issue is so intense that the only way to face it is to drastically pervade and try to influence the young generation to act.

TECHNOLOGIES
Why Flash? Wavering between the available technologies I had to find the software that would be the most appropriate for my project, in terms of responding to my requirements. Thinking of a powerful, user friendly and fast development land Adobe Flash cs4 seemed to be the best solution for the time being. Taking into consideration that Flash works in harmony with ActionScript 3.0 I chose to create the whole website using this software. The early versions of ActionScript (1.0 and 2.0) used to be slow and inexplicably deficient and ineffective were just replaced by a third totally differentiated edition that was making the most of all the advantages of the object oriented programming. It appeared as an oasis that finally proved to be quite beneficiary for the developers who were able to deploy upstanding projects effortlessly and quickly.

Currently, there is a huge debate in the field of web design. As Bauhaus philosophy supported, the form should be inseparable from the function and should always serve the needs of the society. This is why the cooperation between usability specialists and designers should be harmonic and balanced. It is a fact that Flash is quite useful for impressive visual effects that offer distinguished user experiences but this doesnt mean that a flash website cannot obey to the rules of functionality and ease of use. Intending to focus on the visual stimulation of the user I had to ignore unfortunate drawbacks such as Flash being infertile in terms of Search Engine Optimisation. A short table naming the most outstanding advantages and disadvantages of the flash websites follow:

PROS
Offers resolution and browser consistency Satisfies the expectations of the modern audience

CONS
Not opensource It is not friendly to SEO techniques

- 18 -

August 2010

The University of Edinburgh

Embeds fonts Constitutes a strong tool for the development of 2d and 3d graphics, animation. It is appropriate for advanced interactive design and allows camera and microphone interactions

Demands loads of coding and is probably more time consuming Can become really slow It can take a long time to load and consume important amount of bandwidth

Having a thorough knowledge of the benefits and drawbacks of Flash Web Design I had to review my goals and my target audience to end up thinking once more that my main concern was to create a static website that would focus on the interactive and visual work which allowed me to surpass technologies like Php and HTML and stick to the exclusive use of the Flash tool. Why illustrator? For the development of the graphics I used Adobe Illustrator vector graphics editor. The graphics created in illustrator can be easily imported into Flash and keep their vector features. In that way I was able to take advantage of the 3d functionality that flash offers and pose my graphic elements in different layers using the z axis in order to simulate 3d effects. This specific software provides with a pool of powerful tools for graphic design, shapebuilding tools, brushes, advanced path controls that I overused to complete my drawings. Although there are countless free libraries of vector designs and illustrations I preferred to create my own in order to accomplish an authentic, personalised style.

METHODOLOGY & EXECUTION

In this section, I will analyse all the methods that I have applied within my project in order to accomplish the desirable design objectives and examine the knowledge of the literature that I was researching in. One of my intentions when thinking of the project idea was to create a good example that would help me consider better the research questions I posed and apply the theory that I was studying on my own work.

Inspiration
Working on the graphic design demanded a long period of brainstorming at first trying to harness my creativity. Knowing that choosing the final graphic style was determining for the aesthetic look of the whole project obsessed me. I persisted, trying different styles, colors, and schemes to find what would work out for me in the end. Trying to find the final idea of how the design should look like is an underestimated but in the end time consuming and quite significant process.

- 19 -

August 2010

The University of Edinburgh

While brainstorming, a second opinion gave to my work an important boost. After hours of effort in front of the computer, there were some moments of brain drain and ambiguity about the whole design process. The pieces of graphics started to look incongruous in my eyes. I was trying to use my design thinking in order to visualise how all the pieces can be combined harmoniously in a coherent composition, but even that was not applicable. This is the moment when I felt that I needed a second opinion on my ideas. Discussion with fellow students and supervisors was what I really needed. Moments of group brainstorming, with different opinions arising, helped me add ideas in my list. I was getting closer and closer where I wanted to be; in an ocean of ideas, innovative or not, realistic or not, ideas that I could keep and freely improvise with as I wanted.

Going back to the graphics of the first stage (which ultimately influenced my whole aesthetic direction) I attempted to find any subconscious elements that I can finally recognize as substantial for the evolution of the whole synthesis. Although I spent hours on the web saving any design of which I could get inspired and keep some elements, in my final designs I could not find any connections to the inspiration folder that I had created. At least not as much as I found in the drawings of my favorite director and producer Tim Burton and his six-minute black-and-white, gothic animation Vincent Price as well as the graphics of the new Xbox game Limbo that I was found exploring in my spare time. Without even noticing it the dozens of Tim Burtons dark movies and a random innovative and aesthetically advanced 2d game that instantaneously impressed me had possibly a strong reflection on my work.

Picture 1: Nightmare before Christmas (1993) stop motion fantasy movie

- 20 -

August 2010

The University of Edinburgh

Picture 2: Vincent (1982) animation film

Picture 3: Limbo (2010) XBox game

- 21 -

August 2010

The University of Edinburgh

Picture 4: SoW project Stage I

Design Objectives
Through the SoW project I focused on the design process and tried to support the usability and effectiveness of the whole website with an inspired, stout graphic design. The engaging graphic design had to be enriched with animations and interactive elements aiming at an impressive interactive experience. The graphic design (apart from a decorative effect for the website) should be a symbolic visualisation of the information that the website discusses. The differentiated graphics between the three stages of the website should reflect the three different situations and the idea of evolution should connect the three stages. Therefore, the graphic design and the composition of the design elements for the first stage should be quite influential for the design of the two further stages once they had to represent the evolution of the first stage under certain circumstances. The graphic synthesis is a paradoxical composition of abstract, weird and geometrically elegant models trying to find harmony. Emphasizing on the graphic design more than on the functionality and visualising the information I tried to increase the influence and the possibilities of combining the entertainment of the users with the education. Artistic elements, decorative and impressive details work together to capture the users interest.

- 22 -

August 2010

The University of Edinburgh

My whole experience in the design field until now persuaded me that the safest way to pursue aesthetic results is to combine wisely simple graphic elements. In the case of SoW project I challenged myself working with the composition of more complex illustrations towards a rousing graphic design.

Design Components
The design process of a website required a plan phase during which I had to think of how I could create a harmonic synthesis of the graphic designs and present well the information that I wanted. I started by setting priorities and making decisions over what I wanted to flaunt first, what I wanted to make look more attractive and what elements should collect the interest of the viewers. The central focus of the website is on the three stages where the user can have an explorative experience and interact with the content. The three basic pages are styled consistently in order to define the aesthetic style of the website and thats why the introductory page and the navigation elements keep the austere form of plain text without extra symbols and graphics. The concept of the evolution that is hidden behind the three stages required the use of three different color palettes which threatened the sense of unity between the pages. Using a neutral, warm color in the rest of the pages I try to balance the colorful stages and create a sense of harmony and relaxation. In contrast to the common environmental websites that overuse the green color I prefer the black and white combination for the menu and the introduction pages. I intend to prepare the user on the educative content of the website and differentiate surprising the user with an interface that doesnt remind them of the conventional green websites. After importing the graphics into flash I added more filters and effects on the syntheses in order to get the ideal colors, brightness and contrast once the transfer from the one software to the other denatured significantly the colors. The color combination is critical about the aesthetics of a website and thus I focused on choosing colors that dont jar against each other. Moreover, the colors are directly connected to the concept of the SoW project. The first level required dark colors that express pollution, sterility, devastation and decay. The second one is influenced by the sense of recovery after a natural disaster. The same time the tones of the colors give the sense of the rotten which could symbolically imply the death rebirth process. Finally, in the last stage the colors are vivid colors of florescence and stand for prosperity.

- 23 -

August 2010

The University of Edinburgh

Picture 5: Color palettes of the three stages The same symbolisms that are hidden behind the choices of colors are reflected in every single part of the illustrations. All the elements of each stage were designed to support the idea of the evolution.

Picture 6: Evolution of the tree between the three stages

Picture 7: Evolution of the character between the three stages

- 24 -

August 2010

The University of Edinburgh

The stages are linked to each other in a way that the user will make his personal choice and position them on his own timeline deciding which one represents the current condition of our world. The easy navigation between the three stages is still symbolic. The user can make his own choice and choose the world he wants to explore (or to live in real life). Composition: After importing all my illustrator models into Flash, I grouped them randomly focusing only on keeping the balanced sense of colour and then distributed the groups in different layers of my scene. In order to keep the abstract style of my graphics, I didnt focus on aligning the models strictly but I tried to distribute them symmetrically on my scene and balance the weights. Typography: Taking into account that the website is not using a lot of text, I was able to choose a font that brings into mind the handwriting and gives a more familiar sense to the website. Furthermore, it corresponds to the target audience and its educating character. Using only two fonts in the whole design I tried not to exceed the number of motifs that I use in order to keep the look of the website consistent. Graphic design: When I created the first illustrations I worked a lot to find the style I wanted for the graphic design and stick to it strictly. After having the initial satisfying drafts I kept working in the same line so that there would be a balance. An important feature of all my graphics was the black strokes around the models. Moreover the use of the same tools of Illustrator to add details like curves, curly edges made all the parts of the design coherent. The design of the natural environment, the character and the animals is totally abstract. I intended to create a different, weird and stylish version of the existing word. On the other hand, the design of the houses is almost 2d realistic with some more abstract. The abstract style of the environment drawings vs the strict geometrical design of the houses was a conscious choice that I made. I aimed at accomplishing the eagerness of the audience when exploring an alternative imaginaire world and simultaneously immersion to a situation relative to reality. His experience around the house illustration can correspond easily to the realistic everyday life. I worked with 2D graphics to make the designs more cartoonish and experiment with the Flash tools to create effects of depth. By practicing different scaling on the designs, arranging their position on the z axes and using blur effects for the objects that are far away or out of focus I achieved the parallax effect which works really satisfactorily when the user moves along the screen. Information navigation Design: The basic outline of the website is simplistic and minimal to frame the graphic synthesis and the main navigation is intuitive and clearly visible to the user. The buttons are positioned on the top of the page, where the user would expect them to be

- 25 -

August 2010

The University of Edinburgh

framed by a dark-coloured box in order to be noticeable and readable. I used the black-white contrast to present all the messages on the website in order to make them legible and easily distinguished from the colourful backgrounds and thus attract the uses attention. Interaction, Sounds & Animation: I make use of hidden interactions in some parts of the scene. The user is called to explore and find on his own the hidden messages while the only hint that he gets is the change of the pointer from an arrow to a hand wherever the interaction exists. The user can move with his mouse interactively along the stage, animate or scale the plants and the animals and make the messages appear in animated boxes. Animations on the background of the composition give a realistic sense to the stages. The animations together with the sounds that differ between the stages fill the users with curiosity and agony for the websites content and rouses him to stay tuned to explore it.

CONCLUSION
In this paper, I initially reviewed and took a closer look on the paths of inspiration and creativity. Researching for the brainstorming and creative thinking procedures, I figured out how manageable is to get inspired, come up with new ideas and move from passivity to activity. All these procedures of directed thinking towards the proper creation have an actual impact on it and characterise its nature and quality. The subconscious mind is an even more interesting factor that can be critically influential for the designers work. Creativity brought by the subconscious is the most common reflection on the design compositions. Every single subliminal message stored in the humans mind, memories, experiences, emotions and passions are all externalised at some point as ideas and inspirational designs. When trying to find a balance between the designers character and the style of his work with the clients queries I came up with the notion of aesthetics and the huge power of it on directing the work of the designer and make it successful and valuable. What is more interesting lately to be discussed is the aesthetics huge effect on the HCI. Focus on the aesthetics can transform the interactive designs in powerful mind leading tools and that was also my motivation for a different approach of designing an environmental website. I pursued to influence the minds of the visitors, and utterly engage them. If people reconsider the importance of the aesthetic factor combined with the power of technology and web, new perspectives for successful and more effective education will evolve.

- 26 -

August 2010

The University of Edinburgh

REFERENCES
Audette, A. H. (1993). The Blank Canvas. Boston & London: Shambhala. Bono, E. d. (1995). Serious Creativity. Journal for Quality and Participation . Christensen, M. (2004). Introducing Excitability. Aesthetic approaches to human-computerinteraction proceedings of the NordiCHI 2004. Tampere, Finland. Cross, N. (2007). Creative thinking in design: an introduction. ACM International Conference Proceeding Series; Vol. 364 Proceedings of the 2007 Symposium on Science of Design (pp. 23). Arcata, California: ACM. Donald W. Taylor, P. C. (1958). Does Group Participation When Using Brainstorming Facilitate or Inhibit Creative Thinking? Administrative Science Quarterly , 23-47 . Elliott, R. (2006). Wide Awake, Clear Headed, and Refreshed: Medical Hypnoanalysis in Action. Winfield, Illinois, USA. Fizer, J. (1963). The problem of the Unconscious in the Creative Process as treated by Soviet Aesthetics. The Journal of Aesthetics and Art Criticism , 399-406. Hospers, J. (1969). Introductory readings on aesthetics. Lindgaarda, G., Fernandesa, G., Dudeka, C., & Browa, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression. Behaviour & Information Technology, Volume 25, Issue 2 , 115-126. Lowgren, J. (2008). Five things I believe about aesthetics in interaction design. Meyer, A. (1907). [untitled]. The Journal of Philosophy, Psychology and Scientific Methods, Vol. 4, No. 3 (Jan. 31, 1907) , 79-82. Norman, D. A. (2003). Attractive thinks work better. Osborn, A. (1963). Applied imagination: Principles and procedures of creative problem solving. New York: Charles Scribners Son. Rawlinson, J. G. (1986). Creative Thinking and Brainstorming. Paperback. Stolnitz, J. (1960). Aesthetics and the Philosophy of Art Criticism. Thorlacious, L. (2007). The Role of Aesthetics in Web Design. Nordicom Review 28 , 63-67. Tractinsky, N. (2004). Towards the study of aesthetics in InformationTechnology. Twenty-Fifth International Conference on Information Systems.

INTERNET SOURCES
http://euphrates.wpunj.edu/courses/arts350/aesthetics.html http://theprodesigner.com/basic-graphic-design-rules/ http://www.cennydd.co.uk/2010/beauty-in-web-design-part-1/ http://en.wikipedia.org/wiki/Gestalt_psychology http://www.smashingmagazine.com/2010/02/21/art-manifestos-and-their-applications-incontemporary-design/

- 27 -

August 2010

The University of Edinburgh

http://jasonlarose.com/blog/design-and-the-subconscious-mind http://science.jrank.org/pages/20855/aesthetic-attitude.html http://en.wikipedia.org/wiki/Halo_effect http://en.wikipedia.org/wiki/Brainstorming http://en.wikipedia.org/wiki/Creativity http://en.wikipedia.org/wiki/Aesthetics http://www.creativepublic.com/usability-vs-creativity.php

SOUNDS
Wind Sound, Martin Parker http://www.infrared.ace.ed.ac.uk/index.cfm?searchFor=All&searchString=wind%20sound&C FID=538360&CFTOKEN=39140035 GardenofEarthlyDelights, PeteVilk http://www.infrared.ace.ed.ac.uk/index.cfm?searchFor=All&searchString=gardenofEarthlyDel ights&CFID=538360&CFTOKEN=39140035 Bird song, user:reinsamba http://www.freesound.org/samplesViewSingle.php?id=33827

- 28 -

August 2010

The University of Edinburgh

- 29 -