[WIP] Nextcloud Design Guide #140
Conversation
|
@raghunayyar Can you point me to the issue/PR/discussion about moving the sidebar? |
|
@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. |
|
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. 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 😉 |
|
@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. :) |
Let's do this then. |
|
And again, I'm this annoying guy only posting links to blogposts while not doing much else 😉 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! 😊 |
|
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 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. :) |
|
@Espina2 Sure, we don't actually know how corporations do their stuff behind the scenes. And of course they often use consultancy.
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:
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. |
|
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. |
|
Here’s the bullet points I mentioned @eppfel, the linked issues contain the proper discussions and reasoning:
Based on that we wrote: https://owncloud.org/blog/6-owncloud-user-interaction-design-principles/ |
|
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? |
|
@skjnldsv I think this should be a more general description of the design/ui concepts. Code specific stuff should go into the developer documentation. |
|
Proposal for a first value?
— RAY EAMES |
|
@eppfel 👍 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 |
|
I think this is done now by @skjnldsv in the nextcloud/documentation repo, right? |
|
I dont really think that is the same thing... Design guidelines is not the same as code guidelines... |
|
@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... |
|
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/ |
|
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. |
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. Principles
References
Current owncloud/nextcloud Rules / Guides
Best-practice from implementations / discussion
Current Coding / CSS Guidelines