Contribute to Nextcloud design!

Design team

There is an @nextcloud/designers group on GitHub. This enables people to just mention @nextcloud/designers in issues and pull requests to notify all designers. Otherwise you have to mention each one individually.

The main people working on Nextcloud design are:

Please let us know if you want to contribute to the design and would like to be in this group. You will be notified every time someone mentions this team in an issue, which would be every design issue or pull request.

You should also join the #nextcloud-design channel on IRC. We use this to communicate on smaller issues, talk about what to work on next, and just general chatter. It’s good to get to know the other people and for organization in general.

Design guidelines

  • Software should work. Only put features into master when they are complete. It is better to not have a feature instead of having one that works poorly.
  • 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. Also read »Choosing our Preferences«.
  • Software should be easy to use. Show only the most important elements. Secondary elements only on hover or via »Advanced« function.
  • People’s data is sacred. Provide undo instead of asking for confirmation – which might be dismissed.
  • The state of the application should be clear. If something loads, provide feedback.
  • Do not adapt broken concepts (for example design of desktop apps) just for the sake of »consistency«. We provide a better interface.
  • Regularly reset your installation to see what the first-run experience is like. And improve it.
  • Ideally do usability testing to know how people use the software.
  • Test in different browsers. We need to fully support the common browsers like Firefox and Chrome as well as Internet Explorer down to version 8.
  • Test on different devices. The web interface should work on a smartphone or tablet as well as it does on desktop.
  • For further UX principles, read Alex Faaborg from Mozilla.

More concrete HTML+CSS guidelines

  • HTML and CSS building blocks are in our Design documentation.
  • We basically follow Google’s HTML+CSS style guide, with small exceptions:

    • Use tabs for indentation, not spaces
    • Sorting of declarations should be sensically grouped instead of alphabetized. First positioning and sizes, then typography, then colors, then additional rules.
  • Clickable elements should be a minimum of 44*44px to be easily tappable on mobile devices and well visible on desktop. See the Apple Human Interface Guidelines for reference.
  • We use Sass with SCSS syntax for CSS. It’s as easy to write as CSS but gives us variables and prevents duplication. It’s automatically compiled so no further setup needed.
  • Accessibility is very important, so we use the WAVE browser extension to check the HTML for proper accessibility.
  • We don’t use Bootstrap because there’s lots of parts we don’t need and we would need to customize a lot anyway. We do use pieces of Bootstrap though, like Tipsy for tooltips.

Further reading