Tag Archives: portfolio

Mocapoke scrolling panels

Gradually revealing your website’s content is one of the most important trick to learn because helps your readers to easily focus on a few, relevant, informations and helps you keeping the design clean and uncluttered. One of the most common trend in grouping and progressive revealing content is making them slide using transitional effects (in this case, a quick, smooth vertical movement).

Gleam and sheen on Thoughtbot website menu

thoughtbot-sleek-tech-inspiring-navigation-menu

Though we’re not big fans of overtly tech webdesign and we prefer warmer, more organic solutions, we loved the cleanliness and the powerful, warm glow that this website’s menu radiates.

Another nice design snippet we found on Thoughbot’s website is the brownish, rounded contact us button which really stands out, partly for its effective color contrast and partly for its unusual position.

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.

Slightly rounded tabs navigation

weightshift-inspiring-tab-menu-webdesign

Here you are a classy, finely shaped tab menu from Weightshift, a small studio based in San Francisco.

Though we loved this web site on the whole (the typography is great and, generally, you can catch a meticulous attention behind every detail), we liked the most the quite vertically compressed menu (since the so-called web 2.0, we usually can spot only gargantuan tabs navigation) with small rounded corner, polished by graceful overlapping circles and subdued mouse over effects.

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

Using a story to introduce your work

inspiring-copywirting-introducing-webdesign-studio

An effective, minimal and charming way to introduce your studio, your work or the philosopy underlying your materspieces could be writing it in a short introduction (or simply summarizing it with a witty quote). Even if you’re a vector virtuoso or a photoshop goddess, a nicely written text may be the way to distinguish yourself (your firm, your business, your personal recreational webpage) from many others and to make your website memorable.

Mikey Burton’s drop down menu

mikey-burton-inspirational-menu.jpg

I was firstly drawn to Mikey Burton‘s portfolio, attracted by his beautiful illustrations and identity works. Then I’ve started admiring the unparalleled simplicity of his portfolio’s navigation menu: a simple list of gray links, with an open/close ajax effect, whose aim is just helping users to browse in the most efficient way.

This website’s menu certainly is not a scene stealer and it works well only if displayed with some strong graphic assets (otherwise it will look miserable, I presume), but the pros are:

  • easy to build and to use;
  • basically it’s html text so it is also light on code and kbs;
  • it keeps track of the visited items which are displayed as stroked links.

Oh joy’s floreal menu

ohjoy-vectorial-floreal-menu

Since I’m big for vectorial shapes I couldn’t help mentioning oh joy’s floreal menu. Flowers and herbs silhouettes are quite realistic drawn without any excessive flourish, keeping the website’s greenery imaginary far from beeing redundant or excessively ornamental.

For further inspirational suggestions, I recommend that you have a look at Oh Joy’s Shop and Blog: you can find more samples of beautiful patterns, identity case studies and a vast collection of notebooks stunningly decorated.

Kylesteed’s hand drawn font

Kylesteed's free hand drawn font

Sometimes you can get tired of perfectly shaped types or you just want for your website’s typography that little organic hint which only a hand drawn font can give you.

If you’re needy for inspiration you can look at Kyle Steed’s portfolio entirely based on his Steed, a nice vector font that Kyle decided to share with us.

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.

Identity Works search form

il form di ricerca nel sito di Identity Work

Swedish studio Identity Works has several things of interest: one of them is the search form that, instead of appering in its usual place (usually upper left or center) is at the bottom page, just above browser status bar. A few years ago, this area of the screen would  generally been regarded as a point where the user’s attention won’t never focus and no one would ever have designed a functional component so secluded: what has changed in our cognitive habits?

Maybe the massive success of Facebook and its toolbar has changed our habits and thereby freed designers from composition patterns too restrictive?