[WIP] Nextcloud Design Guide

[eppfel]

Nextcloud Design Guide

I want to use this pull-request for working on the design guide. It is not meant to be a "style" guide, but a help for present and future designers at nextcloud to easily understand the "big picture" of nextcloud and help them make decisions that are consistent to the overall user experience. This is not a place to discuss CSS or coding in particular.

@nextcloud/designers Please add examples for good design, and decisions already made, but not documented.

Agenda

1. [ ] Define Design principles / key values / brand identity
2. [ ] Define a brand guide
3. [ ] Formulate a concrete guide how we design at nextcloud with examples (not CSS)

1. Principles

1. "What works good is better than what looks good, because what works good lasts."
2. "A Small step forward, is better than a leap into the abyss"
3. "Different platforms, different requirements, different design" nextcloud/nextcloud.com#285

References

Current owncloud/nextcloud Rules / Guides

• https://nextcloud.com/design
• https://help.nextcloud.com/t/lets-talk-about-ui/3027
• https://github.com/owncloud/documentation/issues/160
• https://owncloud.org/blog/6-owncloud-user-interaction-design-principles/

Best-practice from implementations / discussion

• redesign of nextcloud.com: PR#131 | Redesign Sources | Preview
• good defaults instead of options
  • »Users ask for a preference by default« – Havoc Pennington
  • settings for small stuff bury the really important settings owncloud/client#2072
  • gallery share link on folder with 100% images owncloud/core#8268
  • gallery: remove button for changing background, make less obtrusive owncloud/gallery#226
• inline feedback owncloud/core#17160
• autosave where possible (see update to text editor)
• design concepts & planning before development: libasys/ownCloud-8.1-Calendar-App#20
• don’t show what is not needed: stefan-niedermann/OwnCloud-Notes#8
• undo instead of confirmation owncloud/core#119
• Limit version of similar UI Elements: select -> nextcloud/server#1831

Current Coding / CSS Guidelines

• https://github.com/owncloud/core/issues/308
• https://docs.nextcloud.com/server/10/developer_manual/app/css.html

[eppfel]

@raghunayyar Can you point me to the issue/PR/discussion about moving the sidebar?

[jancborchardt]

@eppfel nice! I need to dig up a blog post which was in the making about different design parts, where a lot of our design principles were also written down with pull request & issue discussons as examples. :) So basically exactly what we need.

[eppfel]

I tried to help with the whatsnew screens for the Android App nextcloud/android#84 and @Espina2 correctly mentioned they are very different compared to his redesign of the website.

I feel this is a perfect starting point for discussing a nextcloud design guide:

I propose small steps that improve the design are always preferred over pixel perfect style guide consistency. For example nextcloud is a very dynamically changing environment and we deliver to various platforms (Android/iOS/Chrome/...), where you have to consider different expectations or customizations. So, the guide should help to make the right decisions developing the design of nextcloud and not just a manual for doing graphics. What do you think @nextcloud/designers ?

PS: I still feel this is not the appropriate way to work on this. Should we move it to a pad: http://pad.epp.cloud/p/nextcloud-design-guide?

@jancborchardt @raghunayyar Still waiting on your input 😉

[jancborchardt]

@eppfel I asked Jos again about the email/issue-list. :)

I totally agree that we should start with loose guidelines first before getting into the specifics. And yeah of course the Android app looks a bit different, that comes with the platform. Certainly we try to keep things aligned, but we’re not going to blindly port our complete web interface to Material Design, or design the Android app like the web app.

If you think an Etherpad is the best way to work on this then let’s do that. Although to keep it all in one place I would just edit your original comment with the contents we discuss. :)

[eppfel]

Although to keep it all in one place I would just edit your original comment with the contents we discuss. :)

Let's do this then.

[te-online]

And again, I'm this annoying guy only posting links to blogposts while not doing much else 😉 https://medium.com/@hellostanley/design-doesnt-scale-4d81e12cbc3e#.rfcck4s4y

While we don't have the amount of people, the popularity (yet) and the resources as the S-company, it's worth a read. It's interesting to see how they went from a total chaos to streamlined apps on all platforms. I know, this is not our goal, but the more alike all components look everywhere, the more an external person can identify one certain part of nextcloud as belonging to nextcloud.

It might be good to firstly, design for components that could be used universally, and secondly, settle on a common basis, just like the ”TUNE“ acronym, referenced in the article. I feel that we might need some kind of strategy, to know where to start and to know where to invest effort at which point in time.

Excited to see this starting! 😊

[Espina2]

@te-online

This is what I think

"I think the problem its not having a Styleguide, nowadays we need brand guidelines, a brand its not a logo is a ecosystem, and all the values should be the same no mather the media we are using.

I think you cant do a Styleguide without brand guidelines

Just to point and why the things are different I will put one example of Brand Guidelines and a Styleguide.

