An Approach to the Landing Page Design

Consistency is useful for understanding family groups, but too much consistency can also be confusing because it becomes hard to differentiate between things with very different functions. Windows ran into this problem when they tried to make Internet Explorer and Windows Explorer basically the same thing UI. For example, my stacking of Chandler Project on the Landing Page was deliberate. I wanted to emphasize Chandler over Project. On the Wiki Page, I wanted to communicate Project, almost over the notion of Chandler.

Perhaps the best way to explain what I'm trying to do with the Landing Page and Wiki Page designs is that the Landing Page is like the title page of a book and the Wiki Page is like a page in the book, where the book title and book author are just small footnotes at the top of each page. In other words, I am deliberately trying to make the header treatments different so that the viewer understands instinctually that the pages serve very different functions, that they have traversed a boundary and have arrived in a different space that serves a different purpose.

Just for some context, when creating hierarchy with visual elements, my approach is to walk a tightrope, endeavoring to lead the viewer through the information space, gently nudging them along so they see and absorb all the various pieces of information I want them to see without drawing so much attention to any single element that it obliterates all the other elements in its wake. For example, the Chandler Project + Logo block is the biggest grouping of elements on the page. It is underlined. It also stands in the upper left-hand corner. However, the component pieces are not necessarily bigger than other first-order elements (e.g. .7 text or the Download / Log in arrows). To my eye, that would be overkill, the gravitational force around the Chandler Project + Logo grouping would be so great as to render the text around it irrelevant. In my mind, it's not enough to have a clear hierarchy of what to look at, it's also imperative to keep the flow of eye movement moving so that the viewer doesn't get 'stuck' on the biggest, shiniest object on the page.

I'm also really concerned about not creating barriers that seal off negative space and as a result, divide and compartmentalize content in a way that discourages viewers from exploring the page. My mental technique for doing that is to make sure that if you were to 'pour a stream of water' into the page, the water would always flow, would in fact be drawn from one area to the next. A similar analogy can be drawn to architecture and interior decorating. I don't want to a stretch a couch from wall to wall, straight across the middle of a room, blocking traffic through the room, nor do I want to line the edges of a room with furniture like bleachers around a stadium. Instead, I want to create clusters, arranging elements around concrete functions: Group conversation area, private tete-a-tete chat area, personal reading area, office nook, dining area, etc...Groupings that carve out smaller spaces within a large empty space, without blocking the flow of traffic from one space to the next.

A point of comparison: Mozilla web presence

• Here is the wiki: http://wiki.mozilla.org/MozillaWiki:Community_Portal
• Here is the (landing page) web site (.com): http://www.mozilla.com/en-US/firefox/
• Their .org site for developers which look more like the wiki: http://developer.mozilla.org/
• Bugzilla site: http://www.bugzilla.org/
• Mozilla.org http://www.mozilla.org/

To see the landing page design: NonCodeList20070131#PassTwo

-- MimiYin - 05 Mar 2007