By far, I think the best thing I’ve ever made is my protosite for Arcadia Video Games. I see it as a culmination of everything I’ve learned as a designer so far.
I was in charge of every aspect of this design from conception to the final site, so all of the UX choices are my own. Let’s take a look at the pages I designed, and I’ll point out some of my favorite parts of the UI along the way.
This emerged by taking a look at how video game retailers organize their products. Initially, I was wondering if I should organize by Games/Systems/Accessories, and then the various platforms for each. But in talking with users, they clearly wanted it the other way around.
I realized that physical retailers don’t organize their games in one place, all systems in another, etc. Everything for each console is grouped together. It’s a familiar metaphor for users, and a format that most sites I researched follow.
Carousel & Tabs
I wanted to minimize scrolling for the user as much as possible, and I discovered using tabs and placing items on a carousel would be a good solution. Not sure this combination would work great for every retailer, since some may want to flood the home page with a ton of game boxes to attract more customers. Still, this works great for “Featured” or “Top-Selling” products.
In this situation, I wanted to feature a carousel of video game box art with purchasing information. Only problem is, there’s pretty much only been one time of the history of that medium that the boxes have been the same size (the DVD case). But now even that time is moving on. So how do you get these different sized boxes to line up nicely?
There’s multiple ways to deal with it, but my approach is to align the boxes to the bottom. This way the user’s eyes don’t bounce around when trying to look at prices, and more importantly adding to their cart.
Great, only problem now is I’m using jQuery UI to create my carousel, and it needs some very particular markup, or it will break.
Basically all good designers know that using a grid when wireframing and making visual designs for a site is a good idea. But it’s surprising to me how many designers I talk to don’t use a CSS grid system framework (like 960.gs) on the actual site they build. They still choose to define widths, margins, and floats themselves.
It’s kind of baffling to me, since grid systems are great for getting rid of much of the uncertainty and tedious math that typically goes into laying out a page by hand. The other cool thing is that you can subdivide grids higher up in the DOM to make layouts that would be tricky to create by hand. Some might even resort to tables.
Using CSS image replacement to add hover and active states to buttons is good in theory. But this can be problematic because browsers typically don’t load images until they need it.
The net result is buttons that pop in or “blink” as you hover in click. A good solution to this is to use sprite sheets. This is a single image that contains your normal, hover, and active states. And with a little CSS work, you can position the image so only the state you want the user to see it shown.