Although his focus was on the Macintosh, Jobs wanted to create a consistent design language for all Apple products. So he set up a contest to choose a world-class designer who would be for Apple what Dieter Rams was for Braun. The project was code-names Snow White, not because of his preference for the color but because the products to be designed were code-named after the seven dwarfs. The Winner was Hartmut Esslinger, a German designer who was responsible for the look of Sony’s Trinitron televisions. Jobs flew to the Black Forest region of Bavaria to meet him and was impressed not only with Esslinger’s passion but also his spirited way of driving his Mercedes at more than one hundred miles per hour.

Even though he was German, Esslinger proposed that there should be a “born-in-America gene for Apple’s DNA” that would produce a “California global” look, inspired by “Hollywood and music, a bit of rebellion, and natural sex appeal.” His guiding principle was “Form follows emotion”, a play on the familiar axiom that form follows function. He produced forty models of products to demonstrate the concept, and when JObs saw them he proclaimed, “Yes, this is it!” The Snow White look, which was adopted immediately for the Apple II c, featured white cases, tight rounded curves, and lines of thin grooves for both ventilation and decoration. Jobs offered Esslinger a contract on the condition that he move to California. They shook hands and , in Esslinger’s not-so-modest- words, “that handshake launched one of the most decisive collaborations in the history of industrial design.” Esslinger’s firm frogdesign, opened in Palo Alto in mid-1983 with a $1.2 million annual contract to work for Apple, and from then on every Apple product has included the proud declaration “Designed in California.”

Steve Jobs by Walter Isaacson

When it came time to launch the iPhone, Jobs decided, as usual, to grant a magazine a special sneak preview. He called John Huey, the editor in chief of Time Inc., and began with his typical superlative: “This is the best thing we’ve ever done.” He wanted to give Time the exclusive, “but there’s nobody smart enough at Time to write it, so I’m going to give it to someone else.” Huey introduced him to Lev Grossman, a savvy technology writer (and novelist) at Time. In his piece Grossman correctly noted that the iPhone did not really invent many new features, it just made a lot of features more usable. “But that’s important. When our tools don’t work, we tend to blame ourselves, for being too stupid, or not reading the manual or having too fat fingers… When our tools are broken, we feel broken. And when somebody fixes one, we feel a tiny bit more whole.

Pain is temporary, suck is forever.

Micheal B Johnson, Pixar

/ht @jmspool

give up your birthday for charity water

There is little difference technically between a complicated, confusing program and a simple, fun, and powerful product. The problem is one of culture, training, and attitude of the people who make them. [...] We are deficient in our development process, not in our development tools.

Allen Cooper, The Inmates Are Running the Asylum

A Whole New Mind: Why Right Brainers Will Rule The Future

David H. Pink

The future belongs to a different kind of person with a different kind of mind: artists, inventors, storytellers-creative and holistic “right-brain” thinkers whose abilities mark the fault line between who gets ahead and who doesn’t.

Drawing on research from around the world, Pink outlines the six fundamentally human abilities that are absolute essentials for professional success and personal fulfillment-and reveals how to master them. A Whole New Mind takes readers to a daring new place, and a provocative and necessary new way of thinking about a future that’s already here.

buy the book

Emotional Design: Why We Love (or Hate) Everyday Things

Donald Norman

Did you ever wonder why cheap wine tastes better in fancy glasses? Why sales of Macintosh computers soared when Apple introduced the colorful iMac? New research on emotion and cognition has shown that attractive things really do work better, as Donald Norman amply demonstrates in this fascinating book, which has garnered acclaim everywhere from Scientific American to The New Yorker.Emotional Design articulates the profound influence of the feelings that objects evoke, from our willingness to spend thousands of dollars on Gucci bags and Rolex watches, to the impact of emotion on the everyday objects of tomorrow.Norman draws on a wealth of examples and the latest scientific insights to present a bold exploration of the objects in our everyday world. Emotional Design will appeal not only to designers and manufacturers but also to managers, psychologists, and general readers who love to think about their stuff.

buy the book

Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences

Stephen Anderson

What happens when you’ve built a great website or app, but no one seems to care? How do you get people to stick around long enough to see how your service might be of value? In Seductive Interaction Design, speaker and author Stephen P. Anderson takes a fresh approach to designing sites and interactions based on the stages of seduction. This beautifully designed book examines what motivates people to act.

buy the book

A General Theory of Love

Thomas Lewis M.D., Fari Amini M.D., Richard Lannon M.D.