Brand Guidelines https://www.edp.pt/en/aedp/sobreaedp/marcaEDP/EDPDocs/EDPBrandGuide_2013_09_11_EN.pdf

Styleguide https://www.lightningdesignsystem.com/ "

This article is just an article, How many big the company are the less they make internal in design. Is just some Bla bla.

All the rebrand came for this guys http://www.wearecollins.com/work/spotify/ and after they have a strong brand guidelines they make all the others things. :)

[te-online]

@Espina2 Sure, we don't actually know how corporations do their stuff behind the scenes. And of course they often use consultancy.

I think the problem its not having a Styleguide, nowadays we need brand guidelines

I agree with you that we shouldn't go through the work of creating a styleguide, when it isn't what we need. However, I'm not sure if this is about a decision between a Styleguide and Brand Guidelines.

I think it's more about the question of how to align the different pictures people have of nextcloud. And about the question whether we want to align them. Do we want to be a brand like Dropbox or Spotify, just in a different color, or isn't the key of the idea that there are dozens of different understandings of nextcloud, just as there are dozens of different customized installations of nextcloud?

So, it might boil down to the question: What does the nextcloud brand, if it exists, actually cover? Is it just the website and the default theme of nextcloud? Does it only include the official clients (Who decides which are official)? Maybe my reading suggestion wasn't very suited for this discussion – I think we should rather look for examples in the Open Source-world than in the Closed Source-corporations-world.

Before it gets too philosophical, I get to my suggestion: For now, I think we should focus on moving forwards. Let's stick to some practical stuff.

• Let's write down some key values (and concepts), that describe the nextcloud idea (we probably already have them somewhere).
• Let's create a universal wording that we use to explain these values (inspiration might be taken from presentations from the conf).
• Let's create a set of visual components/a visual language that builds on these values.
• Let's then have a color palette, font guidelines, logo usage guidelines, icons and some examples.

Again, at the moment I think a pragmatic approach is what we need here (as usually). And in my opinion we can't easily solve the branding questions from above at this point in time. What do you think?

[Espina2]

Yup you get some points that Im talking about. We are going good for now, that we need to see what we already done and document that. After that or at the same time we need to have this brand guidelines, and only after that we should do the styleguide. (this is the perfect case for me)

But My sugestion is that when we have the documentation we should have the same things everywhere. After that we can go for major improvements in all components because we can see the big picture. (this only for web application)

This is the most realistic point of view right now.

Because design its never finish. Always have new and better ways to do it we only dont see them.

[jancborchardt]

Here’s the bullet points I mentioned @eppfel, the linked issues contain the proper discussions and reasoning:

• good defaults instead of options
  • »Users ask for a preference by default« – Havoc Pennington
  • settings for small stuff bury the really important settings https://github.com/owncloud/client/issues/2072
  • gallery share link on folder with 100% images https://github.com/owncloud/core/issues/8268
  • gallery: remove button for changing background, make less obtrusive https://github.com/owncloud/galleryplus/issues/226
• inline feedback https://github.com/owncloud/core/pull/17160
• autosave where possible (see update to text editor)
• design concepts & planning before development: https://github.com/libasys/ownCloud-8.1-Calendar-App/issues/20
• don’t show what is not needed: https://github.com/stefan-niedermann/OwnCloud-Notes/issues/8
• undo instead of confirmation https://github.com/owncloud/core/issues/119

Based on that we wrote: https://owncloud.org/blog/6-owncloud-user-interaction-design-principles/ (Thanks Jos for digging up the email again ;)

[skjnldsv]

Should we discussed like global and more-or-less common good habits of design ui? Or could I go more into details of the code? I have a few recommendations with the css :p

[juliushaertl]

@skjnldsv I think this should be a more general description of the design/ui concepts. Code specific stuff should go into the developer documentation.

[eppfel]

Proposal for a first value?

What works good is better than what looks good, because what works good lasts.

— RAY EAMES https://quotesondesign.com/ray-eames/

[jancborchardt]

@eppfel :+1: also Steve Jobs: »Design is not how it looks, it’s how it works« ;)

And Dieter Rams most likely also said something on this. :D

[MariusBluem]

I think this is done now by @skjnldsv in the nextcloud/documentation repo, right?

[Espina2]

I dont really think that is the same thing... Design guidelines is not the same as code guidelines...

[te-online]

@MariusBluem @Espina2 Yes, Design Guidelines should probably be part of the documentation, but are not as of now, hence https://github.com/nextcloud/documentation is not the place where Design Guidelines are developed at the moment. At least from what I know...

[jancborchardt]

As said, our current high-level design guidelines are at https://nextcloud.com/design – you are welcome to improve upon them.

The low-level design guidelines pertaining directly to code/HTML/CSS are at https://docs.nextcloud.com/server/12/developer_manual/design/

[Espina2]

I will do that when I have the time. Right now a bit busy with the nextcloudpi wizard, and the new download page. Maybe after this two I can real dig on that.