clouds

Friday Focus 09/30/11: Traveling Clouds

September 30, 2011 By Sophia Lucero

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

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.

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.

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).

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!

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

HTML – The ‘nav’ abstraction

CSS – Scalable and Modular Architecture for CSS

Design, Typography – Font-Embedding Icons: This Is a Big Deal

Responsive Web Design – Responsive web design from the future

Friday Focus 05/13/11: Isometric Buildings

May 13, 2011 By Sophia Lucero

This week’s designs feature illustrations with the isometric perspective in them, giving the sites an interesting birds-eye view.

Designs of the Week

I like the idea of centering a conference website around a week, instead of the regular schedule-speakers-venue-register variety. Of course it’s a trade-off, but in this instance the brand was centered around the “week” so it follows.

Using moving clouds in the background is pretty predictable, but combined with the perspective of the buildings, and mountain illustrations on several pages, it makes sense to feel that you’re high enough in the air to actually be going through them.

Even more clouds in this design, but what’s great is that they’re used everywhere, as backgrounds for event icons and other content boxes. This is topped off with a nice fly-in animation when you load each page.

Social Media Weekly

HTML The hgroup hokey cokey
“To offer a quick recap, hgroup was removed from the W3C specification only (not the WHATWG spec) by Hixie at the request of Steve Faulkner. The co-chairs requested the issue be reverted following multiple requests from the likes of Tab and Tantek. The current status at the time of writing is that hgroup is in the spec.”

Accessibility, HTML, CSS, JavaScript – Front End Development Guidelines

CSS – Holmes: The CSS Markup Detective
“Holmes is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.”

Friday Focus 06/18/10: Layered Screens

June 18, 2010 By Sophia Lucero

Showing screenshots of websites on websites isn’t terribly exciting in theory, but let’s see how these designs dealt with it.

Designs of the Week

Amusing logo. I find it interesting that the designer went for an abstract rendering of a program window instead of the usual Safari. The body text in the inside pages could be bigger.

Love the addition of the foliage as well as the wooden textures, but repeating grass and soil in the lower part isn’t so seamless, so that needs work.

The corner ribbon (more like a cover) on the screen is a good idea, and so is the subtle ruler pattern in the background.

The screens need more distinction from one another, like shadows or thicker borders, but I like the difference in heights.

Not sure if this is “cheating” because the screens are bunched up as one image and you can’t interact with them, but the rotated, peeking through effect looks great.

Again on the “cheating”, the two polaroids in the background don’t change when you click on the arrows, but blurring it out of focus is another technique to consider.

Bigger is definitely better when it comes to screenshots.

Aside from program windows, mobile devices such as the iPhone are popular containers too. I think the stripes and the bright green make for a perky look.

Love the subtle watercolor texture on the edges of the page, as well as the hot pink combined with elegant typography.

As with the previous design, you can mix and match mobile devices with desktop browsers too.

Another interesting technique: opting not to include any real screenshots, just the hardware that will display them.

Not sure if there’s any benefit to this type of layering as, again, there’s not enough distinction between the two especially since they look almost exactly the same. I think the smaller screenshot could have zoomed in on one area of the website.

This may look a little cheesy for some, but since the company built its brand on the word phantasmagoria, I’ll take it. Now the question is, are the sparkly stuff mixed into the screenshots a welcome decoration, or too much of a distraction? I think the ribbon balances it out.

Social Media Weekly

Design – The Tangible Web: Thoughts on Designing Websites for Touchscreens
“Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors.”

CSS – Be a CSS Team Player: CSS Best Practices for Team-Based Development
“How many times have you picked up a project that someone else started, only to discover that the creator’s original code is a mess? Or you work with several team members, each of whom has their own way writing code? Or you revisit a project you created years ago, and you don’t remember what you were thinking?”

