Tag Archives: blog

Fight for future eco footer

A plant extending out of its pot, sustains this website’s footer, underlining the organic and green inspiration of this blog.

Fight for future in fact all about environment:

an interactive online campaign dedicated to educate and create awareness on protecting and conserving the Mother Nature in the most easy and fun way. It is like a giant shopping cart that is loaded with practical information and also handsomely designed eco-friendly products to each and every one of us.

Fake letter contact form


Contact forms set on a paper, usually a grungy or stained one, are not so unusual on the web: but while text inputs are commonly aligned vertically inside the form area, in this case they’re scattered among paragraphs in a way that makes you think you’re writing a real letter. Text alignment, slightly tilted, enhances this sensation.

Minimalistic black & white comment listing

jontangerine-blackandwhite-typographic-comment-listing

This comments listing, taken from Jon Tan‘s website, is an excellent  specimen of good type treatment (the text is consistently set on the same baseline across the two columns), minimalistic use of horizontal rules to divide content (single and double) and just a gray/black scheme for the text treatment.

Simplicity is not that simple, is it?

Bill Gates’ notes navigation: a metaphor

bill-gates-notes-website-menu

I really can’t remember why (serendipity, I’d suppose) but recently I’ve stumbled into the Gates’ notes, the website that spreads probably worldwide most famous mogul’s thoughts about the matters such as philanthropy, climats, development…

Apart from the fact that the whole thing is written in the third person, which really gives me the creeps, I’ve  found interesting the curved and tortuous menu that reflects the complex and multilayered site’s structure.

Despite a slight dislike due to the visual treatment (one for of all,  typography is really too small), I’ve found myself clicking on it several time, wondering how come an interface could work notwithstanding its lack of appeal: so I’ve realized that what I was really appreciating, was the metaphor it embodies; the nested graphics that appear/disappear when you click, make the menu exapanding and unravelling in parallel with your travel through Bill’s thoughts progresses, drawing kind of a map of your steps.

So what I really wanted to say is that if you find a good metaphor you can somehow visually express, it could turn out to be a really powerful trick to keep your audience hooked no matter if they like your style or not.

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.

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

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?

Light, minimal, simple HTML menu

inspiring-minimal-html-menu

Minimalist web design it’s one of our (many) recurrent thoughts when reviewing websites. It’s really tough to come to inventive, not bare-looking solutions when you strip a website of every graphics assests and you’re not allowed to play any of the usual webdesign tricks. So we really loved this simple HTML menu, a nested list actually, with only a red dot left to grab user’s attention and to mark main navigation categories.

Psdtemplate ratings and comments listing

psdtemplate-ratings-and-inspirational-blog-comments

Psdtemplate is a really handy blog, full of resources for webdesigners and rich in tutorials and tips (and obviously it’s in our favs list).

We loved the rather fully equipped rating system displayed in the comments listing, by which you can add/remove score to a comment and even submitting it to admin’s attention (exclamation mark).

Stop! In the name of money!

powerful-inspiring-callout-box-example

This is a powerful callout box found in Income diary, a blog that hopefully will teach us all how to earn an additional income from the Internet.

Apart from the blog’s lofty ideals, I really think that in this case the association of a street sign icon with a heavy typography and a bossy copywriting can catch user’s attention and push him into reading, which  basically is what a callout box it’s about, isn’t it?

A magnificent error page from Carsonified

carsonified-creative-funny-error-page

Carsonified is really a studio we wish we could work for: we passionately follow their famous blog Think Vitamin and we admire their great style.

So we are proud to introduce you their quite famous error page based on awesome illustration and  funny copy. We love as well the heavy use of Cooper for the heading.

A curious line-height typografic treatment from Hitotoki

hitotoki-googlemaps-mashup-typographical-treatment

According to the website’s About page, Hitotoki

is a Japanese noun comprised of two components: hito or “one” and toki or “time,” and is often translated as “a moment.” In common usage, it can be used to describe any brief, singular stretch of time (if we share a meal someday, you can call that a hitotoki).

To put it in an easy way, Hitotoki is a narrative project I’ve found via Konigi, that collects novels related, a way or another, to a specific location. While Konigi points out the use of a Google map mash-up as navigation system (hovering over a thumb make the map move and vice versa), I was instead fascinated by this websites’s typographic treatment.

