Ruff Ruffman: Humble Media Genius

Ruff Ruffman: Humble Media Genius is a digital web series and website that teaches kids about digital media literacy. I designed the responsive website. Visit the site: http://pbskids.org/fetch/ruff/

Ruff Ruffman: Humble Media Genius is a digital web series and website that teaches kids about digital media literacy. I designed the responsive website. Visit the site.
Homepage 
This project incorporates an old character in to a new brand. We wanted the site to feel modern to appeal to a new, slightly old audience. 
 
I pushed for the design to feel more like a stream-lined app than a traditional website. 
Sitemap
I played a lead role in designing the site architecture. Rather than bundling the content in traditional content bundles (video index, article index) we chose to organize the content by topic. 
This site map reflects the first season of the site, as well as season 2 addiitions (in red).
Styleguide
Spec delivery for developer. The initial branding, palette, type choice and logo, was done by my art director. I created a web system from his initial work.
Topic Patterns
I created a system of patterns based on the texting pattern that was created by my art director. The patterns were used on the video title cards and on the site topic indexes. 
Topic Index
The index is a mix of thumbnails with an interactive poll. Content is highlighted by priority. 
Quiz 
Each topic has a 10 question quiz. I designed the quiz and chose or created image for all 40 questions. 
Video Player
The video page, and all third-level pages, are meant to feel like modal box or overlay. The pages are very simple, with minimal navigation.
 

More Projects

Design Squad Redesign
First Days Story Project for American Experience
Outdoor Family Fun with Plum App
Plum's Photo Hunt App
Nature Changer
Can You Dig It - Endless Runner Bilby Game
Ruff Ruffman - Ready to Learn
The Ruff Ruffman Show Website