Web & Patterns: patterns for a better web.

Zen minimalism? Absolute cleanliness? Radical chic?  How to describe the interface of this study of Japanese Interaction Designers?

A successful combination of primary and secondary navigation in the inner sections of this famous Italian website.

Very refined  both the desaturated palette and the grid of this New Zealand online shopping.

A website and a project dedicated to RSS and Atom icon!

I like Incspring philosophy: recycling logos and brand unsold (and unused) at a reasonable price for a start-up!  The interface is well-designed and full of interesting details.

Saturized works are all prestigious and of high quality. They find a worthy exhibition space in this showcase that has a dual navigation: one to move through the individual project (number on the top) and the other one to skip to another project (the arrows).

Although their use has been dramatically (and thankfully) reduced in recent years, tables are the most suitable tool for expressing numerical values.  As in this case, using a bit  of fantasy, you can make even a price plan table attractive, nice and clear reading.

  It’s an interesting idea linking the background illustration to the logo as in Readwhale home page: a social network dedicated to books (as the most famous Anobii and Shelfari), that reports automatically on Twitter updates in your library.  To explore!

Twits at the end of page are a great way to customize an area often lacking in content.  Nice arrows and  bullets.

I like blogs with a very rigid grid layout  and extreme use of typography.  Even when the colors are so sharp.

An absolutely typographic approach, based on an abundant use of Caslon for this blog with a retro style and a title full of good intentions.

The footer on Douglas Bowman’s blog, currently Creative Director in Twitter and, among other things, the former leader of Google Visual Design. Apart from being graphically impeccable, this is an excellent example of the increasing trend in using the bottom of the page to express something personal…in short, footers are no longer a simple layout [...]

Delicious designers have created a strange hybrid of breadcrumbs and form:  user can see  sites associated with a tag, write the name in a text input queued to the breadcrumbs path.  After sending data, the input text is transformed into a path link, in a process that virtually could keep go on going until the [...]

  This paging is graphically “important”, but well balanced.

I like very much vector illustrations, even when they are very geometrical such as this.

Although from a functional standpoint it doesn’t have any practical avantadge, the drop down menu/ button in which is embedded user’s avatar  is very effective in creating an enjoyable user experience.

Glossy buttons really bugged me: despite this, I love these ones..  I noticed that this social  choose a style s diametrically opposed to the minimal-functional-googlish look of its major competitor, Anobii. An accidental or a conscious differentiation?

You broke something? Nextwave error page brings out the hidden geek in us.

Apple breadcrumbs trail is not used consistently within the website and , among other things, there are two slightly different version of it:  in the online store is located at the top and the path first link is a house shaped icon that leads to subdomain store.apple.com;  in the “real” website is placed at the bottom [...]

The Guardian online offers an interesting example of  breadcrumb navigation used not only for the purpose of showing the current website section, but also its possible subsections (Politics, Business, Health are indeed subsections News).  Vivid colors are applied to graphic elements and titles of each section, in contrast to the majority of online newspapers that [...]

icon

Kosmix grid, evidently modular but not static, it’s designed on the purpose of allowing its customization: users can move blocks of information, thus personalizing their own home page.

Purplerockscissors website is clear, consistent and show an interesting use of Futura ExtraBold.  For those who want to build a sliding portfolio, I recomend this example, where all is well calibrated and the tab “view now” lays on the bottom right, without spoiling the cleanliness of the whole.

If you are looking for inspiration or just a little “web fame” , avatars wall created by Webdesigner Depot could be a good starting point!

A full Apple style for Mobile login mask: it’s clearly inspired by a minimalism so fashionable today, while on the other hand provides a wide range of visual signs.

A nice page and a little different from the usual to report a not so nice disservice.

These  panels that slide side to keep out the three fundamental pages of the site are quite of interest.  One could apply this system to present search engine results, listing, for example, in the main page lists the textual elements, and putting video, maps, images in other pages.

The aesthetic result is certainly not the strong point of these icons that are very understandable and clear even if they’re only 10px wide.

We absolutely love icons (maybe I’d better to call them illustrations) collected by  we-heart-icons guys.

This “live feed” listing is really an example of good design. On a very clear and clean grid, are neatly arranged items of very different types (tweets, post photos from Flickr, videos from youtube) and yet the whole is very clear, readable, enjoyable.