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

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

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

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

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

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.

Happy Friday Focus! Today we’re looking at designs with a bit of a “dip” in them—one content area leading into another with a nice little curve. Can you spot them? Read on!

Designs of the Week

Matthias Schütz's website

I like the combination of wood, light grunge, stripes, and glossy (web 2.0) green—all used in moderation. This design is the poster child for “the dip” technique I’m talking about: a nice column containing navigation links at the right instead of the usual header area, ending in a curly brace shape pointing downward to the rest of the sidebar.

Ellie Taylor's website

This shade of blue is quite popular for girly sites, especially wedding-themed ones, combined with slab serifs and calligraphic fonts. This one looks a little flat, literally, with no textures or gradients, and the girl looks like a cut-out doll with the stark white shadow!

Filidor Wiese's website

Looking for the content? It’s tucked away in the top drawer. The focus of this design is a parallaxed animation featuring an pixelated rendering of the site owner during different times of the day. Right now the screenshot shows him typing away at his laptop (if you watch long enough, his dog shows up but gets shooed away and floats off into space), but click on the different color swatches at the bottom left and you’ll see him doing other things like dreaming in binary, grabbing coffee from out of nowhere, and playing arcade games. Aside from the fact that the colors per scene are blended really, I think this is a smart, funny way for strangers to get to know this person better, even by a little bit.

Snowden Industries website

First, while the callouts aren’t interactive, I like how the first slide is styled especially the halo around the “view portfolio” circle. Hovering over the top navigation gives you circular backgrounds, too, but the active ones get pointers and turn into speech bubbles. There are cool slopes marking each section, and inner pages crop off the the very large headings to focus on the content below.

Sparkling Milk website

The welcome blurb plays with depth by blurring and resizing objects to make them look like they’re in the background. The illustrations are straightforward, but the use of a patch of grass to separate each section is clever. You must also check out the hover effect on each portfolio item, like a store sign or label. I must say, though, the way the contact form is center-aligned in the footer is a little weird!

This week on Friday Focus, we’re zooming in on designs with a superhero slant. We’ve had robots and ninjas before, so it’s no surprise people turn to yet another persona to welcome visitors to their sites.

Designs of the Week

RUhotEnuf? website

The first screenful of this one page site perfectly captures that action-packed look found in superhero comic books: complimentary colors, action bubbles, and of course, a sunburst. I love how seamless the latest tweets displayed inside the speech bubble looks with a nice comic font. Lots of nice subtle textures too, including the halftone pattern you see in printed materials. Scroll a bit lower and after you get some nice animations on the thermometer, both in digital and analog formats.

Logoman website

This one’s a little tame, if not underdesigned, compared to the others. I would’ve wanted less gray and more green at least. I do love the way their logo is styled, and how the logos in their portfolio have vignettes and small drop shadows, more like business cards than framed portraits. The superhero look just needed to reach out to more parts of the site.

UX Heroes website

Love the utility belt to reinforce the superhero look. It gets a little “safe” in the middle part (another one page site) but there are very nice interface details at the bottom / checkout portion: you use a slider to specify the price you’re paying for the bundle, and your virtual receipt is appears to print out from a slot.

This week on Friday Focus we’re featuring a specific type of texture being used in websites: denim. Is it the new wood pattern? Let’s find out.

Designs of the Week

Enliven Labs

I like that the texture used isn’t the typical blue fabric, which also means you aren’t limited by the color palette for the design. You see color swatches at the top, a fixed red ribbon background, and a huge call to action button once you get to the bottom of the page. Also, in the quest for integrating social icons into a design, we come across another technique: there’s a dark silhouette of the Twitter bird, which “lights up” into full color when you hover.

wtfJeans

The jean texture looks interesting but seems to be fighting with the navigation text. I think it’s good that the figure text is actual text, and not merged with the rest of the pants diagram. The “Made In Europe” text looks a little out of place, and could have been styled more like a badge than a button. What I really like is the textured circular backgrounds in the four bottom links—not mind-blowingly stunning but a nice touch.

