Minimalist Skin / Theme Design

Development
,
#1

Hi everyone! :slight_smile:

A couple of weeks ago, at an internal XWiki SAS meeting, several persons have expressed an interest for a minimalist revamp of how XS looks. Thus, I’d now like to bring this idea to the XWiki community.

The ideas for this revamp have been documented in this proposal and you can see them in action here.

The main idea would be to create the clean slate look that is so, so beneficial to organizing knowledge.

As the proposal describes, the revamp is looking to:

  • flatten every existent element in the current main theme,
  • eliminate unnecessary borders (literally and figuratively!),
  • get rid of too many rectangles in too many shades of gray,
  • bold out the elements that matter the most in structuring knowledge,
  • increase the space between elements to make the overall design breathe more.

XWiki has always had its main focus on functionality and that’s truly amazing. The team has created a remarkable & complex beast of knowledge organization. This said, I think it’s time to make a big and long-lasting change on the UI of the product to make the functionality shine even brighter.

Motivation for a big design change: 1. we’ve all seen comments or, at the very least, thought about how XWiki looks a bit outdated 2. the design will continue to become more outdated as time goes by, especially when 3. our competition and new XWiki users put an increasing value on esthetics. Notion literally put a big banner with “Software should be beautiful” on a central building.

Ideally, every XWiki theme would follow the same rules that the proposal describes, so… we would be talking about a skin creation / modification.

Alternatively, if we consider that the effort of creating / modifying a skin is too big at the moment, a new main theme based on the proposal would certainly still bring a lot of value. We could use this theme when showcasing the product in videos or graphics.

Motivation for CREATING a new skin: 1. outdated 2. the current skin is hard to update 3. if there are users that want to keep the old skin, they should be able to

Motivation for MODIFYING the current skin: 1. outdated 2. less effort than creating one.
Observation: In this case, we are losing the current one. There might be people that like the older skin more for the nostalgic feeling.

This new skin / theme could benefit a lot from these two other proposals:

  • Minimize Panels Buttons documented here
  • Font Awesome New Icons documented here

What do you think it’s the best way to go about this: theme, new skin, updated skin?

What should be the next steps for implementation after a final agreement?

How much time do you think this would take to implement?

Any suggestions, questions or feedback are appreciated. :slight_smile:

3 Likes
#2

Interesting.

Can you share more screenshots? The one in the post is not clickable (if it was meant to be).

1 Like
#3

@watery The link works for me: Showcase - XWiki

You can also see screenshots at Minimalist Skin Design (Proposal.MinimalistSkinDesign) - XWiki

2 Likes
#4

Yep, sorry, must have missed those in the OP :blush:

#5

It will probably be a short answer, which will raise some questions after a while. Everyone can use the default skin or modify it for personal needs, not even by providing the CSS style.

The current Flamingo skin needs fresh breath and the newest look-up. And from what I see, the best option might be to develop a new modern skin which will be optional to select during the fresh installation of XWiki.

To conclude, what can be done for now is to apply the specified rules after adjusting them (there are some duplicates). But better to create a new skin.

1 Like
#6

Well, we would need someone to develop a skin :slight_smile: Actually anyone can do that and publish a skin as an extension on extensions.xwiki.org. However, you should know that developing a new skin from scratch takes about a year.

Maybe by “new skin” you meant forking the flamingo skin and just making the proposed adaptations on that new skin? That’s possible, but it would mean dropping support for the flamingo skin since maintaining 2 skins is too much work (we tried in the past). So, very quickly the flamingo skin will stop working and user who haven’t upgraded won’t have a good experience.

My opinion is that the proposed changes look very minimal (I don’t have the full list of changes in my head but visually it looks minimal) and I wouldn’t do a new skin for that. I’d simply improve Flamingo as we’ve done for the past N years already.

Thanks

1 Like
#7

We may have some reasons to consider switching to a new skin (that I won’t develop here), but I agree that the changes proposed here are not worth doing that and can be applied on flamingo.

1 Like
#8

Wow, that is a lot of time!

I agree that the changes, although important and with great positive effect, still respect the main lines of the current skin and it seems to me that we should just update the Flamingo skin to not take time from other areas of developing.

#9

Agree with it.

Then we need more custom changes, not only single CSS :slightly_smiling_face: and decide what can be apply as an update for Flamingo. In addition, the current CSS style if I apply it to the whole wiki, makes not user-friendly look for the Administration section.

Or publish these recommended changes, so that everyone can use them on their needs, instead of directly put them in Flamingo as update.

#10

