(with apologies to Matt Groening)
After about two years, it's time for another make-over of my site.
My last design had a relatively quirky look, with a bold red/yellow theme built from various irregular vector shapes. The idea was to step away from the typical mold of rectangular aligned frames on a page. I tried to incorporate some elements of perspective into the page composition, but it ended up being a relatively flat, geometrical theme.
This time I wanted to work on the depth aspect and try to create something that feels spacious. To do this, I based the entire redesign on a two-point perspective. While the content itself is normal 2D markup, it sits in a 3D frame.
The header image is a regular illustration file (which is 100% manual vector work) and the content is typical HTML/CSS. However there is a twist: the perspective from the header is continued into the content with some simple 3D decorations, created on-demand with Canvas tags and JavaScript (highlight canvases, check out the footer).
While this perspective works perfectly near the top, the further down you go, the more vertically stretched the shapes get (try it) and it ends up looking weird. To compromise, the projection actually gets more and more isometric the further down you go. This creates an interesting effect when scrolling down.
The design also uses various CSS3 methods (@font-face, text-shadow, box-shadow) throughout, and uses sIFR 3 as a fallback for the headline font. Unfortunately CSS3 is still mostly unsupported in the browserscape, so only Safari 3.1 users get the luxury combo of pretty, fast and no Flash. Everyone else will have to suffer through hacks.
As a total surprise, the canvas-rocket-science trickery even works in IE6 thanks to Google's ExplorerCanvas library.
I'll probably be tweaking it a bit more in the days to come, but feedback is appreciated.
Hot dude, very hot.
Hot dude, very hot.
The flash comment header
The flash comment header substitution causes Firefox to crawl like a whore in molasses on posts like http://acko.net/blog/going-to-the-us-sucks. Smooth as silk in Safari, of course.
Not complaining per se; concessions shouldn't need to be made for browsers that lag behind :)
Some very funny comments on that post, lol denial.
sIFR 3
sIFR 3 does seem pretty slow on Firefox OS X (more so than Firefox Windows). Not much to do about that... maybe I need to keep sIFR only for the main titles. PIty though, cos it looks a lot nicer in the custom font, and I can't use text-shadow in Firefox.
I'm turning an unattractive
I'm turning an unattractive shade of green.
Good job.
Hey, long time! New site, cool. You don't seem too fed up with site design, that relieves my niggling sense of guilt ;-). On the whole, I like it. Somebody's a fan of Escher :-). I like the little box with your latest images on the side of other pages, for some visual relief. I'm also adoring the font, though the s's and ( )'s seem a bit off (my, I'm being constructive). The header is very nice, and reminds me of a pavement (just like the old imagery did), but I'm not too fond of the way the lines move next to the posts titles. Especially at the top of a first post, the title sticks in a very weird way to the dividing lines of header/body. The shades seem a bit wrong there as well. Could be the crappy IE6 at work though.
Trouwens, volledig terzijde, mocht je nog een vakantietje plannen de komende weken, altijd welkom in Toscane!
Nicely done!
I really dig the new design. The header does a nice job of making it look a lot bigger and spacious than it really is. The only thing I would change are the side shapes that extend on the sides of each title. As you scroll down, it breaks the illusion causing it to look flat since it's not parallel to one of the two points in the perspective. In essence, it looks like an abstract shape without dimension.
Adding the lip from the top platform in the header to the side of each title would help the illusion and make it look like it's stacked but I guess would complicate the markup. Probably not worth the trouble.
It's unique and it's awesome
At first I was drooling.
Then I was thinking you had cheated by using images. But that seemed so unlikely, and it of course turned out to be false :)
The only initial annoyance is already mentioned by dvessel: for the side shapes, the perspective is lost. However, on second thought, it doesn't bug me at all because it gives you a clear (and cool!) separation between comments.
This really is an amazing design. One of a kind, too. And probably it'll stay that way for a long time :)
er, sorry but here's some feedback
I agree w Wim. I appreciate experimentation and while this one scores high for concept it doesn't execute too well. On IE6 (still 30% of the market) your "Whats Wrong with Drupal" page took almost 2 minutes to load. I refused the fonts and the pageload is slow (although the font substitutions do look cool). Design-wise, I keep feeling like the left and right are supposed to line up in some meaningful way to produce a satisfying illusion, but apparently I'm wrong because neither IE nor FF manages to do anything meaningful with that handing angled shelf-thing under the right column. Is there a main background graphic I'm not getting? And finally: while I love the separation between the comments, I really don't get any feeling of "depth" except in the header, and that's fairly easy to accomplish using traditional graphics.
Is the Sinclair ZX Spectrum
Is the Sinclair ZX Spectrum diagonal deliberate? The colour scheme seems borrowed from Wilma Deering's helmet, so all you need is a little robot noise going biddybiddybiddy.
PS bel je moeder op!
Wow.
You did a great job with this design, I absolutely love it.
I am working on something unique for my next redesign as well, I don't think it will even come close to what you have done here though.
Awesome work.
Well done sir.
The header reminds me of a level in Unreal Tournament (the original) but nicer. I don't believe I've ever seen a static, non-flash 3D web design done so tastefully. Kudos.
If I were to knit pick, I would say the number of sIFR embeds are little much. Makes the page a little clunkier than it needs to be. If you really want to keep the font rendering, a PHP/gdlib solution would smooth things out on the client-side.
PHP GDFont Renderer
I have a small script using the GDLib as an alternative to sIFR. If you use ALT tags, it's about 90% as accessible as sIFR. And it wouldn't bog-down your page like sIFR may be doing.
» GDFont Renderer 2.0
A shadow function exists in the script, however it is not very polished and remains commented-out.
Nice one
The header is fantastic. A few problems with the "depth" in other areas but still unique. Excellent.
You did a great job with
You did a great job with this design, I absolutely love it.
This really is an amazing
This really is an amazing design.
Looks corny and stupid
Looks corny and stupid
Nice work!
Just browsing around your site and I do have to say you're a credit to designers everywhere (now hopefully I can become this great, heh). As for CSS3? Didn't even know it existed, but I have heard of some of the tags used in it (never knew it was classed as CSS3 though).
Hopefully support will gradually increase for such standards because, after looking at www.css3.info, I'm definitely impressed by what I've seen so far.
wordpress
This theme is awesome, I don't know if you can make something like this for wordpress.com
And I still know where I am
I’ve been here 2-3 times perhaps, always looking for your jQuery color picker. Today I saw your new header on Flickr showcased by some guy and I immediately recognized the site. I call this redesign the best redesign ever. And it’s slick too! Good job!
I can only hope design for my homepage will be as distinctive as yours. :)
Wow
Just felt I needed to say: fucken awsome design!
Awesome...
Excellent design man. Good Work !!!
SWEET !!!
wow dude ! SWEET LAYOUT !!!!!!!!!!!!!!!!!!!!!!!!! 3D is amazing !!!!!!!!
Awesome
Sitting here in Safari checking out your theme. I've never seen anything like it and how the theme integrates into the comments is very well done.
Congratulations.
Great Design
The design is top notch, and I really enjoy the red on orange color scheme. If I were to be nit-picky I'd say you could do something in a more traditional manner to make the text area look like it's beveled out more, but meh, you've kicked some serious ass here, who am I to complain?
Eclipse
PS: I really did say "Whoa" when I opened it up w/ the new theme for the first time. I think that says something.
Ownage
Your site is insane. I could look at the header all day (and I think I will). But it's not just the header; the colors and layout of the rest of the site are great too.
WOW
I think neem said it best: "I'm turning an unattractive shade of green."
Absolutely great work. I hope you don't mind a small bit of "pinching." Just a marvelous idea.
*favorites website* ;)
Post new comment