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:
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.
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:
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.
Use the Nextcloud design components library to quickly create mockups that are pixel-perfect. It is available on the open source prototyping tool Penpot and is ready to use in 3 simple steps!
And that’s it! You can now add the Nextcloud design system shared library to any of your Penpot files and design away!
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 12: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.
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.
Check out some of these interesting websites and articles!