An antiquish decoration is used here for creating a nice distinction in the website’s sidebar.
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 [...]
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.
An antique callout box with a jagged edge introduces each section of this exquisite, old fashioned web site.
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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.