• San Francisco Symphony Kids Home Page
  • Instruments of The Orchestra
    This activity was designed to teach the user about the different families of orchestral instruments. The user selects an instrument group via family name or location in the orchestra, and then the instrument itself. At the individual instrument level, the user can read about it, listen to it play, and view it from different angles.
  • The Music Lab
    This area of the site housed 10 flash based activities designed to teach different facets of music. "What's Pitch" is shown here. The keys on the piano are playable. When pressed, the names of the corresponding notes highlight and the note characters above pop out, illustrating the note's position on the staff.
  • Music Lab Examples 1
    "The Basics" is an animation illustrating a few fundamental principles of music. With "What's Tempo" the user can select a tempo and learn it's musical terminology, while watching an animated drummer try to keep up with the changing speeds. I created 5 animations for the drummer to play along, from *very slow* to *very fast*.
  • Music Lab Examples 2
    "The Harmonizer" activity plays a melody, and the user can mix in a harmony based on mood (Happy, Sad, Creepy). These harmonies trigger an animation, changing the environment and the "conductor" character's mood to suit the selection. Shown here is the melody (left), and the creepy harmony (right).
  • The Radio is a music playback device modeled off of a toy boombox. It's essentially a playlist for various pieces of classical music. The music is grouped into user selectable channels.
  • SFS Kids logo
  • "Split Pea" font
  • Note characters | Conductor character

San Francisco Symphony Kids

The SFS Kids Site is an interactive music education resource for children, schools, and families. I worked closely with the team at 415 and the symphony's education department from concept through design and production.

I was responsible for the overall visual design, including the site and the games within it, the identity, illustrations, and flash animations.

Visualizing something abstract like music is always challenging, but getting a balance between a functioning, intuitive website and a cartoon was tricky. I began the design by creating the logo and it's font, followed by illustrations of the conductor and note characters. Once those elements were in place, I tailored the site's look and feel around them.

The end result was well recieved, and garnered accolades from all over the world, including a nomination for a 2002 Webby.

  • Role

  • Design
  • Identity
  • Illustration
  • Animation
  • Online

  • 2002

415 took our vision of creating a world-class music learning resource for children, families, and schools and helped make it a reality.

Ron Gallman
Director of Education
San Francisco Symphony

[A]n educational Web site with the spirit and edginess of a good Disney film, without the commercialization ... It's a rare case of learning without a catch.

Peter Hartlaub
San Francisco Chronicle

More quotes by teachers, students and parents from around the world can be found here.