1. Gradient on buttons

Change made: Eliminate the gradient on buttons

Motivation:

The gradient makes them look old, outdated.

Particularly, the vertical gradient was deeply used in the early days of web design. It does not have a place in the modern world.

All buttons in Bootstrap 5 are flat (no gradients, no borders, no shadows, no bevel effect).

CSS:

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
color: #212529;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem; // 16 px
border-radius: 0.25rem; // 4 px
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    

Test with XWiki Buttons:

"btn btn-primary" class for Save & View and Create user buttons
"btn btn-secondary" class for Save and Cancel buttons.

To note that the background-color:#F3F3F3 in edit view changes between inline and standard edit view.

2. Borders on buttons

Change made: Eliminate borders on buttons

Motivation:

If the button has the background-color a different color than the background of the whole page, the button shouldn't have borders.

It creates the visual effect of too many little rectangulars, thus cluttering the UI.

If the button has the same color with the background of the page, its color should be changed to be a bit darker (for light pages) or a bit lighter (for dark pages) color, keeping the idea of no borders on the button.

See the image below for visual representation

All buttons in Bootstrap 5 are flat (no gradients, no borders, no shadows, no bevel effect).

3. Round edges

Change made: Most elements to have round edges appropriate to their size. 

Motivation:

Apart from the fact that rounder edges look more modern and make the UI friendlier, round edges are easier to comprehend for the human eye.

Our eyes scan easier pages with round edges on elements. Source: link.

We should increase the radius to about 7-9px.

See the previous image for visual representation.

All buttons in Bootstrap 5 have a 0.25 rem border-radius (4 px with a base font of 16 px).

See the previous image for visual representation.

4.  Shadows on buttons

Change made: Eliminate drop shadow from buttons or make it much softer & spread

Motivation:

Especially when shadows are NOT soft, they tend to clutter the UI, at the same time dating the overall design.

With no shadows on buttons, we would get more into the modern flat design. The only problem with flat design is that sometimes elements (buttons, especially) don't feel clickable to some users.

If we feel like our users would have trouble differentiating clickable elements from non-clickable, we can keep the shadow but make it blurrier (softer and more spread) or add a hoover effect that adds this blurry shadow.

See the image below for visual representation

5. Font weight of headings

Change made: Increase font-weight for headings based on their level

Motivation:

Because we are in the field of organizing knowledge, we need to take into consideration the psychology behind it.

One of the main reasons people organize knowledge is because they want to make it easy and fast to access it, either for themselves or the people they work with.

Easy & fast accessibility of information = easiness & speed in searching that particular knowledge. When people are searching for digital information, they don't read everything that exists on a particular page.... they scan the page. More details on this (link) source.

It's very hard to scan a page if everything mainly looks the same. Size is not enough to emphasize headers, especially when Sans Serif fonts are pretty thin even at a big size (on the Regular weight).

To better serve the goal of knowledge organization, we should increase the font-weight of most headings.

To keep and increase the idea of hierarchy, we should either :

• ....make the headings in a page have the font-weight based on their level ( example: h3 has a smaller font-weight than h1)
• OR
• ...keep headings at the same font-weight (still bolded), but have big enough changes in font-size between each level using a scale/ratio (see proposal 5)

See the image below to understand better how font-weight affects scannability

Headings in Bootstrap 5 are bolded.

CSS 

h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
font-weight: 500;
    line-height: 1.2;
}

6. Headings Scale / Ratio

Change made: Increase difference between headings to at least 1.250 (Major Third)

Motivation:
The increased font-weight from proposal 4 does help in easier scanning of a page, but font-size establishes hierarchy much better than anything else.

With the current scale between headings it is hard to guess on which level of heading are you on without checking the heading type in the toolbar of the WYSIWYG editor.

This should come natural to the user because of the obvious scale between the levels.

See the image below for better understanding the scale aspect
 

Headings seem to be pretty similar in size even if they are at different levels. Simulating the current ratio on this site, it seems that the typography scale is 1.125 (Major Second) - for 16 px base font

 

Headings in Bootstrap 5 differ one from another based on their size, increasing the effect of visual hierarachy.

CSS

// 1 rem = 16 px

.h1, h1 {
    font-size: calc(1.375rem + 1.5vw);
}

.h2, h2 {
    font-size: calc(1.325rem + .9vw);
}

.h3, h3 {
    font-size: calc(1.3rem + .6vw);
}

.h4, h4 {
    font-size: calc(1.275rem + .3vw);
}

.h5, h5 {
    font-size: 1.25rem;
}

.h6, h6 {
    font-size: 1rem;
}

7. Modals, dropdown menus, pop-ups

Change made: Eliminate borders (or make them white to fit dark themes too), KEEP shadows (maybe slightly decrease their opacity)

Motivation: 

They are already in focus because of the drop shadow, no need for borders, they just add more detail in the UI, cluttering it. 

See the image below for visual representation

8.  Division between lateral panels and main content

Change made (version 1): Make the big lateral panels, the panels contained in them and the general main content have the same background color. They are divided by a simple subtle vertical border.

Change made (version 2): Same coloring as version 1.No divider / no borders on lateral panels.

Change made (version 3): Same coloring as version 1. Division by soft drop shadow on rounded main content. No borders on lateral panels. This only works if we choose to go with proposal 12 too.

Change made(versions 4): Division by slight difference of color between the rounded main content and general page. No borders on lateral panels. This only works if we choose to go with proposal 12 too.

Motivation: There is no need for a very strong division between lateral panels and the main content. The current way of dividing creates a very fragmented look, which translates into overall clutter.

See the image below for visual representation

*. Panels headers

Change made: Font weight increased on lateral panel headers.

Motivation: Same motivation as proposal 4.

See the image below for visual representation

*. Background of navbar

Change made: Navbar's background same with page background

Motivation: The current navbar doesn't have many elements and the elements that we do have are represented in a very simplistic way (by icons).

This lets us simplify even more the overall look of the XS, making it more modern.

If we had a complicated navbar, it could've been better to make the separation between the navbar and the page content more obvious.

In our case, we can take advantage of the simplicity and take it to a more modern level. 

See the image from proposal  9 for visual representation (versions 3 & 4)