Angery Animals: Eco House Visual Interactions N8851239 Proposal Ashleigh Devenish
Contents Introduction Contextual Review Concept Visual Interpretation of the Concept Personas Senario Wireframes Moodboard Art Direction Prototyping Reference List 2 3 4 5 6 7 8 9 10 11 12 1
Introdution Angry Animals: Eco House is an interactive web game designed to teach children aged between nine and twelve about how houses can be sustainable and the effects on the environment, specifically the effects on animals. Sustainable living is important for children to learn about as they are the future s homeowners and according to the UK Department for Communities and Local Government In 2005, 27% of the UK's CO2 emissions (around 150 million tons a year) were attributed to heating, lighting and running domestic buildings; of this, almost three-quarters comes from space and water heating (2007). In this game cute animals are annoyed and surround your house protesting that you do things to have to make your house more sustainable. As the user investigates how satisfy the animals they learn about ways they can improve the environment through sustainable housing and as they improve their house the animals become happy. 2
Contextual Review NRDC: Green Squad NRDC: Green Squad is a web game where the user hovers their mouse over objects and a bar indicates if it is something to click on. After they click on it they get a popup with lots of text. The aim is to click on all things that are harmful to the environment. There is no progression and it is not very engaging. The style is a messy hand drawn style, cliché to environmental awareness. The game could be better if there was less text in popups, popups could be linked to it better and not just an average popup and if there was progression where you achieve something. The style also looks dated, as it is not often used these days. Colossal Squid: Anatomy Colossal Squid: Anatomy is not so much an online game, but more an interactive activity to convey information in a more interesting way than just reading and looking at images. The style is much more modernised, the popups are much less intrusive, have less text and only appear if you click for more information. The icons to click on follow a pattern that makes it clear what to click on and since it is not a game it doesn t have progression, but it flows so smoothly between each element that it doesn t at all feel jarring or hard to understand. There is a 3D element to this which makes it more interesting as it floats on the screen. There is background music and you can only make it stop by opening a popup which is a bit annoying. It is aimed at an older audience that this project s target audience, however elements can be taken from its interaction design. 3
Concept i In the game the user can scroll around the outside of your house and see what can be improve, indicated by an angry animal. When you click on an icon the animal tells you what you can do and how it will benefit the environment, you can get more information or do what they say. There is a bar at the bottom of the scene about how annoyed the animals are and after you select an action for the house it is added to your house and the bar gets more blue and animals will be happier with you and less will be there looking angry. This will educate children about what you can do to live sustainably and what the effects are on the environment through short dialogues from the animals and through the actions they perform in game. It will have building and animal themes as, stereotypically, children love animals and enjoy building. It does not have a lot of text and it has an aim that has actual effects, as what you do improves the scene; this makes it more engaging. From experience, interactive websites for kids such as The Peace Doves and NRDC: Green Squad became boring as they either had too much text or all you could do was click on things to get text to appear, nothing was achieved. You can instal solar pannels to reduce the amount of energy you use. i 4
Visual Interpretation of the Concept (Flagg, 2015) A lot of projects do in this genre have a green colour scheme and cardboard; this has been overused, so this project will not involve that and look more like game apps that children currently play, in particular, Crossy Road (Techno FAQ, 2015). Crossy Road and Minecraft are games that are played by children in this age group and so they have influenced the style of this game. The blocky style will link in to the theme of housing as the nature of many houses are blocky. This is a different style to many other sustainability games and will help it to stand out from them. As it is blocky the shapes used will be squares and triangles. Red will be the primary colour in the colour scheme as it can be used to show the emotion of anger. The colours won t have the highest value, as the animals are cute and softer colours will emphasise this. However the colours also won t be pastel as that could make it look feminine. It has a double complementary colour scheme, with a balance of hot and cold colours, as the blue, green and orange-brown represent colour in real life. Title font Bulky Pixels (Flagg, 1917) Shine Pro There are three typefaces used for Angry Animals: Eco House. The title one is a blocky 3D font to link in to the blocky 3D style. The heading font is blocky, but not 3D as it could look tacky as a heading. The body font is a san serif font called Shine Pro as it is easier to read than the other fonts. The animals are cute and annoyed looking so it makes the user want to help them in their goal of improving the environment rather than if they were to be attacking which makes the user want to fight back. They will also always face the viewer like the American war propaganda, Uncle Sam, as it creates a personal experience. Ideally as the icons turn it will contrast the background and attract the user to click on them. Alternatively the icons could be made flat to contrast the environment or will follow a similar technique to the distinct icons to click on which are used in Colossal Squid: Anatomy. 5
Personas Persona 1 Luke Brown is an 11 year old boy. His interests are Minecraft and riding his bike or scooter with friends. After school he pays soccer on a Wednesday and on the other days he hangs out with friends in his street. After dinner he gets to play on his computer. Persona 2 Kassie Jones is a 9 year old girl. Her interests are music and her favourite ipad games, which includes Candy Crush Saga and Crossy Road. After school she plays with her brothers, has sleepovers with her friends or plays on her mum s ipad. She also has open access to a computer. 6
Scenario Angry Animals: Eco House is intended to be played is at home during down time on a computer. An example of this is that Luke Brown would play after dinner and Kassie Jones would play when her mum is using her ipad. Many children are still play games online, such as on the ones Nickelodeon s website (Nickelodeon, 2015). If the game takes off then it could be adapted into a tablet app with more levels. Many computers now have touch screens, so it will support touch screens as children are inclined to use touch screens. It has an educational aspect to it, but it will not be used in school as sustainable housing is not covered in the Australian curriculum, but learning about this topic is important (Education Services Australia, n.d.). 7
i i i Wireframes The pathway the game will follow is from the main screen you can go to the info page which has info about what the player has unlocked, and play which leads into the game. The player will be able to scroll horizontally around the house and click on animals that the always facing them. After they click on an animal, the animal will tell the user what they can do and the user can choose to activate it or find out more about it. If the select info they go to a screen with info and can go back to the game by pressing the game icon. If they select activate, they will do what the animal said, but they will get a small icon on the info button that inform the user that there is new information there. Vegitable Gardens Solar Pannels Angery Animals: Eco House Play Info 8
Moodboard 9
Art Dirrection Angery Animals: Eco House These screens are the home screen (top left), the play screen when you click on an animal (bottom left) and the info screen after you have unlocked one change to the house (bottom right). Play Info You can instal solar pannels to reduce the amount of energy you use. Solar Pannels i Solar Panels provide renewable energy for free dirrectly from the sun; unlike fossel fuels. Maecenas sodales lareet purus ultricies blanit. In semper 42% nisi, non malesuada nisl pellentesque. 10
Prorototyping The prototype of Angry Animals: Eco House will be made in Adobe Flash. The scrolling will be shown through snapshots of multiple angles. Each animal will be able to be activated throughout the game and some won't be able to be unlocked until a certain percent of completion. However it the prototype only one will be able to be activated. There will be hover and active buttons as it will be made for computers and touch screen computers. Since there will be snapshots in place of scrolling in the prototype the hover feature will not function. The screens that will be shown are the home screen, the scrolling screens and the entry level to about the screens. I have had experience using flash previously, including the use of buttons. Since there will be hover states for other buttons and pop-up speech bubbles, it would be better to do this in flash than other mediums like invision. Below is the timeline for the prototyping. Timeline Asset Creation Layout Actions Alpha Testing Review & Modify Beta Testing Review & Modify Export Documentation Print Submit Week 9 (13-19 Sep) Week 10 (20-26 Sep) Break (27 Sep - 3 Oct) Week 11 (4-10 Oct) Week 12 (11-17 Oct) Week 13 (18-24 Oct) 11
Reference List Education Services Australia. Curriculum. n.d. Accessed August 21, 2015. http://www.australiancurriculum.edu.au/humanitiesand-social-sciences/geography/curriculum/f-10?y=4&y=5&y=6&y=7&s=gku&s=gis&layout=1 Flagg, James. 1917. Uncle Sam". Image. Accessed August 12, 2015. http://commons.wikimedia.org/wiki/file:unclesamwantyou.jpg Nickelodeon. 2015. Games Accessed August 21, 2015. http://www.nick.com/games/ US, Department for Communities and Local Government, 2007b. Homes for the future: more affordable. More Sustainable the Stationery Office. Accessed August 7, 2015. https://www.gov.uk/government/uploads/system/uploads/attachment_data/file/ 243191/7191.pdf 12