Drawing comparisons to the most eloquent science writing of our day, three eminent psychiatrists tackle the difficult task of reconciling what artists and thinkers have known for thousands of years about the human heart with what has only recently been learned about the primitive functions of the human brain. The result is an original, lucid, at times moving account of the complexities of love and its essential role in human well-being.

A General Theory of Love draws on the latest scientific research to demonstrate that our nervous systems are not self-contained: from earliest childhood, our brains actually link with those of the people close to us, in a silent rhythm that alters the very structure of our brains, establishes life-long emotional patterns, and makes us, in large part, who we are. Explaining how relationships function, how parents shape their child’s developing self, how psychotherapy really works, and how our society dangerously flouts essential emotional laws, this is a work of rare passion and eloquence that will forever change the way you think about human intimacy.

buy the book

Descartes’ Error: Emotion, Reason, and the Human Brain

Antonio Damasio

Since Descartes famously proclaimed, “I think, therefore I am,” science has often overlooked emotions as the source of a person’s true being. Even modern neuroscience has tended, until recently, to concentrate on the cognitive aspects of brain function, disregarding emotions. This attitude began to change with the publication of Descartes’ Error in 1995. Antonio Damasio—”one of the world’s leading neurologists” (The New York Times)—challenged traditional ideas about the connection between emotions and rationality. In this wondrously engaging book, Damasio takes the reader on a journey of scientific discovery through a series of case studies, demonstrating what many of us have long suspected: emotions are not a luxury, they are essential to rational thinking and to normal social behavior.

buy the book

The Feeling of What Happens: Body and Emotion in the Making of Consciousness

Antonio Damasio

How is it that we know what we know? How is it that our conscious and private minds have a sense of self? A gifted medical clinician and scientific thinker, Damasio helps readers to ask and answer questions about what it is to be human. His elegant investigation of feeling and emotion offers a new understanding of the conscious mind and, as the New York Times has noted, “will change your experience of yourself.”

buy the book

Looking for Spinoza: Joy, Sorrow, and the Feeling Brain

Antonio Damasio

Joy, sorrow, jealousy, and awe—these and other feelings are the stuff of our daily lives. In the seventeenth century, the philosopher Spinoza devoted much of his life’s work examining how these emotions supported human survival, yet hundreds of years later the biological roots of what we feel remain a mystery. Leading neuroscientist Antonio Damasio—whose earlier books explore rational behavior and the notion of the self—rediscovers a man whose work ran counter to all the thinking of his day, pairing Spinoza’s insights with his own innovative scientific research to help us understand what we’re made of, and what we’re here for.

buy the book

How The Mind Works

Steven Pinker

The Pulitzer Prize finalist and national bestseller How the Mind Works is a fascinating, provocative work exploring the mysteries of human thought and behavior. How do we see in three dimensions? How do we remember names and faces? How is it, indeed, that we ponder the nature of our own consciousness? Why do we fall in love? In this bold, extraordinary book, Pinker synthesizes the best of cognitive science and evolutionary biology to explain what the mind is, how it has evolved, and, ultimately, how it works. This edition includes a new afterword that explores the impact of the book and its relevance today.

buy the book

Brain Rules: 12 Principles for Surviving and Thriving at Work, Home, and School

John Medina

See how the brain works while using it in the process of reading this book! Most of us have no idea what’s really going on inside our heads. Yet brain scientists have uncovered details every business leader, parent, and teacher should know – like that physical activity boosts your brain power.

How do we learn? What exactly do sleep and stress do to our brains? Why is multi-tasking a myth? Why is it so easy to forget – and so important to repeat new information? Is it true that men and women have different brains?

In Brain Rules, Dr. John Medina, a molecular biologist, shares his lifelong interest in how the brain sciences might influence the way we teach our children and the way we work. In each chapter, he describes a brain rule – what scientists know for sure about how our brains work – and then offers transformative ideas for our daily lives.

buy the book

The Expression of Emotions in Man and Animals

Charles Darwin

Published in 1871, this book explores the universality of emotional expression in humans regardless of culture, and even in animals.

download the book free

Darwin’s Camera: Art and Photography in the Theory of Evolution

Phillip Prodger

Darwin’s Camera tells the extraordinary story of how Charles Darwin changed the way pictures are seen and made.

