{"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":"2025-12-09T16:46:50","modified_gmt":"2025-12-09T15:46:50","slug":"design","status":"publish","type":"page","link":"https:\/\/nextcloud.com\/it\/design\/","title":{"rendered":"Design"},"content":{"rendered":"

[vc_section el_class=”titlebar at_home” css=”.vc_custom_1715330864011{background-image: url(https:\/\/nextcloud.com\/c\/uploads\/2024\/05\/design-page-icons-header-bg.jpg?id=215251) !important;}”][vc_row content_placement=”middle”][vc_column width=”1\/2″][vc_column_text css=”” el_class=”page-title centerMobile”]<\/p>\n

Contribute to
\nNextcloud design<\/h1>\n

[\/vc_column_text][vc_column_text css=”.vc_custom_1715327670560{margin-top: 2rem !important;margin-bottom: 0px !important;}” el_class=”page-subtitle centerMobile”]Design at Nextcloud is about usability, simplicity and accessibility \u2013 so that everyone is in control of their data.[\/vc_column_text][\/vc_column][vc_column width=”1\/2″][\/vc_column][\/vc_row][\/vc_section][vc_section el_class=”vertical-page-intro powerful_collaboration lightBG” css=”.vc_custom_1715326390747{padding-bottom: 0px !important;}”][vc_row gap=”10″ content_placement=”middle” css=”.vc_custom_1663598629396{margin-bottom: 2rem !important;}”][vc_column width=”1\/4″][\/vc_column][vc_column width=”1\/2″][vc_column_text css=””]<\/p>\n

Help make privacy easy to use<\/h3>\n

[\/vc_column_text][vc_column_text css=””]<\/p>\n

At Nextcloud we make sure that our apps are universally accessible and easy to use by following a few basic principles:<\/p>\n

[\/vc_column_text][\/vc_column][vc_column width=”1\/4″][\/vc_column][\/vc_row][vc_row gap=”10″ content_placement=”middle” css=”.vc_custom_1663598629396{margin-bottom: 2rem !important;}”][vc_column offset=”vc_col-lg-2\/5 vc_col-md-2\/5″]

<\/div>\"Jan
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
Join the Nextcloud design team!<\/div>\n\t\t\t\t
<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/a><\/div>[\/vc_column][vc_column offset=”vc_col-lg-3\/5 vc_col-md-3\/5″][vc_row_inner equal_height=”yes” content_placement=”middle” gap=”15″ el_class=”iconboxes”][vc_column_inner el_class=”iconbox” width=”1\/3″][vc_column_text css=””]Software should work.<\/strong>
\nIt is better to not have a feature instead of having one that works poorly.[\/vc_column_text][\/vc_column_inner][vc_column_inner el_class=”iconbox” width=”1\/3″][vc_column_text css=””]Software should be easy to use.<\/strong>
\nShow only the most important elements.[\/vc_column_text][\/vc_column_inner][vc_column_inner el_class=”iconbox” width=”1\/3″][vc_column_text css=””]Software should get out of the way.<\/strong>
\nDo things automatically instead of offering configuration options.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner equal_height=”yes” content_placement=”middle” gap=”15″ el_class=”iconboxes”][vc_column_inner el_class=”iconbox” width=”1\/3″][vc_column_text css=””]When people ask for a setting<\/strong>, find out what the root of the problem is and fix that instead.[\/vc_column_text][\/vc_column_inner][vc_column_inner el_class=”iconbox” width=”1\/3″][vc_column_text css=””]Software should be usable everywhere.<\/strong>
\nMake sure to test in different devices and browsers.[\/vc_column_text][\/vc_column_inner][vc_column_inner el_class=”iconbox” width=”1\/3″][vc_column_text css=””]Software should be usable by everyone.<\/strong>
\nFind out more below in the accessibility<\/a> section.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][\/vc_section][vc_section el_class=”nc_default_section”][vc_row gap=”20″ content_placement=”middle”][vc_column width=”1\/2″][vc_single_image image=”208061″ img_size=”large” onclick=”link_image” css=”” el_class=”imageRoundShadow”][\/vc_column][vc_column width=”1\/2″][vc_column_text css=”” el_class=”nc-section-title”]<\/p>\n

Develop with
\nNextcloud design in mind<\/h2>\n

[\/vc_column_text][vc_separator color=”custom” align=”align_left” border_width=”2″ el_width=”20″ css=”” el_class=”nc_separator_line” accent_color=”#0082c9″][vc_column_text css=”.vc_custom_1716278734960{margin-top: 2rem !important;margin-bottom: 2rem !important;}”]<\/p>\n

The 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

Most Nextcloud web apps are written in Vue.js \u2013 to help with that you can use our 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

Mobile and desktop apps follow their respective operating system guidelines, like Material Design<\/a> or Apple Human Interface Guidelines<\/a> \u2013 more details in our design guidelines<\/a>.[\/vc_column_text][\/vc_column][\/vc_row][\/vc_section][vc_section el_class=”nc_default_section lightBG” css=”.vc_custom_1673356071922{margin-top: 0px !important;margin-bottom: 0px !important;}”][vc_row][vc_column][vc_column_text css=””]<\/p>\n

Contribute to design<\/h2>\n

[\/vc_column_text][vc_separator color=”custom” border_width=”2″ el_width=”20″ css=”” el_class=”nc_separator_line”][\/vc_column][\/vc_row][vc_row gap=”30″ content_placement=”middle”][vc_column width=”1\/4″][vc_single_image image=”215448″ img_size=”large” css=””][\/vc_column][vc_column width=”3\/4″ el_class=”centerMobile”][vc_column_text css=”” el_class=”nc-section-title”]<\/p>\n

Picking what to work on<\/h3>\n

[\/vc_column_text][vc_column_text css=””]The design process is pretty flexible and open. Anyone can contribute to Nextcloud design through issues in the Nextcloud organization on Github<\/a>. Each app has its own repository where issues are tracked.<\/p>\n

We track design and interface issues through the 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<\/a>![\/vc_column_text][\/vc_column][\/vc_row][vc_row gap=”30″ content_placement=”middle”][vc_column width=”1\/4″][vc_single_image image=”215461″ img_size=”large” css=””][\/vc_column][vc_column width=”3\/4″ el_class=”centerMobile”][vc_column_text css=”” el_class=”nc-section-title”]<\/p>\n

Designing and specifying a solution<\/h3>\n

[\/vc_column_text][vc_column_text css=””]When you are designing a solution, keep the following things in mind:<\/p>\n