Tag Archives: corporate website

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.

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.

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.

Bell breadcrumbs

Bell web site breadcrumbs

I’ve found this interesting example of iconic breadcrumbs on Web designer Depot, reading an interview with Web Usability guru Jacob Nielsen.
Nielsen, asked about breadcrumbs effectiveness in easing user navigation, answers:
“So breadcrumbs are definitely useful. Just as important, they don’t harm those users who don’t use them. Some studies have found that many users don’t use breadcrumbs.
But that’s OK, because the breadcrumbs don’t cause any trouble for these users, and since they’re a very lightweight design element, breadcrumbs are worth including for the substantial good they offer to those users who do use them.
The full interview is available here.

I’ve found this beautiful example of iconic breadcrumbs on Web Designer Depot, reading an interview with Web Usability Guru Jacob Nielsen.

Nielsen, asked about breadcrumbs effectiveness in easing users navigation, says:

“So breadcrumbs are definitely useful. Just as important, they don’t harm those users who don’t use them. Some studies have found that many users don’t use breadcrumbs.

But that’s OK, because the breadcrumbs don’t cause any trouble for these users, and since they’re a very lightweight design element, breadcrumbs are worth including for the substantial good they offer to those users who do use them.”

The full interview is available here.

Snav booking form

Il form di prenotazione del sito Snav

It’s nice (and sadly quite rare) featuring in Web & Patterns an Italian web sites: in this case we want to introduce you SNAV, a shipping company.
The entire site is set in a clear and generally well done visual treatment and I especially like the booking form that allows you to select your route by either input texts or a flash interactive map.

Thinking juice

La sidebar nel sito di Thinkingjuice, agenzia di pubblicità inglese

Thinkingjuice, advertising English, takes up the idea of using sliding panels vertical for its sidebar (already seen on Apple web site). 

Compared to Apple’simplementation, I like that the triggering event is the click on the arrow (and not the mouse over): on the other hand I appreciate Apple’s transition speed which is a little bit faster.

Saturized

saturized

Saturized works are all prestigious and of high quality.

They find a worthy exhibition space in this showcase that has a dual navigation: one to move through the individual project (number on the top) and the other one to skip to another project (the arrows).

Pagine che collassano.

howarths

These  panels that slide side to keep out the three fundamental pages of the site are quite of interest. 

One could apply this system to present search engine results, listing, for example, in the main page lists the textual elements, and putting video, maps, images in other pages.