In his illustrated masterpiece, Expression of the Emotions in Man and Animals (1871), Darwin introduced the idea of using photographs to illustrate a scientific theory–his was the first photographically illustrated science book ever published. Using photographs to depict fleeting expressions of emotion–laughter, crying, anger, and so on–as they flit across a person’s face, he managed to produce dramatic images at a time when photography was famously slow and awkward. The book describes how Darwin struggled to get the pictures he needed, scouring the galleries, bookshops, and photographic studios of London, looking for pictures to satisfy his demand for expressive imagery. He finally settled on one the giants of photographic history, the eccentric art photographer Oscar Rejlander, to make his pictures. It was a peculiar choice. Darwin was known for his meticulous science, while Rejlander was notorious for altering and manipulating photographs. Their remarkable collaboration is one of the astonishing revelations in Darwin’s Camera.

Darwin never studied art formally, but he was always interested in art and often drew on art knowledge as his work unfolded. He mingled with the artists on the voyage of HMS Beagle, he visited art museums to examine figures and animals in paintings, associated with artists, and read art history books. He befriended the celebrated animal painters Joseph Wolf and Briton Riviere, and accepted the Pre-Raphaelite sculptor Thomas Woolner as a trusted guide. He corresponded with legendary photographers Lewis Carroll, Julia Margaret Cameron, and G.-B. Duchenne de Boulogne, as well as many lesser lights. Darwin’s Camera provides the first examination ever of these relationships and their effect on Darwin’s work, and how Darwin, in turn, shaped the history of art.

buy the book

And of course, there’s this little book too.

Designing for Emotion

Aarron Walter

Make your users fall in love with your site via the precepts packed into this brief, charming book by MailChimp user experience design lead Aarron Walter. From classic psychology to case studies, highbrow concepts to common sense, Designing for Emotion demonstrates accessible strategies and memorable methods to help you make a human connection through design.

buy the book

Robert Plutchik considered there to be eight primary emotions – anger, fear, sadness, disgust, surprise, anticipation, trust, and joy. Plutchik proposed that these ‘basic’ emotions are biologically primitive and have evolved in order to increase the reproductive fitness of the animal. Plutchik argues for the primacy of these emotions by showing each to be the trigger of behavior with high survival value, such as the way fear inspires the fight-or-flight response.

http://en.wikipedia.org/wiki/Robert_Plutchik

Plutchik created a taxonomy to categorize emotions that groups primary emotional responses and defines their derivative responses as well.

Ten Postulates of Emotion

Plutchik’s psychoevolutionary theory of basic emotions has ten postulates:

1. The concept of emotion is applicable to all evolutionary levels and applies to animals as well as to humans.
2. Emotions have an evolutionary history and have evolved various forms of expression in different species.
3. Emotions served an adaptive role in helping organisms deal with key survival issues posed by the environment.
4. Despite different forms of expression of emotions in different species, there are certain common elements, or prototype patterns, that can be identified.
5. There is a small number of basic, primary, or prototype emotions.
6. All other emotions are mixed or derivative states; that is, they occur as combinations, mixtures, or compounds of the primary emotions.
7. Primary emotions are hypothethical constructs or idealized states whose properties and characteristics can only be inferred from various kinds of evidence.
8. Primary emotions can be conceptualized in terms of pairs of polar opposites.
9. All emotions vary in their degree of similarity to one another.
10. Each emotion can exist in varying degrees of intensity or levels of arousal.

Some of us get that practice and nurturing in our day jobs (count me in that group), while others get stuck in the cycle of execution of tasks for others. That can quickly snuff the fire in your belly burning for this wonderful medium we call the Web.

I’ve been interviewing a few people who manage to not only capture their creative ideas as they surface, but they manage to turn them into real world apps that people around the world use. I recently spoke with Stephen Martin and Mark Jones, the guys that built Next Pint, an iOS app that makes beer drinking social.

download NextPint in iTunes »

Next Pint Interview Transcript

Stephen Martin: It’s a way to find craft beer or a way to find new beer. So, if you’re tired of drink Heinekens, you can maybe venture out and try something that you might not have found on your own.

Mark Jones: The initial reason was, like you’ve said before, because of Taco Mac. And we just wanted to be able to track what we were drinking, because there was a point system and prizes for points. And then we started talking about it at South By Southwest last year and then you…

Stephen Martin: Yeah, and then we were at the WWDC, the Apple convention in San Francisco and we went out, had a couple of beers with some friends out there. And, when I got back home, I was like, what the hell was the name of that beer? I don’t remember it. I’m sure Mark didn’t remember. So how am I going to figure that out? So that’s when it dawned on me that the app should be more than just tracking a list from a local pub or like a Taco Mac, a big a beer-tasting place, and you should be able to track any beer.

