On Hold

As anyone that has been paying attention has guessed, my contributions are again on hold. Other work takes over, and sleep is good too. I hope other design-minded people with scraps of time continue to work on improving haiku-os.org. Haiku deserves a nice face —

ReCaptcha

Stop spam. Read books.

Net Neutrality

On a subject related to Haiku-os.org by way of the internet — please please please support Net Neutrality. Also, if you have time to support other things, consider supporting OpenID!

read more | digg story

Initial Concept

I was going to dirty it up to make it less clear — but I think everyone gets that even though Fireworks always generates clean "sketches", the concept is still rough.

I'd like to hear comments especially focused on overall layout and information volume. I'm less interested in type, color, and image this early in on. What do you think?

Ican't

The question of of icons in notification boxes came up on haiku-web the other day, and I'd thought I'd take the opportunity to address the problem the website (and the desktop) have with icon scaling. I don't mean icon sizing — making something image bigger or smaller, I mean scaling, making the design larger or smaller. Think of it like this, you wouldn't shrink a billboard to business card size and hand it out, just like you wouldn't blow up a business card and put it on along an (ugly) highway.

So, heres a look at this problem as I see it on the current homepage:

The Dev Tools and Test Images icons in Shijin are both too small for their design. Compare them with their counterparts from an unimplemented Poetica/Shijin component: the icons are a tad larger and the bug-on-folder icon was replaced with the bug alone. You don't need to whack the user on the head with "I'm a container page. I am about bugs n'such." Why not just say "I'm about bugs n'such" and ask that the user will understand when they find themselves in a container.

Usability is important, but at a certain point, you have to trust that your user isn't completely inept. You don't see packaging for "Edible Foods" or "Wearable Clothing" — we might not need "Visitable Content Container" either.

While we are on the subject of incommunicative iconography look at the non-uniform-bullet (!) for "Nightly Builds":. What is that? Why is that? If for some reason you need to use an icon to clarify a "ul li", it should not add confusion to the picture.

Mishmash

The next issue I'd like to highlight is Haiku's inconsistent treatment of type, and peculiar type selection.

The smallest type on the screen is perhaps the most unclear — the most unusual. Why a fixed-width face? I also am not keen on the body face selection, I find it drab, but that's up to personal taste. Here's another option (cursory, not overly well considered):

So, what do you think?

Update: If you like, click on the title or here to view the sample in HTML with some CSS interaction in the navigational elements.

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 …).