Renewing the admin area

[Piedone]

Renew the admin area with the help of a UX professional.

Id don’t think we want to rebuild it down to the last pixel, but rather, we’d need new foundations, better ways for the usual, common UI elements (like navigation, notifications, forms…), and guidelines on how to keep it consistent. The goal is for us to have a modern admin UX that’s functional, convenient, and unobtrusive, and something that ordinary contributors can extend by following patterns. We don’t want to have to awkwardly explain to newcomers that, well, this was built by developers for developers, don’t expect top UX on the admin, it’s rough not just around the edges. The point is to improve the usability of the admin, not just making it prettier (though making it prettier would be nice too).

1. Figure out where the issues with the current admin are. We can do this with surveys, user interviews, using the telemetry of DotNest, and checking the existing related issues.
2. Find a suitable open-source Bootstrap dashboard theme/template as a base (like AdminLTE). We'll need to build a somewhat custom admin story, but not from the ground up (including neither design work nor coding).
3. Figure out the basic Orchard Core-specific UX principles the admin should follow. Provide these as guidelines that any competent web developer can understand and extend the admin with.
4. Update a single piece of UI to be our perfect role model (like the basic content item editor), and the menu structure (or rather, the whole navigation story). The rest of the UI will be kept more or less as-is, but with updated common visuals (coming from the theme) and quick wins (e.g. common pieces like buttons, hints, labels, fields, will all be updated just by updating the common CSS classes, or with search and replace).
5. Release it as part of a major version. In the future, perhaps, maybe, follow the role model in all existing UI, and definitely in new UI. But whatever we'll have will be good enough at this point.

This is a follow-up from https://github.com/OrchardCMS/OrchardCore/pull/17112. This is a meta-issue about building a new UX for the Orchard Core admin.

• [x] Find a suitable UX professional. Lombiq sponsors their work.
• [ ] Figure out where the issues with the current admin are.
• [ ] Find a suitable open-source Bootstrap dashboard theme/template as a base. The code and the possible color schemes should comply with WCAG 2.2 AA.
• [ ] Figure out the basic Orchard Core-specific UX principles the admin should follow.
• [ ] Update a single piece of UI to be our perfect role model.

[Piedone]

I've written to some acquaintances, asking for referrals for the UX person, and I've also published https://opensourcedesign.net/jobs/jobs/2025-01-07-orchard-core-cms-admin-ux-revamp. There are several responses, so I'm trying to find who to start working with.

I've gathered the information in a SharePoint folder (neither is GitHub too good for collaborating on spreadsheets and Word documents, nor are the personal details there public). If you're a maintainer and would like access, just tell me.

[hishamco]

You remind me of a very very old demand, I already started many PRs in the past to improve the UI/UX some of them were accepted, and some were not (because almost all of us are devs). I can consult one of my friends here if this is possible unless you find someone better also, we can let Michal Kuzela and Puxdesign guys handle this, I see a very awesome UI they built at Harvest 2024

Find a suitable open-source Bootstrap dashboard theme/template as a base.

I might disagree with this one no need to be tightly coupled on Bootstrap as we see today even in the code, I already had a discussion about this with one of my friends a long time ago. I have a UI demo that I did a long time ago but was not finished allowing us to switch between UI frameworks easily, I agree to build a base but it SHOULD be extendible and replaceable

[hishamco]

BTW this need to be a discussion right?

[Piedone]

I can consult one of my friends here if this is possible unless you find someone better

Yes, please do. You can send the link to the ad for ino: https://opensourcedesign.net/jobs/jobs/2025-01-07-orchard-core-cms-admin-ux-revamp.

we can let Michal Kuzela and Puxdesign guys handle this,

I didn't think of that, but @MikeKry what do you think?

I might disagree with this one no need to be tightly coupled on Bootstrap as we see today even in the code ... I have a UI demo that I did a long time ago but was not finished allowing us to switch between UI frameworks easily,

Please demo what you've build on Tuesday. This is about keeping the goals realistic: we could build an admin from the ground up, but that's neither feasible (i.e. it would be a lot of work), nor necessary with existing solutions out there. We don't need to reinvent the wheel, but we need to figure out what kind of wheels we use and when, so to speak. Same for Bootstrap.

BTW this need to be a discussion right?

If you mean under https://github.com/OrchardCMS/OrchardCore/discussions, then I don't see why, this is a task to be completed.

[CatherineKiiru]

Hello @Piedone,

I am a UX & product designer and I'm interested in the role. Here are my recent design & development projects demonstrating my experience and for your consideration:

1. A family activities mobile app for Colchester, UK.
2. A property/apartment review platform for Africa. (Currently in development)

I also have experience in frontend development & contributing to Open Source. Some of my Open Source work includes:

1. Migrated Distribute Aid's website from Gatsby to Nextjs & Radix UI with a team of developers.
2. Built platform to showcase Open Source project's built by Africans with a team of developers & designers
3. Wrote the technical documentation for Flowbite's Blazor Component Library
4. Currently designing an Open Source collaboration platform Called Colabs for developers to find projects to build.

My strongest asset to your team would be my cross-functional experience in UX, frontend development & Open Source as well as my soft skills. Understanding how developers work (having been one myself), and how to simplify & enhance their workflows plus my UX skills would be a valuable addition to your team.

PS: I figured to give a snapshot of my experience here since you're already handling alot of applications. I will send my resume to the email provided.

