CINXE.COM

<!DOCTYPE html> <html class="client-nojs" lang="en" dir="ltr"> <head> <meta charset="UTF-8"/> <title>Welcome to the Design and User Experience team - The Document Foundation Wiki</title> <script>document.documentElement.className="client-js";RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"c4e7c2f23606f1fa63bd1429","wgCSPNonce":false,"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Design","wgTitle":"Design","wgCurRevisionId":748580,"wgRevisionId":748580,"wgArticleId":908,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Design"],"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Design","wgRelevantArticleId":908,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":["autoconfirmed"],"wgRestrictionMove":["autoconfirmed"],"wgVector2022PreviewPages":[],"wgULSAcceptLanguageList":[], "wgULSCurrentAutonym":"English","wgInternalRedirectTargetUrl":"/Design","wgSmjUseCdn":false,"wgSmjUseChem":true,"wgSmjDisplayMath":[],"wgSmjExtraInlineMath":[],"wgSmjScale":1,"wgSmjEnableMenu":true,"wgSmjDisplayAlign":"left","wgTranslatePageTranslation":"source","wgULSPosition":"personal","wgULSisCompactLinksEnabled":true};RLSTATE={"skins.vector.user.styles":"ready","site.styles":"ready","user.styles":"ready","skins.vector.user":"ready","user":"ready","user.options":"loading","ext.translate":"ready","ext.translate.tag.languages":"ready","mediawiki.ui.button":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","mediawiki.ui.icon":"ready","ext.translate.edit.documentation.styles":"ready","ext.uls.pt":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.SimpleMathJax","site","mediawiki.page.ready","skins.vector.js","skins.vector.es6","mediawiki.misc-authed-pref","ext.translate.edit.documentation","ext.uls.compactlinks","ext.uls.interface"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.implement("user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"});});});</script> <link rel="stylesheet" href="/load.php?lang=en&modules=ext.translate%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cmediawiki.ui.button%2Cicon%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022"/> <script async="" src="/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""/> <link rel="stylesheet" href="/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"/> <meta name="generator" content="MediaWiki 1.39.11"/> <meta name="format-detection" content="telephone=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"/> <link rel="apple-touch-icon" href="/logo.svg"/> <link rel="icon" href="/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch_desc.php" title="The Document Foundation Wiki (en)"/> <link rel="EditURI" type="application/rsd+xml" href="https://wiki.documentfoundation.org/api.php?action=rsd"/> <link rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/"/> <link rel="alternate" type="application/atom+xml" title="The Document Foundation Wiki Atom feed" href="/index.php?title=Special:RecentChanges&feed=atom"/> <link rel="alternate" type="application/rss+xml" title="The Document Foundation Wiki RSS feed" href="/index.php?title=Special:RecentChanges&feed=rss"/> </head> <body class="skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Design rootpage-Design skin-vector-2022 action-view skin--responsive vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-language-alert-in-sidebar-disabled vector-feature-sticky-header-disabled vector-feature-sticky-header-edit-disabled vector-feature-table-of-contents-disabled vector-feature-visual-enhancement-next-disabled"><div class="mw-page-container"> <span id="top-page"></span> <a class="mw-jump-link" href="#content">Jump to content</a> <div class="mw-page-container-inner"> <input type="checkbox" id="mw-sidebar-checkbox" class="mw-checkbox-hack-checkbox" > <header class="mw-header"> <div class="mw-header-aside"> <label id="mw-sidebar-button" class="mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet mw-ui-icon-element" for="mw-sidebar-checkbox" role="button" aria-controls="mw-panel" data-event-name="ui.sidebar" tabindex="0" title="Main menu"> <span>Toggle sidebar</span> </label> <a href="/Special:MyLanguage/Main_Page" class="mw-logo"> <span class="mw-logo-container"> <strong class="mw-logo-wordmark">The Document Foundation Wiki</strong> </span> </a> </div> <div class="mw-header-content"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/Special:Search" title="Search The Document Foundation Wiki [f]" accesskey="f" class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search search-toggle"> <span>Search</span> </a> <div> <form action="/index.php" id="searchform" class="vector-search-box-form"> <div id="simpleSearch" class="vector-search-box-inner" data-search-loc="header-moved"> <input class="vector-search-box-input" type="search" name="search" placeholder="Search The Document Foundation Wiki" aria-label="Search The Document Foundation Wiki" autocapitalize="sentences" title="Search The Document Foundation Wiki [f]" accesskey="f" id="searchInput" > <input type="hidden" name="title" value="Special:Search"> <input id="mw-searchButton" class="searchButton mw-fallbackSearchButton" type="submit" name="fulltext" title="Search the pages for this text" value="Search"> <input id="searchButton" class="searchButton" type="submit" name="go" title="Go to a page with this exact name if it exists" value="Go"> </div> </form> </div> </div> <nav class="vector-user-links" aria-label="Personal tools" role="navigation" > <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet mw-portlet-vector-user-menu-overflow vector-user-menu-overflow" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="ca-uls" class="user-links-collapsible-item mw-list-item active"><a href="#" class="uls-trigger mw-ui-button mw-ui-quiet"><span class="mw-ui-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a></li></ul> </div> </div> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-out vector-menu-dropdown" title="More options" > <input type="checkbox" id="p-personal-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-personal" class="vector-menu-checkbox" /> <label id="p-personal-label" for="p-personal-checkbox" class="vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis" > <span class="vector-menu-heading-label">Personal tools</span> </label> <div class="vector-menu-content"> <div class="vector-user-menu-create-account"><a href="/index.php?title=Special:CreateAccount&returnto=Design" class="vector-menu-content-item user-links-collapsible-item" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="mw-ui-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></div> <div class="vector-user-menu-login"><a href="/index.php?title=Special:UserLogin&returnto=Design" class="vector-menu-content-item vector-menu-content-item-login" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="mw-ui-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></div> <ul class="vector-menu-content-list"></ul> </div> </div> </nav> </div> </header> <div class="vector-sidebar-container vector-sidebar-container-no-toc"> <div id="mw-navigation"> <nav id="mw-panel" class="mw-sidebar" aria-label="Site" role="navigation"> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation vector-menu-portal portal" > <div id="p-navigation-label" class="vector-menu-heading " > <span class="vector-menu-heading-label">Navigation</span> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="n-mainpage-description" class="mw-list-item"><a href="/Special:MyLanguage/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-getinvolved-description" class="mw-list-item"><a href="/Special:MyLanguage/Get_Involved"><span>Get Involved</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-donate-description" class="mw-list-item"><a href="https://www.libreoffice.org/donate/?pk_campaign=wiki"><span>Support LibreOffice!</span></a></li></ul> </div> </div> <div id="p-editinghelp" class="vector-menu mw-portlet mw-portlet-editinghelp vector-menu-portal portal" > <div id="p-editinghelp-label" class="vector-menu-heading " > <span class="vector-menu-heading-label">Editing the wiki</span> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="n-helppage-description" class="mw-list-item"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents" rel="nofollow"><span>Help resources</span></a></li></ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb vector-menu-portal portal" > <div id="p-tb-label" class="vector-menu-heading " > <span class="vector-menu-heading-label">Tools</span> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="t-whatlinkshere" class="mw-list-item"><a href="/Special:WhatLinksHere/Design" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/Special:RecentChangesLinked/Design" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-print" class="mw-list-item"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/index.php?title=Design&oldid=748580" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/index.php?title=Design&action=info" title="More information about this page"><span>Page information</span></a></li></ul> </div> </div> </nav> </div> </div> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox"> <div class="mw-table-of-contents-container"> <div class="vector-sticky-toc-container mw-sticky-header-element"> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body" role="main"> <a id="top"></a> <header class="mw-body-header"> <div id="p-lang-btn" class="vector-menu mw-portlet mw-portlet-lang vector-menu-dropdown" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-menu-checkbox mw-interlanguage-selector " aria-label="This article exist only in this language. Add the article for other languages" /> <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-menu-heading mw-ui-progressive mw-portlet-lang-heading-0 mw-ui-button mw-ui-quiet" > <span class="mw-ui-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span><span class="vector-menu-heading-label">Add languages</span> </label> <div class="vector-menu-content"> <ul class="vector-menu-content-list"></ul> <div class="after-portlet after-portlet-lang"><span class="uls-after-portlet-link"></span></div> </div> </div> <h1 id="firstHeading" class="firstHeading mw-first-heading">Welcome to the Design and User Experience team</h1> </header> <nav class="vector-article-toolbar" aria-label="Tools" role="navigation"> <div class="mw-article-toolbar-container"> <div id="left-navigation"> <div id="p-associated-pages" class="vector-menu mw-portlet mw-portlet-associated-pages vector-menu-tabs" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="ca-nstab-main" class="selected mw-list-item"><a href="/Design" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="mw-list-item"><a href="/Talk:Design" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li></ul> </div> </div> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet vector-menu-dropdown" > <input type="checkbox" id="p-variants-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-variants" class="vector-menu-checkbox" aria-label="Change language variant" /> <label id="p-variants-label" for="p-variants-checkbox" class="vector-menu-heading " > <span class="vector-menu-heading-label">English</span> </label> <div class="vector-menu-content"> <ul class="vector-menu-content-list"></ul> </div> </div> </div> <div id="right-navigation" class="vector-collapsible "> <div id="p-views" class="vector-menu mw-portlet mw-portlet-views vector-menu-tabs" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="ca-view" class="selected mw-list-item"><a href="/Design"><span>Read</span></a></li><li id="ca-viewsource" class="mw-list-item"><a href="/WikiAction/edit/Design" title="This page is protected.
You can view its source [e]" accesskey="e"><span>View source</span></a></li><li id="ca-history" class="mw-list-item"><a href="/WikiAction/history/Design" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li></ul> </div> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-menu-dropdown vector-has-collapsible-items" title="More options" > <input type="checkbox" id="p-cactions-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-cactions" class="vector-menu-checkbox" /> <label id="p-cactions-label" for="p-cactions-checkbox" class="vector-menu-heading " > <span class="vector-menu-heading-label">More</span> </label> <div class="vector-menu-content"> <ul class="vector-menu-content-list"><li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/Design"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/WikiAction/edit/Design"><span>View source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/WikiAction/history/Design"><span>View history</span></a></li></ul> </div> </div> </div> </div> </nav> <div id="bodyContent" class="vector-body" data-mw-ve-target-container> <div class="mw-body-subheader"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From The Document Foundation Wiki</div> </div> <div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-parser-output"><div class="plainlinks" style="background: black; padding: 1px 5px; border-width: 0 0 6px 0; border-style: solid; border-image: linear-gradient(to left, #0369A3, #18a303) 1; font-size: 88%; font-variant: all-small-caps; font-weight: bolder;"> <p><a class="external text" href="https://www.documentfoundation.org/"><span style="color:#fff; padding:0px 10px">TDF</span></a> <a class="external text" href="https://www.libreoffice.org/"><span style="color:#fff; padding:0px 10px">LibreOffice</span></a> <a rel="nofollow" class="external text" href="https://www.documentliberation.org/"><span style="color:#fff; padding:0px 10px">Document Liberation Project</span></a> <a class="external text" href="https://planet.documentfoundation.org/"><span style="color:#fff; padding:0px 10px">Community Blogs</span></a> <a class="external text" href="https://translations.documentfoundation.org/languages/en"><span style="color:#fff; padding:0px 10px">Weblate</span></a> <a class="external text" href="https://nextcloud.documentfoundation.org/"><span style="color:#fff; padding:0px 10px">Nextcloud</span></a> <a class="external text" href="https://redmine.documentfoundation.org"><span style="color:#fff; padding:0px 10px">Redmine</span></a> <a class="external text" href="https://ask.libreoffice.org"><span style="color:#fff; padding:0px 10px">Ask LibreOffice</span></a> <a class="external text" href="https://www.libreoffice.org/donate/"><span style="color:#fff; padding:0px 10px">Donate</span></a> </p> </div> <div class="lang" style="background: rgba( 0, 0, 0, 0.75 ); border:none; border-radius: 0 0 5px 5px; font-size: 105%; margin: 0; box-shadow: 0 2px 3px rgb(0, 0, 0, 0.1)"><ul> <li class="lang_main"><a href="/Special:MyLanguage/Main_Page" title="Special:MyLanguage/Main Page"><span style="color:#fff;">Wiki Home</span></a> </li> <li><a href="/Special:MyLanguage/Development" title="Special:MyLanguage/Development"><span style="color:#fff;">Development</span></a> </li> <li><a href="/Special:MyLanguage/Design" title="Special:MyLanguage/Design"><span style="color:#fff; border-bottom: 2px solid #ffd74ccc; font-weight: bold;">Design</span></a> </li> <li><a href="/Special:MyLanguage/QA" title="Special:MyLanguage/QA"><span style="color:#fff;">QA</span></a> </li> <li><a href="/Special:MyLanguage/Events" title="Special:MyLanguage/Events"><span style="color:#fff;">Events</span></a> </li> <li><a href="/Special:MyLanguage/Documentation" title="Special:MyLanguage/Documentation"><span style="color:#fff;">Documentation</span></a> </li> <li><a href="/Special:MyLanguage/Website" title="Special:MyLanguage/Website"><span style="color:#fff;">Website</span></a> </li> <li><a href="/Special:MyLanguage/Language" title="Special:MyLanguage/Language"><span style="color:#fff;">Localization</span></a> </li> <li><a href="/Special:MyLanguage/Accessibility" title="Special:MyLanguage/Accessibility"><span style="color:#fff;">Accessibility</span></a> </li> <li><a href="/Special:MyLanguage/Marketing" title="Special:MyLanguage/Marketing"><span style="color:#fff;">Marketing</span></a> </li> <li><a href="/Special:MyLanguage/Diversity" title="Special:MyLanguage/Diversity"><span style="color:#fff;">Diversity</span></a> </li> <li><a href="/Special:MyLanguage/Help:Editing" title="Special:MyLanguage/Help:Editing"><span style="color:#fff;">Wiki Help</span></a> </li> </ul></div> <div class="lang" style="background: none; border: none; font-stretch: condensed; margin-bottom: 0"><ul> <li class="lang_main"><a href="/Special:MyLanguage/Design" title="Special:MyLanguage/Design"><span style="color:#023f62; border-bottom:2px solid #023f62;">Design Home</span></a> </li> <li><a href="/Special:MyLanguage/Design/Whiteboards" title="Special:MyLanguage/Design/Whiteboards"><span style="color:#023f62">Whiteboards</span></a> </li> <li><a href="/Special:MyLanguage/Design/Blueprints" title="Special:MyLanguage/Design/Blueprints"><span style="color:#023f62">Development Blueprints</span></a> </li> <li><a href="/Special:MyLanguage/Design/Principles" title="Special:MyLanguage/Design/Principles"><span style="color:#023f62">UX Principles</span></a> </li> <li><a href="/Special:MyLanguage/Design/Guidelines" title="Special:MyLanguage/Design/Guidelines"><span style="color:#023f62">UX Guidelines</span></a> </li> <li><a href="/Special:MyLanguage/Visual_Elements" title="Special:MyLanguage/Visual Elements"><span style="color:#023f62;">Artwork Resources</span></a> </li> <li><a href="/Special:MyLanguage/Marketing/Branding" title="Special:MyLanguage/Marketing/Branding"><span style="color:#023f62">Branding Guidelines</span></a> </li> <li><a href="/Special:MyLanguage/Design/Meetings" title="Special:MyLanguage/Design/Meetings"><span style="color:#023f62">Meetings</span></a> </li> </ul></div> <div class="mw-pt-languages noprint" lang="en" dir="ltr"><div class="mw-pt-languages-label">Other languages:</div><ul class="mw-pt-languages-list"><li><a href="/Design/id" class="mw-pt-progress mw-pt-progress--complete" title="Selamat datang di tim Perancangan dan Pengalaman Pengguna. (93% translated)" lang="id" dir="ltr">Bahasa Indonesia</a></li> <li><a href="/Design/de" class="mw-pt-progress mw-pt-progress--complete" title="Gestaltung (93% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/Design/nl" class="mw-pt-progress mw-pt-progress--complete" title="Ontwerp (100% translated)" lang="nl" dir="ltr">Nederlands</a></li> <li><a href="/Design/da" class="mw-pt-progress mw-pt-progress--complete" title="Design/da (93% translated)" lang="da" dir="ltr">dansk</a></li> <li><a href="/Design/es" class="mw-pt-progress mw-pt-progress--stub" title="Design/es (0% translated)" lang="es" dir="ltr">español</a></li> <li><a href="/Design/fr" class="mw-pt-progress mw-pt-progress--med" title="Bienvenue sur le wiki dédié au Design (46% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/Design/it" class="mw-pt-progress mw-pt-progress--complete" title="Progettazione (100% translated)" lang="it" dir="ltr">italiano</a></li> <li><a href="/Design/pt-br" class="mw-pt-progress mw-pt-progress--high" title="Design (75% translated)" lang="pt-BR" dir="ltr">português do Brasil</a></li> <li><a href="/Design/cs" class="mw-pt-progress mw-pt-progress--complete" title="Vítejte v týmu design a uživatelské zkušenosti. (89% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/Design/mn" class="mw-pt-progress mw-pt-progress--stub" title="Design/mn (0% translated)" lang="mn" dir="ltr">монгол</a></li> <li><a href="/Design/uk" class="mw-pt-progress mw-pt-progress--complete" title="Дизайн (100% translated)" lang="uk" dir="ltr">українська</a></li> <li><a href="/Design/ar" class="mw-pt-progress mw-pt-progress--low" title="التصميم (36% translated)" lang="ar" dir="rtl">العربية</a></li> <li><a href="/Design/skr" class="mw-pt-progress mw-pt-progress--stub" title="ڈیزائن (7% translated)" lang="skr" dir="rtl">سرائیکی</a></li> <li><a href="/Design/fa" class="mw-pt-progress mw-pt-progress--complete" title="طراحی (93% translated)" lang="fa" dir="rtl">فارسی</a></li> <li><a href="/Design/ne" class="mw-pt-progress mw-pt-progress--complete" title="डिजाइन (93% translated)" lang="ne" dir="ltr">नेपाली</a></li> <li><a href="/Design/zh" class="mw-pt-progress mw-pt-progress--low" title="设计 (29% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/Design/zh-cn" class="mw-pt-progress mw-pt-progress--stub" title="Design/zh-cn (0% translated)" lang="zh-Hans-CN" dir="ltr">中文（中国大陆）</a></li> <li><a href="/Design/ja" class="mw-pt-progress mw-pt-progress--stub" title="デザイン (11% translated)" lang="ja" dir="ltr">日本語</a></li></ul></div> <p><br /> We provide information on these pages about what we do, how we work, and how you may contribute. We have task for everyone who is interested to join. </p> <div class="contentgrid" style="margin: 0 auto 1em; display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); grid-gap: 10px; grid-auto-rows: minmax(350px, auto); width: auto;"> <div class="portal-box" style="display: flex; flex-direction: column;"> <div style="background-image: linear-gradient(#fff, #ccf4c6); border-bottom: 1px solid white; padding: 3px 15px; font-size: 1.2em; color: #18a303; font-weight: bold; text-shadow: #fff 0px 1px 1px;"><div id="We"></div> <a href="#We"> </a>What we do for LibreOffice</div> <div style="border: 1px solid #92e285; box-shadow: 0px 1px 3px #ddedc9; padding: 5px 15px 20px; background: #fff; flex-grow:1"> <p>User experience design (UX) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure with LibreOffice products. It encompasses traditional human-computer interaction design, and extends it by addressing all aspects including branding and design. </p><p>Usability engineering is based on structured methods for achieving efficiency and elegance in interface design. We run surveys and quick polls to get insights on how users work with LibreOffice. </p><p>With this knowledge we start with generic <a href="/Design/Guidelines" title="Design/Guidelines">human interaction guidelines</a>. Workflows are designed with two <a href="/Design/Guidelines/HIG_foundations#Persona" title="Design/Guidelines/HIG foundations">personas</a> in mind, Benjamin to target beginners and Eve for the advanced user. As stated in our manifesto we focus on </p> <ul><li>Simplicity by default with Full Functionality on demand</li> <li>Consistency over Efficiency</li> <li>Usability over Graphical Design</li></ul> <p>Of course we follow all <a href="/Design/Principles" title="Design/Principles">UX principles</a> too. </p><p>We also take care about <a href="/Special:MyLanguage/Accessibility" title="Special:MyLanguage/Accessibility">accessibility</a>, <a href="/Special:MyLanguage/Marketing/Branding" title="Special:MyLanguage/Marketing/Branding">branding</a> to the <a href="/Design/VisualElements" title="Design/VisualElements">visual design</a> including icons, and support the <a href="/Special:MyLanguage/QA/GetInvolved" title="Special:MyLanguage/QA/GetInvolved">QA</a>, <a href="/Special:MyLanguage/Marketing" title="Special:MyLanguage/Marketing">marketing</a> and <a href="/Special:MyLanguage/Development" title="Special:MyLanguage/Development">development</a> teams. </p> </div> </div> <div class="portal-box" style="display: flex; flex-direction: column;"> <div style="background-image: linear-gradient(#fff, #ccf4c6); border-bottom: 1px solid white; padding: 3px 15px; font-size: 1.2em; color: #18a303; font-weight: bold; text-shadow: #fff 0px 1px 1px;"><div id="You"></div> <a href="#You"> </a>What you can do</div> <div style="border: 1px solid #92e285; box-shadow: 0px 1px 3px #ddedc9; padding: 5px 15px 20px; background: #fff; flex-grow:1"> <p>The simplest ways to contribute to LibreOffice are to submit bugs and enhancement requests to our bugtracker or to review and comment on the reports of others. If you think something in LibreOffice breaks a <a href="/Design/Principles" title="Design/Principles">UX principle</a> or <a href="/Design/Guidelines" title="Design/Guidelines">guideline</a>, it's a UX bug. Learn more in the blog post about <a class="external text" href="https://design.blog.documentfoundation.org/2016/08/31/tickets-on-behalf-of-ux/">Tickets on Behalf of UX</a>, or in general from Fabiana Simoes's GUADEC presentation about <a rel="nofollow" class="external text" href="https://www.superlectures.com/guadec2013/how-to-not-report-your-ux-bug">How to not report your UX bug</a>. </p><p>We have tasks for everyone from the very beginner to advanced developers. LibreOffice calls simple tasks <a href="/QA/Easy_Hacks" title="QA/Easy Hacks">easyhack</a>, and together with the keyword “skilldesign” you may <a class="external text" href="https://bugs.documentfoundation.org/buglist.cgi?bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&keywords=easyHack%2C%20skillDesign&keywords_type=allwords&product=LibreOffice&query_format=advanced">search</a> the bugtracker. </p><p>A number of tasks are not listed in the bugtracker for some reason. For instance, create a new page at the wiki, draft a guideline, or create a mockup are better managed outside Bugzilla. For this purpose we use this wiki. Many tasks can be done by everyone, some require creativity, and other need more usability knowledge. </p><p><a class="external text" href="https://bugs.documentfoundation.org/buglist.cgi?keywords=needsUXEval&keywords_type=allwords&resolution=---&query_format=advanced">Bug reports and feature requests needing UX evaluation</a> are marked with the keyword needsUXEval. Feel free to add your comments and even sketches to the reports. Another approach is to look at <a class="external text" href="https://bugs.documentfoundation.org/buglist.cgi?bug_severity=enhancement&bug_status=UNCONFIRMED&query_format=advanced">unconfirmed feature requests</a> with a critical eye. One task of the UX team is to help decide on what features should not be added into the core application. </p> </div> </div> <div class="portal-box" style="display: flex; flex-direction: column;"> <div style="background-image: linear-gradient(#fff, #ccf4c6); border-bottom: 1px solid white; padding: 3px 15px; font-size: 1.2em; color: #18a303; font-weight: bold; text-shadow: #fff 0px 1px 1px;"><div id="How"></div> <a href="#How"> </a>How we work</div> <div style="border: 1px solid #92e285; box-shadow: 0px 1px 3px #ddedc9; padding: 5px 15px 20px; background: #fff; flex-grow:1"> <p>Usability is about users, so we basically observe, talk, interview, watch videos, and read comments to get an impression of what our users need. </p><p>We start new topics with the reference to the bug tracker, followed by the description of current state and how competitors solve the problem, in order to get a common understanding. The intended features are listed formally as functional requirements and non-functional constraints to the design. With this input we scribble mockups using <a rel="nofollow" class="external text" href="https://penpot.app/">Penpot</a>, <a rel="nofollow" class="external text" href="https://pencil.evolus.vn/">Pencil</a>, or <a class="external text" href="https://www.libreoffice.org/discover/draw/">LibreOffice Draw</a> and eventually, after a couple of iterations and discussions, the proposal is published on our <a class="external text" href="https://design.blog.documentfoundation.org/">design blog</a> to get input from the community. </p> </div> </div> <div class="portal-box" style="display: flex; flex-direction: column;"> <div style="background-image: linear-gradient(#fff, #ccf4c6); border-bottom: 1px solid white; padding: 3px 15px; font-size: 1.2em; color: #18a303; font-weight: bold; text-shadow: #fff 0px 1px 1px;"><div id="Tasks"></div> <a href="#Tasks"> </a>Open tasks</div> <div style="border: 1px solid #92e285; box-shadow: 0px 1px 3px #ddedc9; padding: 5px 15px 20px; background: #fff; flex-grow:1"> <p>We always have open tasks for creative people with no doing expertise, as well as more advanced topics for experienced usability engineers. Non-coding tasks are for instance: </p> <ul><li>Create new templates</li> <li>Design new artwork such as banners, icons, etc.</li></ul> <p>More advanced topic would be: </p> <ul><li>Scribble redesign mockups of dialogs</li> <li>Draft a guideline</li></ul> <p>All tasks are listed on our <a href="/Design/Whiteboards" title="Design/Whiteboards">Whiteboard</a> and <a href="/Design/Blueprints" title="Design/Blueprints">Blueprints</a> pages. And finished proposals can be found at the <a href="/Design/Whiteboards/Archive" title="Design/Whiteboards/Archive">Whiteboard archive</a>. </p> </div> </div> <div class="portal-box" style="display: flex; flex-direction: column;"> <div style="background-image: linear-gradient(#fff, #ccf4c6); border-bottom: 1px solid white; padding: 3px 15px; font-size: 1.2em; color: #18a303; font-weight: bold; text-shadow: #fff 0px 1px 1px;"><div id="Who"></div> <a href="#Who"> </a>Who we are</div> <div style="border: 1px solid #92e285; box-shadow: 0px 1px 3px #ddedc9; padding: 5px 15px 20px; background: #fff; flex-grow:1"> <p>We are people from all over the world with a wide variety of knowledge and different backgrounds. </p><p>Feel free to add yourself to the <a href="/Design/Team" title="Design/Team">list of team members</a>. </p> </div> </div> <div class="portal-box" style="display: flex; flex-direction: column;"> <div style="background-image: linear-gradient(#fff, #ccf4c6); border-bottom: 1px solid white; padding: 3px 15px; font-size: 1.2em; color: #18a303; font-weight: bold; text-shadow: #fff 0px 1px 1px;"><div id="Contact"></div> <a href="#Contact"> </a>Get in contact</div> <div style="border: 1px solid #92e285; box-shadow: 0px 1px 3px #ddedc9; padding: 5px 15px 20px; background: #fff; flex-grow:1"> <ul><li>Follow us on our <a class="external text" href="https://design.blog.documentfoundation.org">design blog</a>, <a rel="nofollow" class="external text" href="https://twitter.com/liboDesign">Twitter</a> and <a rel="nofollow" class="external text" href="https://t.me/LibreOfficeDesign">Telegram</a></li> <li>Talk to the designers on IRC at the <a rel="nofollow" class="external text" href="https://web.libera.chat/?chan=#libreoffice-design">#<kbd>libreoffice-design</kbd></a> <sup><span class="plainlinks"><a rel="nofollow" class="external text" href="irc://irc.libera.chat/#libreoffice-design"><span style="color:green;">IRC://</span></a></span></sup> channel on Libera Chat or use <a rel="nofollow" class="external text" href="https://matrix.to/#/%23libreoffice-design%3Adocumentfoundation.org">Matrix</a>; both are bridged to Telegram</li> <li>Register to the <a class="external text" href="https://www.libreoffice.org/get-help/mailing-lists/#design">design mailing list</a> and write emails to all people on this list</li> <li>Join the weekly <a class="external text" href="https://jitsi.documentfoundation.org/design">Jitsi meeting</a> every (biweekly alternating) Wednesday/Thursday, 7pm/1pm UTC (20:00/14:00 CET+1). These calls are open to everyone. The agenda is tracked in the <a class="external text" href="http://pad.documentfoundation.org/p/design">minutes</a>, and shared on the <a class="external text" href="https://listarchives.libreoffice.org/global/design/">mailing list</a>. An <a class="external text" href="https://wiki.documentfoundation.org/Design/Meetings">archive of meeting minutes</a> is kept.</li></ul> </div> </div> </div>   </div> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://wiki.documentfoundation.org/index.php?title=Design&oldid=748580">https://wiki.documentfoundation.org/index.php?title=Design&oldid=748580</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/Category:Design" title="Category:Design">Design</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" role="contentinfo" > <ul id="footer-info"> <li id="footer-info-credits">This page was last edited 08:53, 24 April 2024 by <a href="/User:Htietze" class="mw-userlink" title="User:Htietze"><bdi>Heiko Tietze</bdi></a>. Based on work by <a href="/User:Chtfn" class="mw-userlink" title="User:Chtfn"><bdi>Stéphane Guillou</bdi></a> and <a href="/User:Beluga" class="mw-userlink" title="User:Beluga"><bdi>Ilmari Lauhakangas</bdi></a> and <a href="/WikiAction/credits/Design" title="Design">others</a>.</li> <li id="footer-info-copyright">Please note that all contributions to The Document Foundation Wiki are considered to be released under the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>, unless otherwise specified. This does not include the source code of LibreOffice, which is licensed under the GNU Lesser General Public License (<a href="https://www.libreoffice.org/download/license/">LGPLv3</a>). "LibreOffice" and "The Document Foundation" are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="/TradeMark_Policy">trademark policy</a> (see <a href="/Project:Copyrights">Project:Copyrights</a> for details). LibreOffice was based on OpenOffice.org.<br/>If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="/Project:Privacy_Policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/Project:About">About The Document Foundation Wiki</a></li> <li id="footer-places-disclaimer"><a href="/Project:General_disclaimer">Imprint</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://creativecommons.org/licenses/by-sa/3.0/"><img src="/resources/assets/licenses/cc-by-sa.png" alt="the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>, unless otherwise specified. This does not include the source code of LibreOffice, which is licensed under the <a href="https://www.libreoffice.org/download/license/">Mozilla Public License v2.0</a>. "LibreOffice" and "The Document Foundation" are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="/TradeMark Policy">trademark policy</a> (see <a href="/Project:Copyrights">Project:Copyrights</a> for details). LibreOffice was based on OpenOffice.org.<br/>If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here." width="88" height="31" loading="lazy"/></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/"><img src="/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"/></a></li> </ul> </footer> </div> </div> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgPageParseReport":{"limitreport":{"cputime":"0.104","walltime":"0.137","ppvisitednodes":{"value":957,"limit":1000000},"postexpandincludesize":{"value":19464,"limit":2097152},"templateargumentsize":{"value":8376,"limit":2097152},"expansiondepth":{"value":9,"limit":100},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":3127,"limit":5000000},"timingprofile":["100.00% 118.523 1 -total"," 8.20% 9.714 1 Template:Menu.Design"," 5.50% 6.518 1 Template:Menu"," 4.52% 5.355 7 Template:SubMenuEntryAlternative"," 4.40% 5.221 1 Template:TopMenu"," 4.30% 5.099 6 Template:Portal_box"," 3.33% 3.948 7 Template:MenuEntryAlternative"," 3.21% 3.807 13 Template:MenuEntry"," 1.85% 2.194 1 Template:Irc"," 1.27% 1.509 1 Template:Rename"]},"cachereport":{"origin":"wiki","timestamp":"20250217155552","ttl":1209600,"transientcontent":false}}});});</script>  <script type="text/javascript"> var _paq = _paq || []; _paq.push(["disableCookies"]); _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u = (("https:" == document.location.protocol) ? "https" : "http") + "://"+"piwik.documentfoundation.org/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "44"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script>   <noscript><img src="https://piwik.documentfoundation.org/piwik.php?idsite=44&rec=1" style="border:0" alt="" /></noscript>  <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgBackendResponseTime":205,"wgHostname":"wiki"});});</script> </body> </html>