Illustrating Tinybop’s 1st App

Some longtime friends of mine recently started a company called Tinybop, that creates systems-thinking apps for children. Their first app, The Human Body, launches today and I’m proud to say that I contributed the 200-odd illustrations of bones, veins, nerves, teeth, guts, and chewed-up-food of which it is comprised. Anything that a real body does, this body does—it eats, digests, pumps blood, gets sick, burps, runs in place, you-name-it—all at multiple zoom levels with a realistic variety of responses to the user’s interaction. Raul and Youngna conducted the biology research with an attention-to-detail tantamount to at least a semester of medical school, consulted with doctors, and sent hundreds of images of each organ to me, which I interpreted in this not-quite-textbook style.

However, the reason I really wanted to work on this app (aside from friendship) is because of the somewhat radical stance that Tinybop takes in promoting intrinsic curiosity and creative play. The app is intentionally non-linear—eschewing a goal-oriented rewards system (familiar to anyone who has racked-up points a video game) for freeform exploration. In the app there is no next-level, no chiming sounds-of-affirmations, no-counter-towards-victory. It steers clear of “the peril of gold stars” (as I recently heard Jack Hitt describe it) —the way in which external approval seems to interfere with the development of natural creativity and curiosity. (It is a classic psychological experiment: in lab settings, intrinsic interest in an activity has been shown to decline when the same activity is framed as a means to some extrinsic goal—either a tangible reward or adult approval…otherwise recognized in the adult world as the phenomenon of “once it’s a job, it’s no longer fun.”) In its very structure, the app imparts the idea that learning is fun—a reward unto itself. Kids are encouraged to ask questions about everything, and act on their own agency in choosing a route through the it. There is no “right way” to navigate.

Although I am taller than *most* children, I want to treat my work in a similar way—to avoid losing track of the creative plot by allowing my curiosity to steer the work I make. So, in addition to the required drawings I was asked to do for the app, I also worked on an unsolicited, secret side project for Tinybop—an unglossy stop-motion app video made out of paper, glue, and other articles originating from my desk drawer. I outputted the vector illustrations to my cutting machine, glued them together into a proper structural model, set up a tripod, and then just started pushing around the pieces. The resulting stop-motion demonstrate’s The Human Body’s functions, enlivened with crunch, breath, and plunk sounds made from paper. My other half, Daniel and I saved up a pile of assorted paper goods for a week and wrinkled, tore, and otherwise abused them to make sound representative of a heartbeat, nervous system electricity, digestion plops, etc.

The look of the figure (and the concept of physically layering-in the systems, one-atop-another) came directly from our shared memories of old transparency biology books, (remember the frog?) a reference to a bygone medium for learning that offered a really great physical metaphor for how the app could be structured.

The body systems get progressively layered into a silhouette body tray of the user’s choosing. Here is an early sketch of the respiratory system.

We created four different body tray silhouettes—two are more masculine and two are more feminine—although none are explicitly labeled.

This is a character-selection flow that I came up with, using the key from Tinybop’s logo to bring the app to life, a branding concept+physical metaphor suggested by Raul.

I particularly liked this second interstitial animation idea—wherein the body tray appears from a secret compartment in the back wall. Tinybop combined both concepts into a composite third flow in the actual app.

The app allows for the very close inspection of many organs, including the heart—which looks and functions as a completely accurate model, thanks to some adept coding…and many meetings between Raul, Youngna, and a heart surgeon.

Although my favorite system to draw was the respiratory system due to its symmetry and elegant shapes (and lack of gross-outed-ness…I guess my hypochodriac nature must be admitted! I like the idea of air moving through the lungs far more than the idea of blood moving through veins [shivers]).

The bones and joints were also a lot of fun to draw.

The way that the lens in the eye projects light onto the optic nerve had me captivated and a bit obsessed as well. In the actual app, Tinybop has done something magical with the eye and the iPad’s camera—showing how images arrive in the brain flopped.

I got to hone my Illustrator skills drawing the body’s network of nerves and the circulatory system.

In addition to illustrating the app, I also proposed a few icon solutions for the UI. It was really important to Tinybop that the app use language very sparingly, so we needed very clear, mashable-looking icons for each body system and each zoomed-in organ view.

Here are some app icons that I designed at the eleventh hour—reusing some of the app’s illustrations and UI design elements.

