New Spring Design

Time to come out of your RSS readers and visit the site. In celebration of Spring, Summer, the new domain, and WordPress 2.5 I’m launching a new version of Photo Matt / Ma.tt. Here’s a before and after picture:

Old and new ma.tt

A couple of functionality changes you’ll notice:

  • Thumbnails and photos are now much larger. (Especially photos, now 840px wide.) Imagine it like going HD, you’ll definitely enjoy it more on broadband.
  • I’ve brought back the photo tech details like aperture and focal length.
  • In addition to posts and asides, I’m now doing new post types: galleries, quotes, videos, and highlight photos.
  • You can now click on a photo to go to the next one, making  browsing galleries easier.
  • The header is a lot shorter, so you get to the content faster. You can’t say I have a big head anymore. :)
  • I’m starting to use the new taxonomy bits in 2.5 to tag people, places (geotagging), things, and concepts in the various photos. (More on this later, still a bit broken.)
  • This is the first iteration of this site that is powered entirely by WordPress. (I know, 5 years late. The cobbler’s children go shoeless!) Before it was a cobbled together set of PHP includes and software like Gallery. Now 100% WP.
  • Gravatars are much more prominent. I wonder if there’s a way to only allow comments from people with Gravatars? It looks so much better.
  • Name has changed from Photo Matt to Ma.tt, tagline is the same.

The fine design was executed by Nicolò Volpato, the same talented fellow who did the last design. My concept was to evoke Spanish talavera, inspired by my trips to Spain and Argentina and pottery at my parents’ house like this, this, and this. It was a lot of fun to work with Nicolò on and I already have a few ideas for Fall. :)

I’ve been noodling on the implementation for months now. Last night I had just arrived from New York and it turned out the Jay-Z/Mary J Blige concert in Oakland got postponed so I found myself with a bit of time on my hands and decided to tie up all the loose ends. There are still a ton of things broken like the photo border on portrait images, I still have 15k old photos to import, and you may see the old design on some older pages, but I wanted to get it out there. There are also some weird things, like Firefox seems to back the background image blurry while it’s razor-sharp in IE and Safari. I feel like I’ve seen that somewhere before.

Finally I’m hoping to release a lot of the work I did here, including a version of the old theme, the plugin + script I’m using to resize all my old images on the fly, the taxonomy stuff, and some core improvements to WP to make some of the things I’m doing here easier. (I got lazy and did some direct SQL queries, etc.)

