Description

• 01 - Use system font stack
• 02 - Update bold, semibold font variables
• 03 - Update the default heading to use the updated semibold version
• 04 - Reduce button size on desktop
• 05 - New font size for modal headers
• 06 - Make the footer use the body background colour
• 07 - Default to an 8px grid whenever possible.
• 08 - Livedata improvements
• 09 - Decouple the Content Menu buttons background color from the Breadcrumb background color
• 10 - Combine the navigation button and item separator on the Breadcrumb
• 11 - Page notification configuration button to icon only (bell)
• 12 - Navigation Panel and Quicklinks
  • 12.1 Remove item dots from the main navigation
  • 12.2 Navigation Items span 100% of the panel width
  • 12.3 Reduce the font size of panel titles
  • 12.4 Make the selected page font semi-bold
• 13 - Updated visual design for errors in the notification icon
• Past Proposal
  • Newest Font Awesome
  • Notifications
  • Document Footer

These changes are not to a specific component of XWiki.

01 - Use system font stack

Related article: https://uxdesign.cc/an-ode-to-system-fonts-84e90be1d68c

Pros: 

• Improves speed by not downloading external fonts
• Feels similar to the OS the user is already using.

Cons:

• Less control of rendering, might cause visual bugs exclusive to some platforms
• Unpredictable updates when the OS vendor decides to update its fonts

Example:

body {
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color emoji;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: normal;
}

Current Font (open sans)

System Stack (MacOS)

02 - Update bold, semibold font variables

XWiki maps bold and semibold values respectively to 900 and 700. However, the real semibold values for most fonts is 600, leaving 700 to proper bold styles. 900 is extra bold, but we don't have a mapping for this style.

Relevant doc: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping

Current	Proposal

03 - Update the default heading to use the updated semibold version

On long documents, with lots of heading, it might be difficult to visually distinguish each one. Using a semi-bold font-weight should improve this situation without taking too much extra space.

Example:

Current	Proposal

04 - Reduce button size on desktop

Note: This proposal is considering a desktop device with a mouse like pointer.

Button are using the default text size and a good chunk of space for padding.

• They could be switched to the smaller text variation, since they already stand out on their own in the UI.
• Reduce border-radius to 4px or the equivalent variable.
• Standardize on the grey OR white variant for all secondary buttons. Right now the main edit buttons are of one color and all the rest of the secondaries are white.

Context	Proposal

05 - New font size for modal headers

Currently, the modal header spacing and font size is very large, taking valuable space from the content of said dialog.

Current: Here we have: a font size of 20px paddings of 15px in all sides	Proposal Changes: Font size is the same as the body text, font weight is semi-bold (using the new proposed value) Padding is asymmetric, using 8px for top and bottom and 16px side-to-side (to keep alignment with the content)

06 - Make the footer use the body background colour

With the current layout, the footer standout too much on shorter pages depending on the viewport. This abrupt cut in the middle of the screen gives a bad impression and a sensation of lack of polish to the UI.

Current

Proposal

Make the background colour transparent and default link colour to the version info

Alternative

Make the footer sticky to the bottom only when the page doesn't have enough content to fill the whole viewport. This should be doable with flex or grid layouts in CSS, but it's a deeper intervention.

07 - Default to an 8px grid whenever possible.

Currently, XWiki uses a 10px grid for most things. However, an 8px grid is ideal as shown in the article below. Basically, by making multiples of 4 we ensure that spacing and sizing is consistent with more viewport sizes.

https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d

This is of course work that should be done in a case-by-case- scenario as it is very difficult to do it without using CSS variables throughout the whole UI.

08 - Livedata improvements

Livedata right now gives the impression of being unstyled and unpolished, while we do have a proposal for deeper improvements I'd like to propose smaller changes that could be made with very little effort.

Context	Proposal

09 - Decouple the Content Menu buttons background color from the Breadcrumb background color

Currently, the buttons in the content menu inherit their background color from the breadcrumb background color, which creates inconsistency across buttons in XWiki. This also forces users to modify the breadcrumb background color variable to adjust button colors, which is unintuitive.

If this differentiation between "content menu buttons" and "all other buttons" is desirable, it would be better to have specific variables for these buttons.

Current	Proposal

10 - Combine the navigation button and item separator on the Breadcrumb

Currently, a lot of space is wasted in deep hierarchies with two buttons on the breadcrumb. We could combine these two since one of them is purely visual.

Current	Proposal

11 - Page notification configuration button to icon only (bell)

Currently, the page notification config button takes a lot of space (and possibly even more on other languages) for a secondary functionality. We could improve it by reducing to icon only describing the current effect of the configuration (receiving, not set and blocked) and using tooltips to better explain what's going on (subscribed to page, subscribed to wiki, etc).

12 - Navigation Panel and Quicklinks

12.1 Remove item dots from the main navigation

They don't bring much to the table and give the impression that something is unstyled.

12.2 Navigation Items span 100% of the panel width

This makes the items easier to hit with any pointer device.

12.3 Reduce the font size of panel titles

These titles compete with titles from the content, they take too much space and should not be the main focal point when using the sidebar.

12.4 Make the selected page font semi-bold

The current selected page style is very low contrast. We can improve it without taking too much space by making the font stand out a bit more.

All navigation sidebar changes combined:

13 - Updated visual design for errors in the notification icon

When there's a problem that shows in the notification center, the current error color in the notification icon is very hard to see.

Past Proposal

The proposals below were described in their specific pages. Some of these contain changes that are more in-depth than just the visual solution. What I am proposing here is that we take just the visual improvements and implement these separately. 

Newest Font Awesome

Implement the changes necessary to support the newest releases of font-awesome. Especially https://jira.xwiki.org/browse/XWIKI-23499

Notifications

Implement the updated visuals on the https://design.xwiki.org/xwiki/bin/view/Proposal/NotificationCenterRedesign

Document Footer

Implement the updated visuals on the Tags proposal

Tags: https://forum.xwiki.org/t/tags-look-revamp/13370/19 and https://design.xwiki.org/xwiki/bin/view/Proposal/Tagslookrevamp

Like: https://design.xwiki.org/xwiki/bin/view/Proposal/xDocFooterRevamp#HLikebuttonchanges