{"id":2449,"date":"2022-04-05T16:37:14","date_gmt":"2022-04-05T16:37:14","guid":{"rendered":"https:\/\/web2.nextcloud.com\/?page_id=2449"},"modified":"2022-11-03T14:50:13","modified_gmt":"2022-11-03T12:50:13","slug":"design","status":"publish","type":"page","link":"https:\/\/staging.nextcloud.com\/da\/design\/","title":{"rendered":"Design"},"content":{"rendered":"<section class=\"page-hero-section gr\"><div class=\"container\">\r\n\t<div class=\"row\">\r\n\t\t<div class=\"col-lg-9\">\r\n\t\t\t<div class=\"section-title\">\r\n\t\t\t\t<h1>Contribute to Nextcloud design<\/h1><p>Help make privacy easy to use<\/p>\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n<\/section>\n\n<section class=\"post-single-section\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"text-block \">\n\t\t\t\t\t<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/5SAB0CY-iZ0\" width=\"100%\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p data-pm-slice=\"1 1 []\">Design at Nextcloud is about usability, simplicity and accessibility \u2013 so that everyone is in control of their data. At Nextcloud we make sure that our apps are universally accessible and easy to use by following a few basic principles:<\/p>\n<ul class=\"nc-list\">\n<li>Software should work. It is better to not have a feature instead of having one that works poorly.<\/li>\n<li>Software should be easy to use. Show only the most important elements.<\/li>\n<li>Software should get out of the way. Do things automatically instead of offering configuration options.<\/li>\n<li>When people ask for a setting, find out what the root of the problem is and fix that instead.<\/li>\n<li>Software should be usable everywhere. Make sure to test in different devices and browsers.<\/li>\n<li>Software should be usable by everyone. Find out more below in the accessibility section.<\/li>\n<\/ul>\n<h3>Develop with Nextcloud design in mind<\/h3>\n<p data-pm-slice=\"1 1 []\">The <a href=\"https:\/\/docs.nextcloud.com\/server\/latest\/developer_manual\/design\/index.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Nextcloud design guide<\/a> contains design recommendations that you can incorporate into your feature or app to make it usable, simple, and consistent with the Nextcloud design language.<\/p>\n<p>Most Nextcloud web apps are written in Vue.js \u2013 to help with that you can use our <a href=\"https:\/\/nextcloud-vue-components.netlify.app\/#\/Introduction\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Vue components <\/a>which automatically give you lots of benefits like the Nextcloud style, accessibility, and uniformity with other apps. If you are not using Vue.js in your app, you may use the general HTML\/CSS guidelines \u2013 although we do recommend to use Vue.js with the components.<\/p>\n<p>Mobile and desktop apps follow their respective operating system guidelines, like Material Design or Apple Human Interface Guidelines \u2013 more details in the design guidelines.<\/p>\n<h3>Contribute to design<\/h3>\n<p data-pm-slice=\"1 3 []\"><strong>Picking what to work on<\/strong>: The design process is pretty flexible and open. Anyone can contribute to Nextcloud design through issues in the <a href=\"https:\/\/github.com\/nextcloud\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Nextcloud organisation on Github<\/a>. Each app has its own repository where issues are tracked.<\/p>\n<p>We track design and interface issues through the <a href=\"https:\/\/github.com\/nextcloud\/server\/issues?q=is%3Aopen+is%3Aissue+label%3Adesign\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">design label<\/a> on our issue tracker. (If you have a GitHub account, you can see the design issues across repositories too). If you are a new contributor looking to get involved, check through the good first issues label!<\/p>\n<p><strong>Designing and specifying a solution:<\/strong> When you are designing a solution, keep the following things in mind:<\/p>\n<ul class=\"nc-list\">\n<li>Start out by reviewing <strong>existing solutions<\/strong>, and other software people use. This gives a good understanding of what people expect. Best take screenshots so you can include them in the proposal for others to see.<\/li>\n<li>Check for <strong>consistency<\/strong> with existing Nextcloud apps, components and interaction design.<\/li>\n<li>Write up which problems your solution solves and how it would behave in <strong>different scenarios<\/strong>.<\/li>\n<li>Ideally do a <strong>mockup<\/strong> to support the specification. We generally use the open source mockup software <a href=\"https:\/\/penpot.app\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Penpot<\/a>, but you can use any method that feels comfortable. Even Inkscape or just a pen and paper mockup would work.<\/li>\n<\/ul>\n<p><strong>Communicating it with others on GitHub:<\/strong> When you are happy with the specification and supporting material, you can open an issue in the relevant repository. Make sure to include the screenshots of existing solutions, the specification text, and any mockups you have to make it understandable.<\/p>\n<p>Good examples of issues are our current redesign of the tray menu of the desktop app.<\/p>\n<ul class=\"nc-list\">\n<li><a href=\"https:\/\/github.com\/nextcloud\/desktop\/issues\/877\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">This issue<\/a> has examples of other apps, some simple mockups, and specifications about the design. In the discussions in the comments there are updates to the design as well.<\/li>\n<li><a href=\"https:\/\/github.com\/nextcloud\/desktop\/pull\/1565\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">This pull request<\/a> by a developer has the implementation of that issue, the changes they made, and more design discussions and adjustments.<\/li>\n<\/ul>\n<h3>Design team<\/h3>\n<p data-pm-slice=\"1 1 []\">There is an <a href=\"https:\/\/github.com\/orgs\/nextcloud\/teams\/designers\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">@nextcloud\/designers<\/a> group on GitHub. If you need design feedback on issues or pull requests, just mention @nextcloud\/designers to notify all designers (note this only works when you are part of the Nextcloud organization on GitHub). Let us know if you\u2019d like to join this group and help out!<\/p>\n<p>We have a Design team <a href=\"https:\/\/cloud.nextcloud.com\/call\/gqff69i8\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">public Talk channel<\/a> where we discuss design and help people with design feedback. Come join if you are interested in contributing to design or need questions answered! We also have a weekly design call at 14:00 CET every Tuesday where we review existing Nextcloud apps. If you would like to have your app reviewed by the design team, just ask in the channel.<\/p>\n<p>&nbsp;<\/p>\n<h3>Accessibility<\/h3>\n<p data-pm-slice=\"1 1 []\">Universal access is very important to us. We follow web standards and check to make everything usable also with keyboard and assistive software such as screen readers. We aim to be compliant with the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Web Content Accessibility Guidelines 2.1<\/a> on AA level, with the high contrast theme even on AAA level. We also follow the German <a href=\"https:\/\/www.gesetze-im-internet.de\/bitv_2_0\/BJNR184300011.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">BITV 2.0 guidelines<\/a>.<\/p>\n<p>If you find any accessibility issues, don\u2019t hesitate to report them on our issue tracker.<\/p>\n<p>Find more info on the accessibility of Nextcloud in the user manual, and if you want to learn more about accessibility, check out <a href=\"https:\/\/www.a11yproject.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">The A11Y Project<\/a>.<\/p>\n<h3>Design reads we like<\/h3>\n<p>Check out some of these interesting websites and articles!<\/p>\n<ul class=\"nc-list\">\n<li><a href=\"https:\/\/ukhomeoffice.github.io\/accessibility-posters\/posters\/accessibility-posters.pdf\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">UK Home Office accessibility posters<\/a><\/li>\n<li><a href=\"https:\/\/lawsofux.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Laws of UX<\/a><\/li>\n<li><a href=\"https:\/\/www.nngroup.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Nielsen Norman Group<\/a><\/li>\n<\/ul>\n<h3>Nextcloud podcast talks about design<\/h3>\n<p><a href=\"https:\/\/nextcloud.com\/blog\/nextcloud-podcast-part-ii-lets-talk-about-design\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">History of Nextcloud, design and community with design lead Jan<\/a><\/p>\n<p><a href=\"https:\/\/nextcloud.com\/blog\/interview-with-nimisha-vijay-the-ux-ui-designer-at-nextcloud\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">UX designer Nimisha talks about design at Nextcloud<\/a><\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"tags":[],"class_list":["post-2449","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design - Nextcloud<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design - Nextcloud\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.nextcloud.com\/da\/design\/\" \/>\n<meta property=\"og:site_name\" content=\"Nextcloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Nextclouders\/\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-03T12:50:13+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@nextclouders\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging.nextcloud.com\/da\/design\/\",\"url\":\"https:\/\/staging.nextcloud.com\/da\/design\/\",\"name\":\"Design - Nextcloud\",\"isPartOf\":{\"@id\":\"https:\/\/staging.nextcloud.com\/da\/#website\"},\"datePublished\":\"2022-04-05T16:37:14+00:00\",\"dateModified\":\"2022-11-03T12:50:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/staging.nextcloud.com\/da\/design\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging.nextcloud.com\/da\/design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging.nextcloud.com\/da\/design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging.nextcloud.com\/da\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging.nextcloud.com\/da\/#website\",\"url\":\"https:\/\/staging.nextcloud.com\/da\/\",\"name\":\"Nextcloud\",\"description\":\"Regain control over your data\",\"publisher\":{\"@id\":\"https:\/\/staging.nextcloud.com\/da\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging.nextcloud.com\/da\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/staging.nextcloud.com\/da\/#organization\",\"name\":\"Nextcloud\",\"url\":\"https:\/\/staging.nextcloud.com\/da\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/staging.nextcloud.com\/da\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg\",\"contentUrl\":\"https:\/\/staging.nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"Nextcloud\"},\"image\":{\"@id\":\"https:\/\/staging.nextcloud.com\/da\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Nextclouders\/\",\"https:\/\/x.com\/nextclouders\",\"https:\/\/www.linkedin.com\/company\/10827569\/\",\"https:\/\/youtube.com\/nextcloud\",\"https:\/\/www.instagram.com\/nextclouders\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design - Nextcloud","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"da_DK","og_type":"article","og_title":"Design - Nextcloud","og_url":"https:\/\/staging.nextcloud.com\/da\/design\/","og_site_name":"Nextcloud","article_publisher":"https:\/\/www.facebook.com\/Nextclouders\/","article_modified_time":"2022-11-03T12:50:13+00:00","twitter_card":"summary_large_image","twitter_site":"@nextclouders","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/staging.nextcloud.com\/da\/design\/","url":"https:\/\/staging.nextcloud.com\/da\/design\/","name":"Design - Nextcloud","isPartOf":{"@id":"https:\/\/staging.nextcloud.com\/da\/#website"},"datePublished":"2022-04-05T16:37:14+00:00","dateModified":"2022-11-03T12:50:13+00:00","breadcrumb":{"@id":"https:\/\/staging.nextcloud.com\/da\/design\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.nextcloud.com\/da\/design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/staging.nextcloud.com\/da\/design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.nextcloud.com\/da\/"},{"@type":"ListItem","position":2,"name":"Design"}]},{"@type":"WebSite","@id":"https:\/\/staging.nextcloud.com\/da\/#website","url":"https:\/\/staging.nextcloud.com\/da\/","name":"Nextcloud","description":"Regain control over your data","publisher":{"@id":"https:\/\/staging.nextcloud.com\/da\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.nextcloud.com\/da\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/staging.nextcloud.com\/da\/#organization","name":"Nextcloud","url":"https:\/\/staging.nextcloud.com\/da\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/staging.nextcloud.com\/da\/#\/schema\/logo\/image\/","url":"https:\/\/staging.nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg","contentUrl":"https:\/\/staging.nextcloud.com\/c\/uploads\/2022\/10\/nextcloud-logo-blue-transparent.svg","width":"1024","height":"1024","caption":"Nextcloud"},"image":{"@id":"https:\/\/staging.nextcloud.com\/da\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Nextclouders\/","https:\/\/x.com\/nextclouders","https:\/\/www.linkedin.com\/company\/10827569\/","https:\/\/youtube.com\/nextcloud","https:\/\/www.instagram.com\/nextclouders\/"]}]}},"_links":{"self":[{"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/pages\/2449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/comments?post=2449"}],"version-history":[{"count":4,"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/pages\/2449\/revisions"}],"predecessor-version":[{"id":74428,"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/pages\/2449\/revisions\/74428"}],"wp:attachment":[{"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/media?parent=2449"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.nextcloud.com\/da\/wp-json\/wp\/v2\/tags?post=2449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}