An antiquish decoration is used here for creating a nice distinction in the website’s sidebar.
Having style requires the guts to throw away every inconsequential graphic element and let the content speak for itself, as you can see in this typographic callout.
But sometimes your style will also exude from the gentle refinement given by minor details, like the current page indicator (on the top right).
We have a thing for Finnish webdesign and we sure love the global appeal of this super green website, even though we don’t master Uralic-related language: the letterpress effect has definitely made its way to our favourite text style for headers and buttons, the menu layout polished to the pixel with the pointing arrow inserting in the light gradient atop it’s brilliant and so is the complementary secondary menu box.
Clear and minimal, this pic taken from Asylum (now a section of The Huffington Post) provides a nice example of comment listing with rating buttons and reply indent.
Comment listings are looking more and more like little forum appendix, hanging at the end of articles and posts: here you are a multinested, multifunctional comment listing from The Huffington Post, the revolutionary newspaper project from Arianna Huffington.
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?
A nice callout box that made me click, though it perfectly melts into the overall graphic context (no blinking, no huge types, no graphic contrast).
3 good qualities converge in it:
- nice, not overbearing illustration;
- good typography (big but not loose lineheight; use of different font weight to stress out the most important words)
- a good copy: alluding to my competitors, makes me immediately envious and curious about it.
A nice call-out box and its mouse over effect (on the left) from Stanley Solutions’ website, which is a copywriting and editing company based in India. We liked the read on tab stiking out at the bottom.
We love the extreme simplicity and elegance of this comments listing from Cultured Code forums: simple but great typography and a fading call-out box gently receding into the background.
Art in My Coffee is a Tumblr blog and community which catalogs funny latte pics from all around the world. We love the delicatly shaped mug and the general warm, caffeinated color scheme: besides we couldn’t expect less since it’s been designed by Meagan Fisher, the mastermind behind Owltastic.
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.
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.
An original and funny tweets box with alternating avatar icons. It really put a smile on our face.
Though comments listing are an essential asset in blog webdesign, we feel they’ve been slightly neglected here in W&P. So here you are an inspirational comments listing from Design snack, a beautiful socially-powered design gallery recently redesigned.
In this case we loved very much the bubble that comes from the avatar without disrupting the listing cohesion of the comments thread.
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).
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?
Tools for Schools provides customized back-to-school supplies packaged in personalized kit.
The big pencil illustration, the fake clumsy calligraphy, the dashed lines surrounding callout boxes and form fields, the scissors, it all stirs up memories of events long ago.
Explosively colourful call-outs and layout elements from Kidd81‘s portfolio help to warm up a gray day in Milan.
Aside from its beeing a blast and a really entertaining specimen of geeks literature, Ellis Weiners’ piece published on the New Yorker’s online edition helps me illustrate how a very simple vertical line and a little shot of red can trick our attention into reading an otherwise neglected content.
In the overall economy of New Yorkers’ layout, keywords’ box, which essentially is nothing but a bunch of brave links squeezed in between the illustration and the main textual content running around it, could get suffocated by its two big brothers.
Moments like these a designer has to use a little graphic judo: in fact, having placed a simple vertical line prevented our eyes from mixing up textual contents, without having the global structure’s lightness comprised; on the other hand, the red color, which is used scarcely but consistently on the page, grabs our attention and make the keywords call-out pop out.
So the result is plesant and well balanced, with all the graphics elements working together in a rather harmonious and peaceful way.
As for an ending, here you are my very favorite quote from Ellis Weiner’s Subject:our marketing plan:
Then just Digg your uploads in a viral spiral to your social networks via an FB/MS interlink torrent. You may have gotten the blast e-mail from Jason Zepp, your acquiring editor, saying that people who do this sort of thing will go to Hell, but just ignore it.
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.
Evanto‘s guys are super cool designer with a taste for clean and well-organized pages, with tight leading and big body texts.
When I first saw these extra sleek folded tabs hanging on the left, I instantly loved them: they’re not only a pleasant graphic element but they also really help you scanning through the page.
In fact, the layout is cut into horizontal stripes, each one containing the description of one of many Evanto’s websites. For each stripe you see a tab, bent to 90° that carries the icon logo of the corresponding website: so the vertical and steady sequence of tabs, balancing the basically horizontal layout setting, draws users attention pushing us into following the path and scrolling the entire page.
Funny and well contextualised comments in Kinder-aktuell, a German portal dedicated to children.
Onethemepermonth deals with the sale of WordPress themes: every month a new theme is issued at tthe special price of $ 15: the call-out element works well and draws user attention to the price, but should be perhaps graphically refined.
A well-designed balloon gently warns me that if I want to intervene in the wiki Emilialcolica, I must first register.
Interesting boxes in Pips, a network of sites devoted to forex trading: to the left the basic version, to the right the mouse over version with the title in positive, the thumb, and the visit link written in a calligraphic font.
A very delicate balloon, perfectly consistent with the style of this site dedicated to mothers and motherhood.
Commands acting on Babelgum showcase are many but well distributed. There are two intersting solutions: the baloon with information and additional options (mouse over on a single thumb) and the submenu expanding from above, when you activate functions such as sharing.
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.