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?
3 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

1 Like