New Spring Design

Time to break out of your RSS readers: there’s a new design on Ma.tt! Recommended only for the high-bandwidth and the open-minded. There was nothing wrong with my old theme, I just get an itch for something new every now and then and wanted a totally different direction — especially now that every site has copped the worn paper look / colorful flourish. Also it’s refreshing to be able to have a design where the only person in the world it needs to please is me. Here’s a before and after:

For fans of the old design, I’m going to abstract it into a regular WordPress theme — gallery features and all — that will be available to the entire world, including WordPress.com. It’s amazing to me how many great designs are thrown away, never to be used again, when as a WP theme they could live forever.

I wanted to thank Julien Morel, the creative mind behind this iteration, and Brian Colinger, who turned the vision into HTML, CSS, and PHP.

If I could I would redesign the site every season: Winter, Spring, Summer, Fall. It just always takes longer than I planned (this was supposed to launch in Winter). The cobbler’s sons go shoeless.

What do you think?

246 thoughts on “New Spring Design

  1. Nice new design matt, great to hear your releasing the old one for the masses, although i do remember you saying the same thing about your older coffee stain theme, but we never saw it.

    1. I ended up deciding against it because the coffee stain one was too personal, as is this one. It wasn’t broad enough to apply to a wider audience that didn’t exactly match my tastes. The last one, though, I think could be a pretty neat general theme.

      1. I can see where you are coming from on the coffee stain theme. Can you give everyone an ETA on the the old one being released? One thing i always missed on here was flickr…you have the pro account, why not integrate it?

      2. I couldn’t agree more, Matt. The sizes are a little too constricting… but well, their sharpening algorithm rocks my socks! :) never seen better ones (care to enlighten me if you have seen more awesome examples, heh)

        Back to the design itself, well done Matt! I particularly adore the gently striped background – visually stimulating but doesn’t scream of attention (which will divert people’s attention away).

        Awesome header you have over there! Although I miss the cellophane stickers that hold the photos up, the gallery is still looking great!

        Wait a minute. Still unlucky in cards?

      3. I’m loving the new design Matt. I was extremely impressed with the old one, so to hear you’ll port it over to the rest of the community is awesome. Any guess on when it will become available or how you’ll let people know it is available? I’ve got an itchy design finger that I’d like to try out on that layout :)

        As always, keep up the great work.

  2. Nice!

    I’m looking it at 1024, and at that resolution it has some problems in header and footer: the images are a little cut on the sides.
    When I resize the window at more than 1024 it’s ok… and quite cool. :)

    1. It’s for wide-screen only. :) Another nice thing about it being a personal site — it’s only March and I’m already breaking resolutions! ;)

  3. Releasing the old design would be ..wow.

    After fooling around with dozens of plugins and techniques, I always thought your Gallery was the best.

    1. Now I just have a big head on home and permalink pages, other sub pages (particularly image ones) are even smaller than the old design.

      1. If anything, I’m the one with a big head, not you Matt!… Oh, wait, I see what Nick was getting at, so just ignore me! :P

        Move along now, nothing to see here!

  4. In Safari 4, there’s a horizontal scrollbar on the bottom that doesn’t seem like it should be there…
    Otherwise, it looks great!

  5. Sweet design, Matt, I’ve always liked your mix of “handwriting”, cut paper and digital layout elements. The photo treatment on this layout is very cool. Surprised you’ve had time to even oversee a new layout what with all the time you’ve been spending on planes this year! Keep the hits coming. Thanks for a great set of products.

  6. I like it. Reminds me of Salvador Dali or something. I also like the favicon. It’s creative :)

    On a side note after seeing your links, have you ever considered CC-licensing your blog and/or your photos on Flickr?

  7. Okay, the design is beautiful but one thing is bugging me out: I’m on a 15″ laptop with a 1400*900 screen resolution and I have to scroll an entire viewport down to get to the content. The header is just way too high…

      1. i think it would be pretty cool if you´d display your tweets in the header… i mean there´s a bird… can you imagine a better place to show your tweets than next to a bird? :D

      2. It’s very nice as first impression. And normally I read via feed, then I love it and feel “Wow” every time I come.

        But for people who come very often. I think they will ask you for more “changeable” headers. :P

        But this is your blog. Do whatever you like :)

  8. This is *much* better than the previous design — easier on the eyes, and the images and divisions are crisper. The old one look like someone didn’t correct rasterize the pics.

  9. Yeah, I agree with Van Der Sype. The entire view port gets covered with the masthead and I have to scroll down to see the content. Maybe you could use some nifty javascript that auto scrolls to content area depending on the size of the viewport. This way the user gets to see the masthead and then automattically see the content too.

  10. Call me strange but the footer is what I like most of all, I find it is what really sets unique themes apart.

    The header is incredible, you can’t just scroll by, I find myself staring for a couple of seconds, and thats more than I spend on some other pages. ^^

  11. Superb! There’s not a thing I don’t love about it. I really like the keys in the footer .. but curious, why a keyboard and not a sax?

    Well done, all around :)

  12. I’m glad that I read all the comments, because I almost missed the Hedra Ivy and the piano keys to birds at the bottom.
    I see that the W @ the bottom is even aged a bit – when do we get the updated stickers? Speaking of, any preview on the swag for SxSW? :-D

  13. really nice, very artistic, an eclectic reflection of who you are.

    what kind of directions/ideas did you give to Julien because he did a really good job at representing you.

    The header is pretty “in your face” though ;)

  14. Wow! … wow! It’s an amazing piece of art. Two things:

    1. I am conflicted on whether I like the header and how much space it takes up. On first (and maybe second, third ..) viewing it is mightily impressive but may end up becoming a bothersome impediment to being able to dive right into the content. It’s friggin’ beautiful, though. Like I said, conflicted.

    2. Those diagonal lines are giving me headache when I attempt to read your copy. Maybe a subtle but effective fade as the lines meet the copy would be good. Keeps the design element but adds readability. It’s all about compromises.

    Impressive, though.

  15. I’m glad I have a 1920×1200 screen so I can take it all in :)

    I actually wish more sites were designed for wide screens. Usually I end up wasting horizontal screen real estate and scrolling a mile and a half vertically.

    Nicely done Matt. Can’t wait to dig into your old theme!

  16. Awesome new look. Personal sites are fun, for this exact reason.

    I also look forward to the release of your old theme, to figure out how you worked that awesome gallery.

    Congrats!

  17. Great colors Matt, I like the vibe of the site. I like the large header image, and the photo manipulation work is wonderful! Hats off :)

  18. Matt was listening to your interview with scoble today and then this design change… WordPress is in great hands. New design, is really great and I hope now, you get the #1 sopt on google search :)

  19. The header is too large. The world’s most creative domain name deserves better.

    I relate to the strong urge to refresh a blog’s theme. It’s hard to shake. :)

  20. I love the sax image the most. I like this design better than the previous one.
    I like it that it doesn’t look like a generic/robotic blog.

    To summarize all above: SWEET

  21. I’m a real big fan of WordPress. I use it for ALL of my blogs, including my most popular one – a celebrity gossip blog. But anyway, this layout is SICK! Maybe the best layout I’ve seen in a while, no joke. And I’m subscribed to a lot of CSS galleries, so I’ve seen tons of website layouts over the years.

  22. Awesome job – did you use Typepad or Squarespace for this? It can’t possibly have been done with WordPress. Seriously – how can anyone ever possibly use anything other than WordPress. Very Inspiring design – especially the use of diagonals and the custom navigation.

  23. Wow your site is just priceless! I really like
    the design it definitely displays your online brand identity.

    For fans of the old design, I’m going to abstract it into a regular WordPress theme — gallery features and all — that will be available to the entire world, including WordPress.com.

    That’s great news thanks Matt, :)

  24. I like it, specially the birds, very poetic. But the leaves and the colours reminds me of fall rather than spring :)

  25. More than 50 comments is a design problem…

    Having said that, you got some readability issues: try reading your about page. There’s also the general issue that text set on crosshatches is unnecessarily hard to read.

    It also seems like your footer’s broken (I’m using FF 3.0.7).

    I do very much like the idea of it, though.

  26. i use my mobile phone and turn off the load image, so i can’t see your header :(
    but it’s a really big space for the header!

  27. Very cool! A lot of nice details – I might use some of it as inspiration for the theme for my own blog ;)

    Interesting to see websites where the actual content is “below the fold”… But the header looks amazing.

  28. For me, I liked better the previous to the previous design (the one wth the red header). Maybe you can offer that for download too, or in wordpress.com :D

  29. It’s beautiful. The touch of ivy at the bottom is great–I love surprise footers like that.

  30. This is a fucking fabulous theme – intensely modern and dynamic.
    And thanks for deciding to allow us to have a taste of the last design on our own blogs.

    1. Me too, it’s very clean and effective! I’m crossing my fingers he releases this one to the public too. (Of course, after he is done with it.)

      1. yep.. having things bundled (and working) in new WP releases is a CULT. (also i would like to see comment LIKE and DISLIKE to prevent duplicate comments)

  31. Wow, looks good.

    I think a ‘skip to content’ button in the header would be great. The header fills up the whole browser! (I have widescreen, but can’t stand maximized windows.)

  32. In a good way, I can’t stop looking at the new blog design, it’s just FANTASTIC! The header, yes it’s bigger than most, is superb and suits the blog well! :D Talk about a better design than the last one, don’t get me wrong, I just much prefer this new design over the old one!

    Speaking of which though, I’m looking forward to you releasing that design. Cause I plan on going through the code, most likely more than once, seeing just exactly how you did certain things here and there!

    …It’s nice to see the trend continuing in the new design when it comes to the Asides, and Photo posts! That I do look forward on finding out how you’re done it all, us PHP newbies need to learn how things are done from some you know! LOL

    Julien, along with Brian, did a great job designing and styling the new look. I don’t think I’ll EVER get tired of this look, it puts a smile on my face when I look at it!

    Thanks
    Mark

  33. gorgeous, matt. your designs always raise the bar on blog themes, and are always an inspiration. i look forward to the release of the last design.

    oh, and i love how effing big the header is. it’s perfect — because that art could be hung in a gallery more than topping a blog, so it needs to be taken in on its own, and i love the fact that it breaks the “above the fold” rule (are there many “rules” this theme doesn’t break? i guess it still scrolls vertically — you need a horizontally scrolling blog next time!).

  34. WOW, massive “arty” header, love it.
    Looks like underneath you used the previous theme with some enhancements?

  35. I like the design especially the colors and the footer. Personally I think the header is a little overkill but as you said, the design is to please you only.

    Great design though. Was it done from scratch?

  36. This is beautiful. I specially like the navigation’s image hover except for the big header. Well of course you have that BIG talent.

    In my iMac, I have the scroller to the right sidebar only to see a blank space.

  37. Julien made our design aswell a year ago, I believe that’s why Matt finally found his new designer ;)

    This new Ma.tt’s design is muche lighter than the one we choose on Toucouleur.fr, so don’t shame on us regarding the heavy donwload needed to see all graphics ;)

    Contragulation to Julien & Brian Colinger for his integration

  38. Just a minor glitch: input fields use :hover but don’t use :focus, so you can highlight the fields with a mouse but not with the keyboard.

    Other than that it would look even more awesome if you added text-shadow (upcoming Firefox 3.1 supports in addition to Opera and Safari that already support it).

  39. Sweet design but I actually think that your header image is overkill and is spoiled by the large 3D effect copper typography that spells out ma.tt.

    Beyond the header image though this is a really slick design, just don’t view it in Safari 4 beta just yet.

  40. Oh, wait a minute, it seems the new theme works a little weird in Google Chrome. I was the horizon scroll bar here. (nothing overflow )

  41. This is so you :).

    Jazz, photography and WordPress :).
    (Do you like birds too? :P)

    Though i am a bit sad to see the nice ethnic one go away, m glad it’s coming back as a theme that too with a gallery!

    Please do remember to give the user the option to disable right click/save etc.
    PS. the header is a bit too cluttered for my taste, bt then that’s just my opinion.

  42. You haven’t heard of me yet, but you will. I’m a newbie to web 2.0, but watch out.

    Good work my friend. I like your site.

  43. Nice! Since the last wordcamp I felt guilty of having a huge header, but now Matt has a big header in his blog too, I don’t feel bad anymore. :)
    Great work!

  44. I love the over-sized header look, and Julien did an amazing job designing it. Absolutely stunning. Great footer as well.

  45. it’s refreshing to be able to have a design where the only person in the world it needs to please is me

    lol I’d love to retweet this.

    The stripe background in content area makes it a bit hard to read.
    I love the comment threading style and new Favicon too!

  46. Gotta be honest Matt.

    Can’t wait to have a play with your old design. Such a fan of your blogging and contributions to all of this.

    Wasn’t expecting you to redesign this quickly. I keep changing my design all the time whereas most web professionals choose to sport the same design for years sometimes.

    Good work.

  47. Personally I don’t mind the width of the site, it’s a personal site, and I imagine a lot of your actual visitors have decent sized monitors themselves.

    I absolutely love the header, great attention to detail! Scrolling down though, I get the feeling that attention gets a bit lost; the backgrounds there don’t seem to match the quality and feel of the initial view of the header.

    The same goes for the typography, it doesn’t seem to fit in with the header and footer, style, and also size-wise. As much attention as some of the graphics are attracting, the copy itself gets a bit lost being quite low on size and contrast.

  48. That is the great thing about personal sites: you can do whatever you want with them. Experiment with new ideas, try new css, and use bizarre design techniques. That is what the personal site is for!

    Great job with this theme!

  49. Wow, happy to hear that you will release the old design to public. I will write up a short note for Vietnamese bloggers about this. T

  50. I love the new theme, the header is brilliant, I love the way it lets you stop and take it all in before you get onto the content – brilliant.

    Any ideas when you’ll release the theme to the public? :P

  51. Ugh, this is absolutely gorgeous. Normally I am more into clean and simple – but that’s only because I had yet to see this layout. Damn.. You put the rest of us to shame.. ;)

  52. Love the theme artisticly but from a UI standpoint its a bloat.

    Although its gorgeous. It’s the like two of me are so unsure of it.

  53. Again, as always another great theme to your blog.

    I can’t wait to play with your old theme, I have always been inspired by your designs.

    Keep up the good work!

  54. Just echoing what everyone else says, it looks great at the top and bottom, the middle doesn’t sync.

    The pages are a little hard to read being so transparent and ontop of the header graphic.

    Typography is nice, and it all fits well on a 1280 screen in FF2

  55. Love the new look. A little top heavy but gorgeous. Am hapy to see that the old one is getting released as I’d like to get an under-ther-hood look at it.

  56. one of the Greatest theme!

    I guess it contains all idea which I want to refer.
    I am trying build and design own WP, so I’ve been trying harder since few years.
    It will give encouraging us like me.

    (sorry,may not collect English…)

  57. I’m not sure what rocks more, your brilliant new design or the .tt domain.

    Here’s to hoping they’ll introduce a .rk soon!

    Awesome looking site, dude.

  58. I am not really convinced by the design.

    Using an 19″ CRT monitor I only see the header and not a glimpse of the content. Also the “M” reminded me on the MTV logo and first I thought I was on the wrong page.

    Additionally I am not that a big fan of this kind of ‘surrealist’ design. It looks like a modernized copy of Max Ernst’s surrealist prints, but more chaotic and with less meaning…

    I am sure will see a new design at the end of the year latest.

  59. Am a bit late to comment, but wanted to say that the new design is quite lovely, Matt. Beautiful job.

    And I think it’s splendid that you’re going to port your old design into a theme for others to share (especially those at WP.com!). :)

  60. I loooove the new design! Got disoriented thinking I went to the wrong site. But this design is super nice… and cute! ;)

  61. Your designs has always inspired me, Depending on what site I’ve been creating for.

    But you sid what I loved to hear…That this design is for you and what you like. I think that is what a blog needs to be designed for! The person it belongs to. It’s time to change the design on my personalblog as well…it still has a christmastree on it!!!

  62. um, I still see some worn paper in the navigation… :D

    seriously though the new look is great (I really loved the last one as well, keep em coming)

    just out of curiosity are you styling the default comment code or did you write a function to adjust the html?

  63. Happy Spring, Matt :)

    Awesome design! When I firstly saw the header, I thought it was a crocodile opening its mouth, however after concentrating into the details I got it.

  64. I was immediately impressed with your new theme. This is my first visit to your site but from your gallery picture of the older design verses this one… I like this one better by a long shot.

    I am researching wordpress to decide whether I’m going to recommend it to a client… your designs have shown me wordpress is a lot more versatile than I originally thought.

  65. I really like the gallery features in both your designs, by the way. I haven’t seen galleries included so seamlessly in a wordpress theme before.

    Obviously I’ve been living under a rock, though.

  66. Wonderful site! Totally amazing header graphics. As a designer I was curious to see how it looked in IE6 and found

    - Needs PNG fix
    - Padding/Box model Issue with sidebar not floating correctly.

      1. Cool.

        It’s good to see people dropping support for it, I was kind of curious.

        I may follow suit, i’ll certainly have more time for more constructive activities.

Comments are closed.