Design Focus

Friday Focus 09/30/11: Traveling Clouds

Clouds are one of the most popular graphic elements on websites and designers have upped the ante by making them move across visitors’ screens. Let’s see how this week’s featured sites did it.

Designs of the Week

Simple Send website

Simple Send

It seems like where there are clouds, there are aircraft, and in this case, paper planes as a metaphor for the product they’re selling. Everything looks okay, but there seems like a little disconnect between the overall look of the site and the features table. Kudos to two bits of microcopy—“freshen my inbox” and “heard in the twitter breeze”—to reinforce the “windy” theme running throughout the page.

Merican Made website

Merican Made

This site uses a more realistic look to its clouds to match the view. I love the use of stars here, particularly on the US map to show their locations. It’s a strong, boxy look with the Helvetica bold, and the use of red and blue as background everywhere.

CSS Rockets website

CSS Rockets

This site surprises you with its upwards scrolling to match its theme of rocketing towards space. Aside from the moving clouds, which show up only on the first two “levels”. there are subtle parallax animations when you hover on the objects, and a couple of custom typefaces at work (but not for the body text).

Bogotaconf website


I find the cloud placement a tad odd, some of them seem too high up. I like that as the page is still loading, you’ll see a red train zipping through, which disappears when it’s done. It’s a nice contrast from the rest of the colors on the site, which seems to be a lot of green!

Intellisult website


We’ve had planes and rockets on the previous sites, and here we have parachutes and blimps. I like the chunky blue button styles, but they probably should remember to make the page scroll down to the insult area if the user neglects to do that, otherwise they wouldn’t know something already changed on the page. I also find the white text shadows a little bit too strong for a letterpressed effect.

Social Media Weekly

HTMLThe ‘nav’ abstraction

CSSScalable and Modular Architecture for CSS

Design, TypographyFont-Embedding Icons: This Is a Big Deal

Responsive Web DesignResponsive web design from the future

Sorry, comments are closed.