Web & Patterns: patterns for a better web.

A nice error page, clearly shaped as a navigation flow chart, from Konigi‘s, a reference website for what concerns user experience and interface design.

When it comes to pricing tables, it’s quite usual getting the different offerings arranged into columns, in order of increasing price from left to right. But another quite remarkable trend in web design is slowly spreading: it consists in positioning the most relevant (according to your business) offer in the middle of the table so it [...]

Yellow is a powerful, cheerful colour but rarely used in webdesign because, I suppose, of its inner lack of contrast. You can find it quite likely associated with black or, as in this case with cyan, and it’s often used in design-related websites. This time, we want to show you this nice, huge yellow tabbed [...]

Quite a classic but nonetheless we loved this fresh, neat drop down menu, designed in a lovely palette with a clear, simple approach. This web design sample comes from emPivot‘s website: emPivot.com is the first online network to bring together the wide range of user generated and premium video content related to the environment. As [...]

Sometimes not founding what you’re looking for could be sooooooo frustrating: that’s more or less what this funny illustration from CSSRemix error page is trying to tell us.

Here you are a classy, finely shaped tab menu from Weightshift, a small studio based in San Francisco. Though we loved this web site on the whole (the typography is great and, generally, you can catch a meticulous attention behind every detail), we liked the most the quite vertically compressed menu (since the so-called web [...]

When I first saw this nice logo from Rype Arts it immediately occurred to me the classical sterotype of the nerd guy with his shirt pocket stuffed with pens. In effect, this digital coat of arms depicts exactly the tools I need for my everyday work routine, so it really deserved a mention on Web [...]

When it comes to grid-based web design, one of the most charming and peculiar grid structure example that occurrs to me it’s UX Magazine‘s layout. The square-based structural balance of this layout it’s quite obvious but it could have turned out annoying and boring if designers didn’t conceive some visual tricks that, breaking the grid [...]

This is a quite innovative and original comments listing example that comes directly from Particletree‘s blog: setting the comments on two columns instead of one let you squeeze the discussion into a more compact, less dispersive space, with the side effect of making eventual question/answer/reply threads less legible.

When you click on the huge button on the top of Why Every One Loves Tumblr page, you’ll see a big check list menu appearing with four differente choices. This is a peculiar way to navigate between section that I’ve seen only here but I think that may possibly turn out useful in many other situations.

A nice idea for Clearleft, a web agency specialized in user centered design: a web site menu made of numbered cards that makes a not so subtle suggestions to methods applied in Information Architecture.

You can create an effective callout box simply by breaking layout grid, playing a bit with typography or/and colours and nothing more. As you can see from the pic, here you are an elegant way to create associating annotations, mostly seen on newspapers but that works superbly on websites as well.

A nice monochrome footer from laFraise, a t-shirt competition website. We love this wintry, cold blue footer with warm mouse over effects and we must admit that the shopping section is very tempting. Très joli.

Here you are a spectacular background image, with a nocturnal imaginary from Pixlogic, a web design company: every major “fragment” of this impressive collage moves in the opposite direction of your mouse, with a quite enjoyable and memorable effect.

Two things at the same time: a nice, fresh web logo and an inspiring logo collection from Jordan Gray‘s portfolio. Here you are more infos about Jordan: My name is Jordan Michael Gray. I’m a graphic designer, independent filmmaker, former print-news editor, and I currently work as an art director for Bernstein-Rein Advertising. I also [...]

SlideDeck is a powerful, customizable, script framework that allows you to create self-guided tours, slideshows or powerful and impressive step-by-step presentation that will enhance communication between you and your website’s users.

Being a gifted illustrator really comes in handy when you have to enlighten your website’s footer and yes, you got me, this post was just a lame pretext for showing you Loscoloresolvidados‘ illustrations. PS: You can find really nice desktop wallpaper as well!

Giveusalift is the name of  WRVS‘ website. WRVS is a national charity that thinks every older person in Britain has the right to live the life they want. Despite this serious mission, the website is really cool, with lots of nice graphics solutions and this absolutely funny 400 error message. It’s true, sense of humour [...]

Glossy buttons age it’s not over yet and so we quite enjoyed Madsen Cycles ecommerce buttons because they really stand out in opposition to the overall layout minimalism.

Our attention was grabbed by a clever fonts comparison system in MyFonts‘ website: using a little sliding widget in the left sidebar, you can browse through thousands items, comparing the A glyph of available typefaces. You can get a more detailed preview of your type by simply hovering over the letter with your mouse.

A shiny circular peeling badge with a white dashed outline. Nice idea for highlighting your website interface.

Kiehl’s online store is one of the most accurate and fully equipped ecommerce website I’ve ever seen. You can find: a neatly separated sign in area; a global website navigation; a products tabbed navigation; a simple breadcrumb trail; a facet navigation duplicated: on the top as drop down menu, on the left as checkbox choices; [...]

A heavily, in a positive way, styled footer and a fascinating tropical imagery from Komodo Media ‘s website. Apart from the stunning toucan mascot, we loved the brilliantly cd-shaped last fm widget (Jamming to).

Could you tell the difference between the breadcrumbs and the navigation? When both are displayed it’s quite obvious, but in other pages (look at here) it’s not. Though it might turn out to be a nice graphic expedient, I think it could be risky to disguise one user interface pattern (navigation menu) as another. (breadcrumbs [...]

Feedly, IMHO, it’s a must-have Firefox add-on. In substance it’s a RSS reader, based on Google reader, that makes your contents look stylish and magazine-like as if they were designed by the coolest graphic studio in town. Add to this a nice karma feature that shows you how people react to your tweets. (Un)fortunately we [...]

Brown typography and a wood texture give a natural, warm hint to the page while the nicely scribbled horizontal ligns complete the organic quality of this comment form .

Vibrant orange colors and the H crossbar bent into a happy smile really convey a joyous, bright mood. It made us smile.

First I didn’t understand who was Daisy. Then when my brains started firing on all cylinders I realized it was a beautiful, funny 404 error page slightly inspired by The Wizard of OZ. If not entirely, I’m a little bit of Scarecrow myself.

The latest thing in web buttons design appears to be the icon-button, a classic graphic button with an embedded icon. We like the fact that icons are able to bring to the forefront button’s intrinsic action and set you free from reading (or in this case understanding) textual labels or explanation.

I’m a typomaniac, I confess, and my favorites ecommerce websites are most of all digital foundries’ websites. Usually this kind of website displays clean, sophisticated layout grids with minimal graphics elements such as horizontal dividers and flat geometrical buttons. Big headings and wide, spacious whitespaces (which basically means removing all the graphic overbearing elements from [...]