[WIP/NI] Overwall style refresh

[Espina2]

What I'm doing

Already done

• Default Button

• Ghost Button

• Colors

• Dropdown button

• Sizes

cc @nextcloud/designers @jancborchardt @jospoortvliet

[skjnldsv]

Very nice!

[phsc84]

Is this already online? But looks good!

[Espina2]

@PhSc Not yet, I want to make a major update in all pages, and create and apply all the default typographic styles to.

Im using BEM methodology to, so it will be an improvoment in code and visual.

[jancborchardt]

Looks good! Just three things:

• For legibility reasons, we should never use capital writing, especially not on something as important as buttons. People read text by recognizing the shapes of the words, and capital writing makes that very hard.
• Let’s just use one size of button, the medium size. Having the others just looks a bit like the CSS is broken. ;)
• On the right side of the buttons with symbol like the arrow and the dropdown arrow, there is a bit much space to the right, it looks a bit unoptimized. Icon and right edge should be closer.

Awesome work @Espina2! :)

[Espina2]

@jancborchardt

For legibility reasons, we should never use capital writing, especially not on something as important as buttons. People read text by recognizing the shapes of the words, and capital writing makes that very hard.

We already have this discussion, and I agree if this are body text you are right but since its a word or two I don't agree with that.

Please read the articles above because they explain better than me.
http://ux.stackexchange.com/questions/67454/how-does-capitalization-affect-readability
http://practicaltypography.com/all-caps.html

And if you look to brands recognized for good typography, for example medium, squareup, google. They all use buttons with Uppercase.

I don't want to fight and make a huge threat about that, in general I think it works best uppercase because it gives a sense of align when you have icons.

Let’s just use one size of button, the medium size. Having the others just looks a bit like the CSS is broken. ;)

I didn't get it, we should have different call to actions and sizes. The actions are different and we should have differents visually to.

On the right side of the buttons with symbol like the arrow and the dropdown arrow, there is a bit much space to the right, it looks a bit unoptimized. Icon and right edge should be closer.

You are right I will look at it. I'm a bit tired when I made the screenshot, so I didn't see it.

ps: Sorry for lately not agree with you in some points, its nothing personal, and I always appreciate your feedback.

[Espina2]

I think this is the moment to define if the buttons are going to be rounded or rectangular that kind of thing to. What you think @jancborchardt @nextcloud/designers

[jancborchardt]

@Espina2 of the examples you mention (Google, Square, Medium) only Square uses capital letters in buttons. Google, Medium, Facebook, Apple, Slack, etc all use normal lettering, and for good reason.

With Nextcloud we put more weight on making things easy for people than on temporal trends, and legibility is a key factor. It also plays into accessibility because words in capital are quite difficult to read for people with a reading impairment.

I didn't get it, we should have different call to actions and sizes. The actions are different and we should have differents visually to.

Yeah, maybe the sizes just need to have a bit more difference. Currently they look very similar and seeing them next to each other looks a bit like it’s almost the same button, but also not.

I think this is the moment to define if the buttons are going to be rounded or rectangular that kind of thing to.

If it’s also about putting it in line with the web interface, if you try it out then rounded buttons will look very strange in combination with the rounded rectangles of the input fields. For the website it’s less noticeable since there are not a lot of input fields. So if we want to align the styles, I’m for border-radius: 3px as we do in the app.

[Espina2]

Google examples

But lets test and see what it works best. Like I said not want to this became a huge thread about uppercase letters. We have different visions and I think that both of them are valid. In the end we should see what community think looks and works best :)

I will test to make another changes and I think we can even use the two types of buttons the one's who are rounded and the ones who are rectangular. But I want to test how it looks even with checkbox in the app. After that we can see what it works best and stick with solution for all Nextcloud apps.

[eppfel]

👎 For all-caps buttons. I don't argue they're less readable, I just feel it does not represent Nextcloud (words like lightweight and discreet come to my mind).

IMO having a little bit different look on the homepage, than in the web application is not a problem. It actually has to be. On the homepage will be no theming, so we can do what we want. Whereas in the application we can't.

But to rule out rounded buttons, because they would not go along with the inputs fields is a false argument @jancborchardt. Actually with the current UI, I feel they are too similar.

It's just a dirty hack, but I think it shows what I mean and the visual errors could be polished easily.

