The last post was pretty basic. It stated what I was doing, but didn’t really cover what I intend to fix about the design of the Xna site. Let’s go over that now:

Pros

• Layout - The layout is good. A mix of two columns and three columns can get a ton of information across without too much scrolling.
• Images - The art quality is good and the abundance of art is great. The site is about creating games and as such should be colorful and exciting. We aren’t writing a 2000 page thesis.
• Differing Information - One thing my sites generally lack from is the difference in information presented on one page. The Xna site excels at this, bringing all the top information to the front page. This introduces the reader to many concepts without them having to dig too deep.

Cons

• Contrast - As mentioned before, the lack of contrast can hurt the eyes and confuse the reader. I have no idea where my eyes are supposed to go.
• Spacing - Even with three columns, not much information makes it onto the first visible part of the page. Why is this?
• Beta this, Beta that - Beta is the new final release apparently. Why would you ever put it out that the site is a beta? This is a production website as far as I am concerned. Keep the logo area clean and simple. A logo states what the site is ultimately about and nothing more.
• Randomized Locations - Information is all over the place! It makes it very hard to read when there is very little notion of lines. Humans are accustomed to reading lines of text, don’t make our eyes jump vertically or over great spaces.

So, how am I fixing this?

Contrast

By standardizing how headers and text are managed and then increasing contrast levels through more vibrant colors, I can focus a reader’s eyes exactly where I want them. Big, bright, orange elements grab your eyes more than dull tones and light grays. Big, black elements are secondary but still eye catching. I use bright colors for links so you know immediately where to click. I use bigger text in a smaller range so that the eyes do not have to refocus as much.

Spacing / Locations

I have removed negative space in the main body because I feel it can often cause a person’s eyes to jump over just to find more information. Additionally, I have added uniform spacing between elements to quickly define columns and lines of text.

So, on to step two which is to start refining the theme; incorporating what has already been mentioned. Here I have brought the most important information straight to the top and on the first visible section. Any scrolling gives the user only secondary information. I have kept the logo clean and made a simple box for user information.

No one has to egg me on to say that I hate the main site for Xna. It goes against several rules that many web developers including myself abide by. The biggest problem with the site is the gigantic lack of contrast between any of the elements. When my eyes are search for information they are drawn to nothing but a gigantic collage of images and text that seem to follow no standard.

So as a design study I have decided to mockup the site as I would have created it. Step 1 is to copy over many of the elements into my editor (Expression Design) and change a few minor things. In the below image you can see that I have changed the background, text size and color as well as how elements are placed on the page. I have attempted to minimize the logo area because you know what the site is about. Having a large area for a logo and blank space means the user may have to scroll, and scrolling is bad. I will come back to this many times.

You will also notice that I have begun to break the mold of layout design by forcing elements outside the container area. This is ok so long as it is meaningful and done in a nice fashion. Here I have done it to add extra space for a gigantic center image. Why? I want to attract you to the biggest news: making money with Xna! Elements like how it works and downloading the software are secondary because they won’t attract users to stay. Money does!