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.
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.
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.
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 2.0, we usually can spot only gargantuan tabs navigation) with small rounded corner, polished by graceful overlapping circles and subdued mouse over effects.
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!
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.
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.
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 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
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 never ages!
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;
- 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 .
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 menu). Don’t you agree?
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.
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.
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 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.
A nice picture, fresh and carefully selected can do wonders for your website: for example, sign up form are sometimes a little bit too bare, but you can warm up things with a colourful pic. Actually in this case the photo it’s the same from the home page but nevertheless it’s a good inspirational snip.
If you want to learn more about Spokeo you can check our previous post.