Icon Improvements in Global Administration

Development
,
1

Hello! :waving_hand: I’m here today to discuss a fast improvement we can do to the icons in Global Administration.

Proposal

The idea would be to get advantage of solving a low-hanging fruit:

  • changing the files of the icons in Global Administration with more modern images, high-res ones.
Pros & cons

Pros of the proposal - We easily modernize GA, thus improving the perceived value of the product

Cons of the proposal - The documentation will not be cohesive with the reality of GA. I think it’s worth changing things even with this con, as we don’t change the contents of GA - the text items stay the same, in the same order, in the same layout.

Current situation :magnifying_glass_tilted_right:

GA has icons that are not cohesive in a style with the rest of the UI (which is mostly flat, minimalist, limited in color). Their respective style is also pretty old-looking, making the whole UI feel unpolished and lowering the perceived value of the product for a first-time user.

image
image534×656 63.3 KB

Proposal Implementation :thinking:

The ideal implementation needs to be very low effort so we don’t take time from more important things. Also, note that a revamp for Global Administration has been more or less validated, and that proposal doesn’t contain any big icons.

The idea for this proposal would be to replace the .png files in only one color for all themes (a medium gray, that work for light themes and dark themes at the same time).

Color contrast

In the following proposal, the icon itself (not the border) has the color: #939598 (has 3:1 contrast against the white background in Iceberg).

Icon set

The icon set used in the final icons are from Font Awesome 7.

New icons - 2 versions :backhand_index_pointing_down:

Version 1 - with border

with border
with border1999×1302 154 KB

Version 2 - no border

noborder
noborder1999×1302 148 KB

Before & after :light_blue_heart:

In the after version (right side), the UI feels a bit more modern and even cluttered.

image
image2442×920 162 KB

Used on light & dark themes

image
image2437×917 185 KB

All icons

If you want to see all icons made for this proposal, covering all sections of GA, see the extended proposal.

What do you think? :thinking:

  • With border or with no border?
  • Should any of the icons be improved/changed?
4 Likes
2

+1 from me, looks great!

I like the version 1 - with border slightly more.

Thank you for researching this improvement :smiley:

Lucas C.

3

+1, both versions look fine to me

4

+1 as well, with a preference for the bordered version. Thanks!

5

I would go for the bordered version, the unbordered one seems a bit floaty to me.

Thanks Adina!

6

Hi,

I think I prefer the border-less version but:

  • either with slightly larger icons (keeping the current layout)
  • or with icons inline with the category title (and maybe slightly smaller)

I’m not sure why you proposed using Font Awesome 7 icons when we haven’t upgraded yet because there are some things to fix first Loading... . Shouldn’t we use the configured icon set instead?

Thanks
Marius

1 Like
7

I didn’t use the current version of FontAwesome as it’s old-looking and the purpose of these icons would be to make the GA looks more modern with as little effort as possible.

8

I don’t understand. Is your proposal dependent on the FontAwesome upgrade? As in: it cannot work without upgrading to FontAwesome 7?

Yes: then we need to wait for FontAwesome 7 upgrade Loading..., which is not trivial
No: then we don’t need to wait for FontAwesome 7 upgrade, so why not show screenshots with the current version of FontAwesome because that’s what we’ll get if we implement this now?

Thanks,
Marius

1 Like
9

Nope.

Because they are .pngs, they are not dependent on our icon set.

10

I thought FontAwesome is font-based. Are you suggesting generating some PNGs for some icons from FontAwesome 7 and bundle them in XWiki Standard? Attach them to the administration section pages or put them in the XWiki WAR?

11

FontAwesome is font-based, but to make things easier and quicker we can temporarily generate pngs from FontAwesome 7 and link them somehow (in the easiest way possible) in XS

12

OK, so your proposal is basically to replace / overwrite the existing PNGs used for administration category icons with the ones generated from FontAwesome 7. It’s clear now.

Thanks,
Marius

2 Likes
13

Hello! Any progress on this?

14

Hi Adina.This topic is not solved and the design proposal is not marked as accepted on the design page. From what I can see, the feedback is positive, so I think you can close it and mark it as accepted.

The only remaining topic is the presence of a border or not (we are at 3 for both), so I think it’s up to you on your prefered version =), just make sure to update the main design page with the choosen option.

15

Okay, I vote for the bordered version, but if any other committers vote in the meantime, feel free to disregard my vote and choose the most voted from those votes.

I’ll make this response the solution and update the proposal

https://design.xwiki.org/xwiki/bin/view/Proposal/IconImprovementsinGlobalAdministration

1 Like
16

Thanks, I’ll try to have it on my next roadmap.

1 Like
17

XWiki is on FontAwesome 7 now so it would be nice if we could avoid the PNG-based solution if possible. Maybe the proposal could be updated accordingly? Also, now that we’re on FontAwesome 7, would it be possible to use the same icons for the big icons as we use in the navigation on the left to avoid inconsistencies between them?

1 Like
18

afair, i used FA7 on the proposal so it’s actually up to date visually, i ll make a mention in the proposal to use the icons and not the pngs