Ubuntu_8.10_Theme_-_Art_Team

Revision 6 as of 2008-07-10 04:46:58

Clear message

Navigation(slides) Navigation(siblings,1)

Intrepid Ibex Gtk and Metacity

The art team and the community in general will use this page to display guidelines for creating the Metacity and Gtk for Intrepid Ibex.

Guidelines to come soon... Please use the comment area to suggest guidelines.

Anchor(Palette) Palette #THIS IS THE LOCATION OF YOUR PALLETE

Contributions

===Intrepid Ibex Theme Guideline Proposal -- Brian Fleeger===

These guidelines borrow heavily from the New Wave theme development guidelines, with modification.

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.
    1. Having no borders creates a clean and open feel. Just imagine the look of an "infinity pool" compared to a regular in-ground swimming pool.
  • Taskbar (upper panel) and window panel design should be consistent
    1. No dark bars with lighter windows or vice versa -- color and gradation should be uniform between taskbar window panels
  • Use gradient look as opposed to glassy look for widgets
  • 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)
  • The active window may also use a strip of color across the top to distinguish it
  • Window title font should not use shadow drops, though bold or not bold is up for debate.
    1. In complex international text renderings, such as Chinese, bold fonts can make some characters VERY hard to read. Non-bold window titles may be superior in that regard. This may change if Droid font is used.
  • 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.
    1. The type of brown used to shade the panel is up for grabs, but I suggest an ashy gray-brown.
  • To highlight the contents of a folder (presumably a white or light gray) from the rest of the nautilus panel, a thin white line should be used + a slight shadow inside the window.
  • Buttons should have gradient effects like the window panes -- from dark (bottom) to light (top)
  • 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.
    1. This makes progress bars graphically unique.
  • The theme should incorporate some variation of a "keyhole" design for the backward/forward buttons in nautilus. This should eventually be used system-wide. For an example of what a keyhole design looks like, click the following link: http://blog.mozilla.com/faaborg/2007/11/15/the-shape-of-things-to-come/

Sample of What A "Light" Theme Might Look Like

attachment:SampleNautilus_Small.png

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

II. Areas needing urgent attention:

  • Design of the Minmize, Maximize, and Close buttons
  • Design of the Keyhole-style backwards and forward navigation control
  • Design of control button and tab widgets
  • Design of pull bars

III. Things to avoid:

  • Use brown only as a highlighting color for window panels (not as the main color)
    1. Too much brown will almost certainly lead to more off-color remarks by the press and general critics. This is bad press which is easily avoidable if only we don’t bring it on ourselves with poor design choices.
  • Do not use "window halo" effects on windows. They serve no purpose other than to make a window appear more bulky and clunky. Window panels should appear light and clean, and halos make them look like they are wearing thick winter jackets.
  • No extreme or jarring color combinations or dominating colors. The 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.
    1. A computer program *intended* to appeal to 100% of the population is not the place to experiment with avant-garde art styles. Some degree of conservativism is necessary.

IV. Color use (light theme):

  • Use the basic color of the current (Hardy Heron) theme as a starting point.
    1. This means, for the lighter theme, that the top panel and the window panels will all have an off-white base color, with ashy-brown gradients.

V. 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.
    1. The Intrepid Alpha1 experiment demonstrated that too dark a secondary color makes many webpages and programs like OpenOffice unattractive.

VI. User Interface Suggestions (Optional, if there is time)

  • Object launcher panel -- to replace the current 3 menu system
    1. Could even use a version of the Netbook Remix launcher ii. "favorites button" should be integrated with the tabbed favorites launcher described below

      iii. For another example (based on Mayanna), see: https://wiki.ubuntu.com/Artwork/Incoming/Long_Term_Vision

  • Tabbed launcher application ("Tabbed Favorites Bar")
    1. This would replace the panel launcher icons in the current (Hardy) setup

      ii. A full description of this launcher (I called it a "tabbed favorites bar") can be found here: https://wiki.ubuntu.com/Artwork/Incoming/Long_Term_Vision iii. Even Windows 7 is supposed to get a proper launcher, at least this one keeps its objects categorized

  • Unified controls for all media players
    1. Currently, the media control interface is completely different depending if a user is in Totem, Audio-Record, Audacity, or Rhythmbox. This should be remedied by cooperating with upstream developers to develop one standard and distribute that to all other GNOME media app developers.
  • Global Menu Bar (code available)
    1. See http://code.google.com/p/gnome2-globalmenu/ ii. Project listed for 2008 Google Summer of Code, for possible inclusion in default GNOME. In dev for nearly 3 years.

Include(Artwork/Incoming/SubmissionGuidelines/Guidelines)

Comments

Guideline List Concepts (1)

General Mindset

  • Visually, Ubuntu themes must be dynamic, stand-out (bold), internally consistent, noninvasive, and provide proper visual feedback.
  • Technologically, Themes must be capable of running on machines of various capability while pushing the envelope, be fast on slow machines, expandable for fast machines, and be bug-free.

Components

  • There are 3 (4 potentially) main theme technologies, and 2 themes required for Ubuntu Intrepid.
    • Emerald
    • Metacity
    • GTK
    • (potentially) KDE
    • Light Theme (users)
    • Dark Theme (developers)
  • All of the above listed should visually inter operate. The GTK should blend smoothly with Emerald and Metacity themes, Dark theme components (such as the frame) should still blend with the light components (such as the widgets). This could be accomplished by the following:
    • use the same colour pallets, but in different proportions. Ie brown, beige and orange should be the same hue, saturation, etc.
    • Do not use different textures, gradients, etc on the different shades. For example, instead of giving all dark elements gradients and all light elements gloss, use criteria other than color.

Users and Styles

  • Not everyone will like the slice of cake we carve for the Ubuntu InIx theme. That in mind, the majority of users can still be catered to. When building a theme or concept, the following are key to keep in mind:

    • Style takes a back-seat to usability. If there are textures that hamper readability, elements with poor visibility, or even just colours with distracting contrast, the users needs must be met.
    • Keep the theme professional. If the theme is all neon-green pastels, features dragon skulls lining the frame, or has a crude wallpaper - it will not present well.
    • Avoid being a carbon-copy. Yes, Apple Mac OSX has a beautiful interface, sure Microsoft Windows Vista has some nice glassy effects - we SHOULD be inspired by every interface for their merits; but if we copy the themes, then Ubuntu loses itself.
    • Avoid being a carbon copy, of itself. Ubuntu is a Linux distribution, and it looks like one. The technologies are there to create something new and unique for a theme, Hardy Heron should be the last release that looks like other Linux distributions.

A Complete Overhaul

  • Intrepid Ibex needs a new look, and a complete theme overhaul is planned. This theme could stick with Ubuntu for years; much like Mac OSX discovered an iconic design when it was overhauled - we should too.
    • Have a hook. The same look with a colour change is not a hook. It's turning a square into a diamond - it's the same thing. Your new idea should not be another themes old idea. Kith is a theme with an outer-halo, Espresso has a unified panel, and more. Seek out inspiration outside of operating systems.
    • Treat the theme like the existing themes cousin. The theme might be a completely different person, but the family gene pool is in there. Ubuntu has an identity, keep it while mixing things up.

List by Ken Vermette, not official

Comments / Feedback

Attachment List

AttachList


CategoryArtwork