Jump to content

Can anybody help to improve the design of AdminStyleRock?

bernhard

By bernhard,
in Pub

 Share

Recommended Posts

bernhard Hero Member

bernhard

Posted
Posted

What I really love about AdminStyleRock is that you simply set one color and the PW backend immediately looks like it was built only for this client:

3nEvy8I.png

zlHyoii.png

mPrnwIb.png

But I'm not a Designer, so I just kept it very much like the default uikit theme.

What I don't like is that several parts, especially the important page edit screen and all the inputfields have very low contrast and as I'm using dark mode now I think all the white is quite heavy on the eyes.

What I don't like on the reno theme though is that it has totally unique and opinionated colors that never ever fit any of my client's CI. It's really easy to adjust everything of the style using simple css/less, but unfortunately several years passed by and nobody did improve this foundation.

I wonder if some designers are still afraid of messing around with the css/less, so I want to ask if we have any designers here that want to work in improving the style in collaboration with me? We can do video calls or I can try to work from figma designs. Maybe we could even think of adding a light/dark mode toggle as we are working on it.

Another thing that is not ideal is that it seems to be impossible to find all existing admin styles in the modules directory at the moment? Using the search I found these:

RxcaqiF.png0J9Xo9h.png

In terms of design I think @Noel Boss AdminThemeBoss is very nice, but I don't like that it's an AdminTheme and not just a Style. And I'm not sure if he is still active in the PW world?

If anybody has opinions to share or ideas on how to improve the situation please go ahead!

  • Like 3
Link to comment
Share on other sites
  • bernhard changed the title to Can anybody help to improve the design of AdminStyleRock?
Chris-PW Full Member

Chris-PW

Posted
Posted

I want to pursue this further and get involved. Unfortunately, I have so much to do both personally and professionally that I don't think I can do justice to you and your goal. But maybe I can join in, even just a little, if you want.

Uikit is great and I have used it several times. But there are a few things I don't really like about the base. For example, the very light shade of gray that can also be found in the menu in your style. This is not barrier-free (is that how you write it in English?) nor is it user-friendly. Maybe it would be better to mark a hidden page in the menu differently. Maybe better in the PW admin page tree with a meaningful icon or background color. The UIKIT docs have the same problem. Only the active page in the menu has enough contrast. The color tone for (disabled, muted, etc.) in conjunction with the typography, which is then also used for the background, would have to be separated. Light gray as a background color yes, but not as a color for text elements. I think it should be more “form follows function”, especially in the admin area. But it doesn't hurt if it looks good too. With the “normal” PW Admin, I find it better that a few more colors are used than just one primary color. Especially for buttons “Edit”, for example, could be green and the rest dark gray.

What would it look like if a customer had a very light pastel color as their primary color? Then it doesn't actually work or the admin would have to completely invert the color. This could possibly even happen automatically using color values. If the contrast of the primary color is not enough, dark mode is activated automatically. With a medium color as the primary color, it becomes difficult to make this decision again...

There are still a few things that come to mind, but perhaps the above is something for a basic collection of ideas for an optimal admin theme.

Maybe we can talk about it directly in German when we get the chance (Google Translate is also my friend here when I write).
But now I have to keep working...

Many greetings and thank you very much for everything you do here. I enjoy reading it and following what the „PW-DEV professionals“ are doing here.👍😀

Chris

  • Like 3
Link to comment
Share on other sites
snck Full Member

snck

Posted
Posted

Hey @bernhard, I have used AdminStyleRock multiple times and also really liked being able to adapt it to a client's corporate design in no time. I am (as usual) really busy at the moment, but willing to at least give some input (if you want me to).

The main problems I see with AdminStyleRock are the ones that I also have with the standard AdminThemeUikit. Many of my clients have complex forms in the backend and while the general theme is simple and quite minimalistic, UI elements take a lot of space, editors have to scroll a lot and that is something that makes up for a bad user experience. A good backend should feel like a tool that supports you in doing your job as efficient as possible. For me and a lot of clients AdminThemeUikit never felt this way, the Default theme, however, feels outdated. AdminThemeUikit might be fine for a simple blog page or forms that consist of only a few fields, but for more complex things I still prefer the default theme.