215 thoughts on “New Spring Design

  1. Yeah, I like the new design also. It’s nice to see fresh looks, despite how much we enjoy our previous ones.

    I’m interested to hear more about your use of the taxonomy for tagging individuals, etc. Very much looking forward to that when you get around to discussing it.

  2. Very nice!

    Too many people seem to be going down the minimalist or near-graphics-free route these days but it’s nice to see an original design with bold, vibrant colo[u]rs. It’s also great to see you showcasing some of the cooler new features of WP 2.5 for the rest of us to *cough* borrow! ;)

  3. Very very spiffy :) But I personally dislike the way everything moves when Gravatars are hovered over. Also, you need to sort out the comments form: focusing on an element clears it, and that can mean that one loses what one has just spent precious time typing.

  4. You more or less know my thoughts on the design but I just realized you’re using Arial instead of Verdana or Georgia this time around.

    What is the world coming to? :)

  5. Defiantly digging the colors, patterns and hand-drawnish icons. You may still be working on it, but here are a few bugs I notice.

    – Footer image has a bottom margin that is messing up the alignment a bit in firefox/ie.

    – These input boxes clear when you click on them and not just the first time. I wrote a message, clicked outside the box. When I clicked inside again the message was gone.

    Small things – looking good!

  6. What about putting the comments number into the comments bubble from the top? Otherwise, i don’t know what is it doing over there :D

  7. Love the new design; although, the old design wasn’t bad either. ;)

    Echoing some of the comments above, the Gravatar borders on hover and the comment box clearing onfocus are rather annoying.

  8. Wow, beautiful design. I love the navigation, the previous post/send comment buttons, comment form, comment layout, header, footer, sidebar.

    Oh wait, it probably would’ve been quicker to say what I didn’t like … oh, but then my comment would be empty!

    Haha, nice work Matt.

  9. That’s defintely a great design !

    Where did he find those patterns on the header ?
    He created them from scratch or is there a stock of images like these somewhere ?

  10. This must be influenced by the grunge style I’ve been reading about. I like it. I like the handdrawn elements. Did you draw and scan or find them web-ready. Nice layout matt.

  11. Like I said NIcolo did all the design work, I’m not sure how he created everything, maybe he could drop by the comments and let us know.

  12. Hey! Don’t clear the box when I click in it! I had half a comment written, went to copy a sentence to quote, then clicked back… and my comment was erased! Now I’m writing this in an outside text editor so that I can copy and paste things like links.

    On Firefox 3 Beta 5, the comment box jumps when I hover over the Gravatar. Was this done on purpose?

    Ditto on the latest Opera 9.50 preview. Maybe the margins are being collapsed on the non-hovered style?

    I wonder if there’s a way to only allow comments from people with Gravatars? It looks so much better.

    I recently installed the Wavatars plugin to solve that. It automatically generates an cartoony face icon for each commenter’s email address, then uses it as the fallback for the gravatar call. There are a couple others I looked at, including WP_Identicon (geometric patterns) and WP_MonsterID (cartoony monsters).

  13. Kelson, I forgot that Gravatar actually has an undocumented way of doing that. Just add default=wavatar or default=monsterid. Here come the monsters… Meech says the Identicon geometric thing will be around soonish, so I’ll switch to that when it’s ready.

  14. re: your thoughts on gravatars and only allowing comments that use them…

    I am not a big fan of all the nongravatar peoples having the same default avatar either. I’m not using the default unknown, but even that gets boring.

    On one of my sites I dropped in 5 to 10 themed images (so I would know they are unknowns) and set it to randomly assign them to people without accounts.

    People can get assigned multiple avatars during the same thread/post, but it doesn’t bother me enough yet to cause me to try to write something to correct it.

  15. May I point out that the wp-stats .gif file is throwing off the alignment of the image/s in the footer? You might want to throw a display:none on that puppy….

  16. Oscar, Web Designer Wall is gorgeous, in fact I just contacted them about doing a theme for the WP.com marketplace, but I hadn’t seen it until today and Nicolo is a very upstanding guy and wouldn’t have ripped anyone off.

  17. I wouldnt exactly call it a rip off, actually far from it, if you have a closer look at webdesignerwall the design is different + the colours. Its a great theme this and when the bugs get ironed out itll be even better.

  18. Love the new design!

    For the Gravatars thing, maybe you could use a random image from about 10~ good default ones to be set for people without them? Would kinda look as if they do have gravatars. ;)

  19. Very cool design, great colors. Reminds me to shrink the header a bit at my own page… :)

    About Web Designer Wall: I bet numerous designers have thought of/created web site themes in a similar vein (handdrawn/collage type elements), no big deal.

  20. Very nice. Makes me fell all summery.

    Matt – I’m looking forward to more on the taxonomy side of things. I use the WP Movie Ratings plugin on my site at the moment, and want to rewrite that using the new taxonomy system, but there are preciously little examples out there right now.

  21. WOW! Eye popping color and movement in the header and design. Love it … I’d love to have the css for the body … now you should release the source ;-)

  22. Kelson, I forgot that Gravatar actually has an undocumented way of doing that. Just add default=wavatar or default=monsterid. Here come the monsters… Meech says the Identicon geometric thing will be around soonish, so I’ll switch to that when it’s ready.

    Hmm, intriguing! I’ll have to try that out.

  23. Think its great that Matt has decided to release a version of the old theme, i think what everyone wants is the CSS for the body hehe

  24. Wow great job Matt, dont forget that category/gallery post you wanted to do. You still have a few people over on the forumz scratching their heads over that one.

  25. Groovy.

    I wish Gravatars would show a neutral image for people who don’t have an account.

    Oh wait! Reading comments above!

    Toddling off to install Wavatars now…

    :)

  26. aag, you don’t need to. It’s built into Gravatar now, all of the geometric things you see here are from Gravatar.

  27. Very nice! Congrats for you and Nicolo.
    I think you should come again to Argentina to get more inspiration for upcoming designs :)

  28. Aesthetically and functionally this site is very different from Web Designer Wall.

    They share some features, like an organic header design and some “hand-drawn” and “torn-paper” elements. Enough to be evocative of each other, but not enough to be called similar, let alone calling this one a rip-off of the other.

  29. As usual a nice design. As for the hover over, it must of been fixed by the time I got too it. Now I’m curious what all you could do with a hover over and the gravataar…

    BTW the only suggestion I could think of, for the design is perhaps introduce a slight alternating colors… I am liking how your comments are offset.

  30. The designer did a really good job Matt. I’ve seen those background patterns from Adobe Illustrator and I haven’t been using them. This is the first time I saw them implemented in a website. The new skin kicks ass. I love it!

  31. Nice work. Seeing this makes me wonder about perhaps hiring a graphic designer to spruce up mine. I can code, but I can’t design well, hence the minimalist looks.

  32. Holy mother of god. I was showing some of my patients your site, and expected to see the same old , same old, and whooo… that is quite a difference.

    It is lovely, organic, fun, San Franciscoish, and cool.

    Good to break some new ground!
    dk

  33. Looks good, Matt! I like the little arrows going here and there, as well as this comment box. Kudos to the designer.

    One thing though. Tabbing from the textarea box when writing comments should go to the send button. Maybe someone already said that though…

  34. Y’know, it’s very interesting this latest wave of web designs incorporating natural elements like handwriting and scribbles to serve functions where everything prior was all intentionally made to look artificial. It’s almost like web pages have become annotated (hey, that’s actually a pretty cool idea now I think of it…) by their authors as an afterthought to convey a more relaxed attitude or whatever.

    Interesting layout, sir. Though, I must ask, is the ~5px difference between inside and outside backgrounds at the bottom intentional? (I’m on Firefox 2.0.0.14 on Vista if that helps)

  35. Holy dang. It looks good, Matt. How might we extract photo details like aperture, focal length, etc. I remember you saying something about a PHP array…

  36. holy smokes!
    thought i woke up on a carnavale float or some 60s funkadelic type show
    me gusta
    es hermoso. bien hecho

  37. Wow… looks really great. I love the different styles for posts, asides and galleries!!!!

    And I can’t wait for:

    Finally I’m hoping to release a lot of the work I did here, including a version of the old theme, the plugin + script I’m using to resize all my old images on the fly, the taxonomy stuff,

  38. Nice design Matt, I really like it :)
    Quick question for you, how did you get your blog to redirect /year/month/day/postname to /year/month/postname? I saw it when you moved from Photomatt, but I never saw how :P
    Cheers :D

  39. Wow, you nearly gave me a heart-attack here. Something which is quite hard to do, considering me not being older than 18… Anyway, congrats with the new look. It’s amazing, as I am sure you’ve noticed ;)

  40. You can now click on a photo to go to the next one, making browsing galleries easier.

    Any chance of sharing the secret matt. The design looks great.

  41. There are a lot of things I like about the new design, but I haven’t yet decided if the header is one of them. But of course the important thing is how much you like it, yeah?

    Cheers!

  42. Right now it’s just using the first image from the gallery, in the future I’ll have it use one that’s tagged a certain way.

  43. Erm, what’s with all the a**-patting? This grunge-Indian (not Native American) look with an A-Team font really isn’t very becoming…

  44. Cool design!

    A short note, though: When I resize browser window to be less than 1024px in width, there comes a background vertical line in the right part of the main content (the text). I guess this can be fixed easily, but just wanted to point it out… :-)

  45. Arrgh, your site looks fantastic.
    Especially the use of the WordPress Gallery is outstanding.

    Some questions:
    1. How did you do the random image in your sidebar?
    2. Is there a function to query the first image of a gallery?
    3. How did you add the back to gallery link?
    4. Why is clicking the gallery category showing such a beutiful gallery page instead of the archive? HOW, HOW, HOW?

    Arghhh, I want to know how to be so good. It’s amazing. Fantastic. Please tell us (or just me):

    How?

  46. Beautiful new design! Extra cool that it is all WP powered now too. Still, that new domain name is the best thing of all.

    While I am here, I would like to add more praise for the WP-MonsterID and Wavatars plugins :)

  47. Wowzers. I’m currently working on changing my blog over from blogger, and boy this is a tough go. I’m going to Michigan on Fri. to get WordPress for Dummies (my little city doesn’t have it). If this theme of yours was a choice in themes, I’d definately pick this one; it’s so me. I love this look emmensely!!

  48. Question 2 and 4 already answered through google. Yippieh!

    Espacially question 1 should be of bigger interest. Would be nice to have a widget for it (with the ability to exclude galleries or limit the random image to one or two galleries.

  49. I must admit at first I was a bit taken back, unsure if I like the new look. But after a couple of days I am glad to say I love it! Great work by the designer Nicole!

  50. Matt – I tried to link to your blog comments to show someone what the identicons look like and discovered that you don’t have any anchors on the comments. Perhaps it would be a good idea to add them?

    If someone wants to link to a specific comment they won’t be able to without the anchors in place.

  51. This looks good. The footer background of the container doesn’t seem to align with the wrapper’s though. Viewing in Firefox 2.0.0.14 BTW.

  52. I think..you like etnic design…..like oriental art
    but so far it’s a good design i think…
    let me introduce my self…i’m blogger from west borneo…west borneo is a state in indonesia that have a dayak etnic …maybe you can try dayak etnic design. i’m proud using the wordpress….hope you come to my blog…

  53. Have you considered making the navigation in the gallery, so the left half of the photo takes you to the previous image, and the right half takes you to the next image? (rather than all of the image taking you forward)

  54. I dont see why people are comparing it to designer wall, that site is totally different, totally different background and the idea is different. Matt has usued his imagination with this one and created a blog theme that is personal to him…rock on i say!!

  55. I actually navigated to your site from the web designer wall. (there’s a link at the bottom of Nick’s site that goes to his gallery site that links to your site) Imagine that?

    Anyways I was quite suprised to see the similarities between your designs. I understand that you did actually design this yourself…but I have a feeling that guy who did, has seen the web designer wall and at least drew some inspiration from it.

    The first thing I did when I saw this site was look under the hood, I mean you have a lot going on and it was difficult to understand how it could be done with today’s techniques, But then I saw this image – bg_container_2col.jpg that pretty much explained it all – a CSS Zen Gardens-esque background image. That’s clocking in at 135k! Anyways your site looks awesome although I loved your previous look just as much.

  56. You could consider this a bit mean Matt, but it has to be said because so few people are saying it.

    The WordPress code is an absolute disgrace. There is no real structure or continuity to it. Its just a load of botched, mangled and mixed PHP, HTML, CSS, JS and XML.

    I have worked with PHP programmers as young as 20 and their code and standards of programming absolutely put you to shame. WordPress looks like it was built 10 years ago and whenever a security bug (of which there have been so many) or any other bug has come up you have just forced in a disgusting fix.

    Come on Matthew, if you are going to be ‘the guy that made blogging’ get rid of the current disgusting WP code and start again. DO NOT mix HTML, PHP, CSS, XML or JS in the same file. These should always be in separate files. Get some architecture. People don’t want to have to look through 20 files in a ridiculous loop of functions to find one line of your botched code, cut your queries down – 30 queries to load a single page is an absolute disgrace, use a templating engine – preferably XSLT – having PHP templates is not acceptable in this day and age, get rid of your disgusting XML concatenations and replace them with PHP’s DOM class, stop putting “powered by wordpress” and other discernible markings on WP. I can type in “powered by wordpress” on Google and I will have 1000 blogs I can get access to because of your security flaws, make EVERYTHING object oriented and either make your own database layer or use PDO – don’t just steal someone else’s insecure db class and rename it wpdb.

    PS – stop using the phrase ‘Code is poetry’ until your code is actually anywhere near half decent. Right now its only place for any expert PHP programmers is the bin.

  57. This is a great improvement over the previous design, I really like it! The look fits the season perfectly.

    Congrats!

  58. New design is great! Really summerish…
    Though…
    You wouldn’t believe it, but I miss the old one.
    The coffee cup used to soothed me :)

Comments are closed.