Category Archives: Comments & Call-out

Comments and call outs in web design: a great showcase of comment boxes, comment listings in blogs and websites, comment buttons and call outs boxes at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Opptiko’s menu and boxes

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.

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?

How to create an effective callout box

intuitivedesigns-inspiring-callout-box

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:

  1. nice, not overbearing illustration;
  2. good typography (big but not loose lineheight; use of different font weight to stress out the most important words)
  3. good copy: alluding to my competitors, makes me immediately envious and curious about it.

Inspiring mug logo and boxes from Art in My Coffee

art-in-my-coffee-inspirational-logo-design-callout-box

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.

Inspirational comments listing in Designsnack

designsnack-blog-comment-design-listing

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 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 typographic fight: The New Yorker’s keywords call-out

the New Yorker's keywords callout

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’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.

Evanto’s folded tabs

Evanto folded tabs and icons

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.