Design Focus

Friday Focus 04/15/11: Moving Backgrounds

This week on Friday Focus, we’re looking at some sites that employ subtle, unobtrusive animation in their backgrounds.

Designs of the Week

Facio Design

I like the mix of textures going on here, from the scan lines to the paper backgrounds to the pixel waves. Too bad the moving clouds don’t happen on every page.

Go Live!

Excellent illustrations and cheerful vibe. Interesting choice to put the navigation items at the top right rather than the usual top left. I kinda wish the “launch video” could keep playing as the launched site loaded!

Sophie Hardach

The map/nautical theme is getting more and more popular. The best part of this site has to be the contact form, particularly the way you submit by affixing a stamp to the postcard.

Social Media Weekly

CSSSimplify Your CSS With the any() Selector
“This structural nesting makes it considerably more complex to target groups of tags in CSS.”

TypographyWhatFont Bookmarklet
“You can easily get font information about the text you are hovering on.”

ProgrammingWhat skills do self-taught programmers commonly lack?
“Or, to put it another way: What should a self-taught programmer study to get up to speed with his/her formally-educated peers?”

DesignThe Cicada Principle and Why It Matters to Web Designers
“When you notice a distinctive feature — for instance, a knot in some woodgrain — repeating at regular intervals, it really breaks the illusion of organic randomness. Maybe we borrow some ideas from cicadas to break that pattern?”

  1. By Fraser posted on April 16, 2011 at 11:25 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Very nice. Animation when improperly used can make a website look like it was made by a 15 year old in 1995 but when it’s done right it really adds that extra level of detail which could captivate potential clients.

  2. By Ryan Leaper posted on April 18, 2011 at 12:35 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    It’s great to see effective animation effects that don’t just rely on flash. I think the subtlety of the effects help enhance the sites without making them too gimmicky. The last example (the Sophie Hardach site) I think works particularly well. The handmade, textural feel of the waves at the bottom help reflect the illustration style of the book and the scrolling page navigation again helps enhance the sense of movement within the site. I think it could be easy to get carried away with effects like this but these examples show how they can be used to enhance a site without distracting viewers from the core message of the site.

  3. By Jonah Goldstein posted on April 18, 2011 at 2:39 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hey Sophia,

    Thanks for the shoutout on SophieHardach.com

    I hope you actually sent Sophie a postcard:)

  4. Trackback