It’s been awhile since I sneaked behind the scenes of web sites with stunning typography. But today you’ll be getting a double dose of digital inspiration from me: by checking out my first guest appearance on Typesites, where I put Rob Goodlatte’s site under my trusty microscope, and of course, by sticking to my site investigation on Inspiration Bit.
If you missed my previous installments in this series, you can still catch up with us by checking out Part One, Part Two and Part Three on going Behind The Scenes Of Exquisite Web Typography.
After seeing Designr, the personal portfolio site of a talented designer from Italy, I’m starting to think that all portfolio sites should stick to one page only format. Take a look at Piotr Fedorczyk’s web site: it includes all the essentials for a portfolio site—About section, selected work, portfolio examples, contact form and even a social profile. A gentle colour scheme, beautiful typography, intuitive navigation, some jQuery trickery and lots of creativity make this one pager a joy to look at and explore.
The first thing that catches the eye on Designr is the use of a charming Balmoral typeface for its logo. Piotr follows it up with a site description that’s perfectly matched in a classic Baskerville italic. In fact the entire page’s font is based on Baskerville with the fall-back font Palatino Linotype.
font-family: Baskerville,'palatino linotype','times new roman',serif;
Speaking of CSS: believe me, I’ve seen my share of CSS code, with myriads of code styling ways, but I never came across of such a semantically beautiful documentation of a stylesheet as the one by Fedorczyk. It makes studying the code so much simpler. You be the judge:
Due to its extremely light contrast the diamond-shaped background doesn’t interfere with the dark grey writing, and actually adds interest to the simple two-column layout. The headlines are displayed in blue all-caps on a very light grey background, with a thin dark border underneath.
The gorgeous drop caps deserve an extra attention. The first capital letter of each section is separated from the rest of the content and displayed on an ornate light background image:
background:transparent url(/img/dcap-backg.gif) no-repeat scroll center;
margin:0.05em 0.14em -0.01em 0pt;
The bulleted list is styled with lovely blue asterisks, and the text is reduced in size. After clicking on any link on Fedorczyk’s page you’ll discover another fascinating trick: all visited links are styled with a tiny blue checked mark in the background. What an ingenious touch, now it’s so easy to see which links I visited—they’re all displayed as “checked”.
background:transparent url(/img/checked.gif) no-repeat scroll right center;
And to recap, here’s an example of how your content would look like if you apply Designr styles:
Once you’re done studying all that typographic goodness on Designr, check out some very impressive jQuery effects, like the expanding description below each of the Selected Works on mouseover. Toggle on the “Show Entire Folio” button reveals a striking portfolio that Piotr is deservingly proud of.
I really like how he presented the examples of his work: long picture fragments are linking to the larger size images on Flickr, each work is dated and accompanied with useful details like the type of work (poster or a website), links and small description that sometimes is followed up with a small note in italic.
I can add only one thing to this review: if Piotr Fedorczyk was able to produce such a visually stunning and quality body of work in just 2 years, I can’t wait to see what else he’ll have for us in store.
What do you think?