Alexander Hahn

I love the stitched look especially on the logo. It’s a simple design, based on an existing theme in fact (as noted in the footer credits), but the idea of using two “layers” in the background, bounded by a vertical border on either side, is something I don’t see everyday.

Drupalcamp Atlanta

This site ties many different elements together to create a lovely design: vintage typography, tickets that look like tickets, folded tabs, and even orange-dyed denim shaped as ribbons! However, the orange on dark gray, combined with the Harlow font, is a little taxing on the eyes.

As a fan of simple to use “what you see is what you get” (WYSIWYG) applications I was pleasantly surprised over the last few days to be testing Basekit, a website builder that allows for easy and attractive website creation.

The system works by allowing users to pick PSD (Photoshop) templates which are geared towards certain users such as artists, traders, photographers and various other sectors. Users can choose from literally hundreds of available templates.

Once a specific template type is chosen users are then able to drag and drop certain functions into their website. For example, you can choose to drag a navigation menu to the top of your template (or any other location you choose) and then add a Google Maps location to the center portion of your page. By layering elements on top of each template Basekit makes it simple to feature certain functions in a matter of seconds.

Much like WordPress, Tumblr and other content management systems the Basekit program also provides a decent set of widgets, for example users can drag their Flickr account into their website or setup RSS, Twitter and Carousel options with ease.

I personally tested Basekit.com with a sub-domain on their system (subdomain.basekit.com) however the site also allows users to point their own domains to their monthly Basekit account, creating a more personalized experience. Users can even add Google analytics to their site to track visitor numbers.

Not only does Basekit allow users to quickly create website pages, it also gives excellent customization options, for example I was able to easily change content fonts, line height and other information using simple drag bars while coloring is just as easy to implement. The program also allowed me to choose which parts of the website I was attempting to modify, for example I could choose different font and font sizes for the body of pages compared to headings.

The Basekit program also allows users to easily setup the columns on their website, for example a user might want a top column for their header and then a content area followed by a sidebar, all of which can be dropped into place by make a simple setup choice.

For more advanced users the program also allows for manipulation of direct HTML and CSS code. After a page is created users can access tabs which allows them to manipulate the base code of their websites.

Throw in the ability to add videos and images with simple drag and drop functions and it’s easy to see how simple it is to create a website using Basekit.

For users looking for distinct web pages Basekit is a great option which provides a decent set of website building options. Drag and drop functions, the ability to customize your entire website via HTML and CSS functions and a sleek interface makes Basekit worth a closer look, especially for users who only need a smaller website that can be easily customized on the fly.

This week’s Friday Focus features designs that incorporate the moon in them.

Designs of the Week

Ryan Lottering

Let’s talk about the moon and how it’s in the top right, in the foreground, spinning oh so slowly—just enough for people to notice it’s moving. Overall look seems simple, but I think it’s effective and still makes an impact. I think it’s interesting that the site labels the homepage as the About page at the same time. One nit to pick, while not visual, is that there are two different email addresses being used in three email links.

BlackMoon Design

It’s funny how this site also uses the Star Trek logo as one of its icons in keeping with the outer space theme. I love the illustrated, painted look in the header, including the word “design” in the logo (which doesn’t look like just another handwritten typeface). It’d be nice to have the headings as real web fonts now instead of images, but then I discovered that the whole design—and I mean every graphic you see on the page—is one big sprite, so kudos to that!

Things We Left on the Moon

This is just a demo site created by Dan Cederholm for An Event Apart Seattle 2010, but there are a lot of neat things to be inspired by here, particularly CSS3 features in the hover effects and typography. Love the idea of the halftoned moon landing picture as a background. The use of purple is also a nice touch, since it’s easy to just reach out for midnight blue when depicting skies and space.