Web & Patterns: patterns for a better web.

Take some bevel effect, add in a nice wood texture and apply it on a beautiful lettering. This is the recipe for a logo that will look like the one I stole from Finegoods Market.

Some sweet and simple variations on an arrow symbol (or any other graphic symbol) can make a kick-ass home page.

An easy and colourful start this week, with an edgy magenta error page taken from CodeGeister.

A perforated carboard texture and simple isometric icons convey a technical and cool feeling to this simple and clean introduction.

These cool hotdog illustrations, splashed over a mustard background, reminded me that lunch break is only in 3 hours.

This is a quite obvious example of a simple and useful user interaction: you point the mouse over an object’s pic in Svplly‘s catalog and an “add” button shows up. The implied behavioural pattern is very understandable: if you want something, just catch it.

Nice error page from TrackID the song recognition software delivered by Sony Eriksson. (Thank you Miss Drinkthewater)

These day, you know, it’s all about “liking this” and “twitting that” so that other kinds of rating system may seem so passé. Though, I still enjoy a nice piece of design such this bliss-o-meter.

Nicely styled button for a funny, little flash game where stylists compete in creating the best outfit.

Fun comes in really unexpected ways: sometimes is just a label on a form button.

Having style requires the guts to throw away every inconsequential graphic element and let the content speak for itself, as you can see in this typographic callout. But sometimes your style will also exude from the gentle refinement given by minor details, like the current page indicator (on the top right).

When you move your mouse over the red button, the pin icon starts its crazy spinning.

This huge semi-transparent button obviously steals the show from any other graphic elements. By the way, when they say “give a goat”, they mean it. Literally.

I don’t know what’s wrong with myself but the more websites I see, the more I love these one/two columns minimal layouts, stripped of any redundant graphic element.

A split button is a rather creative idea to add an “advanced-search” link to your website’s search area.

Another elegant example of minimal, high-impact layout, based exclusively on columns subdivision and thin horizontal subdivisions.

Interview Magazine‘s home page is nicely split into three columns: one is for the main content, one for extra features or links and one contains a big black box with the section title. When you scroll, the latter is fixed while the others two move down until a new section starts: when it happens, the [...]

Lovely idea: embedding previews into gallery navigation buttons.

This is absolutely one of the best example of scrolling navigation that I’ve seen in a long time: the movement is fast but smooth and the nice ruler-shaped menu on the left keeps the user aware of the “depth” reached.

Love the opposition between the overall, orthogonal layout grid and the lozange masked photo.

Each letter of this website’s titles is coloured in a different shade of the same colour. When you move your mouse over them, titles get a coloured background and the typography slightly changes colours.

An unusual undulate footer painted in a pleasantly desatured palette.

Immediately loved the gigantic (animated when you hover over them) gifs in The Kickin Chicken website’s menu.

Interesting navigation bar displayed on Fuzzco’s portfolio.

If you’re fond of trademark and logo design, you’ll enojoy for sure Stefan Kanchev‘s work.

A cute white rabbit jumps persistently on a pink, stitched badge, making it sink underneath the browser window. A nice visual trick to invite users to scroll.

I love the way these beautiful, full-screen photos slide underneath the layout, working as a “dynamic background”. Actually, you can look through navigation and other graphic elements as though they were a sort of glass.

If you click the scissor icon for three times, Kickstarter‘s footer literally falls down, leaving a “transparent” background.

Newswordy explains using a simple but gigantic sans-serif typography, the meaning of the most used (and often misused) buzzwords. In fact, the project is a growing collection of these words, updated every weekday. Along with each word is a definition, a quote with its use in the media, and a news and Twitter feed on [...]

As long as you scroll the page and make the footer appear, a dreamy “Icarus” smoothly glides from left to right.