[4.0] Fix to Administration UI UX & overall design of backend template

[Chacapamac]

First you can see my full conversation on Joomla forum (with more than 41672 view) here —> https://forum.joomla.org/viewtopic.php?f=803&t=970614

Difference between an older design proposes and the “new” one that seem to be implanted;

The following image represents, an older design of the administration for Joomla 4 and the newer one.

I’m testing Joomla 4 right now and I find the design relatively weak. (this is my own opinion & I like to have some input from the community.)

On top, an older design that I find way superior from the newer one, at the bottom.
I will explain!

OLDER DESIGN
Even if not perfect, the older design is clearer and more professional, the left & top main menus/actions are well delimited, all menus typo white on the same blue background with some control elements in a slightly different blue shade.

The important square Quick Menus are also in the same shades with an addition of different color (Green) to inform on the state of the “Updates” in this case.

Also, important for the branding, the Joomla Logo appear in is entirety and in his original color.

The Eyes focus on two elements here, the main left & top menus & functions and the inside page (in a light neutral gray). Even the Quick menus, by its similarity with the main menus don’t become a distraction to the ensemble.

The light gray info page is acceptable.

NEW DESIGN
Sorry for the designer(s) behind it but it is important to see the weakness of this interface. I learn design with 2 high-end designers in my life (and my father) and I thank them every day to show me my mistakes and help me understand the logic behind the design.

Here no logic, no unification of the design of the top and left menu that now have two completely different schemes where the top menu now resemble more the style of the info page.

The left menu, lost in his corner, is now the main (Strong) focus point leaving the top menu, the quick icons and the info page in a washout mishmash of disparate blocks that have no real homogeneity.

The top white background is simply boring and the cute, lively Joomla logo is a simple dot in the corner.

All that in an uncertain palish light blue background that, I hope, will be replaced by a neutral gray to permit the info to stand out.

This is simply bad, between me and my 2 boss designers we cumulate close to 150 years of design, typography and branding and I hope, a good sense of what work and what don’t.

This, sadly, is simply not acceptable.

I LOVE Joomla and I Care to much to let that go

PLEASE FIX THIS!

Now this is what I propose.
And I will explain the reason behind the design here...

• I replace the cool blue used for the top/left menu by the more warmer friendly blue use in the old presentation - Make the Backend Atmosphere less cold (lifless)....

• Also, I replace the pale blue background by a neutral gray background to put the content stand out. By going neutral you got a better background that will not distort perception of images and attire attention — This is why Photoshop pros always use a neutral gray as background.

• Remark that I add to the first level menu few items that NEED to be there and not hidden to wherever...
1- Global configuration
Note: This menu need to be front & frontmost, nobody will argue with me, I think:)

2- Extensions (modules & plugins)
Note:Front & frontmost, and permit to reassemble the pieces (modules, Plugins) that you can add to a Joomla site to customize it

• I also change the order to rebalance the importance of the left menu.

• In the left menu I add a left triangle at the “System” item as I have no ideas for what reason, suddenly, we should have another menu system or different way to view content on this small menu to end up in the messier, unorganized System Page. It looks like the designer when out of ideas and throw everything in that punch bol that make me sick already. The Golden Rules of successful interface design, homogeneity and predictability is just trown by the windows, common people?????

• I add a direct Top button to Plugins (Inside Extensions), This is as much important as Modules or even Component. Need to be first level.

• I also put the Multilingual Sample Data where it should be in a normal left to right order of reading, before the Blog Sample as in a multilingual site the Blog data SHOULD NOT be installed before the Multilingual.

• I also, in the Multilingual data I Add hypothetical Direct links to the Languages Install and The Content Languages — We need to think to first time users, they are the one that will stick or not to Joomla

• Also I take out all drop-shadow as this is a big no-no in flat design, not needed here anyway

I probably forget something??

[Quy]

You're commenting on the old design. Please review the new backend template.

[brianteeman]

PLEASE look at the work being done in the dedicated admin template repo where you can see all the work being done on the template and you will see that it is VERY different to the one here in the current alpha.

https://github.com/joomla/backend-template (use the releases branch)

Any comments you have etc should be made their and not here and because this post doesnt reflect the current state of that template I am asking @franz-wohlkoenig to close this

[ghost]

closed as stated above.

[brianteeman]

I know you know about that repo as you have been told about it before

Did you ever reply to this request #24380 (comment)

[Chacapamac]

Thanks Brian, I’m trying to see how to use https://github.com/joomla/backend-template as, if I understand well you need to setup a local environment before being able to use the files there.

Any screenshots of this “New Administration design” ?

Elisa reply to me and say that I should contact Benjamin Treacle.

[Quy]

Here is information to setup a local environment:

https://docs.joomla.org/Special:MyLanguage/J4.x:Setting_Up_Your_Local_Environment