Which shape for my app: square, rounded or round corners?

Here is what the shape changes in a GoodBarber app, where it is set, and how to go all the way to the radius of your choice.

The shape is how rounded the corners of your cells, thumbnails, buttons and fields are, what people often call rounded corners. In the GoodBarber Design System, it is the Shape atom, and it offers three ready-made shapes. Square, the corner is sharp and the radius is 0. Rounded, the radius is 4 pixels, enough to soften without drawing attention. Round, it is 12 pixels on a cell or a thumbnail, and on a button or a field it takes the full height, the shape designers call a pill.

You don't set these corners element by element. A shape chosen in My App › App style › Thumbnails and cells applies to every list, every widget on the Home and their headers, on all your pages. That is our "Set once, consistent everywhere" principle, a value set once and repeated everywhere. Buttons and fields have their own option, also in App style, under Buttons and Form fields, with the same three predefined shapes. So you can keep square cells and round buttons.

In a GoodBarber app with square corners, not everything is square. Cells, thumbnails and buttons are. But an author's avatar stays a circle, round by nature. And other small elements have their own shape, which does not follow the shape chosen for the app, a video's play icon, its duration label, the date bullet. Our templates deliver them round. A circle is recognized at a glance, even when tiny, and it signals something apart, a person, an action, a marker.

Their shape is not fixed, though. The date bullet has its own slider, "Date background shape", with three positions. That is how the Unit 7 app above, a screen-printing workshop, switched its date bullets to square, to go all the way with its square-cornered look.

Here is the same screen twice, the one of Eastside Music Workshop, a music school. On the left, everything is square, the Square option for thumbnails and cells, the tab bar with "Corner style" set to Square, the date bullet in the first position of its slider. The app is clean, and a little stern for a school. On the right, three settings have changed, the shape object set to custom with a radius of 20, the tab bar set to "Fully rounded" and the date bullet on the Round option. Nothing else has moved, not the colors, not the fonts, not the spacing. And yet the app changes character. It becomes welcoming, like a school where young and old come to learn music.

That is all a radius does, and that is why it deserves to be chosen rather than left to chance.

Three apps, three shapes, and each one tells a different story. From left to right, the image shows square corners for the app of a screen-printing workshop, rounded ones for that of a natural history society, round ones for that of a music school. The table adds the free radius.

The first three rows are chosen in App style. The fourth is set in the editor, with two keys.

No shape is better than another. Each of these three apps holds together through its own, because it says the same thing as its colors and its fonts.

My favorite setting is Eastside's, a radius of 20 on the cells, round buttons and a round tab bar. It comes from the school's logo, three rounded arches, and that curve comes back in every cell and every button. With such generous curves, each cell becomes a distinct object on the background, and the round buttons stand out at first glance.

The radius of 20 goes in the JSON, with the three steps of "Set the shape of your app in GoodBarber". Buttons and fields switch to the Round option, and the tab bar to "Fully rounded".

The shape in brief

• In a GoodBarber app, the shape of the corners is a choice between three options, Square (0), Rounded (4 px) and Round (12 px, or the full height on buttons and fields).
• A shape chosen in App style › Thumbnails and cells applies to every cell, thumbnail, header and widget background. Buttons and fields have the same choice, in their own panel.
• The tab bar has its own setting, "Corner style", with the Bold, Minimal and Clean TabBar templates.
• Some small elements do not follow the app's shape. The avatar is round by nature, the play icon, the duration and the date bullet have their own shape, round in our templates.
• For a precise radius, go through the JSON with the free Advanced edition extension, by setting type to custom and adding radius, a whole number.