Design Focus

Design Focus: Sliding Backgrounds

This week’s featured designs are a new round of subtly moving backgrounds for the year. Check out how the trend has evolved here.

Designs of the Week

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Disqus website


Not only is the animation as unobtrusive as possible—to avoid distractions or seizures, one hopes—what’s really great about this design is the product demo is right on the page: front, center, and live. As you interact with the comment box, new tooltips appear to highlight each function you can try out. Some people might not be too comfortable with the ultra bright blue, but since it’s mostly in the header and only sprinklings in the other sections, you can just scroll past that and focus on the other clean elements.

Characters Mac app website

Characters Mac app

Most of the designs featured here animate a background with a wallpaper look: repeating icons, grayed out. This one’s an interesting exception; it appears to be a layer of “dust” sliding over a blush sky. Another good design that features the product although statically. This would have been a 10/10 if web fonts were used for the headings.

Stuff & Nonsense website

Stuff & Nonsense

A fun little responsive effect when you change viewport sizes: the guy changes age and the scooter changes features depending on the width of the browser. It’s a kid on the narrowest one and full-grown man with lots of bags (and mirrors!) on the ride. The illustration also serves as a current page marker above the menu (except for the narrowest breakpoint).

Other Icons website

Other Icons

Neat, simple, black and white site that’s all about the icons. I’m wondering why the gallery at the footer uses a background image instead of an img tag but my best guess is to discourage theft.

Vale na sua vida website

Vale na sua vida (Vale in your life)

Icon and illustration one page site that consists of a step by step survey/quiz. Although it’s a little long (around 22 items before you get your result), not a pixel is out of place and the visualizations—both icons and graphs—are lovely.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Mobile Web DesignNine Ways to Improve User Experience in Mobile Design
“Here are nine tips from the book for optimizing your site for all those mobile site visitors.”

“There are lots of new and interesting features out there and it would be awesome if you could take the time to play with them and provide feedback.”

JavaScript, OptimizationThink First, Code Later
“By including strong engineering practices in your front-end, and trying to minimise technical debt, you’re at least giving yourself a decent safety net to guard against the “can we just…?” tendencies that are a fact of life.”

  1. By Tan posted on December 17, 2012 at 8:05 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi Thord I came across you site and I’ve been browsing around a read some posts. Especially interesting mobile web design so I” be back for more info. Thanks.

  2. Trackback