Sunday, 23 October 2016

Presentation Script

Slide: Storytime - Project backstory/how it started
I overheard my neighbours having this conversation with her young sons recently, it reminded me of the sort of conversations i used to have with my mother. These conversations are an opportunity to give young children a first exposure to the world of science, but my neighbors and my mother missed the opportunity to do so

Slide: target audience - Why children are our audience
Early exposure the science builds critical thinking skills and may help children get interested in the subject. Children's attitudes toward science concepts and learning are essentially shared during the early years of their education and become hard to change by the time they reach adolescence.
(karmani & aldemir, 2015, p1505)

Slide: Tangential learning - Why use this method of teaching?
Trying to improve the school system is a significant challenge. An alternative approach is to facilitate tangential learning. Tangential learning is the process by which people will self educate if a topic is exposed to them in something that they already enjoy.

Slide: Tangential learning - Introduction to Play as a solution
To maximize the effect of tangential learning, children must be enjoying themselves, which can enhanced by carefully constructed play worlds. If a child is not engaged in an activity they will develop an affinity toward it. One of the best ways to ensure children are enjoying themselves is through play. By engaging children through play, we are tapping into what is already a strong component of children's learning.   

Slide: Tangential learning - Building a playworld
However if the goal is to facilitate learning rather than directly educate, entertainment and education need to combine so children don't get too bored. Being to direct with a topic may cause an aversive reaction, since the game is clearly just an educational tool, rather than a game.

When constructing play worlds with the goal of creating tangential learning, the world must be carefully constructed to ensure children can connect with it.

Slide: Tangential learning - Do’s and Dont’s
Our research lead us to a certain criteria, a list of do’s and don'ts to ensure our playworld was real enough to teach, but fun enough to engage.

  • DO Base characters on real life concepts
  • DON'T make things up
  • DO incorporate loosely inspired scientific concepts   
  • DON'T require pre-existing knowledge
  • DO use visual cues to advance gameplay
  • DON'T use jargon

Slide: Overview of game narrative
To turn this into a gameworld we went back to the earlier conversation about germs and we decided to start with a simplistic narrative based on the immune system. Children play as white blood cells, the heroes of immunity and play to overcome a bacterial infection before the body falls sick.

Play Video (our solution)

Slide: Game Mechanics - intro
Every game has its rules, the mechanics that make it tick. The most intrinsic of which is the goal, the end game, the winning condition and of course the challenge that must be overcome.
Slide: Game Mechanics - The goal
The goal of Cell Squad is to defend the blood vessel, hold back the invading bacteria for as long as possible and prevent the body from getting sick. The mechanic here is tower defence. The player must actively guard the vessel or risk losing the game. Allowing the vessel to be reduced to 0 health will result in a lost game, running out the timer with health still on the board will result in a successful game.

Slide: Game Mechanics - The challenge
Simple as it may sound, dotted around the level are areas (sweat glands) which become ‘infected’ by stronger bacteria, and if left alone cause the number of invading bacteria to increase, and eventually overwhelm the player. The challenge is to defend the vessel, while simultaneously preventing the bacteria from spreading.

There are 5 areas that must remain cleared. If more are infected that clear - the spawn rate increases, if more are clear than infected - the spawn rate decreases. It is up to the player to decide when to leave the vessel to clear areas, and when to defend the vessel to prevent damage.   

Slide: Game Mechanics - Dynamics
Infected areas operate individually to each other, each having its own chance to become infected as time goes on. This acts as a gameplay balancer. The more areas a player clears, the more areas may become reinfected. This ensures that throughout the game play is neither too hard, nor too easy and the player always feels reasonably in control of the outcome. If the player is doing really well, things may pick up again rapidly. If the player has failed to keep areas clear, a strategic loop of the map may help to turn things around. The game responds to player actions, keeping things balanced and r

