gem-graph-client/doc/GTK-docs/gnome-dev-guidelines/developer.gnome.org/hig/guidelines/app-naming.html

321 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="App Icons" href="app-icons.html" /><link rel="prev" title="Guidelines" href="../guidelines.html" />
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
<title>App Naming - 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"><a class="reference internal" href="../resources.html">Tools &amp; Resources</a></li>
<li class="toctree-l1 current has-children"><a class="reference internal" href="../guidelines.html">Guidelines</a><input checked="" 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 class="current">
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">App Naming</a></li>
<li class="toctree-l2"><a class="reference internal" href="app-icons.html">App Icons</a></li>
<li class="toctree-l2"><a class="reference internal" href="pointer-touch.html">Pointer &amp; Touch</a></li>
<li class="toctree-l2"><a class="reference internal" href="keyboard.html">Keyboard</a></li>
<li class="toctree-l2"><a class="reference internal" href="ui-icons.html">UI Icons</a></li>
<li class="toctree-l2"><a class="reference internal" href="ui-styling.html">UI Styling</a></li>
<li class="toctree-l2"><a class="reference internal" href="writing-style.html">Writing Style</a></li>
<li class="toctree-l2"><a class="reference internal" href="typography.html">Typography</a></li>
<li class="toctree-l2"><a class="reference internal" href="navigation.html">Navigation</a></li>
<li class="toctree-l2"><a class="reference internal" href="adaptive.html">Scaling &amp; Adaptiveness</a></li>
<li class="toctree-l2"><a class="reference internal" href="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 &amp; Column Views</a></li>
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/selection-mode.html">Selection &amp; 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="app-naming">
<h1>App Naming<a class="headerlink" href="#app-naming" title="Permalink to this headline"></a></h1>
<p>App names are a vital and essential part of the user experience. Not only do they play an important practical role in communicating what an application does, but they also establish app identity and character.</p>
<p>The visual aspect of app names should also not be overlooked: the size and shape of app names have both practical and aesthetic consequences.</p>
<p>Naming is hard, and the following guidelines dont attempt to be a complete solution. However, they do provide details on what kind of name to aim for, as well as some tips on how to come up with a good one.</p>
<section id="what-to-aim-for">
<h2>What to Aim For<a class="headerlink" href="#what-to-aim-for" title="Permalink to this headline"></a></h2>
<p>A good app name should:</p>
<ul class="simple">
<li><p>Consist of one or two simple nouns.</p></li>
<li><p>Be related to the apps domain (for example: Celluloid for a video app)</p></li>
<li><p>Be short (less than 15 characters).</p></li>
<li><p>Be easy to pronounce.</p></li>
<li><p>Be easily paired with a good app icon, such as by referencing a physical object.</p></li>
<li><p>Use <a class="reference internal" href="writing-style.html#header-capitalization"><span class="std std-ref">header capitalization</span></a> (for example: Icon Preview instead of Icon preview).</p></li>
</ul>
<p>Likewise, a good name should avoid:</p>
<ul class="simple">
<li><p>Using trademarks or names of other projects (for example: GNOME Instant Video).</p></li>
<li><p>Having a “G” prefix (for example: GMusic).</p></li>
<li><p>Overly complicated names and/or acronyms.</p></li>
<li><p>Puns and inside jokes.</p></li>
<li><p>Non-standard punctuation or whitespace (for example: SuperWriter).</p></li>
<li><p>Made-up words or word combinations.</p></li>
</ul>
</section>
<section id="choosing-a-name">
<h2>Choosing a Name<a class="headerlink" href="#choosing-a-name" title="Permalink to this headline"></a></h2>
<p>The following process can be an effective way to select a good name.</p>
<section id="brainstorm">
<h3>1. Brainstorm<a class="headerlink" href="#brainstorm" title="Permalink to this headline"></a></h3>
<p>First, generate ideas for your app name. One way to do this is to write down all the words from your apps domain (for example, for a video player, you could write down words relating to video, cinema and TV). Use a thesaurus to find alternatives based on the names youve already identified.</p>
</section>
<section id="come-up-with-a-shortlist">
<h3>2. Come up with a shortlist<a class="headerlink" href="#come-up-with-a-shortlist" title="Permalink to this headline"></a></h3>
<p>Once you have a long list of names, sort through them and identify the strongest candidates. As a rule of thumb, you might start with around 20 names, and reduce it to a shortlist of five.</p>
</section>
<section id="check-if-any-of-the-names-are-taken">
<h3>3. Check if any of the names are taken<a class="headerlink" href="#check-if-any-of-the-names-are-taken" title="Permalink to this headline"></a></h3>
<p>Search the web, app platforms and hosting sites to see if any of your shortlisted names are already in use. If they are, discard them.</p>
</section>
<section id="pick-a-winner">
<h3>4. Pick a winner<a class="headerlink" href="#pick-a-winner" title="Permalink to this headline"></a></h3>
<p>Once you have a shortlist of viable names, you just need to select one. Here it can be useful to refer back to the characterics of good app names listed above. You can also think about other criteria, including:</p>
<ul class="simple">
<li><p>How unique the name is compared with other apps.</p></li>
<li><p>Whether the name has a pleasant sound when spoken aloud.</p></li>
<li><p>If the name reflects the overall character of your app.</p></li>
</ul>
</section>
</section>
</section>
</article>
<footer>
<div class="related-pages">
<a class="next-page" href="app-icons.html">
<div class="page-info">
<div class="context">
<span>Next</span>
</div>
<div class="title">App Icons</div>
</div>
<svg><use href="#svg-arrow-right"></use></svg>
</a>
<a class="prev-page" href="../guidelines.html">
<svg><use href="#svg-arrow-right"></use></svg>
<div class="page-info">
<div class="context">
<span>Previous</span>
</div>
<div class="title">Guidelines</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="#">App Naming</a><ul>
<li><a class="reference internal" href="#what-to-aim-for">What to Aim For</a></li>
<li><a class="reference internal" href="#choosing-a-name">Choosing a Name</a><ul>
<li><a class="reference internal" href="#brainstorm">1. Brainstorm</a></li>
<li><a class="reference internal" href="#come-up-with-a-shortlist">2. Come up with a shortlist</a></li>
<li><a class="reference internal" href="#check-if-any-of-the-names-are-taken">3. Check if any of the names are taken</a></li>
<li><a class="reference internal" href="#pick-a-winner">4. Pick a winner</a></li>
</ul>
</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>