New Summer Design

As has become the tradition around here, today I’m launching a new design to celebrate the new year. (See also 2006, 2008, 2009.)

As you can tell, it is very inspired by the pop art of Roy Lichtenstein, an idea that came to me while visiting the Hirshhorn Museum in Washington D.C. last year, and again at SFMOMA in November. The idea was beautifully executed by designer Nicolò Volpato (who has now done 3 of the past 4 designs for Ma.tt) and coded up by Otto.

The header is a lot smaller, the graphics should load much faster since they’re simpler, and there have also been a few tweaks throughout the site to make it feel a bit speedier. Instead of image hacks like I’ve used in my past few designs I’m now using Typekit for pretty much everything, which feels nice.

Please take a look around, stroll through some of the recent photo albums, and generally make yourself at home. Let me know what you think in the comments. On to the next one…

108 thoughts on “New Summer Design

  1. Hey Matt, always a creative approach!

    This is definitely different and has a comfortable feeling. Kind of like the big fat Crayola crayons from Kindergarten.

    Have a great weekend, and congrats on the new layout.

    Dre

  2. I liked that you sketched out the Bay Bridge and not the oh-so-cliched Golden Gate bridge.

    I did not like that nearly 50% of first screen (above the fold) of the real estate is ‘static design’ at the top. Tufte will not be happy.

    1. I look at the Bay Bridge every day I’m in San Francisco, so it just seemed more “me” to have it there. There are a few little easter eggs like that in the illustration.

  3. I love it, Matt! It is fresh and clean and inspiring. Nicolo is an incredible talent and I’m thrilled you offer him your vast, public, platform for inspiration.

  4. Yeah, I’m liking that design a lot. It makes a refreshing change from the now over-done floral thang. I’m redesigning my site too… just wish I had Nicolò’s vision and originality cos having seen this page I now want to scrap my efforts and start again!

      1. Oh…I was hoping you had actually disabled that feature. I don’t like that everyone can see hundreds of 8-year-old photos of me on here!

  5. I like it. Pretty funny that you end up in a Museum and think about redesigning your site based on art pieces you’ve viewed.

    That M in the header reminds me of the old MTV logo from back in the 80s.

  6. wow, was just checking your site a few minutes ago, reading the Plinky post, and am now back with a new design.

    Artsy, funky, pop. Cool change.

    Good idea to change the design yearly, it keeps the creativity going. I’ll try to do the same for my blog as well.

    1. Ups, Otto forgot to remove rel=”me”. Also some minification to external files could be done.

      Why do you include those JavaScript files from Facebook and Twitter, I don’t see theye’re used here?

      1. Hah. Yes, thanks for noticing! Fixed. Will work on the Facebook and Twitter code, they’re there for other reasons.

  7. The bright Lichtenstein look really suits your blog–lots of energy but still easy to navigate. Odd thing, though–the comments are in a very large font, and disappear into the frame, so I wasn’t able to add my (exceptionally thoughtful and insightful) remarks on Headers of Twenty Ten. Wasn’t able to read all the other comments, either. Ah well.

  8. I am convinced that every pixel on a screen should be used with care, space=money, sooner or later. This design uses a lot of space in the header (although less than the 2009-design) which I think is bad. I have visited and left your previous site a few times, missing the content. Eventually I discovered I had to scroll down first… The artwork is fine, however, as is WordPress.

  9. Wow! I thought I’d gone to the wrong site for a start.

    New design looks nice and fresh. I’ll miss the old one though, it was pretty awesome.

  10. Yellow, red, blue, green. Black and white, handwriting lines, very good… maybe change all the block border to be handwriting just like photo border… looks better.

  11. I like it! Old-fashion style and original at the same time 😉

    But someway at the moment I still prefer the old design… Maybe, as commonly happens, I was used to it! 😛

  12. It looks awesome Matt! I just changed my theme too. I had to pick from the WP theme dir. I liked many but thumbnails did not work right on the front page in most. Cool colors in the widgets background.

  13. I love it. My favorite is the WordPress Jet.

    Noticed the link in your sidebar to your wordpress.com blog just goes to wordpress.com, and not your actual blog.

    Is that a cup of earl grey in the footer coming out of the sax? Or a cappuccino maybe?

  14. Initially I was shocked. It is such a change from you last design, but thats what it’s about, isn’t it? Another reminder to keep moving and growing. Your 2008 design, based on the Spanish Talavera pottery design, is my all time favorite. Weren’t you going to release it publicly?
    I’m beginning to like this design now that I’ve looked at it for a few minutes. Also, I really like Twenty Ten. It’s a great design.

  15. I like the background. I spread it across 2 19 inch monitors just too see how much I could see of it. I like how the background looks good on the site no matter how narrow, but you see more the wider it is 😉 The colours really make the different elements just pop! out

  16. Not sure about the text contrast in the comment section, but otherwise like the style. I DO like the old one better, but I liked that one a lot 🙂

  17. I like the new design.

    It has that old school 1999 look. I also think it suits you better as a WordPress founder. The other design was perhaps to designer like.

  18. Wow. I love the typography in the footer. I was like hmm… that’s gotta be an image. 🙂

  19. I really like the sidebar and the footer, but I think the header needs some work. Overall, though, I love the colors!

  20. Hey Matt,

    I LOVE this new design, it makes sense because I also love the work by Roy Lichtenstein. I also sent you an email, regarding a plugin I developed for wordpress comments, love to get your thoughts on it. Keep up the great work.

    Joey

  21. Good stuff, love the design. Very cool! Have you thought about adding some hover styles to all the links and buttons? That might add a little oomph to it. Just a thought.

  22. Matt, the only possibly cooler thing than the new look and feel of your site is your ma.tt URL. Seriously, this is some fine work you’ve done here and most certainly an inspiration to all!

    1. @Randy – Yes, I very much agree to it and infact I too wanted to comment the same.

      @Matt – But still, I loved this cool new theme.

      One thing is for sure. If you want to feel the visitors fresh, keep changing the theme of your website.

      Cheers 🙂

  23. I noticed that the current state on the navigation doesn’t change when you visit another page. I’m guessing you’re still sorting out small things like this?

  24. Hi Matt

    I confess that i like very much your work to WordPress. I’m very thankfull for my blog which works wonderfully.

    I’m retired from pastoring in church, but i continue teaching the Word of God by the blog. I give freely what i recieved freely.

    Thanks for that.

    1. I originally used the nav_menu system, but we changed it to be a hardcoded menu halfway through. When I did that, I lost the built-in active nav state and didn’t notice it. Regardless, it’s working now. 🙂

  25. Hello Matt,
    Congratulations for your new Redesign.
    It looks fantastic and it’s refreshing to me 🙂

    Roy Lichtenstein was a great artist and for me, his comic-art-style is fitting perfecttly to your WordPress-Blog.

    Pop-Art and WordPress – this combination sounds like a lot of fun to me 🙂

    Many greetings
    Manuel

    1. Well, my personal stuff usually takes 3-24 months longer than I would like because there’s so much going on at Automattic, but I find collaborating with good people externally can keep things moving along nicely.

  26. What a clean, refreshing redesign–and one that breaks entirely with the somewhat artsy-grunge cliche that was going on in your previous theme. This is very cool work.

  27. Looks good Matt! I even like it more than the old theme. Did you think about removing your name from the header and releasing the theme to the wp repo? I think you’ll do great 😉

    Oh, and thanks for the mention during WordCamp SF, great presentation back there, hope to join you next year.

  28. Just noticed there is no more previous/next links on posts. Is this intentional or not?

    There is one issue I noticed: frame for random image in sidebar sometimes is out of place, as you can see in this screenshot (Chrome 5).

    One suggestion: section “PEOPLE IN THIS PHOTO” could be placed on better place since it is very hard to notice it.

    1. I know, right? That seems to be some kind of Chrome issue, because it doesn’t happen always, and if you refresh it appears in the right place. I can’t figure it out. It doesn’t happen in any other browser.

      Rest assured that when I figure out what is up with Chrome, I’ll both fix the problem and report it upstream to the chromium devs.

  29. You’ve been Lichtenstein’d!

    I feel like this design needs a lot of EXCITING! content to go with the POW! new design. Like there should be a lot of SMASH! BOOM! Ka-THUNK!!! onomatopoeias in it…

  30. I like how fun the design is, but personally I feel the colors are a bit brash. They kind of hurt my eyes! (And I know I once had a neon turquoise webpage, but that was because I couldn’t see the color accurately on my monitor 🙂 ).

  31. That’s a great new design, Matt! Incredibly inspiring. Congratulations. No wonder, I especially like the perfect use of FF Meta. Well chosen typeface.

  32. Lookin’ good 🙂

    I almost went with a similar look (Lichtenstein inspired) for my site a couple of months ago, so it’s nice to see how you pulled it off!

SHARE YOUR THOUGHTS