🎨 Admin UI Design Updates (more UX)

[MMTHD]

Please revise the UI/UX a bit

I find the DevExperience with Payload wonderful. However, I find the UI a bit too cluttered and strenuous on the eyes, I originally come from Directus and am very convinced by their UX concept. I would like to see something similar with Payload. I understand this approach of being "unstyled" and modularly adaptable, which is somewhat successful and I fully support the idea. However, I think the UX should be better thought out, so that the focus remains on the content and the work schema/workflows are consistently repeated.

As a typical user, I don't have in-depth knowledge about UI/UX, so I'm just trying to describe my perception as best as I can to express my concept essentially. If I mention some things that go against UX principles, they should naturally be different. There are certainly people here who understand it a bit better, maybe you could help me explain the vision/the concept I'm proposing better if you share my opinion.

---

Specific points that personally stand out to me are:

Rough Concept Optimized for Linear Workflow

Distribution of Elements

To me, the distribution of individual elements on the AdminUI currently seems not clearly defined. This is due to many loose elements on the surface, which perform different actions.

For example: User icon at the top right, menu toggle at the top left, etc.

I believe such elements could find a more stable & semantic place and be put in a more meaningful context, like for example, the user icon/name along with a dropdown for profile settings & logout, all grouped together within the navigation bar on the left.

Toggle Sidebar for Meta, API, Preview

Fewer custom solutions for components: I tried to revise the UI of Payload a bit for my project to make the work with it a bit more pleasant and better. In doing so, I noticed that there are various solutions for dropdowns. On the one hand, ReactSelect is used (the adaptability and performance of it is not the best from my point of view) the styling and the UX of it then also differs from the Popup component which is also actually nothing more than a dropdown. RadixUI would be excellent as the main UI lib https://www.radix-ui.com/. In general, a lot of space is wasted in the content editing area, the title is redundant and too large. If the breadcrumb were larger and the free space above the editing mask disappeared, more meaningful space would be gained and more focus on the content would be obtained. The concept of tabs could also be done a bit nicer I think, I think that things like meta data, API, versioning, preview, and custom would be better accommodated in a kind of sidebar to the right (and not replace the editing mask when opening, but open in a nice drawer).

Clear Structuring and Contextualization in UI Design

I envision a somewhat stricter approach (is this also referred to as Island Architecture in UX?) I believe it would be significantly more pleasant and semantic if the Payload were divided more clearly into 3 - 4 action areas/control levels.

1. Navigation Level / Context Management

• Here, the context independent of data is navigated.
  • Navigation Context
    • Logo -> leads to the homepage/overview/dashboard
    • Collection Groups & Collections
  • User Context (Top or Bottom)
    • Settings
    • Logout

The navigation level is always present, allowing for quick context switching. All elements contained within it are not directly related to a specific collection or dataset (and vice versa). To focus on the data in the working level, the navigation can be toggled on and off, as it is now, but not completely removed, rather minimized to maintain visual stability and provide "an escape route."

2. Work Layer / Main Context

• This is where the main part of the data is processed:
  • Breadcrumb
  • Collection Data / Collection Item Data

The workspace/context, as a crucial component, is the area where the main actions related to the content occur (excluding meta-functions like API, preview, direct plugin integration) to provide even more focus on the essential part of the collection configuration. All action buttons such as "Create", "Edit", "Delete", "Duplicate", "Publish", etc., should always follow the same schema and have a prominent, fixed place in a consistent design. The breadcrumb above should be somewhat more stable and at the same time more prominent to describe the current context. Large collection titles and collection item titles would then no longer be necessary. The concept of tabs for meta-functions should disappear and be included in the third meta-context layer. This layer should always be present; meta-functions currently solved via tabs should be in a drawer overlaying the content workspace, a type of context-within-context (I am not sure if this is just my preference or if it actually lends more stability to the concept since everything is visually organized according to a certain hierarchy).

3. Meta Context Level

• This level offers additional actions related to collection and data-specific information
  • Buttons/Links for meta-functions
    • Activity Log
    • Versions
    • API
    • Preview
  • Space for additional functions and plugins such as SEO, Chat

The Meta Context Level, as I envision it, is a right sidebar that is always available, which can also be minimized and expanded upon action to perform necessary context-related actions like API, preview, SEO plugin configuration, etc.

4. Meta-Context Detail Level

• This is where additional actions for Collections/Content are carried out:
  • API-Docs view
  • Preview
  • Plugins

The Meta-Context Detail Level opens in a generous drawer (above the content) and allows for editing additional information relevant to Content or Collection (In the Collection Overview -> related to the collection and in the Collection Item View -> related to the collection item).

I imagine it somewhat like Directus, only that you have much more granular and flexible options available due to the flexibility.

Primary color

An adjustable primary project color, where the main action buttons are highlighted directly in color. When you have multiple projects and switch between them, it's also very easy and pleasant to differentiate between them.

All relevant undertones and overtones should be automatically derived from the primary color using CSS functions. This way, when adjusting the color, only one main value needs to be modified.

Icons

• The ability to configure icons for collections would make work in Payload visually less taxing.
• A standard icon library such as https://lucide.dev/ or another would be very nice.

Components

• Dropdowns, selects, and popups should ideally not be different components. This would also make it easier to style them with CSS.
• Using RadixUI under the hood would be very elegant (Vercel uses it too, by the way), whether it's custom or through some kind of Shadow DOM customization.
• Toasts are spread across the entire UI; I would find it more pleasant if they appeared less prominently at the bottom left.