Slide: Game Mechanics - boss fight
At the end of a round a boss fight occurs. the mutated Staph leader appears to deal with the player since her minions could not. Befitting of a boss fight, she is bigger, stronger and meaner. This fight plays differently. The Gameplay was designed to invite emergent and varied strateg from the player in order to win. For instance, if the player stays close and attacks to often, she will use her fist slam for melee damage, but if the player stays at a distance she will use her ranged attack, throwing one of her minions at the player. She also has the option force the player backward, preventing any possibility of attack and summon minions to disrupt the players movements.

Slide: Level Design
My biggest priority while designing the level was accessability, making sure the player can get to and from the outer areas of the map using hit and run tactics. Key to this was ensuring the infection points were all an even distance from the centre of the map, where in the blood vessel was located. This lended the level a hub and spoke playstyle. This also helped break the level into two key areas, the outer infection points and the arena area in the middle.

Alongside accessibility came the sightlines, making sure the player can observe the infection points and make decisions despite the fixed camera angle. By roaming around the centre area, the player is able to ascertain whether an area is infected or not. This is aided by the varying heights of the level, putting objectives up high to increase visibility. This also helped to create contextual and natural borders the playable area.

Slide: Level Design - Aesthetic
For our demonstration level we chose to choose the dermis of the skin (also known as the skin underlayer). The skin, being the first line of defence for our body, has many interesting biological reactions that occur so that we stay healthy. Here, our immune system and various bacteria are in a constant battle. In this case, we focused on white blood cells known as macrophages and neutrophils and invading Staphylococcus aureus bacteria (commonly known as staph… or boils!)

The design was inspired by microscopic views of this skin layer as well as scientific diagrams. The characters and these interactions are known to occur in this skin layer. We also wanted to make it recognisable as skin by adding hair follicles throughout the map.

Slide: Character design
Character design - Each character was specifically designed to match their real world counterpart. Consideration was especially made in regards to the colour palette. Fillie the neutrophil, for example, has purple bands under the microscope - we focused on the details, such as the band on her back - in biology, the band indicates the age of the neutrophil - hers indicates she’s a very young cell! This informed her playful animations.

The bad guys, Cluster and Grandma, are a bacteria species known as Staphylococcus aureus, and its mutated counterpart MRSA, respectively. Their colour palette is referenced through how these bacteria look under the microscope when stained - this species (also known as gram-negative) show as purple, which is why we kept their colour palette as such.

We want our players to link these colours to the type of species they are, similar to how Pokemon or Skylanders have element types. By using this formula, we hope that children can gain a further interest into the types of organisms out there, big or small, seen or unseen!

Slide: Character animation
Character behavior - the character attacks mimic the biological reactions that happen in the immune system. For example, Luke, being a macrophage (‘big eater’) eats invaders such as bacteria. Fillie, also a type of eater also emits chemicals that kill bacteria. For the purposes of game mechanics, we have omitted Fillie from eating bacteria (she’s vegan now!). Children will be able to associate these attacks with how their immune system works. Their bodies are a lot more interesting when viewed under a microscope!

Slide: Hud design - Lucas to fill
The hud design and visual language was inspired by biology, and the concept of using technology to look into another world, using rounded, organic shapes within a distinctly scientific layout. The touch elements, buttons and joystick remain on the screen at all times, and were designed colorless and transparent to avoid conflicting with the richly coloured background and distracting from gameplay. The other elements, player health, infection rate and area infections are all hidden from view until utilised in context during play. For instance, when a player clears an infection, the UI will appear to notify the player of their success, and show them how many are cleared, and how many are not. Similarly when the player takes damage the health bar pops in, communicating to player both that they have taken damage and how much.     

Slide: Extended universe
To reinforce the theme of the virtual world being apart of our own as well as bridge the gap between the virtual and physical world, we have designed a series of toys. The toys will be used by children with their peers in their own play worlds, enabling them to use their own imaginations to extend and enhance the scenarios experienced through more structured interactions. The toys will be physical and come in a range of designs matching the microorganism characters.

The toys will come with some educational information – just enough to inspire curiosity and further exploration on the part of the child. There will be toys that will appeal to all ages, including simplified plushies for the younger children, and articulated figures for the older children.

