Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/deb7131n5/domains/maxvoltar.com/public_html/2009/textpattern/lib/txplib_db.php on line 14

Deprecated: Function split() is deprecated in /home/deb7131n5/domains/maxvoltar.com/public_html/2009/textpattern/lib/txplib_misc.php(570) : eval()'d code on line 471
Maxvoltar - Maxvoltar.com 2009

Maxvoltar is the personal weblog of Tim Van Damme, a freelance interface designer at Made by Elephant.

50° 54' 47" N, 4° 25' 50" E


Maxvoltar.com 2009

A week ago I posted a pixelated preview of a design I was working on on Flickr. The preview received quite a few reactions. I kept working on it, and a day later I posted another preview, not knowing I was actually raising expectations for what was supposed to be a simple blog-redesign.

Pressure

Another factor that was haunting me, was the fact that I have a lot of client work to do by the end of the year. So I gave myself 3 days max to work on my own blog, resulting in more and more previews being posted, and me working day and night to get it done.

Well, it was worth it. I’m proud it’s live, and would like to share some of the thoughts that went into this design.

Under the hood

As usual, everything you see here is running on Textpattern. Although I know quite well how TxP works, using Textpattern Solutions as my reference guide was needed (together with coffee of course). Plugins used are the same as last time, together with some help I got on the TxP forums.

Inspiration

Gill Sans specimen

I was playing with all kinds of different styles (although almost all of them included Gill Sans), and then I came across a couple of pictures of a book full of Gill Sans specimen. I was immediately sold by the simplicity, boldness and color palette, and knew this was the style I wanted.

But just for funsies, here are a couple of designs that didn’t make it (which doesn’t mean you can just go and copy them). Some of them were even HTML-ized and CSS-ed:

Silver Silver and Bronze

Transition

This design (version 3 already) is the combination of what I wanted to achieve with version 1 and version 2. I finally found the right balance between articles I write myself, and things I find on the internet, and want to share with whoever is interested.

Old versions of maxvoltar.com Version 1 (left) and version 2 (right)

My Firefoxor is broken!

Safari vs. Firefox Safari (left) and Firefox (right)

No it isn’t. The articles on the frontpage are formatted inside one ul (unordered list). The styling here happens with :nth-child() (more info) to keep the HTML as clean as possible. The current version of Firefox doesn’t support :nth-child(), the next one will. So for now, Firefox users see the default view of the article list. Safari users see a more “designed” layout.

Also: Windows users will see Gill Sans nor Hoefler Text, but will have to do it with substitutes (untested, but shouldn’t look too funky).

