Initial Sketches

On the Haiku-web mailing list, I documented some of my problems with the current theme. Today I showed the people in the studio (we're working on Fitwits, a game for life) the current Haiku theme (haiku-os.org, henceforth "Shijin") as well as Kurtis/Michael's original website to the people in our studio this afternoon. We also looked at some of the websites that I mentioned before (FYI CakePHP was called a Thanksgiving festival, prototype was dubbed sterile, and codeigniter was fine. Happy Cog was a universal favorite.)

The current site got a negative responses on color below the header, on information density, and typographic hierarchy. People seemed generally impressed with Kurtis's design for it's simplicity.

While I personally dislike the iconography on haiku-os.org quite a bit — everyone else here noticed the "Haiku is an open …" block as the biggest offender. Other comments were :

• that the site should be fixed or have a max-width becuase of improper line-length.
• inconsistent leading
• "horsie" typographic contrast.
• way to much going on.

Because everyone seemed to like the original site better than Shijin, I thought I'd start a comparison of the two, starting with their grid.

The first thing I noticed is the body padding (content margin) that the original site had. It aired out the whole page, keeping it lighter.

I'd like to talk about the overall "lightness" of the page, but for now lets stick to its grid.

I need something to call the original site becuase "original site" is who words and way to many syllables – "Serenity".

Serenity was a fixed-width site that floated on the page background. This meant that the line-length was always the same (period).

I feel that this is an important readability factor. The maximum line length Serenity was just shorter than what I see as the standard on Shijin.

Next, I drew in the primary lines. The, center, and wing areas appeared. On Shijin, I had to divide in half, then quarters becuase of the navbar.

Then, I worked out the primary areas of the grid and the top and content sections of both versions were in sight. From there, Serenity was simple, just some basic spatial areas inside the grid. There are (by my interpretation) 4-5 major spatial areas in Serenity plus the Logo and (graphically light) top-right navigation.

In Shijin, there are minimum of 9 on a screen: bulky header (which is the logo and navigation), the User/Download area (kinda two), Code Drive, Upcoming Events, bulky intro, About, Development, Community, and primary content. More or less depending on how you wish to define them.

I think this is what's causing the "Way too much comment". Coupled with the horsie type, and you have a bit of a problem (Not quite at the MyPyramid level, but …).