Key to this narrative is the inclusion of the child in the story. This means that when they are playing the game and collecting micronauts, they are are actually collecting their own creatures. Similarly when the pickup a plush toy version of one of the microorganisms, they feel a sense of ownership and companionship for the character it represents. It is a constant symbol of their role in the play world and reminds them of the lessons they have learned, encouraging curiosity about the world around them.  

Slide: sign off
Tangential learning is known to be a very effective method of independent learning, and if used properly could replace many current methods of independent study as a means of education children.  We hope that after playing these games children will be inspired to learn more and develop an interest in science.

Final Pitch Video Script

0:01 - 0:08 There are places in the world we cannot see, where we cannot go, places we forget exist.

0:08 - 0:15 A place in constant battle against an infectious army of bacteria who are attempting to
invade the body and cause havoc,

0:15 - 0:20 and rumours are an unnamed enemy of untold power is never far behind…

0:20 - 0:26 Together, a hopeful team of heroes gear up to take on the infection and defend their
0home.

0:26 - 0:29 These heroes are known as the Cell Squad

0:29 - 0:36 In the core game you play an elite team tasked with defeating the invading forces of
bacteria,

0:36 - 0:42 You will fight as various heros through a unique environment, clearing out infections
throughout your mission to defend the body.

0:42 - 0:49 by combining digital games with the way the immune system works, we are connecting
play with education.

0:49 - 0:55 Cell Squad is a science fiction arcade strategy game, and just one piece of the greater Cell
squad universe.

0:55 - 1:02 Players enter the website where they will be able to play and download Cell Squad and
other games from the series.

1:02 - 1:10 They can read and Learn more about the heros they encounter and toys will be available
from the shop and parents can learn more about the positive effects the series can have.

1:10 - 1:14 The best time to get kids interested in science is in their childhood years.

1:14 - 1:22 By getting in early and combining learning with play, it is our hope that they will take this
curiosity and explore the world around them.

Final Website







Saturday, 22 October 2016

Wednesday, 19 October 2016

So much cheese



Per Tanya's feedback, I made our videos even more cheesier! 100% extra cheese you'll get the runs!


lol

Tuesday, 18 October 2016

Cell Squad Imagery

I did a lot of research into biological visual language. I looked at bone marrow, veins, and maths to work out a voronoi background, which I also used as an alpha in the game itself.

(to be adjusted in indesign. Fillie will be redrawn to be in 2D, perhaps with grandma in the background)


Loading screen... buttons to be added

Misc stuff:


Designing Websites For Kids: Trends And Best Practices

Designing Websites For Kids: Trends And Best Practices

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craftflexible front-end design patterns and making future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →
How would you like to design a beautiful, colorful, stimulating website that is captivating, memorable and allows you to let your creative juices flow without the need to worry too much about conventional usability and best practices? In today’s Web design market, it’s rare that such a project would present itself — unless you were asked to design a website for children!
Websites designed for children have been largely overlooked in Web design articles and roundups, but there are many beautiful and interesting design elements and layouts presented on children’s websites that are worthy of discussion and analysis. There are also a number of best practices that are exclusive to Web design for children’s sites — practices that should usually not be attempted on a typical website.
This article will showcase a number of popular commercial websites targeted towards children with an analysis of trends, elements and techniques used to help keep children interested and stimulated.

Design That Stimulates The Senses Link

Humans are mentally stimulated by a number of factors, and this is especially true with children. Successful children’s websites implement a number of elements and design principles that create an environment suited for a child’s personality and interests.

BRIGHT, VIVID COLORS LINK

Bright colors will easily capture and hold a child’s attention for long periods of time. Although color choice is a primary factor in designing any type of website, this is especially true when designing a website for children since colors make a big impression on children’s young minds. Color choices and combinations that would likely be rejected or laughed at when designing a typical website may be welcomed on a website for children.
How many of the color combinations used in the screenshots below would succeed on a website aimed at an adult audience? Not many. So, when designing a site aimed at kids, use bright, vivid colors that will visually stimulate in an unforgettable way.
PBS KIDS
Herman’s Homepage
Herman's Homepage
Funbrain Playground