51Comments

  • glenn weatherson

    3224 days ago

    Lovely, good hustle!

  • Seth Rubenstein

    3224 days ago

    Very nice. I really like it. Especially the book inspiration. Something I may look into when I start tweaking my design at sethrubenstein.info later this month.

  • Spencer Fry

    3224 days ago

    Love the explanation of your design process. I really love this design and truly think it’s one of the best blog designs out there. Keep rockin’.

  • Mark Wunsch

    3224 days ago

    I like what you did with the avatar on comments there! Cool!

  • Ben Jacob

    3224 days ago

    Nice post about the source of the creativity :D
    I like the way you made a web design out of a print design..
    But I found a hole in your new design :D
    Hope you got it… There is no labels on the forms to guide a new reader of your blog.

  • Dave DeSandro

    3224 days ago

    Congrats on finally releasing it. Following the progression from the original dark version to this one has been fun to watch. At the same time, I wonder how long this one will last. Hopefully more of us will follow suit and start using more Mac-only fonts first.

    As for the no :nth-child support for Firefox (or IE for that matter), did you consider implementing :nth-child classes with jQuery?

  • Luke Dorny

    3224 days ago

    I love your work, Lord Van Damme.
    Great inspiration, wonderful hommage, inspiring result.
    bow

  • Andy

    3224 days ago

    Absolutely stunning – loving the little details on elements like the link styling and form design. Thanks for sharing the process.

  • Wolf

    3224 days ago

    Especially love what you did with those input fields and buttons, very stylish. Clear, readable, and enough room to layout your articles on the single page. Well done!

  • Mark Jardine

    3224 days ago

    Beautiful.

  • Hans

    3224 days ago

    Nice writeup! I love the little details like the text balloons around the commenters gravatar.

  • Elliot Jay Stocks

    3224 days ago

    Even more beautiful than I thought it would be. Top work, my friend… and what a great design to end the year on!

  • MrQwest

    3224 days ago

    I spotted your previews on Flickr and was immediatly hooked on the look! Congrats on a stunning design!

  • Jonathan Barrett

    3224 days ago

    Fantastic design work, gorgeous typography, and I love the form design.

    Two things:

    1. Comment form placement: Sticking it at the top of the comments encourages posting without reading. A snook-style “follower” would be awesome

    2. Agreed on the form label issue. I had to use Safari’s Autofill to figure out which was name, email and url. For a site so well designed, and with so much attention to detail, this seems like a bug or oversight more than an intention?

    That’s it, though – everything else is perfect. Wonderful job, love the inspiration, and it’s so nice to see a design that manages to look “aged” without resorting to looking “grungy”.

    Inspirational!

  • stijn

    3224 days ago

    I agree with all that has been said up till now. I just wanted to see my gravatar in a text balloon.

    Nice work. Especially the form elements.

  • Bram Van der Sype

    3224 days ago

    Looks brilliant, but I’d give the comment form input’s a default value, so we don’t have to guess where to put our name etc…

  • Ben Bodien

    3224 days ago

    Looks incredible, Tim. I’m loving the little details everywhere like the external link formatting and the markup of the post meta.

    A couple of points – the form elements need labels of some kind, and it’s not obvious enough from the button colours that you have to preview a comment before you submit it.

  • Sam Brown

    3224 days ago

    Good work Tim! :)

  • David

    3224 days ago

    Very nice. 2 critics:

    1. as Ben Jacob said = this form
    2. why background=fixed, whouldnt it be more natural if it scrolls with the text?

    Regards from Switzerland
    Dave

  • Tim Van Damme

    3224 days ago

    Thanks for the very kind comments all!

    About the form: It’s a bug, forgot to add the JS to the article template. Fields should have a default value, and when you click on a field, that default value would disappear. I’m working on it! (at 5AM, you tend to overlook bugs like this)

    • Jonathan Barrett: My initial design had a “follower” form, but there were a couple of problems with it. I could re-implement it though…
    • David: Background should be fixed!

    Again, thanks all!

  • Kean

    3224 days ago

    Liked the simplicity of the last version very much, and this version keeps up the high standard

  • Dave Hund

    3224 days ago

    Nice work Tim!

    I like it a. lot.

    Everything, from the not-quite-black to typography seems really well thought through.

  • Vitor Lourenco

    3224 days ago

    Loved your redesign. Congrats!

  • Marko Mihelcic

    3224 days ago

    Great work Tim!
    Man I so enjoy looking at this form its really somethin of and the typography and those small details around the site are just epic!
    Kind regards!

  • Rogie King

    3224 days ago

    Tim,

    Awesome awesome work. I love the site. I love gill sans too and you’ve used it remarkably. I love your comment avatar overlays, typography and minimal design.

    Cheers!

    Rogie

  • Erwin Heiser

    3224 days ago

    Great work Tim, love it!
    Don’t forget that you can always add support for nth:child via some jQuery: http://docs.jquery.com/Selectors/nthChild
    The TEXTILE link below the textarea doesn’t seem to do much at the moment too :) Gill Sans FTW!

  • Tim Van Damme

    3224 days ago

    Erwin Heiser: Fixed the Textile-link, thanks!
    About using jQuery for nth-child-support: I could do that ;)

  • Inferis

    3224 days ago

    Great work.

    Small problem with the textarea I’m typing this message in: it shows a resize widget in the lower right corner. I can drag it, but the only noticable effect is that the “focused” background is extended below the textarea. The textarea IS enlarged, but interferes with the buttons below it (they stay were they are, over the text).

    This is with google chrome, btw.

  • Tim Van Damme

    3224 days ago

    Inferis: Fixed!

  • Todd Austin

    3224 days ago

    Simple. Stunning. Superb work!

  • Dirk

    3224 days ago

    I’m just posting this because I lurve you gravatar overlays, and want to see how mine looks in it. So, so.
    No, serious, I love the design!

  • Matt Brett

    3224 days ago

    Gorgeous, Tim! I knew it was going to be hot from the teasers, but there are all sorts of little niceties that just don’t show through in a static mock. Great work!

  • Tom

    3224 days ago

    LOVE this redesign, particularly the gravatar overlays!

    Only thing I noticed is your ‘Transition’ heading slightly overlaps the image underneath (Windows, FF3)

  • Mike Piontek

    3223 days ago

    Looks fantastic! I especially love the comments section, so many great details here.

  • Jon Hicks

    3223 days ago

    Tim, don’t forget you can specify “Gill Sans MT” in your font cascade – this is a default font that gets installed with MS Office, so will be on a fair number of machines.

  • Matthew

    3223 days ago

    Yes, seconded, or thirded, or maybe fourthed. Whatever, it’s beautiful. I too particularly like the Gravatar overlays. You generally can’t go wrong with Gill.

  • Jim Jeffers

    3223 days ago

    Love your blog! Brilliant and very polished work! I am happy to see more and more folks are insisting on using advanced features and leaving older browsers with something acceptable. I did something similar a year ago but it is not nearly as polished as your execution. This is really inspiring stuff. Terrific work! May I ask though – why no microformats?

  • Chris Rowe

    3223 days ago

    As expected this new design is absolutely gorgeous. Good work Tim!

  • Michael Grinstead

    3223 days ago

    Finally, after teasing us all on Flickr. Great work, as expected.

    Like the use of the Hoeflier fleuron (personally I like the y)

  • sinisasasic

    3222 days ago

    Tim,
    the website’s nothing but exceptional, at least in my eyes.

    Don’t mean to be a wiseguy, just a frendly suggestion:
    your bg image is around 200k because it is in .gif format. You could decrease its weight at least by double if .jpg is used with the looks remaining the same, of course.

    All the best.

  • Tim Van Damme

    3220 days ago

    • Jon Hicks: Thanks for the tip! Added it to the CSS, but haven’t been able to test it on Windows…
    • Jim Jeffers: Microformats can be fount on my “about” site: http://timvandamme.com/. On this site all the URL’s got the appropriate rel’s filled in.
    • Sinisasasic: Done, thanks for the tip :)
  • Julian Schrader

    3220 days ago

    Great new design, I love it!

    Nice Royal 404s there as well :D

  • Viking KARWUR

    3219 days ago

    It’s cool design TVD :)

  • DC Crowley

    3217 days ago

    You are one of the few people who make me news sick with jelousy. Another great design :)

  • Pat Dryburgh

    3216 days ago

    I’m intrigued by your avatar shapes… I assume this is done using some sort of masking technique? Care to share?

  • Tim Van Damme

    3215 days ago

    Pat Dryburgh: It’s actually really simple, I just lay a transparent PNG over it:

    No magic, no voodoo, just plain ol’ HTML + CSS!

  • Pat

    3215 days ago

    Oh… I guess I could have looked and seen that! Great idea, though!

  • Ecko

    3213 days ago

    Nice looking site! Mind showing us a bigger version of your mockups or showing us the incomplete semi coded templates? They really look good.

  • Hombre

    3211 days ago

    Great Typo and I love the form…
    Bravo

  • David Hughes

    3206 days ago

    Love the new look.

    I was thinking of a typographically led redesign and this has made up my mind.

    I love Gill Sans also but would really like to the Johnson underground typeface. That could be fun.

    Lovely site!

  • webstyle

    3199 days ago

    Love it1 really nice!

Commenting is closed for this article.


Home

Powered by Fusion