These layout guidelines mainly focus on our web interface. On Android and iOS we closely follow the platform guidelines, namely Material Design, and Apple Human Interface Guidelines.

While deciding how you want your app to look, there are a number of factors to consider:

  • Consistency with other Nextcloud apps

  • Responsiveness for different browsers, browser sizes and devices

  • Typical interface patterns in other similar apps in the market

The content Vue component wraps your entire app. While the arrangement of components in your app is dependent on what your app does, most Nextcloud apps typically have 3 levels of hierarchy. Some commonly used layouts are: Penpot empty template

  • Navigation → content → sidebar (and a couple of variations of it, e.g. without the sidebar)

  • Navigation → list → content