The Axioms of Web Design

I chose this website not because I'm in the market for a Jeep, (I'm not), but because I like how the landing page grabs your attention by showing the Jeep lineup, and how you can get more information on any model simply by hovering and clicking. The color scheme and setting is great--the shiny red vehicles in the foreground, with the rays of the sun shining through the green trees is almost breath taking.

Business objective: It's pretty straight forward--obviously, they want to sell 4x4's.

Strong grid: The grid concept doesn't really kick in until you go to the individual product pages. I would say the gird is rather loud, but it does work. You can scroll down and see features, and you can build your ideal vehicle as you go. I do like this scroll feature.

Lower right: Click on the lower right and it takes you to another product page and gives you offers of savings on the various models. It's definitely a call to action, though it is fairly low keyed.

Direction of sight: To be totally accurate, there are two different landing pages that alternate automatically. The first shows their latest award-winning model parked in a way that forms a diagonal, and gives the appearance that it's on a cobblestone road and has just rounded a bend. This gives the feeling of action. The second page is the scene with the cars in a semi circle in the forest. The gentle arc of the cars allows us to see the sides of each model, which also creates diagonals in the shot. It is pleasing to the eye.

Affordance/intuitiveness: This site is intuitive and easy to navigate. By simply hovering and clicking, then scrolling, you can get all the information you want (okay--you'll get a lot more information than you want unless you are a serious shopper).

Contrast: Since everyone knows Jeeps are made for the wild outdoors, the designers put this to good use by situating the glossy, shining Jeeps in the rugged outdoors. I could write three or four hundred words about the contrast alone, but maybe that's best left for another time. Suffice it to say the designers used contrast to their advantage.

Aesthetically pleasing = easy site: I find this site to be aesthetically pleasing, and I also find it be easy to navigate. I guess that's another win for the designers.

Aspect ratio: Having made that last statement, now I'll have to say that when I looked the site up on my smart phone, I found a site that wasn't easy to use. The landing page was quite minimal, and when I tried to get to the other pages, it wanted me to enter my zip code, (I had my location services turned off at the time), so it could give me information on the latest, local deals. This totally turned me away. When I'm searching for general information on cars, the last thing I want is to feel the "hard sell" coming on, especially this soon. And that's what this felt like to me. Also, it wasn't as intuitive, the use of contrast wasn't there, and honestly, most things about it didn't work. I think this small screen presentation needs a lot of work.

Web design that works

It's not the flashiest site--in fact, I hesitated to use this site because there are so many other sites that are more sleek and more sophisticated. Yet, in the end, I chose this site because it's so functional.

The page is basic, even simple. Advertising is kept to a minimum, which says a lot since this is a free site. But what really sets this site apart in the interaction. True, if you don't play guitar, this site won't be of much use to you. But if you do play, this page can be a great resource.

 When you click on the link, you are directed to an interactive layout of a guitar fretboard. An E major chord will show by default, but from there you are free to customize it as needed. Say you want to know what a Cadd9 chord looks like. Just click on the "C" chord, then find the "add9" button below, click on it, and the fretboard will show you how this chord is fingered. Pretty cool, but it doesn't stop there. Say you know a chord, but don't know the name of it. Simply move the "markers" (the dots that show you where to place your fingers) to the strings and frets that make up the chord, then hit "search", and it will give you the name of the chord (as long as it is a real chord). Also, click on the inversion button and it will show you how to play different voicings of the same chord.

Simple to use, easy to understand, and very useful. That's what makes this webpage design work.

Small Screen Storytelling

Though this video was made by a Thai mobile phone company, I wasn't sure it would translate well to a small screen, especially since it was given English subtitles. Yet I needn't have worried. Even with the subtitles, the video works great on a phone. The scenes and characters are easy to see, and the shot angles help make a compelling story. Everything about this video is well balanced, and translates well to any size of screen. In fact, the message gets across so well that if you can watch this without getting a little choked up, you'd better check your pulse!