1. GnomeWeb Look&Feel

This page is a draft being discussed in the marketing list, mainly at the WGO Revamp: Look and Feel thread.

The wgo look&feel is designed considering GnomeWeb/ComponentSelection and GnomeWeb/PageStructure. This document together with GnomeWeb/LayoutPlanning define the themes and templates to be implemented in wgo.

1.1. Guidelines

((Deduced from the first mockup, Máirín feel free to rework this in a way that serves best to designers and to yourself. Perhaps graphical examples would be useful -- QuimGil))

1.1.1. Text

• (((We should define the fonts used in each element)))
• (((We should define alignments)))
• (((We should define styles for links)))

1.1.2. Colors

• Clearlooks colors and Tango palette - Clearlooks should be the main source of inspiration, and probably the Tango palette could define a framework as well.

• White background - The default background is white (add HEX if it's not perfect white)

1.1.3. Shapes

• Straight corners - Elements are perfect rectangles, no round corners.

• No Borders - Elements don't have an extra border.

• Cult of Snap - Elements are placed together with no separation in between.

• Dotted separation lines - Dotted lines are used to separate text blocks or graphic elements sharing the same color background.

1.2. Mock-up Pages

1.2.1. Homepage

The last mockup of the homepage available is http://mihmo.livejournal.com/33555.html . The final homepage ideally would integrate this mockup and the comments at http://mail.gnome.org/archives/gnome-web-list/2006-November/msg00051.html

The footer was almost decided apart: http://live.gnome.org/GnomeWeb/LooknFeel/FooterDesign http://live.gnome.org/GnomeWeb/ComponentSelection

In case of non-consensus let's apply the footer #1.

1.2.2. Other mockups

Official mockups maintained by MairinDuffy (feel free to add your own modifications or proposals in the "Unofficial mockups" section)

• 25 Nov http://mihmo.livejournal.com/34329.html

• 16 Nov http://mihmo.livejournal.com/33912.html (headers only)

• 9 Nov http://mihmo.livejournal.com/33555.html

• 8 Nov http://mihmo.livejournal.com/33530.html

1.2.3. Older PNGs not displayed here

• mizmo-wgo-mock-1.png
• mizmo-wgo-mock-3.png

This shows some work towards fleshing out the current (9/19) site structure wireframe mockup: *

This shows the Planet GNOME widget as a sidebar on the right: *

Source files:

• mizmo-wgo-mock-1.svg

• mizmo-wgo-mock-2.svg

• mizmo-wgo-mock-3.svg

• mizmo-wgo-mock-4.svg

1.2.4. Unofficial mockups

All ideas are welcome, specially those challenging the official mockups with improvements and alternatives.

• http://goran.fimaks.net/moin.cgi/GnomeOrgMockup

General Navigation Bar Example

• 

  • Mmm nice, but people seems to be already happy with the discrete and unobstrusive http://guadec.org general nav bar, that was widely discussed back in February or so. It needs update but I would keep it as tiny as it is and with this almost-invisible grey. Also aligned to the right. The left side with the GNOME logo and name needs refactoring... although maybe it's just to delete them and leave the wgo primary bar do the job -- QuimGil

    • Ahh, I didn't realise we was going for the same colour scheme as Guadec. I would like to employ a rollover effect for each subsite link like the Mozilla site:- http://www.mozilla.com/. -- LeeTambiah

    • Ooh I think this is a good idea. I like the GUADEC general nav bar. For some reason I am stuck on that bar being black but I will incorporate a more GUADEC.org-like general navbar in the next mockup iteration and try both grey and black out and play with that. One thing is that I think we should have a nice big foot rather than a small foot on the front page, but for subsites the small foot as on GUADEC.org would work fine I think. -- MairinDuffy (9/20)

    • Blechh! Umm, could we please get away from black backgrounds? And dark colours in general, while we're at it? -- JohnWilliams (3 Dec)

Source files

• generalNavBar.tar.gz

2. WGO Footer Design

• GnomeWeb/LooknFeel/FooterDesign

2.1. Related Documents

• GnomeWeb/DevelopmentTimeline - Overall WGO revamp planning & deadlines. Links to other userful documents.

• GnomeWeb/NewWgoStructure - Information architecture the designs will have to take into account.

• GnomeWeb/ComponentSelection - List of all components that will need to be incorporated into the design.

• GnomeWeb/PageStructure - Page structure planning - bleeds into LooknFeel a bit.

• CategoryMarketing