Onehub clear pricing table

onehub-inspirational-priceplan-table

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 creates a powerful visual simmetry that really grabs user’s attention.

Big yellow tabbed navigation from Duplos.org

duplos-inspiring-tab-menu-webdesign

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 navigation, with the selected item enormously protruding.

A creative drop down menu from emPivot

empivot-inspiring-webdesign-dropdown-menu

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 a result, emPivot is a powerful aggregator of green-related media content for anyone and everyone to access online.

Slightly rounded tabs navigation

weightshift-inspiring-tab-menu-webdesign

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 2.0, we usually can spot only gargantuan tabs navigation) with small rounded corner, polished by graceful overlapping circles and subdued mouse over effects.

A nice nerdy logo

rype-arts-inspiring-logo-design

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 & Patterns.

But most of all, remember guys: Geek is chic!

An inspiring square based layout grid

ux-magazine-inspiring-layout-grid

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 integrity, would create surprise and regain user’s attention. Merging two or more units to create rectangular spaces is one of them and for sure the upper-left corner of this page has been astutely designed: when you see for the first time this page, the red colour grabs your attention so the eye, following the ascending red lines, reaches the photograph that unrolls its text horizontally across the grid units.

Another  smart idea is the quotation call-out box: as in the aforementioned example, I think that the eye movement starts from the bottom, from the photograph I mean, that makes itself very visible for breaking the chain progression of text boxes, and then it goes up to reach the rectangular baloon with the blue outline and the citation text.

In the end I think that you can see this layout  as a sort of a big, typographic Tetris game, where every major graphic assest falls exactly into place.

Nice cup logo and logo design portfolio

jordan-gray-inspiring-logo-design

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 created a serial comic strip called Middlebrow and I’m slowly coming along with a children’s book about beards.
I love creative communication, and have a special affinity for vintage typography

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 created a serial comic strip called Middlebrow and I’m slowly coming along with a children’s book about beards. I love creative communication, and have a special affinity for vintage typography

A funny 404 error page written on a cardboard box

giveusalift-funny-404-error-page

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 never ages!

Clever fonts navigation by sliding glyphs

myfonts-font-slider-navigation

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.

Kiehl’s outstanding ecommerce layout

kiehls-inspiring-ecommerce-website

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;
  • detailed product listing with quick shop (it means add to cart actually) and learn more buttons;
  • a double tabbed shopping bag: one for choosing your sample, the other for checking out your cart.

In particular I think the drop down shopping bag it’s well designed: you can see products appearing in your sample bag as you choose them, how many samples are left, and photographs of items you’ve aready selected. In the cart box, there’s a complimentary shipping information box and you’re constantly reminded to sign-in or register .

Fake breadcrumbs in Hootsuite Blog

hootsuite-blog-breadcrumbs-menu

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 menu). Don’t you agree?

Feedly funny error page

feedly-funny-error-page-message

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 haven’t seen its funny error page…until now!

PS: Obviously, in this case we can’t link directly the error page. So, this time, you’ll have to be satisfied with the app’s website link.

Creative web buttons from Agentia Kairos

agentiakairos-inspiring-web-buttons

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.

Typetogether minimalist and classy ecommerce website

typetogether-foundry-minimal-ecommerce-website

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 the page) are the most common trick for making your beautiful and precious digital merchandise pop out:  in this impeccable, squared presentations cart usually are represented as coloured boxes which are able to stand out because of their strong contrast with the surrounding white background.