What do we think about when we think about “code?” Many of us think something like this:

Alien. Intimidating. Gobbledygook. Maybe even vaguely sinister, like The Matrix. Something that says: this is not for you.

Whereas, for the Mozilla Webmaker project and our Summer Campaign to teach the world to code, we want people to imagine code more like this:

Or this:

Or maybe this:

In other words: code as something all around us. Warm. Human. Poetic. Not some scary bunch of geeky gibberish that only anointed high priests understand.

We want to show code and webmaking as revealing the patterns and hidden dimensions of everyday life. Swirling all around us. Like everyone’s second language.

The web as literacy. Code as everyone’s second language.

Code and webmaking as literacy — rather than just a professional skill. For a general audience of everyday people who have mostly never touched code before (teachers, youth, journalists, filmmakers, your mum), we want to employ a visual language that treats code less as math and mechanics and scary algorithms — and more as magic pixie dust. Or a maker’s language that can turn your big ideas into reality.

Once you see code as something that makes up your everyday world, you can begin to start using it yourself. To make something amazing, or bend the rules of everyday (digital) reality. Moving from passive consumer of other people’s stuff to active creator of your own.

The hidden patterns and algorithms of everyday life

This opening to “Stranger Than Fiction” isn’t about code per se — but it perfectly captures the spirit we’re after. Revealing the hidden patterns and algorithms of everyday life.

The web as a maker’s world — NOT a series of tubes

Other visual examples of the web often try to depict it as a network or ecosystem. The challenge with this approach is that it emphasizes the pipes and tubes and tech — instead of the human dimension, and the web as a maker’s world.

How do we apply this idea of “everyday code” in our visual language, branding and videos? As we think more about how to visually tell our Mozilla Webmaker story, we want to move away from abstract depictions of “the web” and instead emphasize the human dimension.

We want to tell stories about real people and Mozilla community members making amazing things. Passing and sharing them with others through a combination of maker spirit, open collaboration, and building the future they want together. Using real code to build big ideas.

Seeking your examples: what else is like this?

I’d like to ask your help in collecting more examples like these. Images, web sites, memes, concrete examples — anything. Examples of:

Code as poetry . Code as a language for saying something more simply or elegantly than could be expressed otherwise.

. Code as a language for saying something more simply or elegantly than could be expressed otherwise. Code as meme . Like “Movies as Code” Or “Programmer Ryan Gosling.”

. Like “Movies as Code” Or “Programmer Ryan Gosling.” Code as expression of the everyday world. In places we don’t ordinarily think of it: nature. An alarm clock. Your car.

What other sites or examples should we be looking at? I’m new to this world, and would love to learn from your favorites. Please share links as comments here. We want to collect memes and examples that can help inspire this style guide for our “Meet the Webmakers” video series.

We like the direction — but want to insert more real code into the mix, and slip in references that real developers will appreciate. So what examples would you include for inspiration? I know you’ve got them…