Adjust the design to Nextcloud

[jancborchardt]

Check it out @nextcloud/designers! cc @karlitschek @jospoortvliet – did I miss anything? I’ll prepare the backport as soon as this is in.

Everything looks much nicer with the brighter blue, way more friendly.

(Credit to @ChristophWurst for the background change inspiration. :)

[jancborchardt]

The only thing which isn’t bright yet is the apps menu. The reason being that all apps icons are bright and it would take considerable effort to change this. We need to check that out for Nextcloud 10.

[nbebout]

👍 I think it looks very nice

[karlitschek]

nice 👍

[LukasReschke]

🚀 👍

[elioqoshi]

@jancborchardt I like it so far! Can you provide us with the source files so we can tinker a bit as well?

[MariusBluem]

I love it 👍

[MariusBluem]

Many thumbs up - All checks passed - Merged! THIS IS NEXTCLOUD 🚀

[MariusBluem]

Just uploaded your screenshots as initial commits for nextcloud/screenshots 😉

[oparoz]

There is a problem with the light blue on medium blue text in the header, it's barely readable. cc @BernhardPosselt

[MariusBluem]

😕 ... Maybe we can make the font bigger 😜 @oparoz

[oparoz]

Either "brighter" or thicker I think.

[bes1002t]

mh would suggest a small shadow under your toolbar and I don't know maybe a small margin at the bottom of your toolbar to enlarge the gab between content and toolbar. What do you think?

https://material.google.com/components/toolbars.html
My suggestion is based on googles material design guideline, which is not only created for mobile devices only but for UI design in general.

Maybe we can introduce even and odd list colouring? I think on large lists this could enhance the distinguishability.

The rest looks awesome! Nice colouring imho :) 👍

[mikebabb]

Beautiful! Looking really nice 👍

I'm on my phone at the moment so I can't check it out in detail, but I do find the font weight in ownCloud to be a little too light. In Nextcloud could we perhaps make it a little heavier, or increase the font size ever so slightly to compensate for the light weight and aid readability?

[Bugsbane]

I like it, too. I agree with the lighter blue being friendlier. Right now the size of the Nextcloud logo on the menu bar seems just a touch large, drawing a bit more attention than I would choose, but not by a huge amount. Overall, it looks great. May I also add, that I found the ownCloud icon to be quite... suboptimal. The Nextcloud icon is so very much cleaner, more minimal and beautiful for it. Together this all looks very nice.

[DamirRT]

yeah 👍

[elioqoshi]

@jancborchardt under what license will the photo be available btw?

[Bugsbane]

@elioqoshi - I don't personally know, but I believe other graphic assets are licensed under CC BY-SA iirc...

[ldonis]

I really like it!!

[jancborchardt]

@elioqoshi all the software is AGPLv3 (AGPLv3 or later for newer files) and any assets which can not be covered by that are Creative Commons Attribution Share-Alike indeed.

[jancborchardt]

@oparoz regarding the font contrast in the header, I’m thinking of making it white by default, and light greyish on hover/focus. Currently it’s the other way around and that causes the contrast to be lower.

[bes1002t]

@jancborchardt I disagree imho the shadow at the bottom of a toolbar looks not outdated because many websites and the whole android universe is using this shadow. Even our discussion board http://help.nextcloud.com does! I'm just talking about a really discreet shadow. To create a little bit of consistency we should do either use the shadow in nextcloud or remove it from our discussion board.

But I totally agree that the even and odd colouring of lists is something we could omit :P

[erikkn]

It's nice, but why don't change the whole design? Now it's a look a like of OC (which I understand) but a new project/company should have a new design in my opinion.

[bes1002t]

@erikkn I think that design is soo simple, you can not change many things. You have a toolbar, a navigationbar and a list of files. Just details could be changed like the position of that add button next to the breadcrumb and the color (that jan already changed).

[jancborchardt]

@erikkn some reasons why we don’t outright change the design:

• We want people to be able to easily upgrade from ownCloud to Nextcloud.
• Other themes should still work.
• Apps should still look good.
• Also, I was the design lead at ownCloud (now Nextcloud) and stuff was designed like that for a reason. Change for the sake of change does not make a lot of sense.

There’s definitely design improvements I have in mind and which are also open as issues since some time (in the old repo of course at this point), and they will come in as people implement them. :) As always I am very happy to work with anyone who is also up for actually realizing some interface improvements.

[erikkn]

@jancborchardt & @bes1002t ,, those are good arguments, I never thought about the existing apps. @jancborchardt I'll look forward to your improvements ideas.

[oparoz]

The good news is that we can still write our own themes :)

[Bugsbane]

As always I am very happy to work with anyone who is also up for actually realizing some interface improvements.

I always enjoy turning ideas into a good UI mockup etc. so the question is... what issue do we start with?

[MariusBluem]

You are welcome on our IRC #nextcloud-design where we can talk about that 😉