Usability – 9 Usability And UX Pitfalls: Learn How To Avoid Them
“If we want to be ahead of the design curve: get more satisfied clients, and happier users, we need to make sure that both we and our clients understand what these points are, and how to solve them.”

Friday Focus 05/07/10: Power Lines

May 7, 2010 By Sophia Lucero

This week on Friday Focus: website designs that use strong lines to guide the eye in navigating around them.

Designs of the Week

I enjoy the textured starry night look and all the rotated text.

Not pictured here, but it’s the microphone wire that traverses the whole site, connected to the amplifier all the way in the footer—very neat. Beautiful illustration work, “Mad Libs” style forms, and typography.

Colorful but not overwhelming. Love the dotted lines repeating everywhere, including the submit buttons, which is a great way to soften the corners up.

Other major design trends going on here: the outerspace look and bold uppercase text.

I like the subtle gradiation of color on the broken lines. But I’m not too sure why one uses <span>s instead of more meaningful tags like <strong> or <em>.

“Follow the road to discover great American craft beer.” Great concept. And the black road echoes the broken lines from the company logo.

We’ve seen this masking effect before and here’s another take on it. Content styling needs a little more refinement (it screams Kubrick, the default WordPress theme) but it’s the illustration that shines.

White on yellow is a little too bright for people, I think, and copy could be improved.

The rainbow stream of rain and the reuse of clouds in the flowchart is really nifty.

The hand-drawn touches here are a bit subtle, you almost want more.

I like that the color-coded folded ribbons also serve as borders for different content areas.

Social Media Weekly

HTML – A Brief History of Markup
This is Chapter 1 of HTML5 for Web Designers by Jeremy Keith.

CSS – CSS Posters
“I decided to create some simple CSS3 posters based on designs that I’ve already created before.”

Design – Visual Hierarchy is the Art of Managing, Not Eliminating
“Visual hierarchy, the classification of elements according to importance and relationship to other elements, tends to be one of the most ignored and underutilized principles of design.”

Friday Focus 09/11/09: Mostly Cloudy

September 11, 2009 By Sophia Lucero

What is it about clouds that instantly transports us to a happy place? This week on Friday Focus, we’re featuring designs with white, fluffy clumps of water vapor in them.

Designs of the Week

Love or hate the abundance of illustrated clouds on this site, it certainly makes a lot of impact. The moving clouds aren’t distracting at all, and are a nice touch. Cute footer too.

I’m disappointed that the clouds graphic on the homepage don’t show up in the inner pages, because it does change the atmostphere of the site, especially the hands peeking out! Makes it a little quirky and fun. The background becomes bare as you scroll down, also making me wish the background was fixed.

Simple, clean, to the point. If there were any more content in here the center aligned effect would have been a bit much, but here it’s just the right amount for a teaser.

Here’s another moving clouds effect. I like that the background changes colors according to different times of the day (I think). And the old style illustrations too, like the manicule (the pointing hand) in the search bar. I don’t know about you but it’s hilarious! Gives the site a lot of personality.

Several details I love here: first, the 3D slash folded paper effect going on in the portfolio items. Makes repeated elements a lot less dull. Second, the footer graphic where there’s a man looking up at the clouds from what looks like a rooftop. Third, the colorful ribbons in the logo and copyright text—I’ve seen it before, but it’s a nice break in color and it does look like ribbons floating in the sky on a windy day.

Social Media Weekly

CSS – 3 Easy and Fast CSS Techniques for Faux Image Cropping

Design – How to Design Buttons to Help Improve Usability

CSS – How to Create a Valid Non-Javascript Lightbox

Friday Focus 09/30/11: Traveling Clouds

Designs of the Week

Social Media Weekly

Friday Focus 05/13/11: Isometric Buildings

Designs of the Week

Social Media Weekly

Friday Focus 06/18/10: Layered Screens

Designs of the Week

Social Media Weekly

Friday Focus 05/07/10: Power Lines

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Cool Tools for Creative Blog Content

Search