Revision 2 as of 2008-07-11 00:26:27

Clear message

Navigation(slides) Navigation(siblings,1)

Ubuntu 8.10 Guideline Proposal: "Keyhole"

The "Keyhole" guideline proposal gets its name from one of its main design elements. The basic concept is to achieve a new look by keeping the parts of the Human theme that were effective, and build on those. A whole new look should achieved by focusing on dozens of small design refinements to totally remake the whole.

Proposed Guidelines

Anchor(Proposed Guidelines)

I. Regardless if the theme is light or dark, it should do the following:

  • Window borders should blend into the body of the window panel itself
  • Taskbar (upper panel) and window panel design should be consistent
  • Use gradient look as opposed to glassy look for widgets
  • Nautilus should use gradient coloring in the top part of the panel, from dark (bottom) to light (top). The side panel should be one plain color.
    • The type of brown used to shade the panel is up for grabs, but I suggest an ashy gray-brown.
  • Active windows should be non-transparent and fully lit. Inactive windows should appear to be in shadow (if possible) and appear more transparent (the whole window should be semi-transparent, not just the window border)
  • Window title font should not use drop shadows, they obscure some internationalized text.
    • In complex international text renderings, such as Chinese, bold fonts can also make some characters hard to read. Non-bold window titles may be superior in that regard. This may change if Droid font is used.
  • Button widgets should have gradient effects like the window panes -- from dark (bottom) to light (top)
  • Gradients should suggest a consistent light source, making windows look three dimensional and solid. Button widgets for some functions could use them.
  • Progress bars should also use a matt/non-glassy look. But gradient flow should be light at the top AND bottom, and darker in the middle.
  • "Keyhole" navigation buttons -- the theme should incorporate some variation of a "keyhole" design for the backward/forward buttons in nautilus. This is a IU innovation from Firefox, and an example of what a keyhole design looks like can be seen via the following link: http://blog.mozilla.com/faaborg/2007/11/15/the-shape-of-things-to-come/

Sample of How a "Keyhole" Might Appear


[attachment:SampleNautilus2.png View Large] :: Image by Brian Fleeger

II. Suggested Color use (light theme):

  • Use the basic color of the current (Hardy Heron) theme as a starting point.
  • Suggest an ashy-brown for the gradients.

III. Suggested Color use (dark theme)

  • Use Ubuntu Studio‚Äôs dark gray as a starting point. Focus on gradients of dark grays as opposed to the turbid colors used in Intrepid Alpha1.
  • Window and fill-in fields should be white or light gray, as in Ubuntu Studio.
    • The Intrepid Alpha1 experiment demonstrated that too dark a secondary color makes many web-pages and programs like OpenOffice unattractive and in some cases unusable.

IV. Things to Consider:

  • Brown is very risky to use as a primary panel or window color. The theme will probably be accepted by the largest number of people if brown is used only as a highlighting color for window panels. sign choices.
  • The main window panel color should be calming to a user, and be as inoffensive as possible to the largest number of people -- people will be looking at this every day for long periods.


These guidelines borrow heavily from the New Wave theme development guidelines, with modification. Though there are many differences, the New Wave team's guidelines can clarify many of the points discussed here: https://wiki.ubuntu.com/Artwork/Incoming/Intrepid/NewWave?action=AttachFile&do=get&target=graphical_guidelines.pdf


[wiki:/?action=AttachFile Attach File]



Attachment List