And finally, a whole assortment of food, which you can feed your body. I’m not going to show what it looks like when it gets down to the stomach and starts turning to mush. You’ll have to download the app to see that.

 

Related Posts

No related posts.

Comments

38 Responses to “Illustrating Tinybop’s 1st App”
  1. anna says:

    Holy moley.

    Looks absolutely amazing. I’m awestruck frankly. Can’t wait to download. Wonder if my 8 month old will be able to enjoy it too. Here’s hoping.

    • Kelli says:

      Thanks Anna! I hope so too. Tinybop tested it with a lot of children—and made changes according to their reactions. For example, they made burp bubbles in the stomach and other gross things because kids were just REALLY excited by anything that felt like they were being allowed to indulge in improper behavior. (Things that are surprising which I suppose shouldn’t be…)

  2. afan says:

    Just amazing, you are SO SO SO darn talented, and an excellent writer, it’s not fair.

    The app seems to be just .99 in the app store, how can i NOT buy it?

    what is next for you, kelli anderson? can’t wait to see. your work astounds.

  3. Katarina says:

    Amazing work, Kelly! I love your curiosity, playfulness and design approach that combines art & science sensed in all of your work. It always results with spectacular and inspiring projects. Keep it like that & play on! :) )

  4. This is such lovely work. Very inspiring!

  5. Lorena says:

    This is just amazing. I’m astonished to look at your process. Such great inspiration :) .

  6. Xander says:

    Absolutely fabulous and intelligent work!

  7. Cam says:

    You do such wonderful, creative, technical and well-crafted work! Thank you for also taking the time to share it so thoughtfully. You are one of the designers I look to to remind myself that there’s always more to learn.

    • RC says:

      Beautiful work. Thanks for the photo of your atelier as it will allow my kids to see that art is created/made by a person and not the result of spontaneous digital combustion although I suppose some artists might argue with me!

  8. Brennan says:

    Wow, absolutely stunning work Kelli! Came out beautifully.

  9. marcus says:

    absolutely stunning. ultra-contemporary yet stylishly retro, and – like all your work, it seems – sublimely elegant.

    huge congratulations on your website and really awesome, inspirational work from berlin!

Trackbacks