A HAPPY MOOD LINK

Kids will remember and return to a website if their experience is a happy one. Elements can be incorporated into the design to ensure that a cheerful, positive mood is presented.
Mickey Mouse Clubhouse creates a happy mood by making Mickey himself a visual focal point on the page. His happy face and body language help enhance this happy feeling, creating a welcome atmosphere.
Mickey Mouse Clubhouse
The Play-Doh website creates a happy mood using a beaming child as the focal point.
Play-Doh
The Fifi and the Flowertots website has a large smiling Flowertot character in visual focus, creating a happy mood.
Fifi and the Flowertots

ELEMENTS FROM NATURE LINK

Children are stimulated by recognizable elements that they can relate to. Because children’s experiences in life are limited, some of the things they are most familiar with are found in nature. Natural elements such as trees, water, snow, and animals are used in the websites shown below. In many cases, these elements are overemphasized through size or simplicity of design.
The Disney website alters its theme depending on what product is being promoted. In this screenshot, they use a Grand Canyon-like landscape to create a memorable visual experience.
Disney
Discovery Kids uses an underwater theme.
Discovery Kids
Club Penguin presents an arctic theme.
Club Penguin
CBC Kids uses a seasonal theme based on simplistic, eye-catching graphics.
CBC Kids
PopCap Games uses a grassy landscape in front of large rays of sun.
PopCap Games

Larger-Than-Life Design Link

Large design elements have proved to be effective in all types of Web design, demonstrated by the fact that large typography, large buttons, and large call-to-action areas have become commonplace in modern design. Because children are naturally drawn to simple, obvious, and recognizable objects, websites designed for children will increase their effectiveness through the use of large design elements.

ANIMATED CHARACTERS LINK

Large, animated, speaking characters are a fascinating and captivating way to grab and hold a child’s attention. Many sites designed for children use this element effectively.
Barbie
Mr. Rogers' Neighborhood
Disney Princess
Thomas the Tank Engine
Barney & Friends

DEPTH IN DESIGN LINK

Children like to let their imaginations run wild in a world that looks and feels real. This kind of atmosphere can be created through depth in design elements. This might include extruded shapes, shadows, landscapes, beveled effects, shiny gradients, or floating objects. Often, many of these elements are present in cartoon-like displays, as shown below.
The Webkinz “Adoption Center” uses shadows, a life-like character, and other 3-dimensional elements to create a design that has depth.
Webkinz
Poisson Rouge creates a deep, realistic atmosphere using a window that looks outside at the sun, along with a number of other 3-dimensional elements.
Poisson Rouge
Rainbow Magic creates depth in their design through a Flash-animated landscape scene that moves as the user hovers over different elements.
Rainbow Magic
In any website design, navigation and call-to-action areas should be focal points. Children’s website designers can oversimplify these areas so that children can navigate easily. Text-based navigation on children’s websites would not be as effective as large buttons and graphics, because they would lack visual focus on a page.
Peppa Pig has a horizontal navigation bar that includes large icons and easy-to-read descriptions for each item.
Peppa Pig
The Winnie The Pooh website incorporates their navigation bar into their “forest” theme, using large wooden graphical elements that won’t be overlooked by the user.
Winnie The Pooh
Sesame Street has an easy-to-locate horizontal navigation bar, along with large call-to-action areas.
Sesame Steet
My Little Pony uses text-based navigation, creating a less-graphical experience, which allows focus on the content elements. This might be ideal in some situations, but on a children’s website a graphic-based navigation bar is more likely to be effective.
My Little Pony
Advertisement
Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and makingfuture-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

User Interaction Link

Probably one of the most important ways for a children’s website to succeed is to include elements that allow a child to interact with the site in some way. Children don’t want to do intense reading or research; they want to play and be entertained.
On a typical website, certain design elements are viewed as distracting, unusable, and cumbersome. On a child’s website, those same elements are viewed as an effective means of attracting users.

INTERACTION THROUGH ANIMATION AND SOUND LINK

