Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wp-mail-logging domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the broken-link-checker domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the updraftplus domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wp-extended-search domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the rocket domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114
Design - Nextcloud
Deprecated: preg_split(): Passing null to parameter #2 ($subject) of type string is deprecated in /var/www/html/wp-includes/formatting.php on line 3479

Deprecated: preg_split(): Passing null to parameter #2 ($subject) of type string is deprecated in /var/www/html/wp-includes/formatting.php on line 3479

Contribute to Nextcloud design

Help make privacy easy to use

Design at Nextcloud is about usability, simplicity and accessibility – 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:

  • Software should work. It is better to not have a feature instead of having one that works poorly.
  • Software should be easy to use. Show only the most important elements.
  • Software should get out of the way. Do things automatically instead of offering configuration options.
  • When people ask for a setting, find out what the root of the problem is and fix that instead.
  • Software should be usable everywhere. Make sure to test in different devices and browsers.
  • Software should be usable by everyone. Find out more below in the accessibility section.

Develop with Nextcloud design in mind

The Nextcloud design guide contains design recommendations that you can incorporate into your feature or app to make it usable, simple, and consistent with the Nextcloud design language.

Most Nextcloud web apps are written in Vue.js – to help with that you can use our Vue components 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 – although we do recommend to use Vue.js with the components.

Mobile and desktop apps follow their respective operating system guidelines, like Material Design or Apple Human Interface Guidelines – more details in the design guidelines.

Contribute to design

Picking what to work on: The design process is pretty flexible and open. Anyone can contribute to Nextcloud design through issues in the Nextcloud organisation on Github. Each app has its own repository where issues are tracked.

We track design and interface issues through the design label 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!

Designing and specifying a solution: When you are designing a solution, keep the following things in mind:

  • Start out by reviewing existing solutions, 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.
  • Check for consistency with existing Nextcloud apps, components and interaction design.
  • Write up which problems your solution solves and how it would behave in different scenarios.
  • Ideally do a mockup to support the specification. We generally use the open source mockup software Penpot, but you can use any method that feels comfortable. Even Inkscape or just a pen and paper mockup would work.

Communicating it with others on GitHub: 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.

Good examples of issues are our current redesign of the tray menu of the desktop app.

  • This issue 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.
  • This pull request by a developer has the implementation of that issue, the changes they made, and more design discussions and adjustments.

Design team

There is an @nextcloud/designers 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’d like to join this group and help out!

We have a Design team public Talk channel 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.

 

Accessibility

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 Web Content Accessibility Guidelines 2.1 on AA level, with the high contrast theme even on AAA level. We also follow the German BITV 2.0 guidelines.

If you find any accessibility issues, don’t hesitate to report them on our issue tracker.

Find more info on the accessibility of Nextcloud in the user manual, and if you want to learn more about accessibility, check out The A11Y Project.

Design reads we like

Check out some of these interesting websites and articles!

Nextcloud podcast talks about design

History of Nextcloud, design and community with design lead Jan

UX designer Nimisha talks about design at Nextcloud

This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.