BlissfullyAware: A Website by Joshua Lane

Transcribing

Random text and assorted bits of news and info to read or disregard at your leisure

UrbanOutfitters.com: The Grid

Joshua Lane / / 3 Comments

The new UrbanOutfitters.com launched this morning. Even though I no longer work there, I was responsible for the new IA, Design (though it’s been modified a bit), and front-end HTML & CSS. The javascript code and back-end implementation was handled by an outside company – I did not write the mess you see when you view the source, so please don’t fault me for that. And I’m not too keen on some of the design adjustments made.

HOWEVER, I’m pretty happy with how the site turned out. Everything is more logically organized, and the product shots are front-and-center for customers. There are A TON of other little things I did on the site (and will comment about in further blog posts), but for this instance, I’d like to focus only on the grid.

Primary Grid

The primary grid is made up of 6 columns that are 140px wide with 10px of space in between. The screenshot below shows the grid overlaid on a “Product Category” page.

Smaller Grid

The smaller, secondary grid is made up of 12 columns that are 65px wide with 10px of space in between. The screenshot below shows the grid overlaid on the “Shopping Cart” page.

Grid Usage

Every single page on the new UrbanOutfitters.com follows the same grid structure… from the home page, to the shopping cart, to all the form fields on the site. Take a look around the site and I think you’ll start to pick up on it. And if you need a little help, check out my flickr set where I’ve dumped a bunch of screenshots with grid overlays.

Comments Abound

Delightful thoughts & feedback about this article

Partially Insane /

Soooo funny!! When this launched this morning, I immediately thought of you and told my co-workers how proud of you I was b/c it looked so good. I’m really impressed. It is SO much easier to read/navigate!!! I don’t know what in the hell you’re talking about regarding the grids…..all I know is that it’s awesome!

Noah /

Overall, I’m not a huge fan of this design. I don’t know what the previous version looked like so I can’t comment on that. I understand the whole aesthetic is that “grass-roots minimal” look, but it doesn’t really work for me. I’m not a usability snob AT ALL, but everything is so stark black and white, that it’s almost laborous to try and distinguish all the content apart from each other. The catalog portion also has gray text on a gray background, which I don’t understand. All the different type faces don’t mesh either. Sometimes it does, sometimes it doesnt. On this site, not so much.

I understand that you said there were changes, so I apologize if I’m commenting on things not related to your original work.

Andrew Meyer /

Hello.

I want to tell a story: I was just looking at UrbanOutfitters.com, when I told myself, “Wow, this I like.” I then wondered to myself, self, who designed this? It’s nice.

I googled it and found myself here. Really nice job on it. The grid is great plus I really appreciate the typographical hierarchy created, largely, using the size of elements. It works well and seems to just feel really good to navigate.

Excellent work. Additionally, I like your blog design, here, a lot as well. Props.

No More Discussion

Sorry, but comments are now closed for this entry