305 lines
18 KiB
HTML
305 lines
18 KiB
HTML
<!doctype html>
|
|
<html class="no-js">
|
|
<head><meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
|
<link rel="index" title="Index" href="genindex.html" /><link rel="search" title="Search" href="search.html" /><link rel="next" title="Guidelines" href="guidelines.html" /><link rel="prev" title="Design Principles" href="principles.html" />
|
|
|
|
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
|
<title>Tools & Resources - GNOME Human Interface Guidelines documentation</title>
|
|
<link rel="stylesheet" type="text/css" href="_static/pygments.css" />
|
|
<link rel="stylesheet" type="text/css" href="_static/styles/furo.css" />
|
|
<link rel="stylesheet" type="text/css" href="_static/styles/furo-extensions.css" />
|
|
<link rel="stylesheet" type="text/css" href="_static/gnome.css" />
|
|
|
|
|
|
|
|
<style>
|
|
:root {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
}
|
|
|
|
/* For allowing end-user-specific overrides */
|
|
.override-light {
|
|
--color-code-background: #f8f8f8;
|
|
--color-code-foreground: black;
|
|
--color-brand-primary: #4a86cf;
|
|
--color-brand-content: #4a86cf;
|
|
|
|
}
|
|
.override-dark {
|
|
--color-code-background: #202020;
|
|
--color-code-foreground: #d0d0d0;
|
|
|
|
}
|
|
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="_static/pygments_dark.css"></head>
|
|
<body dir="">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
<symbol id="svg-toc" viewBox="0 0 24 24">
|
|
<title>Contents</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
|
<line x1="4" y1="6" x2="20" y2="6" />
|
|
<line x1="10" y1="12" x2="20" y2="12" />
|
|
<line x1="6" y1="18" x2="20" y2="18" />
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|
<title>Menu</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-menu">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</symbol>
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|
<title>Expand</title>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-chevron-right">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
|
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
|
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
|
<label class="overlay toc-overlay" for="__toc"></label>
|
|
|
|
|
|
|
|
<div class="page">
|
|
<header class="mobile-header">
|
|
<div class="header-left">
|
|
<label class="nav-overlay-icon" for="__navigation">
|
|
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
<div class="header-center">
|
|
<a href="index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
|
</div>
|
|
<div class="header-right">
|
|
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
<aside class="sidebar-drawer">
|
|
<div class="sidebar-container">
|
|
|
|
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="index.html">
|
|
|
|
<div class="sidebar-logo-container">
|
|
<img class="sidebar-logo" src="_static/logo.svg" alt="Logo"/>
|
|
</div>
|
|
|
|
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
|
|
|
</a><form class="sidebar-search-container" method="get" action="search.html">
|
|
<input class="sidebar-search" placeholder=Search name="q">
|
|
<input type="hidden" name="check_keywords" value="yes">
|
|
<input type="hidden" name="area" value="default">
|
|
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
|
<ul class="current">
|
|
<li class="toctree-l1"><a class="reference internal" href="principles.html">Design Principles</a></li>
|
|
<li class="toctree-l1 current current-page"><a class="current reference internal" href="#">Tools & Resources</a></li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/app-naming.html">App Naming</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/app-icons.html">App Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/pointer-touch.html">Pointer & Touch</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/keyboard.html">Keyboard</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/ui-icons.html">UI Icons</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/ui-styling.html">UI Styling</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/writing-style.html">Writing Style</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/typography.html">Typography</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/navigation.html">Navigation</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/adaptive.html">Scaling & Adaptiveness</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="guidelines/accessibility.html">Accessibility</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="patterns.html">Patterns</a><input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="patterns/containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/windows.html">Windows</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/header-bars.html">Header Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/popovers.html">Popovers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/utility-panes.html">Utility Panes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/boxed-lists.html">Boxed Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/grid-views.html">Grid Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/list-column-views.html">List & Column Views</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/containers/selection-mode.html">Selection & Edit Modes</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="patterns/nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/nav/browsing.html">Browsing</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/nav/view-switchers.html">View Switchers</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/nav/tabs.html">Tabs</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/nav/sidebars.html">Sidebars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/nav/search.html">Search</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="patterns/controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/buttons.html">Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/menus.html">Menus</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/switches.html">Switches</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/text-fields.html">Text Fields</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/checkboxes.html">Checkboxes</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/radio-buttons.html">Radio Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/drop-downs.html">Drop-Down Lists</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/sliders.html">Sliders</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/spin-buttons.html">Spin Buttons</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/controls/overlaid.html">Overlaid Controls</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="patterns/feedback.html">Feedback</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/notifications.html">Notifications</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/toasts.html">Toasts</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/info-bars.html">Info Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/progress-bars.html">Progress Bars</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/spinners.html">Spinners</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/dialogs.html">Dialogs</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/placeholders.html">Placeholder Pages</a></li>
|
|
<li class="toctree-l3"><a class="reference internal" href="patterns/feedback/tooltips.html">Tooltips</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|
<li class="toctree-l2"><a class="reference internal" href="reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="reference/palette.html">Palette</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="reference/backgrounds.html">Backgrounds</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
<main class="main">
|
|
<div class="content">
|
|
<article role="main">
|
|
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|
</label>
|
|
<section id="tools-resources">
|
|
<h1>Tools & Resources<a class="headerlink" href="#tools-resources" title="Permalink to this headline">¶</a></h1>
|
|
<p>A variety of tools and resources are available for GNOME UX design. There is no requirement to use any of these, and designers and developers should use the tools with which they are most comfortable. However, in many cases these resources will help you to get up and running as quickly and easily as possible.</p>
|
|
<p>Most of these tools and resources are referenced elsewhere in the HIG, where they are most relevant.</p>
|
|
<section id="general-resources">
|
|
<h2>General Resources<a class="headerlink" href="#general-resources" title="Permalink to this headline">¶</a></h2>
|
|
<ul class="simple">
|
|
<li><p>Color palette: <a class="reference external" href="https://gitlab.gnome.org/Teams/Design/HIG-app-icons/raw/master/GNOME%20HIG.gpl?inline=false">Inkscape/GIMP format</a>, <a class="reference internal" href="reference/palette.html"><span class="doc">reference table</span></a></p></li>
|
|
<li><p>Cantarell font: pre-installed in GNOME-based distributions and <a class="reference external" href="https://cantarell.gnome.org">available to download</a>.</p></li>
|
|
</ul>
|
|
</section>
|
|
<section id="apps">
|
|
<h2>Apps<a class="headerlink" href="#apps" title="Permalink to this headline">¶</a></h2>
|
|
<p>The following apps are all available to install:</p>
|
|
<ul class="simple">
|
|
<li><p><a class="reference external" href="https://flathub.org/apps/details/org.gnome.design.IconLibrary">Icon Library</a>: for finding icons to use in GNOME UI</p></li>
|
|
<li><p><a class="reference external" href="https://flathub.org/apps/details/org.gnome.design.Typography">Typography</a>: for selecting text styles and commonly used characters</p></li>
|
|
<li><p><a class="reference external" href="https://flathub.org/apps/details/org.gnome.design.AppIconPreview">App Icon Preview</a>: app icon creation assistant</p></li>
|
|
<li><p><a class="reference external" href="https://flathub.org/apps/details/org.gnome.design.SymbolicPreview">Symbolic Preview</a>: symbolic icon creation assistant</p></li>
|
|
<li><p><a class="reference external" href="https://flathub.org/apps/details/org.gnome.design.Palette">Color Palette</a>: reference for the GNOME color palette</p></li>
|
|
</ul>
|
|
</section>
|
|
<section id="demo-apps-toolkit">
|
|
<h2>Demo Apps & Toolkit<a class="headerlink" href="#demo-apps-toolkit" title="Permalink to this headline">¶</a></h2>
|
|
<p>When using the various design patterns and UI elements in the HIG, it is recommended to look at existing examples to see how they look and work in practice. This can currently be done with the following apps and tools:</p>
|
|
<ul class="simple">
|
|
<li><p>GTK 4 demo: this includes demos for most of the widgets in GTK 4 (not all of these are recommended for use). To run it, install the GTK 4 development library and run <code class="docutils literal notranslate"><span class="pre">gtk4-demo</span></code>.</p></li>
|
|
<li><p><a class="reference external" href="https://wiki.gnome.org/Projects/GTK/Inspector">GTK inspector</a>: can be used to inspect any GTK app, including the demo apps.</p></li>
|
|
</ul>
|
|
</section>
|
|
<section id="svg-templates-examples">
|
|
<h2>SVG Templates & Examples<a class="headerlink" href="#svg-templates-examples" title="Permalink to this headline">¶</a></h2>
|
|
<p>The following templates can be used as a starting point for mockups and icons.</p>
|
|
<ul class="simple">
|
|
<li><p><a class="reference external" href="https://gitlab.gnome.org/Teams/Design/mockup-resources">App mockup template (SVG)</a></p></li>
|
|
<li><p><a class="reference external" href="https://gitlab.gnome.org/Teams/Design/HIG-app-icons/-/blob/master/template.svg">App icon template (SVG)</a></p></li>
|
|
</ul>
|
|
<p>GNOME design operates in the open, and <a class="reference external" href="https://gitlab.gnome.org/Teams/Design">all its work is therefore publicly visible, and can be freely reused</a>. However, be aware that not all of this work is up to date or follows the latest recommendations.</p>
|
|
</section>
|
|
</section>
|
|
|
|
</article>
|
|
<footer>
|
|
|
|
<div class="related-pages">
|
|
<a class="next-page" href="guidelines.html">
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Next</span>
|
|
</div>
|
|
<div class="title">Guidelines</div>
|
|
</div>
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
</a>
|
|
<a class="prev-page" href="principles.html">
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|
<div class="page-info">
|
|
<div class="context">
|
|
<span>Previous</span>
|
|
</div>
|
|
|
|
<div class="title">Design Principles</div>
|
|
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</footer>
|
|
</div>
|
|
<aside class="toc-drawer">
|
|
|
|
|
|
<div class="toc-sticky toc-scroll">
|
|
<div class="toc-title-container">
|
|
<span class="toc-title">
|
|
Contents
|
|
</span>
|
|
</div>
|
|
<div class="toc-tree-container">
|
|
<div class="toc-tree">
|
|
<ul>
|
|
<li><a class="reference internal" href="#">Tools & Resources</a><ul>
|
|
<li><a class="reference internal" href="#general-resources">General Resources</a></li>
|
|
<li><a class="reference internal" href="#apps">Apps</a></li>
|
|
<li><a class="reference internal" href="#demo-apps-toolkit">Demo Apps & Toolkit</a></li>
|
|
<li><a class="reference internal" href="#svg-templates-examples">SVG Templates & Examples</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</aside>
|
|
</main>
|
|
</div><script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script>
|
|
<script src="_static/jquery.js"></script>
|
|
<script src="_static/underscore.js"></script>
|
|
<script src="_static/doctools.js"></script>
|
|
<script src="_static/scripts/main.js"></script>
|
|
</body>
|
|
</html> |