before (with hover on change password 😗 ):

after:

[jancborchardt]

@Espina2 look at the google.com Homepage. ;) And all the other homepages of the companies you named.

@eppfel hm, it does look heavily out of place though, don’t you think? Like a wannabe-Material-design on the circle buttons and a strange OS X aqua vibe from the blue button and dropdown. But maybe it’s good and playful. It just looks a bit strange to me atm.
cc @nextcloud/designers what do you think?

[jospoortvliet]

My not-even-half-a-cent: I agree with Jan that the blue buttons in our web UI look weird, but perhaps there is another way of making it work - a bit more color might be nice, fresh.

[skjnldsv]

@eppfel why comparing this to our nextcloud interface when this pr is for the nextcloud.com ui?
I think it's ok to have to différents things. :)

[Espina2]

@skjnldsv this PR is effort to make the things work the same way. Design should be versatile and works in all representation of the brand. I didn't dislike the @eppfel "hack" and I get the ideia, it only try to show quickly that round buttons work to. Of course it will need a tweaks to make it work, they have to much importance and some should be secondary. With that in mind we should have more colors, etc etc.

I think we should try to make high fidelity mockup instead of "hacking" and test how it works and compare. Without that is just theory, ideias and personal taste.

@skjnldsv and even if this are different platforms it should have the same visual aesthetic and approach, the design must be global and not have different approach for "software" and another for "websites" or even "apps".

[skjnldsv]

@Espina2 I completely disagree with the approch.
The nextcloud website is supposed to be attractive. There's a lot of stuff that could be more easier to use or more practical, but since it's the first glimpse a new user will have of nextcloud, we need it to catch the eye.

The nextcloud system on the other hand, is entirely different. We're not looking for the best design, but the better user experience. We could revise the entire design and go for a full flat design like everyone does, or something like that. But right now we have something that looks good (not the best imho) and is very functional. If you want to revise the entire nextcloud ui, i'm all in. But is it really the priority here?

[Espina2]

@skjnldsv Maybe I explain bad. My principal ideia is, since I am design and try to define the buttons(for add to the Styleguide) and is a UI element that exist in all platforms, this is a effort to make the people thing what they should be, instead of choosing what your taste want. This is the core ideia.

The nextcloud system on the other hand, is entirely different. We're not looking for the best design, but the better user experience. We could revise the entire design and go for a full flat design like everyone does, or something like that. But right now we have something that looks good (not the best imho) and is very functional. If you want to revise the entire nextcloud ui, i'm all in. But is it really the priority here?

The two should have a great design and a great user experience, both are important. If you have for example a bad designed documentation the people will not use your product.

And I not looking to redesign to follow the trends, I really think this is bad approach, and trends go and come, so... in the end a full flat material design is the design language of google not Nextcloud, and this is a error that I see many designers doing, Nextcloud should have their personal identity and not follow the others.

[jancborchardt]

And I not looking to redesign to follow the trends, I really think this is bad approach, and trends go and come, so... in the end a full flat material design is the design language of google not Nextcloud, and this is a error that I see many designers doing, Nextcloud should have their personal identity and not follow the others.

And this is one big reason why I think capitalizing the button text is not something we should do.

I’m also skeptical of rounded buttons for the app at least (I think it’s fine for the website) since it’s such a breakaway from normal inputs, especially compared to text fields, select dropdowns and such. It looks like old style OS X aqua UI as said. And if you look at the latest macOS there’s just simple rounded rectangular buttons. It doesn’t want to push a CI in your face, it’s just subdued and does the job. And it’s what we’ve also been doing for ages.

Sure we can improve the spacing, color and some other aspects. But as with code, a full refactoring will likely just introduce even more issues than it solved. Let’s take small steps to make sure it all works.

[Espina2]

We already have one decision that is not have Uppercase text (I will apply that). In the case in what shape should have the buttons we have to decide, or even maintain the two ones.

About the refactoring I agree with you to, and you don't need to make a huge refactor you go a thing by thing and test.

[raghunayyar]

Please rebase ;)

[jospoortvliet]

merging it. We'll fix the bugs. It has made some changes to the home page and the box page (and both have some issues now) but those can be fixed in another PR and at least we now have these improvements which are a good thing to built on - and lots to built with a release coming ;-)