In fact, using Hoefler text with a strict line-height space make home page titles slighlty overlapping in a haphazard, designless way that perfectly fits in the trembling, hand-drawn layout frame.

So if you’re looking for a fresh, organic typographic treatment for your website design, maybe you should really give a glance at Hitotoki.

Shopping losts: little lists turned into typographical treats

Shoppinglosts inspirational typographical lists

Shopping lists is a fab typographical project: this blog’s aim is turning little lost shopping lists into typography posters, showing that some poetry can be found also in a neglected piece of paper, trashed onto some store’s floor.

For each saved specimen, Shopping Lost displays the original shopping list, who found it, where it was found and the results after the typograhical boost.

If you like it, you too can send a shopping list you’ve found to Simon Attwater, the mastermind behind this project, so that he’ll turn it into something magnificent and treasurable.

Jason Santa Maria’s 404 error page

Jason Santa Maria's inspirational 404 error page

This loooong 404 error page text from Jason Santa Maria’s blog made me chuckle.

Oops! There isn’t even a remotely meaningful page here; not unlike the rest of this site. At least some of the other pages have some pretty pictures to look at. Why don’t you try starting again from the front door? Or maybe you would just like to contact me to inform me of your hatred of me and my website for not having the page you requested. Either way, you don’t have to go home, but you can’t stay here.

tehCpeng’s call-out & badge

tehcCpeng's call-out and badge

TehCpeng is Shen Hang’s personal blog: Shen’s a Malaysian engineering student, a capable photograph and a devotee of the-C-peng which is this visually stunning tea drink.

While we’re looking for where to find the-C-peng in Milan, we’d like to show you the cafeteria badge hanging on the top right corner and the red/yellow tabs, you can find scattered all over the site: the slight shadows they cast, make them really pop out.

Letterpress styled text on the Web

Letterpress styled text

Letterpress styled text seems to be quite a popular typographic trend and I’ve been positively struck by the way it’s displayed on Tyler Thompson‘s blog because I think in this case it really helps users with reading negative text.

Tyler, creative director at Squarespace, simply applies the css3 text-shadow property, that’s been available in Safari since the first release but, when it comes to other browsers such Internet Explorer from 6 (which is a real pain in the ass) to 8 and Firefox 3.5, seems to fail.

For those who don’t know how this property works here you are an example:

H1 { text-shadow: 2px 2px 3px #000; }

There are four parameters involved: shadow’s right shift, bottom shift, blur and color. Pretty easy, isn’it?

A dare to web standard types

Benlew's typography

We’re definitely happy when our brave colleagues dare to use non-standard fonts on their websites. In fact, compared to graphic designers, our lives are gloomy and sad, having to deal with a so narrow typographic range and we all rejoice when, instead of feeling deprived and miserable, some of us has the guts to break free from the Web-Safe-Type Cage.

Apart from merely aesthetic concerns, the main difficulty inherent in having a barely adequate type set is that available options, when you try to express informations or even to enhance your brand awareness using typography, get dramatically narrowed down.

So it’s an information matter more than an aesthetic issue.

It’s, let me say, an emotional problem too. If  it is true that the font (including “micro” typography decisions about leading, letter-spacing…) you’ll choose, will affect the way your readers perceive your page, it is also true that using fonts people are well acquainted with, won’t ever generate reactions of surprise, amazement or overpowering wonder.

While will stil wait for @font face css rule to become a feature widely supported and the present state to change, we love to read Ben Lews’ portfolio’s headings written in Gill Sans.

If you’re interested in further informations and more examples about @font face rule, you can check this article on A List Apart.

Useful infographics part 1

useful infographics examples

I was quite fed up with charts I’ve been drawing for the web site I’m working at, finding boring and pitiful that I had to deal with simple and non-creative forms (such as bars or pie-charts) while other designers, with less restrictions, are able to design beautiful and inspired infographics.

I’ve started dreaming about using complex visual representations you usually see on newspaper or PDF also on web sites, where real time data and pre-defined frameworks are the most common constraints.

So, while I was looking on the web for some inspiration, I’ve run into some amazing web sites dedicated to infographics that I’ll publish very soon on W&P.

For a start, I recommend you this post I’ve found on Sixrevision.com:  this is only an example of what you may get!

Enjoy and be inspired.