Maxvoltar - Maxvoltar.com 2009

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

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

Lovely, good hustle!

Seth Rubenstein

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

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

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

Ben Jacob

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

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

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

Andy

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

Wolf

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

Beautiful.

Hans

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

Elliot Jay Stocks

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

MrQwest

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

Jonathan Barrett

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

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

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

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

Good work Tim! :)

David

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

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

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

Dave Hund

Nice work Tim!

I like it a. lot.

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

Vitor Lourenco

Loved your redesign. Congrats!

Marko Mihelcic

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

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

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

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

Inferis

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

Inferis: Fixed!

Todd Austin

Simple. Stunning. Superb work!

Dirk

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

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

LOVE this redesign, particularly the gravatar overlays!

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

Mike Piontek

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

Jon Hicks

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

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

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

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

Michael Grinstead

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

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

sinisasasic

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

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

Great new design, I love it!

Nice Royal 404s there as well :D

Viking KARWUR

It’s cool design TVD :)

DC Crowley

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

Pat Dryburgh

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

Tim Van Damme

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

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

Ecko

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

Great Typo and I love the form…
Bravo

David Hughes

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

Love it1 really nice!

Commenting is closed for this article.

Articles
Newer Newer
Older Older

Powered by Fusion