- Geoff Shang <geoff@QuiteLikely.com>:
On Thu, 24 Jun 2010, Claudia Fleiner wrote:
Here I will present you our idea of a mega drop-down navigation panel for the new Mailman user interface: http://wiki.list.org/display/DEV/Web+UI+Mockups
Can anyone explain this a bit for those of us who can't see this image? Or better still, point us at a coded example?
The overall style is light. Lot's of whitespace creates room to distinguish object from each other.
The compositional focus is on the content area. Logo and navigation stand back to let users concentrate on the task they need to accomplish.
The page is white. The navigation color scheme used is dark blue for typo and light blue as background color. There's a broad border around the navigation pane. It is semi-transparent.
When opened, i.e. when level 2 and 3 are visible, the navigation layers over the content drawing users attention to the navigation only.
The navigation is horizontal to make way for applications that take place beneath; applications usually require more place than text/images pages.
You can see navigation level 1.
The navigation differs from traditional navigations in a few ways:
- When you hover the mouse or focus a menu entry using keyboard navigation you get to see both, level 2 and 3, at once. A large rectangle (wider than higher) creates the canvas for for both levels.
- A topic specific icon prepends evey level 2 item.
- Level 2 items are aligned to the left and in bold text.
- Level 3 items, if there are any, follow right hand to their correspondent level 2 entry on the same line. They are displayed in regular font weight.
- If there were so many level 3 items that they needed to wrap to the next line, they would indent starting at the same left margin where the first level 3 item started.
-- state of mind Digitale Kommunikation
Franziskanerstraße 15 Telefon +49 89 3090 4664 81669 München Telefax +49 89 3090 4666
Amtsgericht München Partnerschaftsregister PR 563