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.

designr

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.
body {
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:

designr css

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.

designr css

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:
.miniatura {
background:transparent url(/img/dcap-backg.gif) no-repeat scroll center;
display:inline;
float:left;
font-size:3em;
line-height:0.8em;
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”.

designr css

a:visited {
background:transparent url(/img/checked.gif) no-repeat scroll right center;
margin-right:2px;
padding-right:17px;
}

And to recap, here’s an example of how your content would look like if you apply Designr styles:

designr css

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?

Recent Bits
Related Bits
Behind The Scenes Of Exquisite Web Typography – Part Three
Behind The Scenes Of Exquisite Web Typography – Part Two
Behind The Scenes Of Exquisite Web Typography – Part Five
Behind The Scenes Of Exquisite Web Typography
8 Bits From The Past
Striking Web Sites with Font Stacks that Inspire
Meticulous Design: Dramatic Headlines
Behind The Scenes Of Inspiration Bit
Comment Bits

19 Insightful Bits in response to “Behind The Scenes Of Exquisite Web Typography – Part Four”

  1. Wow, some very cool CSS work, I love the color table. I did use a small “cheat sheet” of contents. But I try and keep my CSS as short as possible too. Single line is my fave! :)

    Awesome write it up here, ROCKS!

  2. Elegantly done. I like the CSS contents and colour table as well – very easy for reference. I have put some similar javascript into my portfolio for my new design (which is *almost* ready) but it operates by clicking on a link instead of rollover.
    I really like single page designs but there is always the risk, I think, of putting so much content into one page that the site visitor gets a bit lost, in which case the site’s navigation has failed. People are used to content divided up into separate pages, and if you have enough content I still think that’s the best way to go. With Piotr’s portfolio you have to actually leave the site anyway (and go to Flickr) to view the images in full.
    Thanks for showing us this, Vivian, and also for highlighting the code for various aspects of the site. I think it makes for a great showcase.

  3. Very nice.

    The stylesheet is very orderly… I always start that way and then it just gets long, I might rework mine if I get the chance :)

    I’m not sure about the hover on the “selected work”, or the solid background on the headings and description. Otherwise it’s lovely: usable and attractive.

  4. The CSS layout looks good for reviewing, but I couldn’t adopt it because it would make editing the CSS more cumbersome for me (I need each property on a new line). However, I really like how it clearly defines the hierarchy by using indentation. I’m going to try and find a way of describing that in my method; it should help my coding.

    One thing I dislike is the reveal of the text when you hover over an image in the ‘Selected Work’ section. It’s very disorienting especially when you set it off accidentally. A click would work better. But in this case I think the best choice would be to lose the javascript completely. I can’t see how it helps to keep the main content hidden.

  5. I am some kind of brute, when it comes to webdesign. As a software developer it is sometimes out of my league. But i like your blog for the inspiration it constantly gives me. Maybe one day i’ll begin to understand the finesse of good design.

  6. Thanks, Patrick. I also favour single line CSS coding, though often had to code on separate lines due to the coding policies at work. It’s easier to update the code when it’s on multiple lines, but it looks so much neater when you can see everything on one line for each element.

    Tracey, I can’t wait to see your new design. I agree for the sites with lots of content it’s best to keep the sections separated on different pages. But I think the single page layout works in Piotr’s case.

    Kristarella, I’m ok with the solid light background for the headlines, but I have to agree about the mouseover—it confused me at first, I would definitely prefer onclick event instead, like Alan mentioned as well.

    Alan, like you I was inspired to style my CSS code differently now. Usually my HTML/JS/PHP code looks very neat, nicely indented and commented, but somehow I never thought of applying indentation to CSS.

    Thanks, Warenwirtschaft. Good luck to mastering your web design skills.

  7. Oh I love the graphic behind the drop cap! Beautiful! And that CSS file… who knew code could look so nice :)

    Nice link styling, too. I hope you’ll give him another mention in your meticulous design series for the links. I like that check mark idea. Custom bullets are fantastic, too! It makes me want to redesign my site ;) LOL, no, Jerrol would not like that!

    The only thing that is missing, which I liked that you did for the previous reviews, is a mockup image that you’ve done summarizing the different settings for each element. That was a really helpful reference!

    @Alan: When you’re done defining an element in multi-line format, make it all shorthand (single line) for easy skimming later. You can always put stuff back to multi-line for editing purposes!

  8. Apart from that beautiful CSS file, I think the main point here is the idea of putting a whole portfolio on one page. I’ve looked at a lot of online portfolios and my favourites are definitely those that you can easily scan without having to click on anything. I don’t think linking to other pages for more details is a bad thing, but I think that a single page has to work on its own merits. Otherwise you’ve lost everyone who doesn’t bother to click.

    I’ve never really considered it like that before, so this will have a definite impact on how I redesign that section of my site. Thanks Vivien; you’ve given me an idea.

    (The summary mockups! I knew there was something missing. I agree with Lauren, please bring them back :) )

  9. haha :-) very well, my dear hawks, I’ve added the summary mockup to this post, so come over and check it out ;-)

    I’m actually planning on putting together a collection of different styles applied to a particular content, so you can see how exactly the same HTML text will look differently with all those styles. I’ll also include the CSS code for each of the examples. So stay tuned ;-)

    Lauren, I will definitely include Designr’s link styling in the post dedicated to links. I just need to collect more examples. I’ve got only four so far, so if anyone finds any interesting link styling techniques, please, let me know.

    Alan, let me know when you re-design the portfolio section on your site. I’m curious to see the end result.

  10. Hi Vivien, I really loved your article. Thanks for this in-depth analysis of my folio which—by the way—gave me some hints on how to improve it.

    I’m glad you liked it. And thanks to everybody for these kind comments.

    Piotr

  11. Hi Piotr. Thanks for stopping by. Glad you found it to be informative and even helpful ;-) Can’t wait to see more work in your portfolio.

  12. Thanks for posting that image, Vivien! I’m so glad you do these. It’s a real treat!

    And I will definitely keep my eye out for interesting link styles. How are you doing on bullets? I’ll email any interesting ones over to you (and you’re welcome to use the two styles from my blog–bullets for posts (purple swirls) and bullets for the sidebar and footer area (blue “sparkles”))

    Oooo, hey! Speaking of design elements, did you see that iLT was added to the Image Caption section of Smiley Cat’s collection?? And my search bar, too :)

    Ah! And Vivien, my best blogging buddy, you’re almost to 1,000 subscribers! We’ll have to have a celebration :D

  13. You’re most welcome, Lauren.

    Hey, no, I haven’t seen the new additions to Smiley Cat’s collection until now – Congrats! I have iLT down in my draft post for image styling elements as well.

    RSS celebration – sounds good to me. Yeah, slowly getting close to the coveted 1K ;-)

    I’m doing ok with bullets, but if you see anything interesting, no matter what design element, send it over, please. Thanks in advance!

  14. Hey, Piotr, just noticed incoming traffic to iBit from your site and went to check what’s up. I see you’ve followed our advice here about the onmouseover selected work, and replaced it with the onclick events—definitely much better now, and the fact that the first work is automatically displayed with its short description prompts people to click on the images below as well. Well done.

    And thanks a lot for the link to this review of your folio on iBit.

  15. Yes, the comments I read here were very helpful—made it easier to decide on which event the accordion should work (I’ve been considering various possibilities for a while now).

    And yeah, I thought you wouldn’t mind putting a link to the article :-) I couldn’t describe the work I did there better than you, so thanks for that!

Pingbacks and Trackbacks

  1. Sunday Type: typesetting type | i love typography, the typography blog

    [...] Behind the Scenes of Exquisite Web Typography—part 4 [...]

  2. Behind The Scenes Of Exquisite Web Typography - Part Five » Inspiration Bit

    [...] online. Two things came to my mind almost simultaneously: I’d love to feature this site in my Behind The Scenes Of Exquisite Web Typography series and what kind of a sci-fi fan am I if I’ve never heard of the book The Codex [...]

  3. Striking Web Sites with Font Stacks that Inspire - Inspiration Bit

    [...] web site (once again, you can read a more complete review of Designr in another installation of Behind The Scenes Of Exquisite Web Typography [...]

  4. Striking Web Sites with Font Stacks that Inspire - Inspiration Bit

    [...] web site (once again, you can read a more complete review of Designr in another installation of Behind The Scenes Of Exquisite Web Typography [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on