[gnome-devel-docs/gnome3-hig] port over content from wiki
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs/gnome3-hig] port over content from wiki
- Date: Tue, 24 Jan 2012 17:40:28 +0000 (UTC)
commit a0ae575dd77a9e09d9ac134ae23a905f4dcff2b2
Author: Jakub Steiner <jimmac gmail com>
Date: Tue Jan 24 18:17:32 2012 +0100
port over content from wiki
- tweak up the stylesheet. tables, lists
hig3/site/basics-appmenu.html | 65 +++-
hig3/site/basics-notifications.html | 269 ++++++++++++
hig3/site/basics-primary-toolbar.html | 318 ++++++++++++++
hig3/site/basics-primary-windows.html | 320 ++++++++++++++
hig3/site/color.html | 270 ++++++++++++
hig3/site/dark-theme.html | 264 ++++++++++++
.../{principles.html => design_principles.html} | 151 ++++----
hig3/site/design_strategies.html | 353 +++++++++++++++
hig3/site/images/figures/app-menu.png | Bin 0 -> 101288 bytes
.../images/figures/primary-toolbar-example.png | Bin 0 -> 11737 bytes
hig3/site/index.html | 13 +-
hig3/site/keyboard_input.html | 453 ++++++++++++++++++++
hig3/site/pointer_and_touch_input.html | 270 ++++++++++++
hig3/site/stylesheets/hig.css | 371 ++++++++++++-----
hig3/site/system_shell.html | 271 ++++++++++++
hig3/site/visual_layout.html | 341 +++++++++++++++
hig3/site/writing_style.html | 433 +++++++++++++++++++
hig3/src/pages/_menu.haml | 2 +-
hig3/src/pages/basics-appmenu.haml | 48 ++
hig3/src/pages/index.haml | 7 +-
hig3/src/pages/principles.haml | 152 -------
hig3/src/stylesheets/hig.scss | 61 +++-
22 files changed, 4092 insertions(+), 340 deletions(-)
---
diff --git a/hig3/site/basics-appmenu.html b/hig3/site/basics-appmenu.html
index 35f3ecf..e1c2ff4 100644
--- a/hig3/site/basics-appmenu.html
+++ b/hig3/site/basics-appmenu.html
@@ -26,7 +26,7 @@
Design Guidelines
</h3>
<ul>
- <li class="first"><a href="principles.html">Principles</a></li>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
<li><a href="design_strategies.html">Design Strategies</a></li>
<li><a href="system_shell.html">System Shell</a></li>
<li><a href="visual_layout.html">Visual Layout</a></li>
@@ -131,7 +131,63 @@
</div>
</aside>
<article class="main">
- <h1>Application Menu</h1>
+ <h1>Application Menu</h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ <div class="columns">
+ <p>
+ A menu that is located in the <span class="gnome">GNOME 3</span> top panel, and which is displayed as the application icon and name. Application menus provide access to actions and options that are relevant to the application as a whole.
+ </p>
+ <img alt="App menu" src="images/figures/app-menu.png">
+ </div>
+ <h2>
+ When to use
+ </h2>
+ <p>
+ Any <span class="gnome">GNOME 3</span> application that features windows should incorporate an application menu.
+ </p>
+ <h2Guidance></h2Guidance>
+ <p>
+ The application menu is the primary way to provide access to application-wide actions and configuration options. A focused and well-designed application will typically not need any menus other than the application menu.
+ </p>
+ <ul>
+ <li>
+ When determining what to include in your application menu, follow the standard design guidance for <a href="component-menu.html">menus</a> .
+ </li>
+ <li>
+ You can use the full range of menu features in an application menu, including check boxes, radio buttons and submenus.
+ </li>
+ <li>
+ Include those actions and options that relate to the application as a whole, including application-wide configuration options and actions that are not specific to a particular window or piece of content. For multi-window applications, this means that menu items should not affect individual windows.
+ </li>
+ <li>
+ Be consistent with other <span class="gnome">GNOME 3</span> applications when selecting which items to include in your application menu. Items that should be placed in the application menu if they are available include:
+ <ul>
+ <li>
+ New Window
+ </li> <li>
+ Fullscreen
+ </li>
+ <li> <a href="other_preferences.html">Preferences</a>
+ </li> <li>
+ Help
+ </li> <li>
+ About
+ </li>
+ </ul>
+ </li>
+ <li>
+ New Window should always be placed at the top of the menu.
+ </li>
+ <li>
+ Preferences, Help and About items should always be grouped together at the bottom.
+ </li>
+ <li>
+ Every application menu should include an About entry.
+ </li>
+ </ul>
</article>
</div>
<div id="footerpositioner">
@@ -144,7 +200,7 @@
Design Guidelines
</h3>
<ul>
- <li class="first"><a href="principles.html">Principles</a></li>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
<li><a href="design_strategies.html">Design Strategies</a></li>
<li><a href="system_shell.html">System Shell</a></li>
<li><a href="visual_layout.html">Visual Layout</a></li>
@@ -254,8 +310,7 @@
Free to share and remix:
<a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
Optimised for standards. Hosted by
- <a href="http://canonical.com";>Canonical</a>
- Powered by WordPress.
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
</p>
</div>
</div>
diff --git a/hig3/site/basics-notifications.html b/hig3/site/basics-notifications.html
new file mode 100644
index 0000000..bd480ad
--- /dev/null
+++ b/hig3/site/basics-notifications.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li class="current"><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1> Notifications
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a> </div>
+ FIXME
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li class="current"><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/basics-primary-toolbar.html b/hig3/site/basics-primary-toolbar.html
new file mode 100644
index 0000000..4c402bf
--- /dev/null
+++ b/hig3/site/basics-primary-toolbar.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li class="current"><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>Primary Toolbars</h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ <p>
+ A horizontal toolbar that is located at the top of a window, beneath its titlebar (in windowed mode).
+ </p>
+ <img alt="Primary toolbar example" src="images/figures/primary-toolbar-example.png">
+ <h2>
+ When to use
+ </h2>
+ <p>
+ A primary toolbar should be used within any
+ <a href="basics-primary-windows.html">primary window</a> .
+ </p> <h2>
+ Guidance
+ </h2>
+ <ul>
+ <li>
+ The primary toolbar should contain the dominant controls in the window - the controls contained within the toolbar should be for key operations that affect the content below.
+ </li>
+ <li>
+ Keep the toolbar contents to a minimum - work to ensure that a small amount of essential functionality is included
+ </li>
+ <li>
+ Arrange the toolbar contents according to the three alignment points described in [[Design/HIG/VisualLayout|the Visual Layout guidelines]] - left, centre and right alignment
+ </li>
+ <li>
+ The most dominant controls should be left aligned
+ </li>
+ <li>
+ Controls relating to filtering should be centre aligned
+ </li>
+ <li>
+ Follow the lead of the core <span class="gnome">GNOME 3</span> applications and repeat the conventions that they establish. Place common toolbar elements, such as [[Design/HIG/CheckMarkButtons|Check Mark Buttons]], [[Design/HIG/FilterButtons|Filter Buttons]] and [[Design/HIG/BackButtons|Back Buttons]] in consistent positions.
+ </li>
+ <li>
+ The content of a primary toolbar can update based on the context. When using multiple [[Design/HIG/Views|Views]], you should add and remove controls depending on which view is being displayed.
+ </li>
+ </ul>
+ <h2>
+ Maximizing Windows
+ </h2>
+ <p>
+ If the window containing the toolbar is a maximizing window (see [[Design/HIG/PrimaryWindows|Primary Windows]]), the Primary Toolbar needs to have certain features:
+ </p>
+ <ul>
+ <li>
+ The content name/title should be displayed, so that the window's titlebar can be dispensed with. This can either be done either by placing a text label in the toolbar, or by including a control which indicates the content that is displayed below, such as filter buttons. The latter approach can be seen in the core Music application.
+ </li>
+ <li>
+ Dragging the toolbar down while the window is maximized should unmaximize it
+ </li>
+ </ul>
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li class="current"><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/basics-primary-windows.html b/hig3/site/basics-primary-windows.html
new file mode 100644
index 0000000..4a69b6a
--- /dev/null
+++ b/hig3/site/basics-primary-windows.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li class="current"><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>
+ Primary Windows
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ <p>
+ Primary windows are the principal container for application interfaces. If its primary window(s) is closed any supplementary windows, such as [[Design/HIG/UtilityWindows|Utility Windows]] and [[Design/HIG/Dialogs|Dialogs]], will also close. Closing an application's primary windows will typically stop that application from functioning altogether.
+ </p>
+ <p>
+ The top of a primary window is headed by a titlebar that contains a centered window title and a close button in the right-hand corner.
+ </p>
+ <p>
+ Primary windows can contain a wide variety of content and control elements. They can also contain multiple [[Design/HIG/Views|views]] that can be navigated between.
+ </p>
+ <h2>
+ When to Use
+ </h2>
+ <p>
+ Primary windows are a standard part of <span class="gnome">GNOME 3</span> applications, and most applications will utilise one or more of them. The exception to this is applications that are always presented in full screen mode, such as games.
+ </p> <h2>
+ Guidance
+ </h2>
+ <p>
+ Give the window a short, informative title. Since window titles can be truncated, ensure that the most important part of the title is at the beginning.
+ </p>
+ <p>
+ There are two types of primary windows:
+ </p>
+ <ol>
+ <li>
+ Maximizing - these are the standard variety of primary window, and are used by application that allow the browsing, viewing or editing of content.
+ <ul>
+ <li>
+ The window is maximized by default and loses its titlebar when maximized
+ </li>
+ <li>
+ The window title should be a short description of the window's content, and should not include the application name
+ </li>
+ <li>
+ Maximizing primary windows will typically (though not always) contain a [[Design/HIG/PrimaryToolbar|Primary Toolbar]]. Primary windows can also present multiple [[Design/HIG/Views|views]] or be split according to the [[Design/Hig/ListPane|List Pane]] design pattern. See the other design patterns and existing applications for examples of how your primary windows can be structured.
+ </li>
+ </ul>
+ </li>
+ <li>
+ Non-maximizing - these are relatively uncommon and are best suited to small utility applications that might want to be used in conjunction with other primary windows.
+ <ul>
+ <li>
+ The window is not maximized by default and should not lose its titlebar when maximized
+ </li>
+ <li>
+ The window title should be the application name
+ </li>
+ </ul>
+ </li>
+ </ol>
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li class="current"><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/color.html b/hig3/site/color.html
new file mode 100644
index 0000000..259311e
--- /dev/null
+++ b/hig3/site/color.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li class="current"><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1> Color
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ FIXME: palette, dark/light themes, background colors for content
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li class="current"><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/dark-theme.html b/hig3/site/dark-theme.html
new file mode 100644
index 0000000..736ee87
--- /dev/null
+++ b/hig3/site/dark-theme.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>Dark Application Theme</h1> FIXME
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/principles.html b/hig3/site/design_principles.html
similarity index 75%
rename from hig3/site/principles.html
rename to hig3/site/design_principles.html
index 2164523..d3b5771 100644
--- a/hig3/site/principles.html
+++ b/hig3/site/design_principles.html
@@ -26,7 +26,7 @@
Design Guidelines
</h3>
<ul>
- <li class="first current"><a href="principles.html">Principles</a></li>
+ <li class="first current"><a href="design_principles.html">Principles</a></li>
<li><a href="design_strategies.html">Design Strategies</a></li>
<li><a href="system_shell.html">System Shell</a></li>
<li><a href="visual_layout.html">Visual Layout</a></li>
@@ -132,130 +132,128 @@
</aside>
<article class="main">
<h1>
- GNOME 3 Design Principles
+ <span class="gnome">GNOME 3</span> Design Principles
</h1>
<div class="note">
- This is draft content for the next version of GNOME Design.
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
</div>
<p>
- These design principles describe the high-level aims and strategies that should be followed when designing a GNOME 3 application.
+ These design principles describe the high-level aims and strategies that should be followed when designing a <span class="gnome">GNOME 3</span> application.
</p>
<h2>
- Give each window or view a clear focus
+ Give each window or view a clear focus
</h2>
<p>
- Every extra piece of information or interface control competes with what is truly relevant to the user and distracts them from important information, so don't clutter your interface and don't overload it with buttons, icons, or irrelevant information.
+ Every extra piece of information or interface control competes with what is truly relevant to the user and distracts them from important information, so don't clutter your interface and don't overload it with buttons, icons, or irrelevant information.
</p>
<p>
- Break down your application into different activities and provide a different, dedicated view for each one. There might be a browsing view and a reading view, for example. Dividing your application in this way will make it easy and satisfying to use.
+ Break down your application into different activities and provide a different, dedicated view for each one. There might be a browsing view and a reading view, for example. Dividing your application in this way will make it easy and satisfying to use.
</p>
- If a control or information is not essential for a view, do not include it.
+ If a control or information is not essential for a view, do not include it.
<h2>
- Require as little user input as possible
+ Require as little user input as possible
</h2>
<p>
- An application that is laborious to use can become the source of irritation, so strive to make your software work for your users, not the other way around.
+ An application that is laborious to use can become the source of irritation, so strive to make your software work for your users, not the other way around.
</p>
<p>
- Reduce the number of button presses and other forms of input that your application requires, and avoid mandatory configuration steps if you can. Make your application be as automatic as possible; manual 'management' functionality should not be necessary for the vast majority of applications.
+ Reduce the number of button presses and other forms of input that your application requires, and avoid mandatory configuration steps if you can. Make your application be as automatic as possible; manual 'management' functionality should not be necessary for the vast majority of applications.
</p>
<h2>
- Prioritise and elevate content
+ Prioritise and elevate content
</h2>
- <div class="columns">
- <img alt="Test image" class="rimage" src="images/test-image.png">
- <p>
- Content can take many forms, including text, video, images and sound. People care about content and it is what they are interested in, so take care to present content in the best possible way, so that it can be experienced and enjoyed with ease.
- </p>
- <p>
- Ensure that content takes center stage in your application by positioning it prominently and by not distracting attention from it with superfluous interface elements.
- </p>
- <p>
- It is easy to overload a view with too much content, so be selective about how much you present at any one time. Resist the temptation to include information just because you have access to it (this is particularly important when presenting text and metadata): instead, think about what is useful and important to users.
- </p>
- <img alt="Test image" class="rimage" src="images/test-image.png">
- <p>
- You might want to provide a dedicated view for displaying or working with individual items of content.
- </p>
- <p>
- Finally, ensure that you present visual content in order to make it look as good as possible. Follow the guidance on color and layout, and consider using the [[Design/HIG/DarkTheme|dark application theme]].
- </p>
- </div>
+ <p>
+ Content can take many forms, including text, video, images and sound. People care about content and it is what they are interested in, so take care to present content in the best possible way, so that it can be experienced and enjoyed with ease.
+ </p>
+ <p>
+ Ensure that content takes center stage in your application by positioning it prominently and by not distracting attention from it with superfluous interface elements.
+ </p>
+ <p>
+ It is easy to overload a view with too much content, so be selective about how much you present at any one time. Resist the temptation to include information just because you have access to it (this is particularly important when presenting text and metadata): instead, think about what is useful and important to users.
+ </p>
+ <p>
+ You might want to provide a dedicated view for displaying or working with individual items of content.
+ </p>
+ <p>
+ Finally, ensure that you present visual content in order to make it look as good as possible. Follow the guidance on color and layout, and consider using the
+ <a href="dark-theme.html">dark application theme</a> .
+ </p>
<h2>
- Donât interrupt the user
+ Donât interrupt the user
</h2>
- Nobody likes being interrupted, particularly if the interruption demands something from them. A key principal of GNOME 3 is to avoid interrupting users when they are focused on a task.
- Remember that the job of your application is to work for the people that use it. It should stay out of the way when it is not required but be on hand when needed.
- Use system notifications with restraint and make effective use of the different types of GNOME 3 notifications. You should also avoid confirmation dialogs where possible. These break someone's flow and can become a source of irritation. Instead, offer the opportunity to [[Design/HIG/Undo|undo]] destructive actions.
+ Nobody likes being interrupted, particularly if the interruption demands something from them. A key principal of <span class="gnome">GNOME 3</span> is to avoid interrupting users when they are focused on a task.
+ Remember that the job of your application is to work for the people that use it. It should stay out of the way when it is not required but be on hand when needed.
+ Use system notifications with restraint and make effective use of the different types of <span class="gnome">GNOME 3</span> notifications. You should also avoid confirmation dialogs where possible. These break someone's flow and can become a source of irritation. Instead, offer the opportunity to [[Design/HIG/Undo|undo]] destructive actions.
<h2>
- Go beyond the local
+ Go beyond the local
</h2>
- People's content is increasingly located online, as are many of the services that are important to them. Think about how you can enable them to connect with these services and content through your application.
- This enables them to access the same things across a range of devices, and it facilitates sharing and collaboration. When designing your application, think beyond the local from the very beginning and consider incorporating online services and content. This will enable you to provide truely social experiences.
- If your application uses online facilities, you may be able to take advantage of GNOME Online Accounts.
+ People's content is increasingly located online, as are many of the services that are important to them. Think about how you can enable them to connect with these services and content through your application.
+ This enables them to access the same things across a range of devices, and it facilitates sharing and collaboration. When designing your application, think beyond the local from the very beginning and consider incorporating online services and content. This will enable you to provide truely social experiences.
+ If your application uses online facilities, you may be able to take advantage of <span class="gnome">GNOME</span> Online Accounts.
<h2>
- Reduce the presence of windows
+ Reduce the presence of windows
</h2>
- Windows produce a number of management tasks that create work for people wanting to use your application. Reducing the presence of windows that need managing means that applications involve less work, make the full use of the screen space that is available to them, and that provide a seamless experience.
- Your application's [[Design/HIG/PrimaryWindows|primary windows]] should typically be maximized by default and their title bars hidden. Multiple views can be used to replace the need for several windows.
+ Windows produce a number of management tasks that create work for people wanting to use your application. Reducing the presence of windows that need managing means that applications involve less work, make the full use of the screen space that is available to them, and that provide a seamless experience.
+ Your application's [[Design/HIG/PrimaryWindows|primary windows]] should typically be maximized by default and their title bars hidden. Multiple views can be used to replace the need for several windows.
<h2>
- Create a clear hierarchy
+ Create a clear hierarchy
</h2>
- People âreadâ an interface from top to bottom. Within each view or window, you should order your interface elements according to this movement. Place interface elements according to when they should be encountered, so that elements that need to be read first are placed above other elements. Placing headings above the content that they describe is one obvious example of this.
- Interface elements should also be positioned according to their dominance in the view or window. Controls should be placed above and to the left of other controls or content that they have an affect on: filter buttons and search boxes should be found above the content that they control, for example. Placing elements in this order makes their importance and function clear to people using your application.
+ People âreadâ an interface from top to bottom. Within each view or window, you should order your interface elements according to this movement. Place interface elements according to when they should be encountered, so that elements that need to be read first are placed above other elements. Placing headings above the content that they describe is one obvious example of this.
+ Interface elements should also be positioned according to their dominance in the view or window. Controls should be placed above and to the left of other controls or content that they have an affect on: filter buttons and search boxes should be found above the content that they control, for example. Placing elements in this order makes their importance and function clear to people using your application.
<h2>
- Donât make people burrow too deep
+ Donât make people burrow too deep
</h2>
- Following a path through successive layers of interfaces can be confusing. Avoid locating functionality within deeply nested navigation points, such as multiple windows or views, by keeping navigation structures shallow.
- Always make it easy for users to find their way back to where they started. You can do this by using back buttons consistently when providing multiple views. Home buttons, such as those found within the System Settings panel and Web application can also be used.
+ Following a path through successive layers of interfaces can be confusing. Avoid locating functionality within deeply nested navigation points, such as multiple windows or views, by keeping navigation structures shallow.
+ Always make it easy for users to find their way back to where they started. You can do this by using back buttons consistently when providing multiple views. Home buttons, such as those found within the System Settings panel and Web application can also be used.
<h2>
- Facilitate sociability
+ Facilitate sociability
</h2>
- Functionality that allows people to share content and communicate with others is highly attractive, and is something that is expected from a high quality piece of software.
- If your application handles content, consider adding sharing and sending actions so that people can pass it on it to their friends, family and colleagues. Since these actions are important, you might want to make them prominent in your user interface. The core GNOME 3 applications utilise design patterns that can be used for this purpose.
+ Functionality that allows people to share content and communicate with others is highly attractive, and is something that is expected from a high quality piece of software.
+ If your application handles content, consider adding sharing and sending actions so that people can pass it on it to their friends, family and colleagues. Since these actions are important, you might want to make them prominent in your user interface. The core <span class="gnome">GNOME 3</span> applications utilise design patterns that can be used for this purpose.
<h2>
- Make it beautiful
+ Make it beautiful
</h2>
- Appearances matter - beautiful things bring joy and happiness, and people will enjoy using your application more if it looks good.
- Generally, an application that is easy to use and understand will also look good, and many of the other design guidelines will help you to produce a beautiful design. However, take the time to ensure that the controls and information you present create a harmoneous and balanced appearance.
- Reproduce the standard GNOME 3 layouts and color schemes. Ensure that you use the default GNOME icon sets and follow the guidelines regarding icon usage. If you do need additional visual assets, make sure that they are high quality and consistent with GNOMEâs guidelines.
+ Appearances matter - beautiful things bring joy and happiness, and people will enjoy using your application more if it looks good.
+ Generally, an application that is easy to use and understand will also look good, and many of the other design guidelines will help you to produce a beautiful design. However, take the time to ensure that the controls and information you present create a harmoneous and balanced appearance.
+ Reproduce the standard <span class="gnome">GNOME 3</span> layouts and color schemes. Ensure that you use the default <span class="gnome">GNOME</span> icon sets and follow the guidelines regarding icon usage. If you do need additional visual assets, make sure that they are high quality and consistent with <span class="gnome">GNOME</span>âs guidelines.
<h2>
- Provide quick and effective search
+ Provide quick and effective search
</h2>
- Search is an important design pattern in GNOME 3. People should be able to expect to be able to use search whereever it might be useful to them and for search to quickly provide the results they are looking for.
- Applications that present large amounts of content, including any long list, should provide the ability to search. Make search as fast and immediate as possible, and utilise the standard search design patterns for consistency.
+ Search is an important design pattern in <span class="gnome">GNOME 3</span>. People should be able to expect to be able to use search whereever it might be useful to them and for search to quickly provide the results they are looking for.
+ Applications that present large amounts of content, including any long list, should provide the ability to search. Make search as fast and immediate as possible, and utilise the standard search design patterns for consistency.
<h2>
- Use configuration options sparingly
+ Use configuration options sparingly
</h2>
- If you give your application a clear focus and design it around that focus, you will be able to cater to the needs of the vast majority of potential users without the need for multiple configuration options. Minimising the presence of settings in your application will make it easier to use. It will also make it easier for you to focus on providing the best quality core functionality. Remember that most people will never use settings, so it is important that your application works for them without the need for configuration.
+ If you give your application a clear focus and design it around that focus, you will be able to cater to the needs of the vast majority of potential users without the need for multiple configuration options. Minimising the presence of settings in your application will make it easier to use. It will also make it easier for you to focus on providing the best quality core functionality. Remember that most people will never use settings, so it is important that your application works for them without the need for configuration.
<h2>
- Use language that is familiar to your users
+ Use language that is familiar to your users
</h2>
- Always use words, phrases, and concepts that are familiar to the people who will be using your application, rather than terms from the underlying system. Use terms that relate to the tasks your application supports. For example, in medicine, the paper folder that contains all information about a specific patient is called a "chart." Hence, a medical application might refer to a patient record that contains the same information as a paper chart as a "patient chart" rather than as a "patient database record."
+ Always use words, phrases, and concepts that are familiar to the people who will be using your application, rather than terms from the underlying system. Use terms that relate to the tasks your application supports. For example, in medicine, the paper folder that contains all information about a specific patient is called a "chart." Hence, a medical application might refer to a patient record that contains the same information as a paper chart as a "patient chart" rather than as a "patient database record."
<h2>
- Give your application an instructive name and an attractive icon
+ Give your application an instructive name and an attractive icon
</h2>
- Your applicationâs name and icon are two of the most expressive things about it, so design them in order to communicate its function and identity.
- Do not pick an application name that users will not associate with its purpose, so avoid obscure cultural references, in jokes and acronyms. Instead, make sure that people can quickly make the connection between your applicationâs name and what it does. Short, concise names are easier to remember and will look better in the interfaces where it is present.
- Also ensure that you provide a recognisable, high-resolution application icon. This will be one of the main ways that people will recognise your application when using it in GNOME 3.
+ Your applicationâs name and icon are two of the most expressive things about it, so design them in order to communicate its function and identity.
+ Do not pick an application name that users will not associate with its purpose, so avoid obscure cultural references, in jokes and acronyms. Instead, make sure that people can quickly make the connection between your applicationâs name and what it does. Short, concise names are easier to remember and will look better in the interfaces where it is present.
+ Also ensure that you provide a recognisable, high-resolution application icon. This will be one of the main ways that people will recognise your application when using it in <span class="gnome">GNOME</span> 3.
<h2>
- Donât expose users to the filesystem
+ Donât expose users to the filesystem
</h2>
- Storing and retrieving content using the filesystem provides a poor user experience. It is hard work, difficult to use and is error prone. It cannot be easily tailored to the different use cases and scenarios encountered by users, and it does not work well with online integration.
- Avoid letting the filesystem have an obvious presence in the design of your application. Instead, make it quick and easy for people to access the content they are interested in by using the standard GNOME 3 design patterns and by leveraging the built in GNOME 3 content services. These take the work out of finding content and will allow you to integrate with relevant online services. The GNOME 3 core applications provide examples that you can follow.
+ Storing and retrieving content using the filesystem provides a poor user experience. It is hard work, difficult to use and is error prone. It cannot be easily tailored to the different use cases and scenarios encountered by users, and it does not work well with online integration.
+ Avoid letting the filesystem have an obvious presence in the design of your application. Instead, make it quick and easy for people to access the content they are interested in by using the standard <span class="gnome">GNOME 3</span> design patterns and by leveraging the built in <span class="gnome">GNOME 3</span> content services. These take the work out of finding content and will allow you to integrate with relevant online services. The <span class="gnome">GNOME 3</span> core applications provide examples that you can follow.
<h2>
- Accommodate different types of devices
+ Accommodate different types of devices
</h2>
- GNOME 3 is targetted at a range devices. These vary in terms of screen size and orientation and the ways in which people interact with them. Following the GNOME 3 application design patterns will allow you to produce an application that copes with these variations. Nevertheless, it is important that you evaluate your application design against requirements. In particular:
+ <span class="gnome">GNOME 3</span> is targetted at a range devices. These vary in terms of screen size and orientation and the ways in which people interact with them. Following the <span class="gnome">GNOME 3</span> application design patterns will allow you to produce an application that copes with these variations. Nevertheless, it is important that you evaluate your application design against requirements. In particular:
<ul>
<li>
- Ensure that your application is effective on screens as small as 1024x600.
+ Ensure that your application is effective on screens as small as 1024x600.
</li>
<li>
- Design for changes in screen rotation, so your application works well in both portrait and landscape views.
+ Design for changes in screen rotation, so your application works well in both portrait and landscape views.
</li>
<li>
- Consider both touch and pointer-based input.
+ Consider both touch and pointer-based input.
</li>
</ul>
</article>
@@ -270,7 +268,7 @@
Design Guidelines
</h3>
<ul>
- <li class="first current"><a href="principles.html">Principles</a></li>
+ <li class="first current"><a href="design_principles.html">Principles</a></li>
<li><a href="design_strategies.html">Design Strategies</a></li>
<li><a href="system_shell.html">System Shell</a></li>
<li><a href="visual_layout.html">Visual Layout</a></li>
@@ -380,8 +378,7 @@
Free to share and remix:
<a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
Optimised for standards. Hosted by
- <a href="http://canonical.com";>Canonical</a>
- Powered by WordPress.
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
</p>
</div>
</div>
diff --git a/hig3/site/design_strategies.html b/hig3/site/design_strategies.html
new file mode 100644
index 0000000..59fad3c
--- /dev/null
+++ b/hig3/site/design_strategies.html
@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li class="current"><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>
+ Application Design Strategies
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ <p>
+ These application design strategies provide some introductary advice on how to approach the process of designing a <span class="gnome">GNOME 3</span> application. It is not intended to be a complete or thorough guide to UX design, and should not be relied on as the sole source of guidance on this topic. There are numerous ways to approach the application design process, and you are encouraged to learn about these various methodologies as a part of developing your own design practice.
+ This guidance is primarily intended for those who are new to UX design.
+ </p>
+ <h2>
+ Define Scope and Goals Early
+ </h2>
+ <p>
+ Establishing "what" your application will do is possibly the most important part of the design process. Here, your aim should be to ensure that the goals for your application are clear and focused. Your application should do one thing and do it well, and you should not attempt to cater to incompatible use cases and requirements within the same application. Resist the temptation to try and please everybody and instead aim for excellence in one particular area.
+ </p>
+ <p>
+ Scope can be defined in terms of key functionality and use cases. Here, it is important to think about the contexts in which your application will be used and who will be using it. Understanding the needs and desires of the people who you want to use your application is key here, as well as the various situations in which they might find themselves. Where will they use your application? How will they use it? What are the challenges that they face and what can you do to give them a positive experience?
+ </p>
+ <p>
+ It is important to pay attention to user experience when you are establishing the goals for your application design. Consider how you want your application to feel and what kinds of emotional reactions you want it to generate. These will often be the same user experience goals that are contained within the <span class="gnome">GNOME</span> 3
+ <a href="design_principles.html">Design Principles</a>
+ </p>
+ <p>
+ Determining what your application will not do is just as important as determining what it will do. Identifying scenarios, functionality and use cases that you do not intend to accomodate within your design will assist you in creating a focused application. Take care to document any use cases that you have excluded from your scope as well as those what you have included.
+ </p>
+ <h2>
+ Research Existing Approaches
+ </h2>
+ <p>
+ Take the time to find existing designs that are relevant to your goals, and work to identify a small set of inspirational relevant art. This will often include application designs that are similar in scope to your own, but you should not limit your search to either application designs. Include the full range of UX design in your research including designs for different types of devices, websites, games and even print design.
+ </p>
+ <p>
+ Limit your relevant art to examples that are inspiring or interesting, and seek out design excellence. Do not look to poor quality designs that appear relevant because their scope is similar to that of your application. When designing a music player, do not include any music player you can find, for example. Instead, seek out software that presents music and other content in delightful and elegant ways, or which provides novel solutions to the design challenges that you face.
+ </p>
+ <p>
+ Evaluate and assess the examples of relevant art that you have found. Test it if you can, either yourself or by conducting user testing. Identify what you like about the relevant art that you have collected and assess whether the approaches that it contains are appropripate for your own application. Also investigate if there are any design or usability problems with your relevant art.
+ </p>
+ <p>
+ Make sure that you study the core <span class="gnome">GNOME 3</span> applications and the HIG design patterns within your research activities. This will help you determine which of the existing <span class="gnome">GNOME 3</span> design approaches will be useful to your in your application design.
+ </p>
+ <p>
+ Researching relevant art can be highly productive; you should use it as a tool to widen your horizons and to introduce new design approaches into your process. By the same token, do not let your relevant art impose limits on the possibilities you are considering. Research is there to supplement your design thinking rather than restrict it.
+ </p>
+ <h2>
+ Use Low Fidelity Mockups
+ </h2>
+ <p>
+ Once you have established the scope of your application design and evaluated relevant art, you can start thinking about what your application will look like and how it will work. Be careful not to begin this stage of the design process too early; you should concentrate on high level design goals before concerning yourself with the details of what your user interface should be like.
+ </p>
+ <p>
+ Low fidelity mockups or sketches are a good way to document and develop concepts for your interface (once you are ready to design it). Generic graphics software or special purpose mockup applications can be used for this purpose, but so can pencil and paper.
+ </p>
+ <p>
+ Choose your mockup tools in order to enable you to quickly try out ideas. It is important to try different interface designs at this stage, and you should be prepared to throw ideas away. Whatever tool you choose, ensure that you do not invest too much time rendering your ideas. This will help to stop you from becoming too attached to them.
+ </p>
+ <p>
+ Pay attention to interaction flow in early designs. Visualize the sequences of actions that will be involved in using your software. Paper cut outs, flow diagrams or graphics software with layering capabilities can all be useful for this.
+ </p>
+ <p>
+ Evaluate and critique each of the designs that you come up with until you have a robust design that fulfils the goals you have set out. This part of the design process can be lengthy: time your time and make sure that you don't select a UI design prematurely.
+ </p>
+ <h2>
+ Prototype and 'Dog Food'
+ </h2>
+ <p>
+ Work to test your designs througout the design process, both on yourself and others.
+ There are many quick and low cost ways that you can explore your designs. Static images displayed on the screen can be used as a kind of prototype, and can give you an impression of how your application will look, work and feel. Paper prototying can also be used to explore interaction flows with others. Showing mockups to others without the aid of notes or explanation will help you to establish that the interface you have designed is easy to interpret.
+ </p>
+ <p>
+ It is especially important to test your design if it includes novel approaches. Throwaway software prototypes are an excellent way to do this and can save you a huge amount of time in the long run.
+ </p>
+ <p>
+ Once implemtation of your application has begun, ensure that you regularly use development versions of the software in order to identify design bugs.
+ </p>
+ <h2>
+ High Fidelity Mockups
+ </h2>
+ <p>
+ Low fidelity mockups can be used to communicate and develop many aspects of your user interface, including visual layout, interaction flow, text and labels.
+ </p>
+ <p>
+ However, visual rendering and aesthetics are an important part of application design, and this requires higher fidelity visual designs to be created in the form of detailed high resolution mockups. If your application utilises novel controls or visual elements, these should be designed in advance of implementation. Artist expertise will often need to be enlisted in order to address this aspect of the design.
+ </p> <h2>
+ Iterate
+ </h2>
+ <p>
+ A UX design is rarely finished, if ever. There are always improvements that can be made, and it is important to continually assess your design. Expect to have to make changes to your design as it is implemented, and work to refine it as application development proceeds.
+ </p>
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li class="current"><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/images/figures/app-menu.png b/hig3/site/images/figures/app-menu.png
new file mode 100644
index 0000000..0c776dd
Binary files /dev/null and b/hig3/site/images/figures/app-menu.png differ
diff --git a/hig3/site/images/figures/primary-toolbar-example.png b/hig3/site/images/figures/primary-toolbar-example.png
new file mode 100644
index 0000000..0c25722
Binary files /dev/null and b/hig3/site/images/figures/primary-toolbar-example.png differ
diff --git a/hig3/site/index.html b/hig3/site/index.html
index 56d73c7..7093ce9 100644
--- a/hig3/site/index.html
+++ b/hig3/site/index.html
@@ -25,7 +25,7 @@
Design Guidelines
</h3>
<ul>
- <li class="first"><a href="principles.html">Principles</a></li>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
<li><a href="design_strategies.html">Design Strategies</a></li>
<li><a href="system_shell.html">System Shell</a></li>
<li><a href="visual_layout.html">Visual Layout</a></li>
@@ -131,12 +131,16 @@
</aside>
<article class="main">
<img alt="Devices" src="images/devices.png">
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";>GNOME Human Interface Guidelines.</a>
+ </div>
<div class="blurb">
<h2>
Design Guidelines
</h2>
A small set of pages containing essential design
- <a href="principles.html">advice and rules.</a>
+ <a href="design_principles.html">advice and rules.</a>
</div>
<div class="blurb">
<h2>
@@ -158,7 +162,7 @@
Design Guidelines
</h3>
<ul>
- <li class="first"><a href="principles.html">Principles</a></li>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
<li><a href="design_strategies.html">Design Strategies</a></li>
<li><a href="system_shell.html">System Shell</a></li>
<li><a href="visual_layout.html">Visual Layout</a></li>
@@ -268,8 +272,7 @@
Free to share and remix:
<a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
Optimised for standards. Hosted by
- <a href="http://canonical.com";>Canonical</a>
- Powered by WordPress.
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
</p>
</div>
</div>
diff --git a/hig3/site/keyboard_input.html b/hig3/site/keyboard_input.html
new file mode 100644
index 0000000..53860e3
--- /dev/null
+++ b/hig3/site/keyboard_input.html
@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li class="current"><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>
+ Keyboard Input
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ <p>
+ Keyboards are a common input device for those using <span class="gnome">GNOME 3</span>, so it is important that you design your application with them in mind. The keyboard can be a quick and effective effective input method. Allowing people to use a keyboard instead of a pointing device can save them time and effort and can be convenient for many operations. The keyboard is also important for visually-impaired people or those with mobility impairments.
+ </p>
+ <div class="important">
+ Search is an important part of the way that people interact with <span class="gnome">GNOME 3</span>. Make sure that you are familiar with the search design pattern and follow it wherever it is relevant.
+ </div>
+ <h2>
+ Keyboard Navigation
+ </h2>
+ <p>
+ Ensure that all the functionality provided by your application can be accessed using a keyboard, including toolbars, links and buttons. Trying to use your application only with a keyboard is a great way to test this.
+ </p>
+ <ul>
+ <li>
+ The tab key is the standard way of navigating through a <span class="gnome">GNOME</span> user interface using the keyboard. Make sure that all the parts of your application can be accessed in this manner.
+ </li>
+ <li>
+ Use a logical keyboard navigation order. When navigating around a window with the Tab key, keyboard focus should move between controls in a predictable order. In Western locales, this is normally left to right and top to bottom.
+ </li>
+ <li>
+ Ensure correct tab order for controls whose enabled state is dependent on check box, radio button or toggle button state. When such a button is selected, all its dependent controls should be enabled, and all the dependent controls of any other button in the group should be disabled. When the user selects a check box, radio button or toggle button that has dependent controls, do not automatically give focus to the first dependent control, but instead leave the focus on the button.
+ </li>
+ </ul>
+ <h2>
+ Access Keys
+ </h2>
+ <p>
+ Access keys allow someone to operate labelled controls by using the Alt modifier key.
+ </p>
+ <ul>
+ <li>
+ Give all labelled components an access key (underlined letter), with the exception of toolbar controls which would use up too many access key combinations.
+ </li>
+ <li>
+ Choose access keys to be as easy to remember as possible. Normally, this means using the first letter of the label. However, in complex windows, the choice can become more difficult. Here are some simple rules:
+ </li>
+ <li>
+ Assign access keys to the most frequently-used controls first. If it's not clear which controls will be the most frequently used, assign access keys from left to right, top to bottom (for Western locales).
+ </li>
+ <li>
+ Use the first letter of the label, or of one of its other words if it has more than one. If another letter provides a better association (e.g. "x" in Extra Large) however, consider using that letter instead.
+ </li>
+ <li>
+ If the first letter is not available, choose an easy to remember consonant from the label, for example, "p" in Replace.
+ </li>
+ <li>
+ If no such consonants are available, choose any available vowel from the label.
+ </li>
+ <li>
+ If duplication of access keys in a window is unavoidable, you should still refrain from duplicating the access keys for any of these buttons that appear in the same window: OK, Cancel, Close, Apply or Help.
+ </li>
+ <li>
+ It is better not to assign access keys to "thin" letters (such as lowercase i or l), or letters with descenders (such as lowercase g or y) unless it is unavoidable. The underline does not show up very well on those characters in some fonts.
+ </li>
+ <li>
+ Applications using a non-Roman writing system in conjunction with a standard keyboard can have control labels prefixed with Roman characters as access keys.
+ </li>
+ </ul>
+ <h2>
+ Shortcut Keys
+ </h2>
+ <p>
+ Shortcut keys are a good way to provide quick and convenient access to common operations. Be sure to use the standard <span class="gnome">GNOME</span> shortcut keys (see below) if your application supports those functions. This ensures consistency between <span class="gnome">GNOME</span> applications and aids discoverability.
+ </p>
+ <p>
+ Guidance on assigning your own shortcut keys:
+ </p>
+ <ul>
+ <li>
+ Try and be consistent with other <span class="gnome">GNOME</span> applications, particularly the core applications, and take the time to find out what shortcut keys they have defined.
+ </li>
+ <li>
+ Only assign shortcut keys to the most commonly-used actions in your application. Do not try to assign a shortcut keys to everything.
+ </li>
+ <li>
+ Do not use any of the standard <span class="gnome">GNOME</span> shortcut keys for your own purposes, even if your application doesn't support those functions. This helps reinforce consistency between all <span class="gnome">GNOME</span> applications.
+ </li>
+ <li>
+ Use Ctrl+letter in preference to other combinations when choosing new shortcut keys and Shift+Ctrl+letter for functions that reverse or extend another function. For example, Ctrl+Z and Shift+Ctrl+Z for Undo and Redo.
+ </li>
+ <li>
+ Choose new shortcut keys to be as mnemonic as possible, as these will be easier to learn and remember. For example, Ctrl+E would be a good shortcut for a menu item called Edit Page.
+ </li>
+ <li>
+ Shortcuts that can be easily used with one hand are preferable for common operations, but try not to assign awkward reaches for shortcuts that may be frequently used.
+ </li>
+ <li>
+ Do not use Alt+key combinations for shortcut keys, as these may conflict with window manager shortcuts or access keys.
+ </li>
+ </ul>
+ <h2>
+ Standard <span class="gnome">GNOME</span> Shortcut Keys
+ </h2>
+ <p>
+ Include these where you can:
+ </p>
+ <table>
+ <tr> <th>
+ Function
+ </th> <th>
+ Shortcut
+ </th> <th>
+ Description
+ </th>
+ </tr>
+ <tr> <td>
+ New
+ </td>
+ <td> <span class="shortcut">
+ Ctrl+N
+ </span>
+ </td>
+ <td>
+ Create a new document
+ </td>
+ </tr>
+ <tr> <td>
+ Open
+ </td>
+ <td> <span class="shortcut">
+ Ctrl+O
+ </span>
+ </td>
+ <td>
+ Open a document
+ </td>
+ </tr>
+ <tr> <td>
+ Save
+ </td>
+ <td> <span class="shortcut">
+ Ctrl+S
+ </span>
+ </td>
+ <td>
+ Save the current document
+ </td>
+ </tr>
+ <tr> <td>
+ â
+ </td>
+ <td> <span class="shortcut">
+ Ctrl+â
+ </span>
+ </td> <td>
+ â
+ </td>
+ </tr>
+ </table>
+ <h2>
+ System Reserved Shortcut Keys
+ </h2>
+ <p>
+ These ones are ours.
+ </p>
+ <table>
+ <tr> <th>
+ Function
+ </th> <th>
+ Shortcut
+ </th> <th>
+ Description
+ </th>
+ </tr>
+ <tr> <td>
+ â
+ </td> <td>
+ â
+ </td> <td>
+ â
+ </td>
+ </tr>
+ </table> <h2>
+ Comments
+ </h2>
+ <ul>
+ <li>
+ Other prominent shortcuts that should be mentioned here: F11 - fullscreen, Ctrl-X/Ctrl-C/Ctrl-V for cut/copy/paste
+ </li>
+ <li>
+ I'd really like to see some guidance on global shortcuts here - people have a tendency to write small things that hide in the statusbar and install global shortcuts to make something happen. We should really advise against that, since global shortcuts are a scarce resource. If a global shortcut is needed at all, it "'must"' be coordinated with the rest of the system by integrating in the keyboard shortcuts control-center functionality.
+ </li>
+ </ul>
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li class="current"><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/pointer_and_touch_input.html b/hig3/site/pointer_and_touch_input.html
new file mode 100644
index 0000000..39c2df5
--- /dev/null
+++ b/hig3/site/pointer_and_touch_input.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last current"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>
+ Pointer and Touch input
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a> </div>
+ FIXME
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last current"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/stylesheets/hig.css b/hig3/site/stylesheets/hig.css
index 208fc3b..55bf692 100644
--- a/hig3/site/stylesheets/hig.css
+++ b/hig3/site/stylesheets/hig.css
@@ -16,25 +16,25 @@ body:after {
clear: both;
}
-/* line 14 */
+/* line 18 */
a {
color: #3465a4;
}
-/* line 16 */
+/* line 20 */
a:hover {
color: #477ec4;
}
-/* line 19 */
+/* line 23 */
a:active {
color: #284d7d;
}
-/* line 24 */
+/* line 28 */
p {
margin-bottom: 1em;
}
-/* line 28 */
+/* line 32 */
body {
font-family: Cantarell, Sans-Serif;
font-size: 11pt;
@@ -43,28 +43,115 @@ body {
background: white url(../images/html-bg.png) 0 10px repeat-x;
}
-/* line 36 */
+/* line 40 */
img {
width: 100%;
height: auto;
}
-/* line 41 */
+/* line 45 */
h1, h2, h3, h4, h5, h6 {
color: #888a85;
margin: 2em 0 .8em;
}
-/* line 44 */
+/* line 48 */
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin: 0 0 .8em;
}
-/* line 49 */
+/* line 53 */
h1 {
font-size: 200%;
}
-/* line 51 */
+/* line 55 */
+table {
+ border: 1px solid #cccccc;
+ min-width: 80%;
+}
+/* line 60 */
+table tr th {
+ text-align: left;
+ color: #999;
+ padding: .6em .8em 1em .8em;
+ font-size: 90%;
+}
+/* line 66 */
+table tr td {
+ padding: .6em .8em;
+}
+
+/* line 72 */
+.shortcut {
+ display: inline-block;
+ min-width: 4em;
+ text-align: center;
+ background-color: #f2f2f2;
+ background-image: -moz-linear-gradient(top, white, #d9d9d9);
+ background-image: -webkit-linear-gradient(top, white, #d9d9d9);
+ background-image: -o-linear-gradient(top, white, #d9d9d9);
+ background-image: -ms-linear-gradient(top, white, #d9d9d9);
+ background-image: linear-gradient(top, #ffffff, #d9d9d9);
+ text-shadow: 0 1px 0 white;
+ -moz-text-shadow: 0 1px 0 white;
+ -webkit-text-shadow: 0 1px 0 white;
+ border: 1px solid #cccccc;
+ padding: .2em .5em;
+ font-size: 80%;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+/* line 86 */
+.note {
+ background-color: #e5d693;
+ background-image: -moz-linear-gradient(top, #fefdfa, #f9f5e5);
+ background-image: -webkit-linear-gradient(top, #fefdfa, #f9f5e5);
+ background-image: -o-linear-gradient(top, #fefdfa, #f9f5e5);
+ background-image: -ms-linear-gradient(top, #fefdfa, #f9f5e5);
+ background-image: linear-gradient(top, #fefdfa, #f9f5e5);
+ border: 1px solid #e5d693;
+ padding: 1em;
+ box-shadow: 0 1px 2px #e5d693;
+ -moz-box-shadow: 0 1px 2px #e5d693;
+ -webkit-box-shadow: 0 1px 2px #e5d693;
+ box-shadow: 0 1px 2px #e5d693, 0 1px rgba(255, 255, 255, 0.4) inset;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ margin: .5em 0 2em 0;
+}
+
+/* line 97 */
+.important {
+ color: #fff;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
+ -moz-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
+ -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
+ font-weight: bold;
+ background-color: #f25252;
+ background-image: -moz-linear-gradient(top, #fbc9c9, #f9b1b1);
+ background-image: -webkit-linear-gradient(top, #fbc9c9, #f9b1b1);
+ background-image: -o-linear-gradient(top, #fbc9c9, #f9b1b1);
+ background-image: -ms-linear-gradient(top, #fbc9c9, #f9b1b1);
+ background-image: linear-gradient(top, #fbc9c9, #f9b1b1);
+ border: 1px solid #f25252;
+ padding: 1em;
+ box-shadow: 0 1px 2px #e5d693;
+ -moz-box-shadow: 0 1px 2px #e5d693;
+ -webkit-box-shadow: 0 1px 2px #e5d693;
+ box-shadow: 0 1px 2px #f25252, 0 1px rgba(255, 255, 255, 0.4) inset;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ margin: .5em 0 2em 0;
+}
+
+/* line 111 */
.punchline {
font-size: 200%;
color: #888a85;
@@ -74,12 +161,17 @@ h1 {
-webkit-text-shadow: 0 1px 0 white;
}
-/* line 58 */
+/* line 118 */
+.gnome {
+ white-space: nowrap;
+}
+
+/* line 122 */
.gnomelink {
width: 960px;
margin: 0 auto;
}
-/* line 62 */
+/* line 126 */
.gnomelink > div {
background-color: #fff;
display: inline;
@@ -94,7 +186,7 @@ h1 {
-moz-box-shadow: 0 3px 2px #8fb3d9;
-webkit-box-shadow: 0 3px 2px #8fb3d9;
}
-/* line 68 */
+/* line 132 */
.gnomelink > div a {
display: block;
font-size: 80%;
@@ -104,12 +196,12 @@ h1 {
color: #222;
text-decoration: none;
}
-/* line 76 */
+/* line 140 */
.gnomelink > div a:hover {
text-decoration: underline;
}
-/* line 83 */
+/* line 147 */
.logo {
position: absolute;
width: 960px;
@@ -118,13 +210,13 @@ h1 {
margin-left: -480px;
display: block;
}
-/* line 91 */
+/* line 155 */
.logo img {
width: 170px;
height: auto;
}
-/* line 97 */
+/* line 161 */
.main {
display: inline;
float: left;
@@ -132,13 +224,13 @@ h1 {
margin: 0 10px;
}
-/* line 99 */
+/* line 163 */
.contain {
width: 960px;
margin: 4em auto 0;
overflow: hidden;
}
-/* line 103 */
+/* line 167 */
.contain .sidebar {
display: inline;
float: left;
@@ -146,111 +238,114 @@ h1 {
margin: 0 10px;
/* SIDEBAR MENU */
}
-/* line 106 */
+/* line 170 */
.contain .sidebar .menu {
margin: 200px 0 0;
}
-/* line 108 */
+/* line 172 */
.contain .sidebar .menu ul {
display: block;
margin: 0;
padding: 0;
/* COLLAPSING MENU */
}
-/* line 112 */
+/* line 176 */
.contain .sidebar .menu ul li {
margin: 0;
display: block;
margin: 0 0 .8em;
padding-left: 24px;
}
-/* line 117 */
+/* line 181 */
.contain .sidebar .menu ul li.current a {
color: black;
+ outline: none;
}
-/* line 119 */
+/* line 184 */
.contain .sidebar .menu ul li.current a:hover {
text-decoration: none;
cursor: default;
}
-/* line 127 */
+/* line 192 */
.contain .sidebar .menu ul.collapsed > li {
padding: 0;
}
-/* line 129 */
+/* line 194 */
.contain .sidebar .menu ul.collapsed > li a.expand {
background: url(../images/minus.png) no-repeat 4px 7px;
}
-/* line 132 */
+/* line 197 */
.contain .sidebar .menu ul.collapsed > li a.collapse {
background: url(../images/plus.png) no-repeat 4px 7px;
}
-/* line 135 */
+/* line 200 */
.contain .sidebar .menu ul.collapsed > li > a {
display: block;
color: #666;
font-weight: bold;
padding-left: 24px;
cursor: pointer;
+ outline: none;
}
-/* line 141 */
+/* line 207 */
.contain .sidebar .menu ul.collapsed > li > a:hover {
text-decoration: none;
}
-/* line 145 */
+/* line 211 */
.contain .sidebar .menu ul.collapsed > li:first-child {
margin-top: 0;
}
-/* line 149 */
+/* line 215 */
.contain .sidebar .menu ul.collapsed > li ul {
margin-top: 1em;
}
-/* line 151 */
+/* line 217 */
.contain .sidebar .menu ul.collapsed > li ul li {
padding: 0;
}
-/* line 153 */
+/* line 219 */
.contain .sidebar .menu ul.collapsed > li ul li a {
padding-left: 24px;
color: #3465a4;
+ outline: none;
}
-/* line 158 */
+/* line 225 */
.contain .sidebar .menu ul.collapsed > li ul li.current a {
cursor: default;
color: black;
}
-/* line 161 */
+/* line 228 */
.contain .sidebar .menu ul.collapsed > li ul li.current a:hover {
text-decoration: none;
}
-/* line 171 */
+/* line 238 */
.contain .sidebar .menu a {
text-decoration: none;
}
-/* line 173 */
+/* line 240 */
.contain .sidebar .menu a:hover {
text-decoration: underline;
}
-/* line 178 */
+/* line 245 */
.contain .sidebar .smalllogo {
display: block;
text-decoration: none;
}
-/* line 181 */
+/* line 248 */
.contain .sidebar .smalllogo + .menu {
margin: 25px 0 0;
}
-/* line 184 */
+/* line 251 */
.contain .sidebar .smalllogo img {
width: 170px;
height: auto;
}
-/* line 188 */
+/* line 255 */
.contain .sidebar .smalllogo .punchline {
font-size: 115%;
margin-top: 8px;
}
-/* line 191 */
+/* line 258 */
.contain .main {
display: inline;
float: left;
@@ -258,7 +353,7 @@ h1 {
margin: 0 10px;
}
-/* line 195 */
+/* line 262 */
.columns {
display: block;
width: 660px;
@@ -274,7 +369,7 @@ h1 {
.columns:after {
clear: both;
}
-/* line 198 */
+/* line 265 */
.columns img {
display: inline;
float: left;
@@ -283,7 +378,7 @@ h1 {
margin-bottom: 1em;
float: right;
}
-/* line 204 */
+/* line 271 */
.columns p {
display: inline;
float: left;
@@ -292,7 +387,7 @@ h1 {
margin-bottom: 1em;
}
-/* line 210 */
+/* line 277 */
.blurb {
display: inline;
float: left;
@@ -300,7 +395,7 @@ h1 {
margin: 0 10px;
}
-/* line 214 */
+/* line 281 */
hr.footerart {
display: block;
margin: 0;
@@ -312,19 +407,19 @@ hr.footerart {
background: url(../images/footer-art.png) no-repeat bottom center;
}
-/* line 225 */
+/* line 292 */
#footerpositioner {
margin: 2em 0 0;
padding: 0;
width: 100%;
}
-/* line 229 */
+/* line 296 */
#footerpositioner.fixedfooter {
position: absolute;
bottom: 0;
}
-/* line 235 */
+/* line 302 */
#footer {
margin: 0;
padding: 0;
@@ -334,7 +429,7 @@ hr.footerart {
overflow: hidden;
position: inline;
}
-/* line 245 */
+/* line 312 */
#footer .copy {
display: inline;
float: left;
@@ -344,7 +439,7 @@ hr.footerart {
margin-bottom: 2em;
font-size: 80%;
}
-/* line 252 */
+/* line 319 */
#footer .navmenu {
display: block;
width: 960px;
@@ -363,56 +458,60 @@ hr.footerart {
#footer .navmenu:after {
clear: both;
}
-/* line 257 */
+/* line 324 */
#footer .navmenu li.current a {
color: black !important;
cursor: default;
}
-/* line 260 */
+/* line 327 */
#footer .navmenu li.current a:hover {
text-decoration: none !important;
}
-/* line 264 */
+/* line 331 */
#footer .navmenu h3 {
font-size: 110%;
}
-/* line 267 */
+/* line 334 */
#footer .navmenu a {
- color: #fff;
+ font-weight: normal;
+ color: #666;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+ -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+ -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
text-decoration: none;
}
-/* line 270 */
+/* line 339 */
#footer .navmenu a:hover {
color: #444;
text-decoration: underline;
}
-/* line 275 */
+/* line 344 */
#footer .navmenu .direct {
display: inline;
float: left;
width: 220px;
margin: 0 10px;
}
-/* line 277 */
+/* line 346 */
#footer .navmenu .direct ul {
display: block;
margin-bottom: 2em;
padding: 0;
}
-/* line 282 */
+/* line 351 */
#footer .navmenu .direct ul li {
display: block;
padding: 0;
margin: 0;
}
-/* line 289 */
+/* line 358 */
#footer .navmenu .nested {
display: inline;
float: left;
width: 700px;
margin: 0 10px;
}
-/* line 291 */
+/* line 360 */
#footer .navmenu .nested ul.collapsed {
display: block;
width: 720px;
@@ -429,16 +528,17 @@ hr.footerart {
#footer .navmenu .nested ul.collapsed:after {
clear: both;
}
-/* line 294 */
+/* line 363 */
#footer .navmenu .nested ul.collapsed a {
color: #888a85;
font-size: 105%;
+ font-weight: bold;
}
-/* line 297 */
+/* line 367 */
#footer .navmenu .nested ul.collapsed a:hover {
text-decoration: none;
}
-/* line 301 */
+/* line 371 */
#footer .navmenu .nested ul.collapsed li {
display: inline;
float: left;
@@ -446,16 +546,20 @@ hr.footerart {
margin: 0 10px;
margin-bottom: 2em;
}
-/* line 304 */
+/* line 374 */
#footer .navmenu .nested ul.collapsed li ul li {
margin: 0;
}
-/* line 306 */
+/* line 376 */
#footer .navmenu .nested ul.collapsed li ul li a {
- color: #fff;
+ font-weight: normal;
+ color: #666;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+ -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+ -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
text-decoration: none;
}
-/* line 309 */
+/* line 381 */
#footer .navmenu .nested ul.collapsed li ul li a:hover {
color: #444;
text-decoration: underline;
@@ -463,12 +567,12 @@ hr.footerart {
/* MOBILE VERSION BELOW */
@media screen and (max-width: 960px) {
- /* line 325 */
+ /* line 414 */
.gnomelink {
display: none;
}
- /* line 328 */
+ /* line 417 */
.blurb {
display: block;
width: 100%;
@@ -485,25 +589,25 @@ hr.footerart {
clear: both;
}
- /* line 331 */
+ /* line 420 */
.logo {
position: static;
margin: 20px auto;
width: 94%;
overflow: hidden;
}
- /* line 336 */
+ /* line 425 */
.logo img {
width: 100px;
height: auto;
}
- /* line 340 */
+ /* line 429 */
.logo div {
margin: .5em 0 0;
font-size: 120%;
}
- /* line 346 */
+ /* line 435 */
.columns {
display: block;
width: 100%;
@@ -519,7 +623,7 @@ hr.footerart {
.columns:after {
clear: both;
}
- /* line 349 */
+ /* line 438 */
.columns img {
display: inline;
float: left;
@@ -527,7 +631,7 @@ hr.footerart {
margin: 0 1.042%;
margin-bottom: 1em;
}
- /* line 354 */
+ /* line 443 */
.columns p {
display: inline;
float: left;
@@ -536,27 +640,27 @@ hr.footerart {
margin-bottom: 1em;
}
- /* line 360 */
+ /* line 449 */
.contain {
width: 97.917%;
margin: 0 auto;
}
- /* line 363 */
+ /* line 452 */
.contain .menu {
display: none;
}
- /* line 364 */
+ /* line 453 */
.contain .main {
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
}
- /* line 365 */
+ /* line 454 */
.contain .sidebar {
margin: 0;
}
- /* line 367 */
+ /* line 456 */
.contain .sidebar .smalllogo {
position: static;
display: block;
@@ -564,50 +668,59 @@ hr.footerart {
width: 94%;
overflow: hidden;
}
- /* line 373 */
+ /* line 462 */
.contain .sidebar .smalllogo img {
width: 100px;
height: auto;
}
- /* line 377 */
+ /* line 466 */
.contain .sidebar .smalllogo div {
margin: .5em 0 0;
font-size: 120%;
}
- /* line 385 */
+ /* line 474 */
hr.footerart {
width: 96%;
margin: 0 auto;
background-size: contain;
}
- /* line 391 */
+ /* line 480 */
#footer {
@inlude column(16);
}
- /* line 394 */
+ /* line 483 */
#footer .navmenu {
font-size: 130%;
- line-height: 300%;
+ line-height: 150%;
margin-bottom: 2em;
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
}
- /* line 398 */
+ /* line 489 */
+ #footer .navmenu .nested ul.collapsed li ul li.current a, #footer .navmenu .direct ul li.current a {
+ background-image: -moz-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -webkit-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -o-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -ms-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: linear-gradient(top, #b9c0b3, #c6cbc1);
+ }
+ /* line 492 */
#footer .navmenu h3 {
margin: 2em 0 1em;
}
- /* line 402 */
+ /* line 496 */
#footer .navmenu li {
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
+ width: 100%;
}
- /* line 405 */
+ /* line 500 */
#footer .navmenu .direct {
display: inline;
float: left;
@@ -615,7 +728,36 @@ hr.footerart {
margin: 0 1.042%;
margin: 0;
}
- /* line 409 */
+ /* line 504 */
+ #footer .navmenu .direct a {
+ display: block;
+ text-align: center;
+ padding: .5em;
+ border: 1px solid #a0a997;
+ border-radius: 0.5em;
+ -moz-border-radius: 0.5em;
+ -webkit-border-radius: 0.5em;
+ background-color: #c6cbc1;
+ background-image: -moz-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -webkit-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -o-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -ms-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: linear-gradient(top, #e0e3dd, #bfc4b9);
+ margin-bottom: 4px;
+ }
+ /* line 402 */
+ #footer .navmenu .direct a:hover {
+ border: 1px solid #86917c;
+ }
+ /* line 405 */
+ #footer .navmenu .direct a:active {
+ background-image: -moz-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -webkit-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -o-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -ms-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: linear-gradient(top, #b9c0b3, #c6cbc1);
+ }
+ /* line 506 */
#footer .navmenu .nested {
display: inline;
float: left;
@@ -623,30 +765,65 @@ hr.footerart {
margin: 0 1.042%;
margin: 0;
}
- /* line 412 */
+ /* line 509 */
#footer .navmenu .nested ul.collapsed {
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
margin: 0;
+ width: 100%;
}
- /* line 415 */
+ /* line 513 */
#footer .navmenu .nested ul.collapsed li {
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
margin: 0;
+ width: 100%;
+ }
+ /* line 517 */
+ #footer .navmenu .nested ul.collapsed li ul {
+ width: 100%;
}
- /* line 418 */
+ /* line 519 */
#footer .navmenu .nested ul.collapsed li ul li {
display: block;
float: none;
width: 100%;
margin: 0;
}
- /* line 429 */
+ /* line 524 */
+ #footer .navmenu .nested ul.collapsed li ul li a {
+ display: block;
+ text-align: center;
+ padding: .5em;
+ border: 1px solid #a0a997;
+ border-radius: 0.5em;
+ -moz-border-radius: 0.5em;
+ -webkit-border-radius: 0.5em;
+ background-color: #c6cbc1;
+ background-image: -moz-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -webkit-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -o-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: -ms-linear-gradient(top, #e0e3dd, #bfc4b9);
+ background-image: linear-gradient(top, #e0e3dd, #bfc4b9);
+ margin-bottom: 4px;
+ }
+ /* line 402 */
+ #footer .navmenu .nested ul.collapsed li ul li a:hover {
+ border: 1px solid #86917c;
+ }
+ /* line 405 */
+ #footer .navmenu .nested ul.collapsed li ul li a:active {
+ background-image: -moz-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -webkit-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -o-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: -ms-linear-gradient(top, #b9c0b3, #c6cbc1);
+ background-image: linear-gradient(top, #b9c0b3, #c6cbc1);
+ }
+ /* line 532 */
#footer .copy {
display: inline;
float: left;
diff --git a/hig3/site/system_shell.html b/hig3/site/system_shell.html
new file mode 100644
index 0000000..67717b6
--- /dev/null
+++ b/hig3/site/system_shell.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li class="current"><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>
+ System Shell
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ FIXME: introduction to the top bar, activities overview, messaging tray and system settings
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li class="current"><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/visual_layout.html b/hig3/site/visual_layout.html
new file mode 100644
index 0000000..be41759
--- /dev/null
+++ b/hig3/site/visual_layout.html
@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li class="current"><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>
+ Visual Layout
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ A clean layout is crucial to creating a smooth visual flow of information for the user and a beautiful aesthetic. The positioning of controls and content on the screen conveys important information and makes your application easy to understand.
+ <div class="note">
+ Further information on layout can be found in the individual design patterns that make up the HIG. The Grid and List patterns describe how to organize layouts of content, for example.
+ </div>
+ <h2>
+ General Guidance
+ </h2>
+ <ul>
+ <li>
+ Keep visual complexity low by using ample whitespace. Ensure that the visual elements in your interface are not placed too tightly together so that they have space to breathe. This will ensure that your application feels light and elegant. It will also ensure that people using it can easily understand the information that is being presented to them.
+ </li>
+ <li>
+ Communicate that visual elements and controls are related by placing them close to one another. Groups of visual elements can be distinguished by separating them using spacing, for instance.
+ </li>
+ <li>
+ Minimize the number of alignment points in your window or view. An alignment point is an imaginary vertical or horizontal line through your window that touches the edge of one or more labels or controls in the window. The fewer alignment points, the cleaner and simpler your layout will appear, and the easier it will be for people to understand.
+ </li>
+ <li>
+ Align content and controls in your layout exactly. The eye is very sensitive to aligned and unaligned objects. If nothing lines up with anything else, it will be very hard for someone to scan the contents and find the information he/she wants. Two things do not quite line up are equally distracting.
+ </li>
+ <li>
+ Be consistent. Use the same amounts of spacing and component sizes. Reuse the same amounts of spacing throughout.
+ </li>
+ </ul>
+ <h2>
+ Layout Schemas
+ </h2>
+ <ul>
+ <li>
+ Organize windows and views from top-to-bottom and left-to-right. This is the direction that people from western locales tend to read an interface, so that the items at the top-left will be encountered first.
+ </li>
+ </ul>
+ FIXME: Visual order diagram
+ <ul>
+ <li>
+ This ordering gives interfaces a hierarchy: those components that are viewed first are perceived to have priority over those that come after them. For this reason, you should place dominant controls above and to the left of the controls and content that they affect. In [[Design/HIG/PrimaryWindows|Primary Windows]], this can be typically be achieved by using a [[Design/HIG/PrimaryToolbar|Primary Toolbar]].
+ </li>
+ </ul>
+ FIXME: Alignment points diagram
+ <ul>
+ <li>
+ Utilise the key <span class="gnome">GNOME 3</span> alignment points. The <span class="gnome">GNOME 3</span> top panel provides three alignment points that you can use to create layouts that are in harmony with the <span class="gnome">GNOME 3</span> shell and are consistent with other <span class="gnome">GNOME 3</span> applications.
+ </li>
+ </ul>
+ <h2>
+ Laying Out Groups of Controls
+ </h2>
+ FIXME: Spacing diagram
+ <ul>
+ <li>
+ As a basic rule of thumb, leave space between elements in increments of 6 pixels, going up as the relationship between related elements becomes more distant. For example, between icon labels and associated graphics within an icon, 6 pixels are adequate. Between labels and associated components, leave 12 horizontal pixels. For vertical spacing between groups of components, 18 pixels is adequate. A general padding of 12 pixels is recommended between the contents of a dialog window and the window borders.
+ </li>
+ </ul>
+ FIXME: Justification diagram
+ <ul>
+ <li>
+ Right justification within groups or the overall window looks good. If the combination of controls in your layout do not permit this arrangement, left justification should be used.
+ </li>
+ <li>
+ Indent group members 12 pixels to denote hierarchy and association.
+ </li>
+ <li>
+ When a user is scanning a complex preferences dialog consisting of many labels and corresponding check boxes, text fields, and drop-down combination boxes, it is easy to see how she can quickly become hindered by poor layout in the visual design.
+ </li>
+ <li>
+ Right justification is particularly appropriate if control labels greatly differ in length - this will ensure that the controls do not end up too far away from their corresponding labels.
+ </li>
+ <li>
+ Avoid using frames with visible borders to separate groups of controls - use spacing and headers instead.
+ </li>
+ </ul>
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li class="current"><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/writing_style.html b/hig3/site/writing_style.html
new file mode 100644
index 0000000..04fb71d
--- /dev/null
+++ b/hig3/site/writing_style.html
@@ -0,0 +1,433 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li class="current"><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>
+ Writing Style
+ </h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ Text is an important part of user interfaces. Take the time to ensure that any text that is presented to users is clearly written and easy to understand. Text also has an important visual role; it is important to ensure that you use the correct sizes, weights and positioning in order to produce a beautiful and effective interface.
+ <h2>
+ Writing Text for Your User Interface
+ </h2>
+ <p>
+ Ensuring that text is quick and easy to understand is an important part of designing your application.
+ </p>
+ <ul>
+ <li>
+ Keep text short and to the point. This improves speed of comprehension for the user. It also reduces the expansion of text when translated (remember that translated English text can expand up to 30% in some languages).
+ </li>
+ <li>
+ Do not shorten your text to the point of losing meaning, however. A three-word label that provides clear information is better than a one-word label that is ambiguous or vague. Try to find the fewest possible words to satisfactorily convey the meaning of your label.
+ </li>
+ <li>
+ Ensure that you use language that is familiar to your users and that is specific to the context of your application. Avoid using technical terminology or terminology from the underlying system.
+ </li>
+ <li>
+ Use the standard <span class="gnome">GNOME</span> terms when referring to parts of the user interface, such as âpointerâ and âwindowâ. You can find a full list of these in the <span class="gnome">GNOME</span> Documentation Style Guide, Recommended Terminology.
+ </li>
+ <li>
+ Avoid repetition where possible. Remember the context of the text you are writing and try to avoid having the repetitive use of the same phrases and terms in the same view or window.
+ </li>
+ </ul> <h2>
+ Labels
+ </h2>
+ <p>
+ Labels are the text that accompanies individual controls in your interface. Some controls have them placed alongside, such as switches, checkboxes and radio buttons. Others, such as menu items and buttons, have the label placed directly on the control itself.
+ </p>
+ <ul>
+ <li>
+ Use the recommended standard labels for menu items, where they exist. Do not use synonyms such as Exit instead of Quit.
+ </li>
+ <li>
+ Ensure that a label with a mnemonic is associated with the control it labels.
+ </li>
+ <li>
+ If a label precedes the control or text that it refers to, use a lighter color [needs specific guidance on which color to use. do we have named colors yet?] to differentiate it (this rule does not apply to headings). In these cases a colon at the end of the label is not necessary.
+ </li>
+ </ul> <h2>
+ Capitalization
+ </h2>
+ <p>
+ Two styles of capitalization are used in <span class="gnome">GNOME</span> user interface elements: header capitalization and sentence capitalization.
+ </p>
+ <h2>
+ Header Capitalization
+ </h2>
+ <p>
+ Capitalize all words in the element, with the following exceptions:
+ <ul>
+ <li>
+ Articles: a, an, the.
+ </li>
+ <li>
+ Conjunctions of three or fewer letters: and, but, for, not, so, yet ...
+ </li>
+ <li>
+ Prepositions of three or fewer letters: at, for, by, in, to ...
+ </li>
+ </ul>
+ </p>
+ <p>
+ Use for:
+ </p>
+ <ul>
+ <li>
+ Button labels
+ </li>
+ <li>
+ Column heading labels
+ </li>
+ <li>
+ Group box or frame labels
+ </li>
+ <li>
+ Menu items
+ </li>
+ <li>
+ Menu items in applications
+ </li>
+ <li>
+ Menu titles in applications
+ </li>
+ <li>
+ Tabbed notebook titles
+ </li>
+ <li>
+ Titlebar labels
+ </li>
+ <li>
+ Webpage titles and navigational elements
+ </li>
+ </ul>
+ <h2>
+ Sentence Capitalization
+ </h2>
+ <p>
+ Capitalize the first letter of the first word, and any other words normally capitalized in sentences, such as application names.
+ </p>
+ <p>
+ Use for:
+ </p>
+ <ul>
+ <li>
+ Check box labels
+ </li>
+ <li>
+ Dialog messages
+ </li>
+ <li>
+ Drop-down combination box labels
+ </li>
+ <li>
+ Drop-down list box labels
+ </li>
+ <li>
+ Field labels
+ </li> <li>
+ Filenames
+ </li>
+ <li>
+ Graphic equivalent text: for example, Alt text on web pages
+ </li>
+ <li>
+ Items in drop-down combination boxes, drop-down list boxes, and list boxes
+ </li>
+ <li>
+ List box labels
+ </li>
+ <li>
+ Radio button labels
+ </li>
+ <li>
+ Slider labels
+ </li>
+ <li>
+ Spin box labels
+ </li>
+ <li>
+ Text box labels
+ </li> <li>
+ Tooltips
+ </li>
+ </ul>
+ <h2>
+ Text Styles
+ </h2>
+ <ul>
+ <li>
+ If you are presenting different kinds of text based information closely together, use different sizes weights and colours to differentiate them. (Be sure to consult the relevant design patterns for further guidance on this.)
+ </li>
+ <li>
+ Do not use more than two or three different text styles in your application. Too many textsizes, colors and weights will make the interface look complex, making it unattractive and difficult to understand.
+ </li>
+ <li>
+ Do not use graphical backdrops or "watermarks" behind text. These interfere with the contrast between the text and its background. This can cause difficulty for users with visual impairments, who will therefore normally choose themes that always use plain backdrops.
+ </li>
+ </ul> <h2>
+ Comments
+ </h2>
+ <p></p>
+ Should perhaps mention the potential for confusion with 'disabled' controls when discussing uses of text color. Maybe the 'consult design patterns for further guidance' is supposed to address that...
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li class="current"><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/src/pages/_menu.haml b/hig3/src/pages/_menu.haml
index 2d8ea8d..f9fb37b 100644
--- a/hig3/src/pages/_menu.haml
+++ b/hig3/src/pages/_menu.haml
@@ -2,7 +2,7 @@
%span.direct
%h3
Design Guidelines
- = menubar 'Principles', 'Design Strategies', 'System Shell', 'Visual Layout', 'Writing Style', 'Color', 'Keyboard Input', 'Pointer and Touch Input', :all => {:class => 'direct'}
+ = menubar ['Principles', 'design_principles.html'], 'Design Strategies', 'System Shell', 'Visual Layout', 'Writing Style', 'Color', 'Keyboard Input', 'Pointer and Touch Input', :all => {:class => 'direct'}
%span.nested
%h3
diff --git a/hig3/src/pages/basics-appmenu.haml b/hig3/src/pages/basics-appmenu.haml
index 633c906..ff6bde8 100644
--- a/hig3/src/pages/basics-appmenu.haml
+++ b/hig3/src/pages/basics-appmenu.haml
@@ -1 +1,49 @@
%h1 Application Menu
+
+.note
+ This is draft content for the next version of
+ %a{:href => 'http://design.gnome.org'} GNOME Human Interface Guidelines.
+
+.columns
+ %p
+ A menu that is located in the GNOME 3 top panel, and which is displayed as the application icon and name. Application menus provide access to actions and options that are relevant to the application as a whole.
+ =img "figures/app-menu.png"
+
+%h2
+ When to use
+%p
+ Any GNOME 3 application that features windows should incorporate an application menu.
+
+%h2Guidance
+%p
+ The application menu is the primary way to provide access to application-wide actions and configuration options. A focused and well-designed application will typically not need any menus other than the application menu.
+
+%ul
+ %li
+ When determining what to include in your application menu, follow the standard design guidance for
+ =link "menus", "component-menu.html"
+ \.
+ %li
+ You can use the full range of menu features in an application menu, including check boxes, radio buttons and submenus.
+ %li
+ Include those actions and options that relate to the application as a whole, including application-wide configuration options and actions that are not specific to a particular window or piece of content. For multi-window applications, this means that menu items should not affect individual windows.
+ %li
+ Be consistent with other GNOME 3 applications when selecting which items to include in your application menu. Items that should be placed in the application menu if they are available include:
+
+ %ul
+ %li
+ New Window
+ %li
+ Fullscreen
+ %li
+ =link "Preferences", "other_preferences.html"
+ %li
+ Help
+ %li
+ About
+ %li
+ New Window should always be placed at the top of the menu.
+ %li
+ Preferences, Help and About items should always be grouped together at the bottom.
+ %li
+ Every application menu should include an About entry.
diff --git a/hig3/src/pages/index.haml b/hig3/src/pages/index.haml
index d798947..1d0c9a0 100644
--- a/hig3/src/pages/index.haml
+++ b/hig3/src/pages/index.haml
@@ -1,18 +1,21 @@
- @layout = "landing"
= img "devices.png"
+.note
+ This is draft content for the next version of
+ %a{:href => 'http://design.gnome.org'} GNOME Human Interface Guidelines.
.blurb
%h2
Design Guidelines
A small set of pages containing essential design
- %a{:href => 'principles.html' } advice and rules.
+ = link "advice and rules.", "design_principles.html"
.blurb
%h2
Design Patterns
A larger collection of building blocks that you can use to design your
- %a{:href => 'basics-appmenu.html'} application.
+ = link 'application.', 'basics-appmenu.html'
The design patterns include a variety of different design elements that you can utilise. Some patterns describe individual user interface components, such as check boxes or lists. Others describe more complex arrangements of components.
diff --git a/hig3/src/stylesheets/hig.scss b/hig3/src/stylesheets/hig.scss
index a9c4b60..33d24bb 100644
--- a/hig3/src/stylesheets/hig.scss
+++ b/hig3/src/stylesheets/hig.scss
@@ -11,6 +11,9 @@ $columns: 16;
$c-link: #3465a4;
$c-header: #888a85;
$c-footer: #d3d7cf;
+$c-note: #E5D693;
+$c-important: #f25252;
+$c-border: #ccc;
a {
color: $c-link;
@@ -49,6 +52,62 @@ h1,h2,h3,h4,h5,h6 {
h1 { font-size: 200%; }
+table {
+ border: 1px solid $c-border;
+ min-width: 80%;
+
+ tr {
+ th {
+ text-align: left;
+ color: #999;
+ padding: .6em .8em 1em .8em;
+ font-size: 90%;
+ }
+ td {
+ padding: .6em .8em;
+ }
+ }
+}
+
+.shortcut {
+ display: inline-block;
+ min-width: 4em;
+ text-align: center;
+ background-color: lighten($c-border, 15%);
+ @include gradient-vertical(lighten($c-border,20%),lighten($c-border,5%));
+ @include text-shadow(0,1px,0,#fff);
+ border: 1px solid $c-border;
+ padding: .2em .5em;
+ font-size: 80%;
+ @include box-shadow(0,1px,1px,rgba(0,0,0,0.5));
+ @include border-radius(3px);
+}
+
+.note {
+ background-color: $c-note;
+ @include gradient-vertical(lighten($c-note,25%), lighten($c-note, 20%));
+ border: 1px solid $c-note;
+ padding: 1em;
+ @include box-shadow(0,1px, 2px, $c-note);
+ box-shadow: 0 1px 2px $c-note, 0 1px rgba(255, 255, 255, 0.4) inset;
+ @include border-radius(5px);
+ margin: .5em 0 2em 0;
+}
+
+.important {
+ color: #fff;
+ @include text-shadow(0,1px,1px,rgba(0,0,0,0.7));
+ font-weight: bold;
+ background-color: $c-important;
+ @include gradient-vertical(lighten($c-important,25%), lighten($c-important, 20%));
+ border: 1px solid $c-important;
+ padding: 1em;
+ @include box-shadow(0,1px, 2px, $c-note);
+ box-shadow: 0 1px 2px $c-important, 0 1px rgba(255, 255, 255, 0.4) inset;
+ @include border-radius(5px);
+ margin: .5em 0 2em 0;
+}
+
.punchline {
font-size: 200%;
color: $c-header;
@@ -160,7 +219,7 @@ h1 { font-size: 200%; }
a {
padding-left: 24px;
color: $c-link;
- outlien: none;
+ outline: none;
}
&.current {
a {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
