NCs rounded corners: visual improvements

Hello everybody,

this is a subjective nitpick.

To me, the current Nextcloud rounded corners look a bit off. I couldn’t put my finger on the reason until today. Turns out a lot of software uses “squircles” for modern looking rounded edges.

To quote a Figma engineer:

"My story begins long before I started at Figma, on June 10th, 2013, the day Apple released iOS 7. There was something subtle about the update: the home screen’s app chiclets had a juicier, more organic feel. They’d gone from squares with rounded corners, to squircles (a portmanteau of ‘square’ and ‘circle’).

What is the difference, you ask? To be fair, it’s slight — A squircle begins as the old rounded square, but with some sandpaper applied to the part where the rounding begins on each side of each corner so the transition from straight to curved is less abrupt.

Articulating this using mathematical language is precise: The curvature of a squircle’s perimeter is continuous, whereas a rounded square’s is not. This may seem trivial, a cool story, but subconsciously it really makes a big impact: a squircle doesn’t look like a square with surgery performed on it; it registers as an entity in its own right, like the shape of a smooth pebble in a riverbed, a unified and elemental whole."

Sources:

Pictures:





The NC25 redesign is a great leap in the right direction and looks wonderful. Rounded corners could profit a lot from switching to squircles in the next iteration IMO.

4 Likes

@jan interesting read?

1 Like

@samb92 yep, I know this article very well! :slight_smile: The issue is that unfortunately, I don’t know that CSS supports this in an easy, standardized, and cross-platform manner (but I might be missing something).

As soon as there is support for this, we would totally update. :slight_smile:

2 Likes

And @samb92, have you thought about getting involved with Nextcloud design? :smiley: See Design - Nextcloud

1 Like

There are workaround using JavaScript:

In addition when working on the rounded corners for the application area consider making them a bit smaller since some scrollbars and application integrations get cut off and that does not look very nice:

image

1 Like

rounded corners is very controversial topic:

it would be great major UI changes are not “one-way” but there is always an option to retain “previous” view. Lot of of people (including me) don’t like rounded corner, round images etc.

Please pay attention to

and let the users to decide which style is preferred.

Based on telemetry you could stop support for unpopular designs later.

@jan Great to hear it’s on your radar :slight_smile: I’ll definetely check out the Link.

@awelzel Good find with the CSS Houdini repo and the scrollbar cutoff!

@wwe I would prefer to keep this thread on topic regarding improvements to the rounded corner aspect of the new design instead of keeping the team busy with general opinion discussion on multiple channels.

1 Like

As another suggestion for improvement: the area for app integration (e.g. Draw.io or Office apps) should take into account that there is also a inner margin needed so things don’t get cut off in the corners as shown in the screenhots. This may still look a bit strange since you then have a think, rounded border around the content, but I would prefer this over getting content get cut off a the corners just to make them round.

The main issue is the content areas. The rounded corners is not matching some other design elements. To me it looks better if the radius is reduced. I have set the content area corners to border-radius:10px;

Entertaining thread.

While some discuss whether the rounded corners (what a term :wink: ) can still be embellished, others want a smaller radius or no rounded corners at all, and some of them even for purely practical reasons. (Function before design? What are they thinking :wink: )

However, the latter would solve all problems, which wouldn’t exist without rounded corners in the first place, some of which are unsolvable, because they would require a re-design of 3rd party apps. Not to mention that in five years or so, rounded corners probably will be out of fashion again… Just my 2 cents on the subject :wink:

1 Like

As a developer, I look forward to the solutions you will propose to solve the problem of scrollbars and applications such as draw.io.
I hope I’m wrong but I feel like it’s a dead end.

Since you are a developer, have you considered pull requesting some solutions yourself?

@just
Yes, I’m a dev and I’ve already encountered this issue on a project.
This is why I’ll be happy if I’m wrong and you provide a solution.
Sorry for not sending PR, I’m missing time to learn the code of NextCloud.
That’s just my opinion but Open Source is made for sharing opinions.

Quick and dirty fix: Match the rounded corner radius with the scrollbar.

Example:

I stumbled upon a Reddit post that included some concrete examples (with screenshots) of rounded corner bugs that I would like to add to this discussion. As far as I can tell these rounded corner bugs didn’t get fixed in 25.0.1.