Joomla 4 backend admin dashboard UI revealed!
Do you love getting exciting latest information on Joomla 4? I know you do, who doesn’t? Joomla 4 is proving to be really promising. We are getting exciting features and updates from the Joomla 4 development team. This time the user interface team of Joomla 4 has brought us the nicest gift ahead of this Christmas. The team introduced the new user interface for the Joomla 4 backend admin dashboard. The challenge was to fit the design according to the technical details of Joomla 4. So, why wait. Let's explore the designs and feel the awesomeness.
Also, earlier this year we have unveiled our Joomla 4 admin dashboard concept. You can check out the designs here. Also, you can find all the information regarding Joomla 4 features in detail here.
The styles followed in the design
To design the Joomla 4 admin dashboard, the team followed Material Design language and conceptual design trends. The style of the design is modern and trendy.
Typography
The visual friendliness of Joomla 4 admin dashboard design largely relies on the typography. The design team has used one of the most popular web fonts “Roboto” as the primary font for the backend template. It offers a great feeling of clean and modern approach in the template with the use of thin, light, regular, medium, bold and black weights with matching styles of Roboto font.
Colors
Two colors are chosen for the Joomla 4 admin dashboard design. Sidebar color is Dark blue, and the core color of the entire design is light grey. According to the Joomla's official website, the contrast ratio between the foreground color and backend color is kept following the WCAG 2.0 guidelines.
Appearance
The general appearance of the new interface of Joomla 4 admin dashboard is kept lightweight and clean. This ensures the users will have a great experience and the overall experience will be less tiring.
Speciality of the design
The specialty of the design of the new admin dashboard template is as follow:
New Joomla pattern
The new backend template is crafted with an amazing new pattern designed by Chiara Aliotta. The pattern is included on the login page and on the background of the admin backend.
Figure: The new Joomla pattern for Joomla 4.
User-friendly brand focused login page
The login page is now more customizable. You can upload your preferred background image if you want. Also, you can upload your brand logo. If you don’t upload any logo, the site name still shown in the white banner above the login form. You can set a link to your business website at the bottom of the login page so that anyone can easily contact you regarding a login issue.
Figure: The amazingly designed new login page of Joomla 4.
Improved workflow
Definitely, the team had to go through a lot of thoughts to introduce a smarter workflow without hampering the Joomla structure and system hierarchy. The design structure is described in the Joomla official website as “The daily work with Joomla as a Content Management System is to manage content. We set up our articles, modules or components and link or assign them to menu items. Later, we manage the Users and set up the system”.
Accessibility support
Joomla 4 will have accessibility support. Physically challanged users can access the menus easily with special need tools like mouth stick etc.
New menu layout
Every main menu item has sub menu and a dedicated landing page. If you hover over the main menu item, you can access all the sub menu items. Each menu item comes with a plus sign to let the user create new menus easily.
Something new
The look of the overall design is clean and fresh. The template will be lightweight and the vibrant blue color will give you a touch of elegance while experiencing Joomla.
The admin dashboard
The dashboard is definitely a focal point of a Joomla website. The dashboard is designed in such a way that you can have the full control over your website and access your important stuff easily.
Figure: The design of the admin dashboard of Joomla 4.
Menu item management
The admin menu management looks amazing in this new design. The menu list, new menu adding interface, filtering options, menu overview and all other stuff offer a great UI.
Figure: The menu management in the Joomla 4 admin dashboard.
Users
Managing users will be easier with the new design. You will be able to manage your users, relevant custom fields, user notes and messages faster than before with Joomla 4.
Figure: The user management in the Joomla 4 admin dashboard.
Contents
The content page comes with articles, fields, field group adding options etc. Also, you can have article stats and user ratings.
Figure: The easy content management in the Joomla 4 admin dashboard.
Article management
In the article management page you can easily manage all the articles you have added. You can create new articles as well.
Figure: The easy content management in the Joomla 4 admin dashboard.
Create articles
The article creation interface looks really good and user friendly. The text editing field and menus will offer you quick access to the article management, permissions, images and all.
Figure: Article creation and editing interface in the Joomla 4 admin dashboard.
Edit articles
In the new design you can quickly compose you contents with popped up text editor.
Figure: Text editing interface in Joomla 4.
Also, you can drag and drop the intro and full images on the images and links tabs.
Figure: Image and link management in articles in Joomla 4.
Component management
This is how the Components page will look like in Joomla 4.
Figure: Component management in Joomla 4.
Extension installation page
The extension installation page of Joomla 4 is well researched and will definitely offer you a hassle free extension installation system.
Figure: Extension installation interface in Joomla 4.
Extension status
You can see the installed extensions, their current versions and also if there is any updated version available or not.
Figure: Extension status in Joomla 4 admin dashboard.
System settings
In Joomla 4, all the system settings are on one page and grouped according to the tasks.
Figure: System settings page in the Joomla 4 admin dashboard.
Help page
The help page will bring quick access if you need help or want to know more about Joomla.
Figure: Help page in the Joomla 4 admin dashboard.
Mobile view
Figure: Mobile view of Joomla 4 admin dashboard.
You can see the whole project of Joomla 4 admin dashboard here.
This is the initial design of Joomla 4 admin dashboard. Changes can come for the sake of development and user experience. There are only just two alpha releases so far. We will continue posting all the information regarding Joomla 4. So stay with us. You won't miss anything. Also, if you have opinions and ideas, please use our comment section below to discuss with the community.
this function is in k2, additionally an important change should also appear when determining read more.
In joomla 3, the article blog view has always been a problem in determining the text limit if we did not manually add read more, it's great how it could be described as in k2
In the future their are some possible solutions...
- New Media-Manager and improved media-field with more file types and restrictions/ACL.
- 3rd party upload/attachment field. BTW, tassos.gr is interested in development ;)
Iam aware that these are first "mockups and suggestions". It's heading in the right direction.
My personal concerns and first impressions:
[list]
[*]Inputs, editor buttons and list-groups look the same! It's not clear what is an input or a button or a link etc. Bootstrap4 default styling is much easier to "read".[/*]
[*]Color scheme could be improved. In general the darkest blue and its lighter shades/variants.[/*]
[*]Icons: Status and actions should be larger on mobile view, because of finger/touch handling[/*]
[*]Pattern: Does the UI really need it? I see the geometric relation, but maybe too far away for the average user. In general it looks fresh, but I don't see a long term usage, nor a value of brand recognition.[/*]
[/list]
Aside, rock on guys (and girls!) !
Great: the article creation and editing interface looks very clean.
Is it possible to customize the editor toolbar? I miss the icon for non breaking spaces or is it possible to insert them like Word with the shortkey Ctrl + Shift + Space? This would be a very useful feature instead of an clickable icon in the toolbar.