Design Focus

Friday Focus 11/18/11: Moustaches for Movember

Last week we celebrated 11/11/11; this Friday Focus we’re looking at inspiring moustache-themed designs in celebration of Movember or men’s health awareness month.

Designs of the Week

Movember website


Lovely use of varying textures as backgrounds to the equally grungy icons. Even the boxy graphic items employ rough edges to break up the straight lines.

Gallery of Mo website

Gallery of Mo

Hilarious seeing moustaches in the background wallpaper of this gallery style site. It doesn’t stop there, either: hovering on the donate button shows a moustache as an arrow/marker replacement, while the left and right arrows for sideways scrolling use curly braces instead of the usual sharper brackets or triangles. I also like that the gallery frames vary from portrait to portrait.

Octavo Designs Movember website

Octavo Designs Movember

Very few elements on this page, but it’s notable how the layout is responsive and adjusts to smaller screens. Also, animated GIFs seem to be making a comeback.

Lambert Street Handlebar Club website

Lambert Street Handlebar Club

Brown seems to be the predominant color in all these designs, not to mention an adaptation of vintage elements and typography. This site’s spiced up a bit with collages and a brighter than usual color for its wooden background.

Movember Austin website

Movember Austin

This tumblelog actually uses a slightly modified theme but I thought it would be nice to feature its look here, especially the bento-style menu I’m growing to love more and more. Too bad the drop-down menu doesn’t look as rugged!

No Shave History website

No Shave History

Love the idea of the logo matching the background for a masked look. The hover effects on the photos are also a snazzy little idea (read on below for similar ones).

Social Media Weekly

CSSOriginal Hover Effects with CSS3
“We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.”

HTMLInteractive Typography Effects with HTML5
“I will go over the development of dynamic, and generative banners to give your website that little extra wow!”

Interaction DesignThe 10 principles of interaction design
“Chad Vavra, interaction design director at The Barbarian Group, rounds up 10 key rules that make good interaction designs and designers and that you need to understand before you can break them”

JavaScriptExploring JavaScript’s Logical OR Operator
“With the || (OR) operator, since values don’t need to be explicitly true or false (they can be truthy or falsy), the operator can return non-boolean results when evaluated.”

User ExperienceA Brief Rant on the Future of Interaction Design
“Our hands feel things, and our hands manipulate things. Why aim for anything less than a dynamic medium that we can see, feel, and manipulate?”

Sorry, comments are closed.