And I think the friends piece just kind of fit at some point. Because those are the people that are suggesting to you what you should drink. You’re at a bar with a friend and he says, oh, you should try such and such pale ale, because I know you like pale ales, it’s pretty good. And so you order it and try it out.

I don’t go to the pub with Mark every night. We don’t booze it up, so how am I going to know if he’s on vacation somewhere and tries something? It’s like, hey, check this out. It’s a guide that’s built by your friends and by your own personal taste.

Mark Jones: It’s totally different, because when we’re doing something like this that we want to use for ourselves, and you get an idea for a feature, you’re jumping into it, wanting to implement. How can you do it the best way for you as a user? Whereas, on a normal job, it would be, requirements get fed down the pipe. And you’re like I did something similar like this two weeks ago, and now they want me to do it just slightly different, and it’s not near as exciting for me.

Stephen Martin: Yeah. It’s just more fun, obviously, when you’re completing a task for yourself. I don’t know. It’s exciting ’cause you’re like, oh, you come up with an idea for an app that you’re working on, and it’s your app. So there’s no problem with you staying up until two, three in the morning to get it to work, because you know how you want it to work. You know how to make it work. So, you just take the time and do it.

With sketchnoting as the central aesthetic for my presentation slides, you can imagine how excited I was to discover after walking off stage that my talk was sketchnoted by the amazingly talented Eva-Lotta Lamm. Eva deftly captured the salient points of my talk in a series of clever little sketches giving those that could not attend a visual overview of the concepts I shared.

Thanks Eva for creating such an amazing drawing of my talk, and thanks to the folks at Ubelly.com that hired her to sketchnote the entire Future of Web Design conference.

BetaBrand has obviously been checking out Photojojo. Would love to hear from BetaBrand about how emotional design has influenced sales and marketing figures.

Details are amazing things—the smell of fresh cookies, dimmable lights, a wireless Internet connection, automobile seat warmers—they make our lives better and easier. Even the simplest attribute has the power to transform something from the mundane into the unforgettable. They make us smile, curse or call our mother. At days end, it’s the details that we can’t stop thinking about.

Able Design on the Squared Eye Branding »

I recently sat down with Scott Thomas, Design Director of the Obama campaign and author of Designing for Obama, to discus the role emotional design played in the design campaign that elected a president. Below is the transcript of our conversation.

Aarron:
Emotion was a huge part of your design strategy in the Obama campaign. You worked hard to inspire, and to build trust.

Scott:
Yeah.

Aarron:
Americans had a lot of baggage from our history to overcome in order to elect Barack Obama president. The design around the campaign was basically packaging a person, and communicating a persona. It’s about emotion, nostalgia, and trust. Can you talk about the design devices that you guys used to make that happen?

Scott:
Well, the interesting thing in a political campaign is that you have one major competitor, right? That you’re definitely looking at or thinking about when you’re making decisions. I mean obviously we wanted to just communicate very clearly and effectively. That was something that seemed to be missing from politics all together.

Aarron:
So, just straight up consistency.

Scott:
Straight up consistency, delivering that message as clearly and concisely as possible and we thought that if we did a better job than our competitors, people would have a better idea what we were trying to do and what the other candidates were trying to do. The second thing we were trying to do was use emotional design on the level of visuals rather than just saying it. You can write out the word "hope" but it can’t really give you hope. You can say hope over and over and over again but that doesn’t make you necessarily feel hopeful. I have this image in my presentation which is this rainbow kind of off in the distance. And that to me, that image communicates hope. That rainbow is what communicates the word hope better than the word itself. And it was important for us on as many levels as we could to be able to do that. And I think it’s as simple as communicating without words which, you know. Designers are usually very good at that.

Aarron:
The rainbow is really a recognizable metaphor for the pathway to greener grasses.

Scott:
Exactly.

Aarron:
Metaphor in design is a really powerful device. It’s a powerful literary device. People struggle to understand something that’s complicated, and political campaigns are all about complications. Such as, “How do you sell health care?” It’s just so mundane, it’s so boring, and scary at the same time.

Scott:
Yeah.

Aarron:
So, a metaphor definitely makes it more approachable.