Effects and experiences created with Adobe Flash are discouraged in typical modern Web design, but on children’s sites there is almost no other option. It’s true that JavaScript animation and effects have come a long way because of the many JavaScript libraries available, but the ease with which complex animations can be created with Flash makes this method the first choice for many commercial websites designed for kids.
The Pauly’s Playhouse site, like most of the websites featured in this article, is built entirely in Flash.
Pauly's Playhouse
The Hot Wheels website includes an animated “car of the day” that zooms onto the screen when the page loads, creating visual interaction.
Hot Wheels
Roary the Racing Car has a brief “flash intro” with a “skip” button. This is an old-school trend in typical Web design, but is an effective means of catering to a child-based audience. The intro animates through a road until the characters appear on the horizon. This helps the user feel as though they’re personally entering Roary’s animated world.
Roary the Racing Car
The Yahoo! Kids navigation bar is created with Flash and makes sound effects and animates when its items are hovered over. This trend is very common on many of the sites featured in this article.
Yahoo! Kids

INTERACTION THROUGH VIDEO LINK

Television is known to captivate child audiences for hours, which is why “Saturday morning cartoons” have for decades been a lucrative part of the broadcast schedules for many TV Networks. Similarly, video on a child’s website adds a fun, interactive, and educational aspect to a site’s content.
Kids' CBC - Video
Yahoo! Kids Movie Guides
National Geographic Kids - Videos

INTERACTION THROUGH GAMES LINK

What child does not enjoy playing games? One of the most effective ways to entertain, educate or otherwise occupy a child on a website is to include a “games” section. Almost all the websites researched for this article include games that educate, stimulate, and allow direct interaction, while also incorporating many of the design elements already discussed. Below are some examples.
CBeebies - Gordon the Garden Gnome
Toy Story - Woody's Big Escape
Disney Pixar’s World of Cars allows users to create, share, and race their own custom cars.
Disney Pixar - The World of Cars

PRINTABLE ELEMENTS LINK

Kids like to have something tangible to take with them, to help them remember their experience. Printable pictures and colouring pages allow kids to have a keepsake of their experience, while giving website owners an opportunity to enhance and promote their brand outside of the computer screen. Below are some examples of printable colouring pages on kids’ websites.
Pingu Coloring Pages
Pingu Coloring Pages
Crayola Digi-Color
Peppa Pig Colouring Pages
Thomas and Friends Online Colouring
Thomas and Friends Online Colouring
Teletubbies - Print To Color

Unconventional Methods Link

We’ve already discussed a number of elements that, in modern typical Web design, are now considered unconventional. Sound, animation, and large obtrusive graphics are often frowned upon in typical Web design. On children’s websites, these elements help the user experience. Other unconventional elements and design choices are discussed below.

CHANGING THE CURSOR LINK

This is absolutely viewed as a bad practice in standard Web design, but can be a fun, effective way of adding a playful element to a kids’ website theme. This can be done using dynamic HTML, but is more often done via Flash.
The cursor on the Discovery Kids website turns into a snapping bear trap graphic.
Discovery Kids
The cursor on the Sesame Street website is followed by a yellow star when it hovers over standard HTML elements, and turns into a yellow star surrounded by smaller animated stars when the cursor is moved over clickable Flash elements.
Sesame Street - Games

TALKING NAVIGATION LINK

Sometimes a navigation bar will produce sound effects, but in other cases, the navigation links will sound out what they represent in a cheerful voice.
The PBS KIDS navigation bar speaks using children’s voices, when the user hovers over it.
PBS KIDS Navigation Bar
The CBeebies navigation bar uses a voice to sound out the destination of each navigation item.
CBeebies Navigation Bar
The Bob the Builder navigation bar speaks to the user on mouseover.
Bob the Builder Navigation Bar
The Fifi and the Flowertots features a speaking navigation bar.
Fifi and the Flowertots

BREAKING THE GRID LINK