Looking forward to your feedback, Catherine Kiiru

[Piedone]

Thank you @CatherineKiiru! Awaiting your e-mail, then; let's follow up there.

BTW the LinkedIn and Twitter links in your GitHub bio aren't links to your profiles but just the images.

[CatherineKiiru]

Thank you @CatherineKiiru! Awaiting your e-mail, then; let's follow up there.

BTW the LinkedIn and Twitter links in your GitHub bio aren't links to your profiles but just the images.

I have sent my application and will fix the social links, thanks for pointing out!

[github-actions[bot]]

We triaged this issue and set the milestone according to the priority we think is appropriate (see the docs on how we triage and prioritize issues).

This indicates when the core team may start working on it. However, if you'd like to contribute, we'd warmly welcome you to do that anytime. See our guide on contributions here.

[MikeKry]

@agriffard / @hishamco

We can surely can take a part in this. We have already discussed internally that we will be publishing our "Olive theme" as part of our open-source journey. Olive theme was designed by junior graphic designer, but it was consulted with our UX specialists so it should follow latest UX norms. We made it with regards to current OC features so there are almost no changes to HTML structure.

I think it could be good to use it, as it is already done. In case you would be interested, we can discuss details etc. so let me know :)

[Piedone]

Please let us know if you've open-sourced it! When do you intend to do that? If it's a long time away, may I get a sneak peek?

[MikeKry]

@Piedone

Not yet, but I believe we can accelerate the process. Would you be available to discuss this via email or possibly schedule a quick Teams call on Monday? I’ve already scheduled an internal meeting within the company for Tuesday to gather all the information you might need.

[Piedone]

Yep! I'll send you an e-mail to schedule it.

[Piedone]

I'll present at today's meeting where we are with all the potential designers.

[MikeAlhayek]

@Piedone is this on the agenda for today?

[Piedone]

Yes, see my previous comment.

[Piedone]

From today's meeting:

@daveblack101 mentioned that https://ui.shadcn.com/ is a good component library that we could utilize (and https://moon.io/ is one that one of the applicants mentioned). There's even an open-source admin UI built with it that @agriffard linked: https://github.com/satnaing/shadcn-admin. This uses Tailwind CSS, what we could switch over to from Bootstrap.

[hishamco]

It requires vite

[MikeAlhayek]

I think there is advantage of using Tailwind. And if we decide to change the TheAdmin theme, I think Tailwind is the way to go.

[Skrypt]

Take note though that Tailwind is pure CSS and that means that we eventually drop usage of SASS. It is not recommended to use a pre-processor and a post-processor at the same time. Tailwind strongly advise against using SASS along with it because it cause all kinds of issues. Plus, I think that modern CSS has pretty much all the features that SASS has except "mixins" but it is debatable. Personally, I don't think SASS is necessary anymore since we can do nested CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

[Piedone]

I had some further calls last week, and I think I know who we should work with, but I'm still waiting for some replies. I hope to have a proper updated next week.

[Piedone]

Still waiting, for three promised proposals (the supposedly last one of these is promised for next week).

[MikeKry]

We have published our olive theme @hishamco mentioned above (see https://github.com/OrchardCMS/OrchardCore/discussions/17482), so it can be eventually used as an inspiration for renewal of admin area :)

[Piedone]

Great! That was one of the things I was waiting for.

[Piedone]

I'll give an update at today's meeting.

[Piedone]

I'll have updates at the next meeting.

[agriffard]

Here is a library I stumbled upon: https://github.com/htmlstreamofficial/preline https://preline.co/pro/dashboard/index.html

[daveblack101]

Do you know about this one Antoine? https://github.com/tabler/tabler I cannot recall whether it already got a mention.

[agriffard]

Do you know about this one Antoine? https://github.com/tabler/tabler I cannot recall whether it already got a mention.

Tabler is indeed a very popular admin template. I knew it from https://github.com/TabBlazor/TabBlazor (Blazor components based on Tabler)

[Piedone]

We're starting this with @baipai. First, we'll have a kick-off call with anybody who's interested. Please, let us know your interest in taking part in this call, and as an active stakeholder in this project, here: https://github.com/OrchardCMS/OrchardCore/discussions/17810

[daerogami]

Take note though that Tailwind is pure CSS and that means that we eventually drop usage of SASS. It is not recommended to use a pre-processor and a post-processor at the same time. Tailwind strongly advise against using SASS along with it because it cause all kinds of issues. Plus, I think that modern CSS has pretty much all the features that SASS has except "mixins" but it is debatable. Personally, I don't think SASS is necessary anymore since we can do nested CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

Sorry for chiming in late on such an old part of the thread. Just want to share what I discussed with my team in Oct of last year on the notion of dropping SCSS in favor of CSS now that it supports nesting. We decided against it for a couple reasons:

Not only are the mixins a really powerful feature, but the built-in behavior of bundling/re-use (import, use, forward) and minification are pretty strong points for keeping it. While CSS has a ton of functions, SCSS has some useful ones such as lighten(), darken(), staturate(), desaturate() just to name a few that are really nice for building a theme around a couple colors then basing stateful colors off of those few initial ones. There may also be arguments for having unit arithmetic compiled, in some cases where CSS's calc() might be undesirable.

Just wanted to share that perspective in the event the consideration was still on the table.