Scott:
Yeah. And we are … I think, I think where a metaphor can definitely simplify and make things a lot easier for people to understand.But I think the important thing with political design is that in some instances you don’t simplify things too much because you’ll get to the point where you’ll offend people. And the problem with the word "hope" was the notion that if you just talked about it and you run on hope and you run on metaphors, to a certain degree you’re going to disenfranchise a certain group of America that says "You can’t run off of that, we have to talk about issues and we need to know what you think about this." Just saying that you hope things get better isn’t enough. How are you going to make things better? And I think that’s a real important thing in political design especially where, often times, the simple, funny things maybe even to a very graphic form, might not communicate the complexity of the issue well enough. We did have to kind of be careful about that. As well as being careful of using the wrong metaphor. I remember during the campaign we learned that a symbol or an image could create a metaphor that would be wrong on the eyes of certain Americans. A full Presidential seal was created at one point in the campaign and placed in front of Barack, which was a direct order from the Advanced Team, they wanted this kind of full Presidential seal, it’s going to be placed behind Barack at this Governor’s Summit and it turned into a big mistake. And the right even used, McCain used it during the debate too…

Aarron:
He’s presumptuous.

Scott:
Exactly. Exactly. So you quickly learn how you have to walk this very fine line of using metaphor in the wrong places. But, of course we’ve also used metaphors to communicate other things. In other words, maybe we communicated under the surface, more on the subconscious. I remember at one point there was a feature graphic that we used a couple of times, I called it the Wizard of Oz and it was kind of at the end of the Yellow Brick Road. There’s this green crystal palace and that’s an image that everybody knows and relates to in America. And it’s just being able to communicate on a more direct level a little bit easier.

Aarron:
It’s interesting that authenticity is something that Obama wrested with in the campaign. The presidential seal blowback was about his presumption, and arrogance. That was something that he was fighting all along, which is sort of ironic because he’s the American story of rags to riches, a self-made man raised by a single mother of modest means. Authenticity, that’s an important part of emotional design too and the whole campaign, right?

Scott:
I think a lot of that came down to voice. That came down to copy and writing. And a lot of people asked, "How did you guys keep it authentic within the campaign in terms of copy editing?" I think the way that we managed to do that was we really used our own voices whenever we could. Because we are as much a part of that movement as anybody else and it made sense to really express what you thought. To use your own voice and to say it as well and as clearly as you possibly can. That helped bring this authenticity to it where it didn’t sound like a bit of writing that had been approved by a bunch of people. It wasn’t highly-crafted, or sculpted.

Aarron:
It should sound like there’s a real human behind it.

Scott:
Right. Exactly. And I think that that was not only important in our campaign, but is going to be continuously important in politics. It partly comes from the candidate himself. He is a very authentic person. When he spoke you could sense that authenticity in his message.

Aarron:
So, creating trust and designing tools that you guys created – things like type, color, there’s sort of this ethereal feeling about a lot of the design assets. How did you guys consider the idea of trust and what did you do in the design to try to inspire trust?

Scott:
Well I think one of the most important things we did was go back and look at history. We went in the same way Obama would go back and look at history for the precedence of what has occurred in government to really determine where we’re at today. We did the same thing with political design and we looked not only at political design, but just American design in general. When it came to typography it wouldn’t make sense to choose an English typeface. It probably wouldn’t make sense to use a Swiss typeface. We’re Americans. Gotham, actually, was a very clear choice when John Slabyk and I began because it just made sense. It’s an American typeface. It’s based off of the forms that were used in the port authority terminal in New York City, which Tobias and Jonathan Hoefler see quite often. That informed the design. Its roots were already in America. It’s truly an American typeface. In terms of color, loyalty was important in a political campaign. You have two sides in America. You have a democratic side and a republican side. So to use blue well, to use it right, to reduce the amount of reds, not make the campaign seem very colorful was important. So that was the other thing that we had to look at. We had to make sure that we were using the right color scheme and that came down to blue.< Blue is the color of democrats. It's what democrats were loyal to. It was using that right, but also not leaving red out completely.

Aarron:
Sure. Blue is also, historically, a color that is psychologically connected to trust, wisdom, and stability. It’s sort of a happy accident, I guess, that that happens to be the grounding color of democrats.

Scott:
Right. In terms of the ethereal design, I think that some of those elements – and I have to give it to John. John created a lot of those elements early on. When I got to the point of doing a lot of feature graphics for the site, I’d get it to a point and then I’d have to Slabykcize it, which basically meant bring in a bunch of elements that he had already created. He’s a real visual master and he grabbed a lot of this imagery that just worked to kind of connect to the very hopeful aspirations that the campaign had to communicate the energy and the momentum that people were experiencing. It’s sometimes hard to put those moments into words. It’s maybe easier to put those things into visual images. That made it somewhat easy.