While traditional modern Web design techniques have embraced the benefits and aesthetics of grid-based design, kids’ websites can break free from an overly structured layout to create a unique world that a child will enjoy experiencing.
This is not to suggest that using a grid as the basis of the design is wrong. It may be beneficial to start with a grid, then design elements outside the grid in a controlled manner. This flexibility in design and layout is demonstrated on a number of the sites already discussed, but is also evident in the navigation bars of the examples below.
The navigation bar on the Spongebob Squarepants website is slanted, going against convention in typical grid-based Web design.
Spongebob Squarepants
The Hannah Montana website features navigation bar graphics that break the grid.
Hanna Montana
The In the Night Garden website features a very unusual navigation bar design that bears little resemblance to that found in a conventionally-structured design.
In the Night Garden
Below are some examples of websites that utilize a more rigid, grid-based format, and as a result are not as unique, memorable, or captivating as some of those already considered in this article.
Kids WB is rigid, and not as memorable.
Kids WB
The Crayola website is somewhat old-school with its grid format and vertical navigation.
Crayola
Neopets is also designed on a more structured grid.
Neopets
Granted, in some cases a stronger grid-based design would be necessary if the audience was an older child audience, as is the case with SI Kids, shown below.
SI Kids

Taking Responsibility Link

If you are attempting to reach the minds and hearts of young, impressionable people through an online experience, you are entrusted with a weighty responsibility. Children are mentally fragile, and easily affected by what they see, hear, and touch. There are certain factors that need to be addressed on every children’s website, to ensure no harm is being brought to the children.

PROMOTING EDUCATION LINK

Games and other interactive elements should be created not just to promote your company’s brand and identity, but to help educate and train young minds in a beneficial and positive way. Promoting education through games and activities will show that your company cares about the user and how their online experience might affect them in the future.
Online Learning Games from Fisher Price include games that vary according to age group.
Online Learning Games from Fisher Price
Funbrain promotes itself as “The Internet’s #1 Education Site for K-8 Kids and Teachers.”
Funbrain

INFORMATION FOR PARENTS LINK

Parents will be keeping a close eye on their children’s internet habits. Many children’s sites are aware of this, so they include information that is geared towards parents. Sometimes this is in the form of a tip, as is the case with the Sesame Street games website, or simply a navigation item that points to a parent’s section.
Sesame Street Games includes a “Parent Tip” box.
Sesame Street Games
BEN 10 has a “Parent Stuff” link in their primary navigation bar.
BEN 10
Thomas the Tank Engine includes a “parents” link.
Thomas the Tank Engine

Usability Testing Link

Finally, one of the best ways to help build a successful online experience for children is through watching children navigate and interact with your site’s games and other unique features. Not all companies will have the budget for extensive testing, but almost all will have the ability to do at least a minimal amount of testing — even if it’s with just one child. This will allow you to see the site through a child’s eyes and make any necessary modifications, the same as would be done in any usability tests.
Companies like Disney, Sesame Street, and PBS, of course, have been studying the behaviour of children for years, so many of the examples showcased above could be utilized to form the basis for a successful children’s website, even if no usability testing is done.

Conclusion Link

Here is a summary of both conventional and unconventional best practices for designing a website for kids:

CONVENTIONAL BEST PRACTICES LINK

  • Create elements that are large and visually memorable
  • Use bright, vivid colors that stimulate the senses
  • Incorporate elements from nature
  • Create depth in the design
  • Add navigational elements that are large and easy to find
  • Use video
  • Include printable elements
  • Break the grid
  • Make modifications based on usability testing

UNCONVENTIONAL BEST PRACTICES LINK

  • Create a happy, playful mood
  • Use animated characters
  • Use graphic-heavy navigation bars
  • Use Flash animation abundantly
  • Embed motions and sounds that trigger on page load
  • Include a “games” section
  • Change the cursor to contribute to the theme
  • Add voices to navigation rollovers
  • Be accountable to both children and parents
A Web designer who has worked on a children’s website would likely say that it was one of the most fun and interesting projects they’ve had the privilege of working on. If you ever have the opportunity to create a user experience that is geared towards children, be sure to follow some of the proven methods demonstrated on many of the sites discussed here, and your website will have a good chance to be a big hit with children.