If you are referring to the CSS code from the proposal, that code is not supposed to be final code (I think there is a disclaimer on this in that section). Thus, changes are necessary for it to work perfectly.

#11

Hi Adina,

Thank you for your proposal but more importantly for your desire to improve XWiki’s UI. We certainly need lots of help in this area. I agree with Vincent and Manuel that this feels more like an iteration of the current Flamingo skin than a new skin so I think the best way to proceed is to:

  • split your proposal into smaller actionable items (e.g. make buttons flat, remove unnecessary borders, etc.), detail them and specify why we should make those changes
  • ask for a vote on each of these items
  • for the items that pass the vote create separate PRs with proposed changes

Now, some remarks about your current proposal.

Would be good to list the UI differences, or at least the most important ones, so that we can agree on them. It’s also very important for me to justify each design / UI change.

I see you made the buttons flat. I like that and seems to be consistent with what the rest of the UI frameworks are doing. But you also removed the shadow from the drop down menus, popovers and modals. I don’t like that. I know that Bootstrap 5 has done this also but I see that most of the other UI component frameworks are still using the shadow for elements that float on top of the content. Notion’s slash context menu has shadows also. I think the shadow is useful in these cases as it separates better the floating element from the content on top of which it floats. So I don’t agree with “every” part from your goal. I think there are some exceptions.

Regarding the buttons, their styles are not that good in your live demo. For instance, if you check the Export modal, the buttons look bad on hover. At the same time, if you check the History tab at the bottom of the page the “Show minor edits” doesn’t look like a button at all, until you hover it, so there’s some work left in this area.

Also, if you check the Information tab, you’ll see that even if buttons can leave without a border when used alone, they need a border when inside a button group otherwise it looks bad. This makes me think that in general it’s best to stay close to the default styles of the used UI framework (e.g. Bootstrap), otherwise, whatever change you make you need to ensure it doesn’t break the rest of the UI components and how they can be grouped together.

I think we all agree to remove unnecessary stuff. The part we often don’t agree is what’s necessary and what’s not :slight_smile: . Regarding borders, I see you made the border between the panel columns and the content column thicker which seems to go against your goal. I like better the current subtle border. I’d be fine to make it consistent with the line that separates the panel title from the panel content or the page title from the page content, or why not, remove it completely. But I’m not sure it’s a good idea to make it thicker? What’s the rationale?

On the same topic, do we need a border between the panel title and the panel content? Same, do we need the border between the page title and the page content? I’d be fine to remove both.

I see you more than doubled the border radius in various places (4px → 9px). I find it too much. I like rounded corners, but there’s a limit, for my taste :slight_smile: . What’s the rationale behind this change?

Also, the border at the bottom of the page content looks strange.

Can you give some examples of such rectangles that you removed?

I see that you literally applied the bold style to the panel titles and to other headings, while I guess you mean to emphasize the elements that matter the most, which can be done in other ways. Personally I don’t like the bold panel titles because they stand out too much, while the user should focus on the page content (the center area). I find the bold content headings a bit too much but I can leave with that :slight_smile:

It’s not clear to me where you added more spacing. Can you give some examples?

Thanks again,
Marius

#12

Thanks @amilica for this proposal! As discussed together, I agree with Marius that it would be best if you could if you could split this into small proposals (don’t forget the proposal label when you post). Thanks a lot.

#13

In the end there probably will be a new theme + improvements of the existing skin in order to achieve the changes.

There is also a technical criteria for choosing here: some things cannot be done as part of the color theme, or they can be done in CSS / color theme but more like a hack. In order to decide what’s what, we probably need to analyse each change individually, as others have proposed.

Actually, this is a decision of maintenance and comitment of support: if we want to keep the old one and make it part of what the product proposes to install, this means that, as part of the product, both skins (old and new) will need to be maintained functional. So, to me, it’s probably a good idea to lose it as we cannot maintain both (or there is no good reason to do so).
If the proposal here is to “keep it but not maintain it”, then nothing would stop a user from copying the old one as it was and use it on their instance if they like it, or make themselves a custom skin in which they revert the changes that we’ve done. Custom skin maintained by the user is already a feature of XWiki. So we can make our changes in the flamingo skin and then if someone wants the old one back (or any other change to our skin because they don’t like it), they can make and maintain their own skin, with whatever changes they need in it.

I have some feedback about this proposal, is there a dedicated forum topic open for it? Should I put it as a comment of the design page?

Otherwise the new clean look looks good overall, I didn’t check the details, though.

Thanks,
Anca