Aarron:
SHumor found its way into the campaign in a few places. It definitely was anomalous, but can you talk a little bit about that, where sense of humor came through and how that helped the campaign?

Scott:
Where did you see sense of humor, out of curiosity?

Aarron:
Well, the one that sticks out for me is the Saint Patrick’s Day Obama logo that dropped an apostrophe in after the O to make his name Irish. Obama’s obviously not Irish, but you just add an apostrophe and he is for today. That joke helped him connect with a certain demographic in the United States.

Scott:
Right. I think that the humor of the campaign came from to its core people. The campaign was made up of an amazing group of people that were mostly younger. At the beginning, we were a bunch of hope mongers. Obama didn’t have a chance to a lot of people and we just wanted to see this through as much as possible.
I think that that played a huge role in what a lot of people saw that were outside of the campaign. They saw the voice of the members of that campaign who, honestly, were younger, funny, interesting people that you would want to go have a drink with and that showed through.

Aarron:
Scott, thanks for taking the time to chat.

Scott:
My pleasure.

Buy Scott Thomas’s book: Designing Obama

Scott Thomas: Designing the Obama Campaign

The new site design reflects that concept by structuring each page as an unordered list grouping each content layer as a list item. Just as the strata of the earth change color as you descend, I wanted to let content layers darken in the content stack to reflect a hierarchy of information. I also wanted to use color to define the various sections of the site not only to create visual distinction that can inform navigation and location recognition, but also to simply pacify my fickle design aesthetic. Varying the color of the strata and the color of each page or section of a website makes for a lot of color mixing.

To pull this off, I had to find a solution that was practical. I couldn’t see myself manually defining the color for each list item in a page. I am too busy (read as lazy) to make a lasting development and maintenance commitment. Doing it manually would certainly keep me from publishing as frequently on my site.

RGBa to the Rescue

My idea was made ever so simple through the use of RGBa, an elegant way to define color in CSS with an alpha channel making transparency easy. RGBa has four values: one each to define red, green, and blue, and one for alpha transparency. Here’s a simple CSS code example:

.myelement { background: rgba(255,255,255,0.25); } 

In this example, the background color is being set to black at 25% opacity. The cool thing about this approach is that you can stack color blocks to mix hues, add white to a color to create a tint, or add black to create a shade. To create the shades in my strata design concept, all I had to do was set a base background color of a page, then set a transparent black background on of each of the strata to crate shades getting ever darker as you get further down the page. I called my content list “stratosphere”, and set the class “strata” on each list item (note: the list item class was necessary to prevent the script we’ll see shortly from applying colors to any list I might drop in a page.). The CSS looks like this:

	.home #stratosphere { background:#4681bd; }
	.home #stratosphere li.strata { background: rgba(255,255,255,0.25); }

That solves the color mixing problem, but it doesn’t solve the challenge of automatically setting the background color on each of the strata, and varying the opacity of the black overlay to create the color shift effect as you scroll down a page. To do that, I had to use some simple jQuery. In order to get a smooth transition between the shades of the strata, I had to first figure out how many layers are in the page, then divide 1 by that number to get the increment of opacity change (note: with RGBa, 1 is 100% opaque, hence dividing 1 by the number of layers). So if there were five layers in a page the equation would be: 1 ⁄5 = 0.2. That means we’d increase the amount of black in each layer by 20%. Here’s that simple math expressed in JavaScript:

	// Draw Layers
	var numLayers = $('#stratosphere .layer').size();
	var alpha = 0;
	var alphaIncrement = (1/numLayers);

Once you know the increment of change, all you have to do is loop through the list items to dynamically set the RGBa value bumping up opacity as you go.

	$('#stratosphere .layer').each(function(){
		$(this).css("background-color","rgba(0,0,0,"+alpha+")");
		alpha = (alpha+alphaIncrement);
	});

Now I can simply change the background color of the stratosphere list, and the color mixing to create the various layer shades will happen automatically.

You can also use RGBa to make buttons and navigation that will work with any color palette, as I’ve done on this site as well. Semi-transparent buttons inherit the color on which they sit, as does a semi-transparent navigation bar. The result is a site composed of flexible components that adapt to any color situation. The color mixing possibilities with RGBa are endless.

Learn More About RGBa

• 24Ways.org: Working With RGBA Colour
• CSS Tricks: RGBa Browser Support
• W3C: CSS3 Color