Check out what others are saying...
  1. [...] Human Body is an app created by Tinybop and illustrated by Kelli Anderson that allows users …read more var dd_offset_from_content = 40; var dd_top_offset_from_content [...]

  2. [...] By Tinybop. Illustrations by Kelli Anderson. The app is currently available to download from the iTunes App Store. Thanks for sharing, [...]

  3. [...] SwissMiss, Tinybop, Kelli Anderson (Visited 1 times, 1 visits today) 0 Flares Twitter 0 Facebook 0 Google+ 0 [...]

  4. [...] Kelli Anderson, via Colossal. Share this:TwitterFacebookPinterestRedditStumbleUponTumblrGoogle +1Like this:Like [...]

  5. [...] on, Tiny Bop was formed. For The Human Body’s distinct look, Tiny Bop turned to illustrator Kelli Anderson, who based her work on old transparency biology books, where one system could be physically layered [...]

  6. [...] Kelli Anderson recently did a great design and illustration work for her friends at Tinybop who have released their first app “The Human Body”, in which kids over 4 years old can see what we’re made of and how it works, from the beating heart to gurgling guts. In this first app, the body is brought to life with interactive animations and particle physics that means 200-odd illustrations of bones, veins, nerves, teeth, guts, and chewed-up-food of which it is comprised. Anything that a real body does, this body does,it eats, digests, pumps blood, gets sick, burps, runs in place, at multiple zoom levels with a realistic variety of responses to the user’s interaction. To promote the app, Kelli Anderson did a fantastic stop motion animation all made from paper, that you can see below. It demonstrates The Human Body’s functions, enlivened with crunch, breath, and plunk sounds made from paper. Kelli saved up a pile of assorted paper goods for a week and wrinkled, tore, and otherwise abused them to make sound representative of a heartbeat, nervous system electricity, digestion plops, etc. http://www.vimeo.com/72393668 .nrelate_related .nr_sponsored{ left:0px !important; } In Graphic designers, Others 3D, Animation, Art Directors, Children, Collage, food, Human nature, Installations, Organic, Paper art, Stop motion [...]

  7. [...] Kelli Anderson a récemment réalisé un superbe travail de design et illustration pour ses amis de Tinybop a l’occasion de la création de leur première application « The Human Body », dans laquelle les enfants de plus de 4 ans peuvent découvrir de quoi nous sommes fait et comment ça marche, depuis les battements du cœur jusqu’aux gargouillements des intestins. Dans cette appli, le corps prend vie de façon animée et interactive grâce à pus de 200 illustrations d’os, de veines, de nerfs, dents, estomac, y compris les aliments qu’il absorbe. Tout ce qu’un corps fait, l’appli le fait, ou presque. Pour promouvoir ce travail, Kelli Anderson a réalisé une incroyable animation de papier en stop motion, que vous pouvez découvrir ci-dessous. Cela démontre les fonctions du corps humain mais entièrement en papier. Notez que les bruitages sont également fait avec du papier. http://www.vimeo.com/72393668 [...]

  8. [...] mind when I came across a screen­shot of it on Dribbble last week and then read about it on her blog. Anderson worked with friends who own Tinybop, a com­pany that cre­ates systems-thinking apps [...]

  9. [...] that a real body does, this body does,” Kelli writes on her blog. “It eats, digests, pumps blood, gets sick, burps, runs in place, you name it, all at [...]

  10. [...] ayrıntılı gözlemleyebiliyorsunuz.Projeye ilham verip uygulamayı geliştiren illüstratör Kelli Anderson, çocuklar için sürükleyici ve eğlenceli bir çalışma yaratmak adına projenin her [...]

  11. [...] Read about Kelli Anderson’s process for creating the app, Illustrating Tinybop’s 1st App [...]

  12. [...] Human Body (Stop motion) by Kelli Anderson. All parts are made with paper, including the [...]

  13. [...] vous laisse regarder tout ça et aller faire un tour sur le site de Kelli Anderson qui explique parfaitement le [...]

  14. [...] animation by Kelli Anderson. (There is also an app! Read about it here.) Like this:Like Loading… from → Animation, Artists, Info vis ← the streets [...]

  15. [...] a peek at this amazing paper animation by the illustrator, Kellie Anderson, [...]

  16. [...] Der er to fede apps i denne uge: Den ene er til børnene og er lavet af fir­maet Tiny Bop, og hed­der The Human Body. Læs her om hvor­dan processen med at illus­trere appen. [...]

  17. [...] Read more about the project, see stand alone images of the individual organs, and learn more about the inspiration behind it all on Anderson’s blog. [...]

  18. [...] on, Tinybop was formed. For The Human Body’s distinct look, Tinybop turned to illustrator Kelli Anderson, who based her work on old transparency biology books, where one system could be physically layered [...]

  19. [...] por mais de 200 ilustrações de veias, ossos, nervos e dentes… Em seu blog, ela contou o processo criativo, que rendeu o vídeo abaixo. [...]

  20. DUEEtando says:

    [...] do app é totalmente analógica! Isso mesmo, foi toda feita em papel, pela ilustradora e designer Kelli Anderson. Tudo foi feito em papel e recortado: ossos, veias, órgãos, somando mais de 200 itens, que foram [...]

  21. [...] de educativo e divertido, o app é superbonito – veja só como foi que Kelli Anderson trabalhou nas ilustrações. Isso mesmo, com recortes e depois no [...]

  22. [...] kroppen. Därför är kombinationen av detta naturligtvis fantastisk. Formgivaren och konstnären Kelli Andersson har gjort den här stop motion-filmen där en man äter en bit salamipizza, för att visa upp appen [...]

  23. [...] om kroppen och vänder sig till barn 4+. Den som illustrerat appen är formgivaren och konstnären Kelli Andersson och till den gjorde hon även en stop motion-film i papper där en man äter en [...]

  24. [...] Tinybop released their 2nd app today, called PLANTS!, and asked me to create a video representing it. To do this, I, together with Daniel Dunnam, got to daydream with paper and imagine what it would feel like to enter a tiny forest world. The environment is dense, rich, and unpredictable. There are animals. It rains. Things catch on fire. The ground freezes. New trees grow. The app presents a model of the forest that as-closely-as-possible mirrors the structure and behaviors of an actual forest—making it exciting to explore, curious, and a little mysterious—just like a real space. It is programmed to observe the laws of physics and the changing of the seasons—just like a real space. So we represented it as a miniature physical world (the doorway to which is the iPad itself): [...]



Leave A Comment