J4 Issue No Code Attached Yet
avatar Chacapamac
Chacapamac
27 Oct 2018

Just My view
• I tone down the background & take out the gradient (that I find ugly) to bring attention to the login itself — Flat design

• I add a dark blue border and shadow to the login box for the same reason

• I put the same dark blue as the title background, I don’t like the white background that is to similar to the name/password input — Not Nice

screen shot 2018-10-27 at 16 22 56

avatar Chacapamac Chacapamac - open - 27 Oct 2018
avatar joomla-cms-bot joomla-cms-bot - labeled - 27 Oct 2018
avatar Quy Quy - change - 27 Oct 2018
The description was changed
Title
Login Design Reloaded !
[4.0] Login Design Reloaded !
avatar joomla-cms-bot joomla-cms-bot - edited - 27 Oct 2018
avatar joomla-cms-bot joomla-cms-bot - edited - 27 Oct 2018
avatar joomla-cms-bot joomla-cms-bot - edited - 27 Oct 2018
avatar infograf768
infograf768 - comment - 28 Oct 2018

I like it. Can you make a PR?

avatar Chacapamac
Chacapamac - comment - 28 Oct 2018

What is a PR?

What you see is what you already have the change on the front box can be done by css.
The pattern is from the template Atum — joomla-pattern.svg
The only thing I need is to know how your SVG are save? (What settings)

avatar roland-d
roland-d - comment - 28 Oct 2018

@Chacapamac A PR is a Pull Request. You make the code changes and post them on Github. That way we can see what the changes are and merge them into Joomla once approved.

avatar simbus82
simbus82 - comment - 29 Oct 2018

Nice work for the background! I like it! But borders are not useful and not respect the "design proposal".
The white box for title was more readable.

avatar Chacapamac
Chacapamac - comment - 29 Oct 2018

I already prepare but not submit the PR
• I personally prefer with the border as it delimit more the form from the background.
— What should I do ?
• “The white box for title was more readable.”
— I can’t see a problem of readability here and The white box take away attention or is to similar from the white input of the form

— What should I doff the PR ?

avatar simbus82
simbus82 - comment - 29 Oct 2018

Excuse me, did you see the design proposal presented on Joomla.org?

https://volunteers.joomla.org/teams/joomla-4-working-group/reports/787-joomla-4-updates-may-2018

It is not final and is not without errors.
But it gives us some very good guidelines (and, i think, approved by community) on how to develop the UI.

https://projects.invisionapp.com/share/8SES9JLZB#/screens

PS: All judgments abouts graphics & design are subjective, of course.
For example, I much prefer the old proposal. It's more modern and "fresh".
image

avatar Chacapamac
Chacapamac - comment - 29 Oct 2018

Excuse me, did you see the design proposal presented on Joomla.org?
Thanks simbus82, no I didn’t know it exist...

I just take a look at the invisionapp _
Note: Only work with my Chrome — tested on Safari & Firefox Dev Edition

• I don’t see any special proposition for the Login & installation process.
• I see only ONE Image that give a general feel & look of the administration itself, that’s it ??? Normal? and even the look of the menu is the old version...

Design is so subjective, but...
I base my feeling and my view here, based on more than 25 years of experience in web and industrial design and as a UI & UX designer. What I learn is that even minute details can have big impacts on the overall usability of a software.

Every design I do have to have a reason to be a certain way.
Here the 1px border give definition & focus to the overall login form from the background and the dark blue background for the site title bring less noise and interference to the important part of the form (the 2 white input)

I wait for feedback to make the PR...
I also need to better understand how that process work.

I have also suggestions for the Administration look & feel show on the invisionapp url you give me.

avatar jeckodevelopment
jeckodevelopment - comment - 29 Oct 2018

@Chacapamac , my 2 cents.
Administration login should not have "Forgot username" and "Forgot password" links.

avatar Chacapamac
Chacapamac - comment - 29 Oct 2018

Ok Simbus, I see something important with the design you show. Something is wrong with the overall color of my example?????
And I agree, the white header is also attractive and clean.

I come back with something...

avatar simbus82
simbus82 - comment - 29 Oct 2018

I also need to better understand how that process work.
Me too :-)

Just to clarify: I'm not the designer and I never took part in the creation.

I only saw that in the design proposed by @coolcat-creations , there was a good idea about the "mood". Since other developers are following that design, I have only highlighted that we can extrapolate some guide lines from the invisionapp.
I did not know if you had seen it, that's all ;-)
https://magazine.joomla.org/issues/issue-nov-2017/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend

For example, the "borders" are not used for the reason that you, instead, have detected.
So I immediately noticed the difference in the "mood"
But it is an evolving design. I think is essential any contribution, it is sad that the UX team did not "produce" a "definitive" output, to let developers work with more security and serenity.
Maybe can be reopened the discussion table on the UX, to collect all the necessary finishing (without trashing the, however excellent, work done)

Saturday at JoomlaDay Italy I spoke with many people (real users, marketers, experts and non-experts) of Atum UX. We found how many finishing could be made, but i think is needed someone that make decisions.

avatar Chacapamac
Chacapamac - comment - 29 Oct 2018

Thanks simbus82 to send me your link — Absolutely invaluable to start anything and not waste time.
https://magazine.joomla.org/issues/issue-nov-2017/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend

I’m starting over

First look at the sample you send me and what I work with 4.0.0-alpha5

difference

avatar Chacapamac
Chacapamac - comment - 29 Oct 2018

Thanks Simbus82 for your input (and more reflexion)

Ok Next batch, I finally keep the white title, now I know to be important because you can add a business logo in this zone. A neutral/white is more appropriate.

• I definitively take out that gradient that I find a little old school and muddy the new Joomla pattern
• I reduce the opacity of the joomla-pattern.svg to keep it to be visually not to strong
— Now you have a more modern flat design
• Out the stroke, to keep the uniformity with all the other Joomla 4 visuals & panels

• This is the orignal Alpha 5 minus gradient:
original-without-gradient

• I also try to make the login button a bit more visible
NOTE: I use a tertiary color in the 2017_Joomla_Brand_Manual
lighter-btlogin

