Metacity

Differences between revisions 23 and 24
⇤ ← Revision 23 as of 2009-03-05 03:01:07 →
Size: 3421
Editor: c-24-11-192-142
Comment:
← Revision 24 as of 2009-03-05 23:30:59 → ⇥
Size: 3420
Editor: c-24-11-192-142
Comment:
Deletions are marked like this. Additions are marked like this.
Line 22: Line 22:
The dimensions of the Metacity control widgets are 12.5 x 12.5 pixels and the simplicity of this design adds sharpness to the detail. Although the control widgets may be perceived as buttons they are actually rings. This become more apparent in the prelight state as the ring expands and then shrinks to a dot which provides the illusion of activity when the widget is clicked. The dimensions of the Metacity control widgets are 12.5 x 12.5 pixels and the simplicity of this design adds sharpness to the detail. Although the control widgets may be perceived as buttons they are actually dots. The widget fades to provide the illusion of activity when the widget is clicked. This is similar but opposite to action of icons on the upper panel when clicked.

Slideshow ^ |< << Slide 15 of 24 >> >|
/AppearancePreferences   /BoatDesktop   /Customize   /DesktopMenu   /Evolution   /FastBootBackground   /FirefoxTotem   /GearDesktop   /Gimp   /GrassDesktop   /Gtkrc   /HighwayDesktop   /Inkscape   /Kyudo   /Metacity   /MsgBackground   /OpenOffice   /Rhythmbox   /Sudoku   /Synaptic   /TheWidgetFactory   /Tools   /TumbleWeedDesktop   /gFTP  

Concept

A key element of any GTK theme is the Metacity control widgets with many examples presented here. The Ubuntu logo is based on circles and the desire is to leverage the strengths of its design in Metacity. The default control widgets are displayed muted.

Metacity Window Controls

UbuntuMetacityMockupDot.png

Solid Design

Control Detail

The dimensions of the Metacity control widgets are 12.5 x 12.5 pixels and the simplicity of this design adds sharpness to the detail. Although the control widgets may be perceived as buttons they are actually dots. The widget fades to provide the illusion of activity when the widget is clicked. This is similar but opposite to action of icons on the upper panel when clicked.

Default Solid Control

MetacityButtonNormal.png

SVG

Close Prelight Control

Close Active Control

MetacityButtonClosePrelight.png

MetacityButtonCloseActive.png

SVG

SVG

Maximize Prelight Control

Maximize Active Control

MetacityButtonMaximizePrelight.png

MetacityButtonMaximizeActive.png

SVG

SVG

Minimize Prelight Control

Minimize Active Control

MetacityButtonMinimizePrelight.png

MetacityButtonMinimizeActive.png

SVG

SVG

Those with a sharp eye for color may notice the color of the ring of the default widget is "#808080" or neutral gray. The color of the prelight state mimic Ubuntu colors of yellow, orange, and red.

Simple, functional, Ubuntu!

Attachments

  • [get | view] (2009-02-23 02:55:48, 97.3 KB) [[attachment:GimpScreenShot.png]]
  • [get | view] (2009-02-26 02:35:40, 21.6 KB) [[attachment:Impression.tar.gz]]
  • [get | view] (2009-03-08 02:21:10, 8.4 KB) [[attachment:MetacityButtonCloseActive.png]]
  • [get | view] (2009-03-05 23:27:58, 126.1 KB) [[attachment:MetacityButtonCloseActive.svg]]
  • [get | view] (2009-03-11 00:44:00, 5.8 KB) [[attachment:MetacityButtonClosePrelight.png]]
  • [get | view] (2009-03-11 00:45:27, 191.9 KB) [[attachment:MetacityButtonClosePrelight.svg]]
  • [get | view] (2009-03-01 03:01:47, 4.5 KB) [[attachment:MetacityButtonDashed.png]]
  • [get | view] (2009-03-01 03:07:00, 123.7 KB) [[attachment:MetacityButtonDashed.svg]]
  • [get | view] (2009-03-08 02:21:38, 5.2 KB) [[attachment:MetacityButtonInsensitive.png]]
  • [get | view] (2009-03-08 02:26:24, 193.4 KB) [[attachment:MetacityButtonInsensitive.svg]]
  • [get | view] (2009-03-08 02:21:49, 7.7 KB) [[attachment:MetacityButtonMaximizeActive.png]]
  • [get | view] (2009-02-26 02:34:14, 58.3 KB) [[attachment:MetacityButtonMaximizeActive.svg]]
  • [get | view] (2009-03-08 02:21:58, 6.3 KB) [[attachment:MetacityButtonMaximizePrelight.png]]
  • [get | view] (2009-02-26 02:34:31, 58.3 KB) [[attachment:MetacityButtonMaximizePrelight.svg]]
  • [get | view] (2009-03-08 02:22:07, 7.2 KB) [[attachment:MetacityButtonMinimizeActive.png]]
  • [get | view] (2009-03-05 23:28:14, 126.4 KB) [[attachment:MetacityButtonMinimizeActive.svg]]
  • [get | view] (2009-03-08 02:22:17, 5.9 KB) [[attachment:MetacityButtonMinimizePrelight.png]]
  • [get | view] (2009-03-05 23:28:26, 192.4 KB) [[attachment:MetacityButtonMinimizePrelight.svg]]
  • [get | view] (2009-03-05 23:27:09, 4.1 KB) [[attachment:MetacityButtonNormal.png]]
  • [get | view] (2009-03-05 23:28:34, 193.9 KB) [[attachment:MetacityButtonNormal.svg]]
  • [get | view] (2009-02-27 13:57:08, 28.8 KB) [[attachment:UbuntuMetacityMockup.png]]
  • [get | view] (2009-02-21 15:26:17, 445.7 KB) [[attachment:UbuntuMetacityMockup.svg]]
  • [get | view] (2009-02-23 12:18:34, 29.3 KB) [[attachment:UbuntuMetacityMockupDark.png]]
  • [get | view] (2009-03-01 02:55:42, 27.8 KB) [[attachment:UbuntuMetacityMockupDash.png]]
  • [get | view] (2009-03-05 02:55:26, 26.5 KB) [[attachment:UbuntuMetacityMockupDot.png]]
  • [get | view] (2009-03-11 00:44:12, 27.1 KB) [[attachment:UbuntuMetacityMockupSolid.png]]
 All files | Selected Files: delete move to page

CategoryArtwork

Comments

  • Seems very nice...perhaps a bit of some very light 3D element to the buttons? -kwwii

Your comments here.

Artwork/Incoming/Jaunty/Impression/Metacity (last edited 2009-04-08 12:50:09 by 204)