Web & Patterns: patterns for a better web.

A beautiful bouncing on Idea Foundry web site, a company that deals with training in information technology.

An example of grunge style applied to contacts form in the Kev Adamson’s blog, illustrator and designer .

Even statistics have a heart: Kissmetrics logo proves it.

I like the site menu on Ifinstanbul (a turkish film festival) web site:  each menu item has a color which is used also for  layout and text elements.

The footer on Fatburger, a web site that provides the calories of your favorite restaurant’s dishes, maybe not a masterpiece but it definitely hits the nail on the head.

Unfortunately, the contest is over and he was not selected among the finalists.  Fortunately, the site of Josh Willis and his illustrations are still online.

Beautiful vector illustrations for the slider of Inner Revolution, a web portal dedicated to free-thinking philosophy.

The archive of beautiful illustrations of Spanish artist Alterebro is real clean and simple  and CSS friendly (in effect I don’t think it would take more than a class to build it). Mouse over links is fundamental to the reading when you deal with text with a poor contrast.

Thinkingjuice, advertising English, takes up the idea of using sliding panels vertical for its sidebar (already seen on Apple web site).  Compared to Apple’simplementation, I like that the triggering event is the click on the arrow (and not the mouse over): on the other hand I appreciate Apple’s transition speed which is a little bit [...]

I think that Dailyrt listing, a Twitter-based application, is an intersting example. In particular, I like:  the block made by the rating and the tweet-this button;  mouse over effect on the list;  the numbering on the right.

Selection and content filtering buttons on Viljami Salminen’s portofolio: halfway between web and operating system graphic.

The  equal-opportunity-button to enroll in Ruadebaixo, an online magazine of lifestyle and culture (in Portuguese).

Breadcrumbs trails in registrations or, generally speaking, in wizard like this, have the important function of communicating where the user is at and how many steps are missing to the task accomplishment.

I have a passion for non-conventional listings and grids based on squared (or nearly) patterns: Method web site grid, a communication agency specialized in creating unique brand experience, is one of my favorites.

Rustin Jessen uses for the lettering of his blog dedicated to typography Adobe Caslon: does it still makes sense speaking of web fonts, web safe typefaces or systems fonts?

Especially interesting from a functional standpoint, the page-slider on Thestrangeattractor, a communtiy for creatives but also a web portal full of resources and useful links for people constantly looking for inspiration.

I love the way these tabs smoothly change of color when you hover on them.

I think Swiss Miss’ error page is really funny.

A classic horizontal tab navigation with 3 different states (selected, normal, mouse over) for each item. Fontshop is the foundry founded by Erik Spiekermann.

An original black background for the search and the booking forms on Design Hotels website.

I immediately loved  Modalinc low-fi icons, an U.S. study of interaction and design.

When you invite someone to start a wizard, it’s always a good practice show how many steps are required for the enrollment, the strengths of your product /serivce or the benefits derived from an inscription. The numbered list of Scrapblog is a good example of this; besides buttons have a pleasantly unconventional form.

Using a mascot to characterize your website and so creating brand awareness is a current trend in web design.  The most important thing to keep in mind is using a custom designed mascot and avoiding stock images.

Carbonmade is a valuable service for creatives and designers, that allows you to quickly create presentations and portfolios of your work.  The login mask is placed at the end of an interesting “waterfall path”, made of colorful forms that attract the attention of the visitor and lead the eye to the sign in form.

Floral menu and  layout for a company that deals with eco-sustainable projects.

The logo on Jon Tan’s blog is made entirely with HTML code and CSS (no images).

Huge chose the way of an absolute minimalism to present itself to the market: a typographical heading gives character to pages otherwise devoid of any visual treatment.

Twitter error page, the popular micro-blogging platform.

Wefollow, the directory of the most followed Twitter, is arranged in square blocks of 5 elements, each linked to a particular topic.  The result is certainly more readable of the endless list that typically are used in directories websites

Alltop navigation menu allows you to browse contents by topics or by letters.