I would love to have more configuration options in AdminStyleRock that make it easy to not only adjust colors and maybe how shades are calculated (could be nice to have, if you want to adjust contrast or the general feel of the style to an existing corporate design without overcomplicating things), but also be able to adjust margins and paddings (or choose between 2 or 3 optimized and battle-tested variations) to be able to create a more compact/dense/tool-like experience.

I hope, that makes sense?

If there is no pressure involved in the development and sporadic feedback is appreciated, I'd be happy to help. I should be able to join in on Friday, but me and my family are struggling with Covid at the moment, so don't be mad if I have to cancel it last minute.

Flo

  • Like 1
Link to comment
Share on other sites
sebibu Full Member

sebibu

Posted
Posted

Good Morning @bernhard,

even though I'm not a trained designer, I'm interested in the topic and I can certainly contribute constructive criticism.
And new to Processwire it's also good to get in touch with you and other enthusiasts via video call.

If nothing comes up, I'd be there on Friday preferred between 2 - 3 pm (or else 11 - 12 am)!

Sebastian

  • Like 1
Link to comment
Share on other sites
Chris-PW Full Member

Chris-PW

Posted
Posted
1 hour ago, bernhard said:

@Chris-PW what about these time slots?

For me, 11:00-11:45 might work. My kids get home from school early because of the start of the Easter break. That could blow up the conversation (-: Which tool do you want to use? During Corona times I often used Jitsi Meet because you don't need any registration or software. (Hope we all speak German?)

Link to comment
Share on other sites
Chris-PW Full Member

Chris-PW

Posted
Posted
7 minutes ago, bernhard said:

Ok great, let's do 22.3. @ 11:00 GMT+1 (Vienna) @ meet.baumrock.com (also no download or registration)

Yes, the meeting will be in German!

Great, see you there on Friday

  • Like 2
Link to comment
Share on other sites
snck Full Member

snck

Posted
Posted
8 hours ago, bernhard said:

Ok great, let's do 22.3. @ 11:00 GMT+1 (Vienna) @ meet.baumrock.com (also no download or registration)

Yes, the meeting will be in German!

Perfect! See you then! 🙂

  • Like 2
Link to comment
Share on other sites
sebibu Full Member

sebibu

Posted
Posted

I just installed and played around with AdminStyleRock and AdminThemeBoss to be a little bit prepared.

On 3/18/2024 at 1:17 PM, Chris-PW said:

Only the active page in the menu has enough contrast. The color tone for (disabled, muted, etc.) in conjunction with the typography, which is then also used for the background, would have to be separated. Light gray as a background color yes, but not as a color for text elements. I think it should be more “form follows function”, especially in the admin area. But it doesn't hurt if it looks good too. With the “normal” PW Admin, I find it better that a few more colors are used than just one primary color. Especially for buttons “Edit”, for example, could be green and the rest dark gray.

What would it look like if a customer had a very light pastel color as their primary color? Then it doesn't actually work or the admin would have to completely invert the color. This could possibly even happen automatically using color values.

Good points! I agree with you.

I think it makes sense to design all action related things (mostly buttons) with the same striking color.

On 3/18/2024 at 1:17 PM, Chris-PW said:

If the contrast of the primary color is not enough, dark mode is activated automatically.

Normal mode and dark mode should IMO be separated from the color contrast topic.
Normal mode bright and friendly. Dark mode to work more relaxed in the dark and to generate less ambient light.

 

Just seen.. with AdminStyleRock the Offcanvas mobile menu looks as if it was not styled. Is that intentional?
In any case, the colors are very contrasting.

358617212_Screenshot2024-03-22at10-10-03PagesProcessWire.png.8c761893ca426dc1954d35ca2274a4dd.png1520797363_Screenshot2024-03-22at10-08-44PagesProcessWire.png.3c9d06e8d4ec2aaf90a5761209e1baa6.png

 

Looking forward to see in a few minutes!

Sebastian

  • Like 1
Link to comment
Share on other sites
snck Full Member

snck

Posted
Posted
On 3/23/2024 at 11:26 AM, bernhard said:

It has been a great meeting yesterday 😎 We are working on something... 🙂 

UQ75giK.png

It's a pity that I did not make it. Is there still a chance to participate? And if there is, how? 🙂

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...