• And the icons, (Not sure they should be the same color as they are not action buttons???
lighter-icon-btlogin

• Also it’s evident that the hover color on the original button are wrong and not visible enough
ORIGINAL
over-diseappear

My version
over-ok

avatar brianteeman brianteeman - change - 30 Oct 2018
Labels Added: J4 Issue
avatar brianteeman brianteeman - labeled - 30 Oct 2018
avatar Chacapamac
Chacapamac - comment - 1 Nov 2018

Do you want me to do anything ?

avatar Chacapamac
Chacapamac - comment - 10 Nov 2018

Just reinstall this morning - Nothing done, still the ugly gradient in background, still bad hover color on button — I’m ready to help but I don’t know How to do that here ?

avatar coolcat-creations
coolcat-creations - comment - 11 Nov 2018

Hello @Chacapamac - Thank you for your willing to volunteer at Joomla and to help on the Joomla 4 Backend. There are different ways to get on board. The one way is to get to volunteers.joomla.org and find the right team (In this case the Joomla 4 Team lead by @wilsonge ) and get in touch with the team to participate at meetings and to have a good overview which are the most critical parts and where help is needed. One of the other ways to volunteer is to submit a PR and have it tested by at least two other people. To understand the process here on GitHub it's probably a good idea to read the documentation. https://docs.joomla.org/Portal:Joomla!_Code_Contributors

My personal opinion is, that the backend template for joomla 4 in it's current state is far away from the proposed drafts by Lukas and I and it would be a good idea to start following it into all details. Improvements can be done anytime afterwards, but my recommendation is not to change the picture, or not to discuss about minor issues like color details until it's finished. Otherwise it will be never finished. Ever.

This said excludes the design of the main menu. I think the new menu structure is a huge step forward but the handling, visual style and animation - or let's say literally everything UI related needs huge improvement. If you have any ideas, that would be nice. I proposed something here but it was quite slagged #22005

Finally I want to say thats just a small lift / a little help to get you onboard, I have nothing to decide there.

Anyway: Thank you for everything!

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 11 Nov 2018

@coolcat-creations can you please change the link to https://docs.joomla.org/Portal:Joomla!_Code_Contributors (without / at the end), thanks.

avatar Chacapamac
Chacapamac - comment - 14 Nov 2018

Thanks, Coolcat, I’m just digging in Joomla 4 now and I try to note everything that I find using it.
I’m not a big php or script coder (but I can understand and navigate in it...), My forces are more on CSS, SCSS, Interface Ergonomic, UI-UX and general design and functonality.

Obviously. the “First Contact” is the installation process, and this is the reason of my post here.
Little details here, but important!

I also talk about the location, visual and installation of the multilingual system and the blog sample data
Here: #22907
and here: #23028

Also thanks for the 2 links, I’m investigating and starting to understand (with big questions) how to help here...
• Join a Joomla Team —> https://volunteers.joomla.org/teams

• And the (Pull Request (PR) system and the general GitHub System
—> https://docs.joomla.org/Portal:Joomla!_Code_Contributors
——> https://docs.joomla.org/Special:MyLanguage/My_first_pull_request_to_Joomla!_on_Github
——> https://docs.joomla.org/Using_the_Github_UI_to_Make_Pull_Requests

===================================================

I proposed something here but it was quite slagged #22005

I agree with you that the internal menu design is primordial, I agree also that, the actual menu need improvement.
This is probably my next thing I will work on and be sure that I will take your work in consideration.

You see (CoolCat) I’m not sure if I should post on your “Issue” or reopen a new one.
I personally think that reopening the same type of issues all over the place is non-productive. Is there a way here to regroup/search all the people working on the same issues (Like Design UI/UX...) and be able to work more as a group of specialists working in tandem, that will be great ???

Sadly, I didn't find an “ Interface Ergonomic, UI-UX Design” Group
— How that can be possible as it is a big part of the success of a CMS ????????

Can we start our own ?

avatar coolcat-creations
coolcat-creations - comment - 14 Nov 2018

Maybe have a look at all open issues by me - lots of theam are related to the concept to be found here. Besides this, grab @wilsonge and talk to hime directly. I am sure he will get you boarded on the joomla plane smoothly :-)
https://magazine.joomla.org/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend

PS: I believe a login page concept like here is also very nice: https://projects.invisionapp.com/d/login

Consider that both, joomla and the person/company running the site and maybe the developer have a place to present themselfes.

  1. Joomla - as the brand of the cms
  2. The company running the site to identify with the backend (maybe own background image or Logo)
  3. The developer to link to his support site.
    1. The user should find a help link to the docs to find out how to recover Administrator password (It's 99 % of the Support Mails that are coming through the contact form)

That would be 3 nice steps for the login page.

avatar chmst
chmst - comment - 14 Nov 2018

my2cent:
I do not see a necessity to change the design concept - I see only the necessity to implement the whole backend exactly as it is presented in the original concept. This is a complete artwork and should be implemented as soon as possible.
Then everything matches and looks young and modern. Maybe it is a matter of taste but I hate visible shadows, they remember me the time when I started web development ... 2008 ... and look ugly on small devices. We could discuss the gradient ...

But IMHO Joomla desperately needs some improvements in UX. The backend is not as user friendly as it should be.
@Chacapamac, you seem to have much energy and power, and you are expert in UX. Would you like to join a UX group and share your knowlege there? I have heard that there will be a re-start.

avatar Chacapamac
Chacapamac - comment - 15 Nov 2018

@coolcat-creations

grab @wilsonge and talk to hime directly

Ok I find him (George Wilson)
—> On Github @wilsonge
—> On Joomla (Leader of the Production Team)
https://volunteers.joomla.org/departments/production

The Production Team is also responsable for an Archived Joomla Team name
—> User Experience Team (JUX)

I will ask him, if it’s possible to revive it.

A refont of Joomla without this team is wrong...

Also the link for invision Joomla 4 original visual presentation is
https://projects.invisionapp.com/share/8SES9JLZB#/screens/266861164_Desktop_-_Login

=======================================
@chmst ,

Would you like to join a UX group and share your knowledge there?

Yes, where is this UX group

Curiously no such Team there ? —> https://volunteers.joomla.org/teams

I’m kind of shock to not see one as I say before:

Sadly, I didn't find an “ Interface Ergonomic, UI-UX Design” Group
— How that can be possible as it is a big part of the success of a CMS ????????

Can we start our own ?

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 15 Nov 2018

Curiously no such Team there ? —> https://volunteers.joomla.org/teams

@Chacapamac click on "Archived".

avatar Chacapamac
Chacapamac - comment - 15 Nov 2018

Thanks @franz-wohlkoenig ,
Find it, Archived, Unofficial ????
What that mean?

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 15 Nov 2018

What that mean?

in my opinion it was an official Team but isn't working so its archived. "Unofficial" i don't know.

avatar Chacapamac
Chacapamac - comment - 15 Nov 2018

Ok @franz-wohlkoenig — I will ask @wilsonge , that seem to bee in charge of that group if we can put it back as an official group — Joomla 4 coming & no UI-UX group, doesn't make sens...

Anyway Another login version (from everybody input...
login

avatar jjnxpct
jjnxpct - comment - 27 Nov 2018

#20191

I hope this feature (Remember Device) will be added soon. Maybe it would be good to include this in this design? Or at least take into account?

avatar Chacapamac
Chacapamac - comment - 7 Dec 2018

Kind of sad, after trying to reach to revive the Joomla archived team “User Experience Team (JUX)” or join and participate to any team in charge of the ergonomic development, design and UX for Joomla 4. No response ?????

Joomla 4 steaming along with an interface that is really far from optimal and people wanting to help have no place to donate their time.

This is a complete revision of the interface, not porting attention here can be catastrophic. So far I’m far from impress in what I see...


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22839.

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 7 Dec 2018
avatar Chacapamac
Chacapamac - comment - 15 Dec 2018

Invitation demand sent, thanks.

avatar rdeutz
rdeutz - comment - 15 Dec 2018

@Chacapamac got it. Give me some time to speak to the other team members to find out how/if you can help at this stage.

avatar Chacapamac
Chacapamac - comment - 15 Dec 2018

@Chacapamac got it. Give me some time to speak to the other team members to find out how/if you can help at this stage.

Sure, no problems!

avatar franz-wohlkoenig franz-wohlkoenig - change - 4 Mar 2019
Status New Discussion
avatar coolcat-creations
coolcat-creations - comment - 6 Mar 2019

Hello! We redesigned the login page to match the backend design. Will submit the PR as soon as possible.
grafik

avatar micker
micker - comment - 6 Mar 2019

Ahhh coolcat-creations..... Some news about it cool
Major change has i see, same for other page ?

avatar coolcat-creations
coolcat-creations - comment - 6 Mar 2019

Please check this presentation for details :-)
https://www.youtube.com/watch?v=C0doSVLgqnQ

avatar Chacapamac
Chacapamac - comment - 7 Mar 2019

This is my input on this design and what was show on this video:

First, after more than 4 decade of experience in design I can tell you that what is the most damaging to creativity today in design, music, architecture and any other form of art is those “Trends” that popup from nowhere and follow religiously as the “Trending” thing to do, see and listen today.

Trends for color, for style or like the famous “solid” design (as presented in this video) should be regarded as what they are by designer, trends and they should never be considerate as an automatic choice for any type of project and simply used as possible input of tested designs.

Interface design should be ALWAYS start by few simple questions and basic rules BEFORE choosing any style that will be apply. Anyway the functionality and the purpose should be the ONLY driving force behind the design, no other consideration, trends, fashion of the day should box your creativity.

In the case of a CMS like Joomla, it’s relatively simple:
_1- What we need to do with this administrative design

  • We need to appeal to any type of user from Newbie to Heavy administrators and Site owners (Corporate) alike._

2- We need a clear, simple, intuitive interface that is logical, easy to follow by any of these type of users

3- Joomla branding is obviously an important part of the project

Our design should follow these guidelines and the obvious recognized rules of design, that’s it.
Be innovative. Following to the T, an already old Trend, like Flat design is not a good idea, go free and make something beautiful and practical.

My comments on the design of the login is sadly not really positive.
1• This is flat design to another level, so flat that it become boring, please remember what our predetermined types of people should FEEL here, this is the first impression any user will have of the new Joomla, All the weight of the quality and name of Joomla is determined here, in this few first seconds ;
Do you see or FEEL any of this quality here?
• Excitement to engage in the new Joomla 4 adventure
• Strong impression of quality
• Joomla Branding reinforce

2• The visual block of information and interactivity go in all direction, we go from the left to the right and to the left again. This is far from a fluid, simple design.

I prefer, from far, the precedent design

login

Do you see or FEEL any of this quality here?
• Excitement to engage in the new Joomla 4 adventure

  • The Joomla logo appear entirely (logo + Typo) as the first item without overdoing it
  • The simple Joomla 4 accepted background bring more depth and warmth to the viewer.
    (remark that I take out the original blue gradient, now solid color)
    – The points of interactivity and actions I right there in one clear vertical alignement

• Strong impression of quality

  • A one good, no eyes dancing, all over the place design - This is a sign of quality

• Joomla Branding reinforce
See first comment

Sadly I try to help already but I was unable to even reach or discuss input in the design team.

Are you “coolcat” the design team?

The opinion here are free and don’t intent to hurt anybody, you see, I love Joomla and I care...

avatar Quy Quy - change - 4 Jun 2019
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2019-06-04 20:34:39
Closed_By Quy
avatar joomla-cms-bot joomla-cms-bot - change - 4 Jun 2019
Closed_By Quy joomla-cms-bot
avatar joomla-cms-bot joomla-cms-bot - close - 4 Jun 2019
avatar joomla-cms-bot
joomla-cms-bot - comment - 4 Jun 2019

Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/22839

avatar Quy
Quy - comment - 4 Jun 2019

Related #25087. Please discuss in the new backend template repo. https://github.com/joomla/backend-template/tree/release


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22839.

avatar Quy
Quy - comment - 4 Jun 2019

Related #25087. Please discuss in the new backend template repo. https://github.com/joomla/backend-template/tree/release


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22839.

Add a Comment

Login with GitHub to post a comment