Call meJeffrey

Jake asked me to add a little “about my design” area to the Threadless product pages, but I decided to take the opportunity to give them a little refresh. Here’s the new one and here’s the old one. Below is a run-down of what I changed.

Mini-zoom & product photo
I changed the double-color thick border to be a 2px light blue border with a 2px white space between the mini-zoom and the product photo. I also added a 2px white gutter between the mini-zoom and the product photo to support the grid that I’m using in the column further down. I do think the tiny images and camera icon need a refreshing, but that would exist in the same space, so I left it alone for now.

All the buying stuff has also stayed the same, so we’ll move past that.

My original submission & About my design
The first thing I did here was get rid of the thick light-blue line that was breaking up the page, freeing up the right column. I brought the submission link over to this column because I thought it complimented the explanation of the design. I also changed the wording of “The original submission” to “My original submission”. I felt this created a sense of designer ownership over the page.

Here’s what I envisioned for the “About my design” area. This is actually a blog that has partial content displayed here. This way when you click “read more”, you’re taken to the full blog about the design and you can also follow whatever conversation happens from that. Sweet, huh? I also used the arrow coming down from the text to break up the column which gives the submission link it’s own area. Everything below this is how it is on the original page.

Ok, now on to the right column…

Prev & Next in the catalog
The first thing I did here was make the images bigger. I took the text out of the box and set it on one line under the box. Then, the image used is a full width image of the design, but centered to the box and cropped vertically. You may not be able to see the whole design, but it’s at least a lot clearer than what it was. I also reintroduced that thick light-blue line under this to break up the catalog navigation from stuff relating to this page.

From the Gallery
Keep in mind this version had no gallery photos, so it’ll look different when it does. What I didn’t like about the page before is that without the photos, this section felt deflated. What I’ve done is use a placeholder the full size of a gallery image to state “No Photos Submitted!”. I wanted to use the word “submit” to reinforce the idea that the photos that belong there are indeed submitted. Then, I pushed the submit text to the right of this box and made most of it a link. I used the word submit again, to further reinforce the submitting idea. I also changed the wording according to my shiny new legal knowledge. Basically if it says “submit a photo and get $1.50″ then that means that all you have to do is submit – not be approved – to get the points. Also notice that I bumped the title text size from 18pt to 20pt. It helps it look clearer. I also bumped the “submit your picture…” text from 11pt to 12pt, which doesn’t take up any more horizontal space, but does add a pixel in height. Yay, Georgia.

Tell friends, get points!
I didn’t do too much to this except normalize some of the spacing so it didn’t feel so squashed. I also changed the title text to say “get” instead of “earn”. Mostly because those two words were switched before, but I felt that “earn” belonged next to the part that related to money. I bumped up the text size of “you’d love this” and “buy this…” and also switched the wording to “buy this for me!” just because it’s more grammatically correct and I’m a dork. The title text is also now 20pt instead of 18pt.

Buzz in the Blogs
Mostly what I did here was fix spacing so the text didn’t seem so squashed, but I also added some elements to help the content display clearer. First of all, I dropped the blog content from the title by 2px on each entry. Then I added a small quote graphic before the content displays. This eliminates the need for quotes around the text and also makes each entry feel separate from another. I also limited the number of blogs displayed here from 5 to 3. I think it helps clean up some of the clutter, and we’re linking to all of them anyway, so I don’t think anyone will miss the other 2. Originally, in the links underneath, I changed the wording of “check out all the…” to say “Read all…” and then I added an area that would programatically input the number of blogs about that design. The number was set in 14pt Georgia bold so that it’s baseline lines up with the rest of the text, because in this font the numbers have a dropped baseline. This also makes the number seem more clear and shows that there’s multiple blogs about a product. That part hasn’t been implemented yet. The only other thing I did was push the digg link down a bit and lined it up with the rest of the text. The title text is also 20pt now instead of 18pt.

Whew! You get all that? Let me know what you all think. I think it’s a big improvement, which I feel comfortable saying because I designed the last one!