Input Fields

• Input fields should be larger by default.
• Better focus handling with the primary color (I've tried to illustrate this in my image examples).
• The CSS styling of the input fields is currently more complex due to the variety of different input elements and libraries. It would be nice if one could adjust all input elements through CSS variables, even if they have a slightly different implementation that deviates from the standard.

General Presentation

Often a matter of taste, but I find rounded corners more pleasant to the eye, so I would prefer the option to adjust them across components using a CSS variable. Unfortunately, it is not yet easy to do this as the input fields are not bound to the CSS variables (maybe I misunderstood the CSS variables concept a bit). Currently, it's more in trend as it softens the UI, perhaps this should be pre-configured as a standard.

Animations & Ambiance

General app feel and ambiance: The animations should be revised so that the app appears visually stable. An example is the drawer, which opens very unstably and the animation here is unidirectional (only when opening, not executed when closing). The blur animation of the content while the drawer is opening is very fancy, but when you look at the cross-device performance, it's not worth it. Here I would do without and simply use a replicable transparent dimming, which performs visually much more stable. And in general, animations must not be interrupted, cause flickering, or appear unstable; they must be consistently repeatable.

Here is an example comparison of the problem I want to address and an example of what I would expect:

Payload Drawer:

Directus Drawer:

In summary

There are certainly many more small things here and there that really make a difference and can significantly improve the UX. I don't just see Payloadcms as a CMS but also as a data management platform, for me as a TS and React developer technically the better Direcuts. However, I find that the guys from Directus have really put some good thought into the UX concept, so that the focus is on working with content & the app appears very stable in terms of meta functions and animations, making the work with it extremely enjoyable. I would like something similar for Payload hence I mentioned Directus as a reference for inspiration, I think many others would also happily accept something like this. Meanwhile, the components at PayloadCMS should continue to be as plain as possible so that any CSS adjustments are possible. (But please with rounded corners so that it generally looks a bit softer, please without these shadows). I know that much of this could also be realized by one's own hand and plugins, however, that would be a rather suboptimal solution, as compatibility is not guaranteed and this is about the essential core elements and the basic structure of Payload, so that this also serves as a guide for all future extensions and a good UX is already predefined.

Since Payload is still partly in the phase of finding its way, I thought that with these suggestions and ideas I might be able to make a positive impact. If I find more points, I will add them here. I'm also open to further ideas and suggestions. I'm looking forward to the feedback

[rfdomingues98]

I also agree with what has been said here. I just want to add some things.

I found it a bit hard to customize (mainly) the colors. After going through the scss files, I saw that there were approx. 20 variations of each color variable, and although I understand that they all differ and might be getting used for different use cases, I feel like having so many variants is not great. I think it would be better to have a defined (small) set of colors for each variable we need (for instance, primary, secondary, error, warning, info) and just play with the opacity (or alpha) of those set colors for things like active/focus, outline and such things.

Regarding a possibility of using a component library (be it internal or not), I'd say that using Radix UI would be a good idea for customizing the styling for internal use, or just start off with shadcn ui in order to have a bunch of components already stylized. It comes with an advantage: it already provides a great dark theme that is super consistent with the color scheme of the current Payload Admin. This can also be easily adapted to have multiple color schemes, as you can see here. On top of all, I don't think there is any custom component that Payload Admin required that isn't already built on shadcn ui (at least I haven't found any yet) that would require going out of the way to code it from scratch.

I'm aware that this involves a massive change, since it would involve changing the whole admin ui, but these suggestions are supposed to be considered for future versions.

[revnelson]

+1 for shadcn/radix.

[akhil-naidu]

Would like to see more of ShadCN and TailwindCSS.

[mhernesniemi]

The admin UI feels very flat and, unfortunately, brings to mind shadcn/ui in a negative way. Introducing a variety of colors, shades, shapes, and sizes would make it easier for users to distinguish between different elements, functions, and their roles.

[akhrarovsaid]

I'll be completely honest, I don't like the idea of colors in Payload. I much prefer an easier way to customize colors in the Dashboard to our requirements but I think colors should, by default, remain completely neutral. Colors can sometimes improve UX when used tastefully, but I'd rather be the decision maker there - not my tools.

[denizbinay]

I came across this post while looking for discussions about the UI. I have a design background, and while I appreciate the excellent UX-related points already discussed, I’d like to add my perspective on the overall design.

In its current state, the UI feels a bit plain and unstyled. A few design tweaks, like incorporating accent colors to highlight important elements and moving away from system fonts, could really bring more character to the interface. Right now, it doesn’t feel particularly engaging visually. I understand that some of this might be intentional, but is that really what we want?

Personally, I don’t need a fully customized backend for every project, but I believe the default appearance should look polished and professional—especially when we’re showcasing it to clients. If we’re discussing the tech stack we use with clients, the backend is often part of that conversation. Payload has amazing features, and its website presentation is fantastic, but the backend UI feels underwhelming straight out of the box.

The example above of the Directus backend demonstrates a modern and usable design that feels appealing and easy sellable. Am I the only one who feels this way?

[mfilteau]

There is a very nice theme generator here: https://10xmedia.de/theme

[denizbinay]

awesome! thank you :-)

[steveninety]

I agree with most of the points made in this discussion. Some points have already been addressed. But many remain.

So I decided to make an explorative UI/UX re-design of the admin panel.