Sep 13 2007
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!
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!
Sep 13 2007
lunchboxbrain says...
Nice work! It's cool to read the how and why of the redesign process.
Sep 13 2007
JeF, this is a smart re-design. I would say my favorite part is the "About my design" with the arrow pointing to the design, that was a nice touch. I like the subtle changes, like the larger quote marks and changing the size of the pics in the previous and next part of the catalog. I think the information is more organized and accessible. (information design, what?) The only thing I'd like to see is the 'First Printed on Date'. I've mentioned this before, but it would be a great reference, and could be very small.
Nice work man! Its good to see things being updated regularly and continuing the process of keeping the website dynamic.
Sep 13 2007
Thanks! FYI, JeF is another Jeff at skinnyCorp, except that he's Jef and I'm Jeffrey! :)
Sep 13 2007
I know this... I just play Conquer Club with JeF and I guess the lines blurred. hahaaha! sorry JEFF/JEFFREY. There are too many dupes working for skinnyCorp...jakes, jeffs, oss's... anyways, nice work.
Oct 09 2007
Hi
Bye
Nov 01 2007
ONLINE - DRUGSTORE!
PRICES of ALL MEDICINES!
FIND THAT NECESSARY...
VIAGRA, CIALIS, PHENTERMINE, SOMA... and other pills!
Welcome please: pills-prices.blogspot.com
NEW INFORMATION ABOUT PAYDAY LOANS!
Welcome please: payday-d-loans.blogspot.com
GOOD LUCK!
Nov 11 2007
interesting
[URL=http://avalon-honda.acuraof.cn/steven-ford-gerald.htm#] steven ford gerald [/URL]
steven ford gerald
http://avalon-honda.acuraof.cn/steven-ford-gerald.htm steven ford gerald
[URL=http://avalon-honda.acuraof.cn/mercedes-ashley-sex-picture.htm#] mercedes ashley sex picture [/URL]
mercedes ashley sex picture
http://avalon-honda.acuraof.cn/mercedes-ashley-sex-picture.htm mercedes ashley sex picture
[URL=http://honda-bergen.acuraof.cn/dodge-dakota-rt.htm#] dodge dakota rt [/URL]
dodge dakota rt
http://honda-bergen.acuraof.cn/dodge-dakota-rt.htm dodge dakota rt
[URL=http://cb450-honda.acuraof.cn/term-papers-on-electric-cars.htm#] term papers on electric cars [/URL]
term papers on electric cars
http://cb450-honda.acuraof.cn/term-papers-on-electric-cars.htm term papers on electric cars
[URL=http://ford-land.acuraof.cn/classic-car-golf-carts.htm#] classic car golf carts [/URL]
classic car golf carts
http://ford-land.acuraof.cn/classic-car-golf-carts.htm classic car golf carts
Dec 09 2007
Aaron Equipment has a large inventory of used, unused, and reconditioned plastic sheet extrusion line.
3. plastic sheet extrusion line sale
4. plastic sheet extrusion line wholesale
Source seamless steel pipe. Find top manufacturers and distributors of seamless steel pipe listed in the only industrial directory designed to provide deep ...
Other products:
seamless stainless steel pipe
Dec 20 2007
Nice!
[URL=http://car-breeze.suzukivz.cn/dealer-honda-wheelers.html#] dealer honda wheelers [/URL]
dealer honda wheelers
http://car-breeze.suzukivz.cn/dealer-honda-wheelers.html dealer honda wheelers
[URL=http://rivertown-honda.suzukivz.cn/classsic-car-trader.html#] classsic car trader [/URL]
classsic car trader
http://rivertown-honda.suzukivz.cn/classsic-car-trader.html classsic car trader
[URL=http://merollis-chevrolet.suzukivz.cn/cat-skin-leather-car-seat.html#] cat skin leather car seat [/URL]
cat skin leather car seat
http://merollis-chevrolet.suzukivz.cn/cat-skin-leather-car-seat.html cat skin leather car seat
[URL=http://bruce-chevrolet.suzukivz.cn/ford-transmission-shudder.html#] ford transmission shudder [/URL]
ford transmission shudder
http://bruce-chevrolet.suzukivz.cn/ford-transmission-shudder.html ford transmission shudder
[URL=http://freehold-hyundai.suzukivz.cn/toyota-future-models.html#] toyota future models [/URL]
toyota future models
http://freehold-hyundai.suzukivz.cn/toyota-future-models.html toyota future models
Jan 04 2008
Nice...
[URL=http://new-bmw-535d.carheaters.cn/how-to-sell-matchbox-cars.html#] how to sell matchbox cars [/URL]
how to sell matchbox cars
http://new-bmw-535d.carheaters.cn/how-to-sell-matchbox-cars.html how to sell matchbox cars
[URL=http://ford-f-250-mpg.carheaters.cn/motorola-i833-ferrari.html#] motorola i833 ferrari [/URL]
motorola i833 ferrari
http://ford-f-250-mpg.carheaters.cn/motorola-i833-ferrari.html motorola i833 ferrari
[URL=http://toyota-corrola-review.carheaters.cn/1961-chrysler-convertible.html#] 1961 chrysler convertible [/URL]
1961 chrysler convertible
http://toyota-corrola-review.carheaters.cn/1961-chrysler-convertible.html 1961 chrysler convertible
[URL=http://dodge-dealer-oregon.carheaters.cn/porsche-911-coupe-road-test.html#] porsche 911 coupe road test [/URL]
porsche 911 coupe road test
http://dodge-dealer-oregon.carheaters.cn/porsche-911-coupe-road-test.html porsche 911 coupe road test
[URL=http://new-bmw-535d.carheaters.cn/car-parts-bottles-cutlery.html#] car parts bottles cutlery [/URL]
car parts bottles cutlery
http://new-bmw-535d.carheaters.cn/car-parts-bottles-cutlery.html car parts bottles cutlery
Jan 07 2008
Nice
[URL=http://tony-nissan.volkswagenrabbit.cn/susan-schein-chrysler.html#] susan schein chrysler [/URL]
susan schein chrysler
http://tony-nissan.volkswagenrabbit.cn/susan-schein-chrysler.html susan schein chrysler
[URL=http://tony-nissan.volkswagenrabbit.cn/dodge-dealership-norfolk-virginia.html#] dodge dealership norfolk virginia [/URL]
dodge dealership norfolk virginia
http://tony-nissan.volkswagenrabbit.cn/dodge-dealership-norfolk-virginia.html dodge dealership norfolk virginia
[URL=http://wexford-dodge.volkswagenrabbit.cn/92-pontiac-gand-prix.html#] 92 pontiac gand prix [/URL]
92 pontiac gand prix
http://wexford-dodge.volkswagenrabbit.cn/92-pontiac-gand-prix.html 92 pontiac gand prix
[URL=http://volkswagen-sucks.volkswagenrabbit.cn/trimming-coal-in-rail-cars.html#] trimming coal in rail cars [/URL]
trimming coal in rail cars
http://volkswagen-sucks.volkswagenrabbit.cn/trimming-coal-in-rail-cars.html trimming coal in rail cars
[URL=http://jeep-transmission.volkswagenrabbit.cn/mazda-fensterheber-mx5.html#] mazda fensterheber mx5 [/URL]
mazda fensterheber mx5
http://jeep-transmission.volkswagenrabbit.cn/mazda-fensterheber-mx5.html mazda fensterheber mx5
Leave a comment
Note:
Leaving your email isn't required, however if you would like a response, please include it in the form.