Today in Applied Design Tools and Interfaces class we were tasked with creating a homepage layout for a paintball website. This layout must incorporate many principles integral to web design, such as Gestalt’s Laws and Jakob Nielsen‘s Usability Engineering. Be sure to click on each image to see an expanded view- especially on the smaller images, such as the navigation image.

Phase 1: Homepage Wireframe

This is the first phase. Determining proper layout according to the information architecture is important so that the website is more than just pretty: so that it’s effective.

Phase 2: The Background

Here, I played around with colors, all the while thinking about a few buzz words: “industry,” “paint,” “sloppy,” and “fun.” The simi-transparent container in the middle is referred to as the center stage; the main area of the website where the most important information is.

Phase 3: The Navigation

This phase is where I designed the navigation bar. I felt that the navigation must play a significant part in this layout due to the fact that each page will be kept to a minimum. In other words, each page will house “just enough” information for that page, no more. In addition, the design does not accomodate endless vertical scrolling due to the intricate background. This is just another factor making the navigation that much more important.

Phase 4: The Professional Spotlight

Next, I created the Professional Spotlight. This area will highlight the professional paintballer of the week. The descriptive text is to the right. Changes which I will be making include: Adding the pro’s name under the spotlight (helping to develop hierarchy via typography),  thumbnails of the pro player to the left (lightbox effect when clicked on), and tweaking the look of the descriptive text for readability. In addition, I will be working with the ticker (for scores) below the pro spotlight to give it more of a “web 2.0″ feel.

Phase 5: The Final Comp

Alright, so it’s probably very clear that I skipped posting everything in between phase 4 and 5. To be honest, I simply ran out of time. However, simply examining the difference between the image in phase 4 and the one below should give you some strong indications on how my thought process worked. You’ll notice a few changes, namely the deletion of the best deals section. I attempted to integrate Hick’s Law and Ockham’s Razor into the design, as well as clear typographical hierarchy (assisted by the use of color), the balance of opposing points, movement, unity, patterns, emphasis, and contrast. All in all, I believe that the below composition came out nicely. I finished this piece of work 8 hours before it was due: 9am March 9th, 2010. Criticisms from the professor and my retrospective thoughts will be posted later in the day.

Phase 6: The Critique

Gus, the instructor for Applied Design Tools and Interfaces, had some very good things to point out:

• The forum section is too small
• The Member Login area is not close to the forums (which is only logical), and it is below the fold- forcing members to scroll down before they can even log in.

I wish I would have thought out the placement a little better. When I realize how much the placement of the member login area actually doesn’t make sense, I wonder what the heck I was thinking. Hopefully I won’t make such a mistake in my next composition.