Joomla 4 backend admin dashboard UI revealed! - JoomShaper

Joomla 4 backend admin dashboard UI revealed!

06 December 2017
Hits 14,100
6 min read
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.

The new Joomla pattern for Joomla 4

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.

The amazingly designed new login page of Joomla 4.

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.

The design of the admin dashboard of Joomla 4.

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.

The menu management in the Joomla 4 admin dashboard.

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.

The user management in the Joomla 4 admin dashboard.

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.

The easy content management in the Joomla 4 admin dashboard.

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.

The easy content management in the Joomla 4 admin dashboard.

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.

Article creation and editing interface in the Joomla 4 admin dashboard.

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.

Text editing interface in Joomla 4.

Figure: Text editing interface in Joomla 4.

Also, you can drag and drop the intro and full images on the images and links tabs.

Image and link management in articles in Joomla 4.

Figure: Image and link management in articles in Joomla 4.

Component management

This is how the Components page will look like in Joomla 4.

Component management 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.

Extension installation interface in Joomla 4.

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.

Extension status in Joomla 4 admin dashboard.

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.

System settings page in the Joomla 4 admin dashboard.

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.

Help page in the Joomla 4 admin dashboard.

Figure: Help page in the Joomla 4 admin dashboard.

Mobile view

Mobile view of Joomla 4 admin dashboard.

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. 

Comments (12)

M
MeR
This comment was minimized by the moderator on the site

perfect!

Towfiq Omi
Towfiq Omi    MeR
This comment was minimized by the moderator on the site

Yes

D
draqon
This comment was minimized by the moderator on the site

for articles a good function would be, add the attachment option to easily attach files, for example pdf, doc
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

pepperstreet
pepperstreet    draqon
This comment was minimized by the moderator on the site

Agree. A core file upload/attachment custom field is long overdue.
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

Paul Frankowski
Paul Frankowski
This comment was minimized by the moderator on the site

@dragon for this task most users use JCE Pro editor or Attachment extension.

JG
Julius Gashumba    Paul Frankowski
This comment was minimized by the moderator on the site

But wouldn't it be great to just add it to the core so we use less plugins and extensions for system specific functions?

pepperstreet
pepperstreet
This comment was minimized by the moderator on the site

First of all – thank you to the responsible J! team members and their efforts!
Iam aware that these are first "mockups and suggestions". It's heading in the right direction.
My personal concerns and first impressions:


  • 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...

First of all – thank you to the responsible J! team members and their efforts!
Iam aware that these are first "mockups and suggestions". It's heading in the right direction.
My personal concerns and first impressions:


  • 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.[/*]

Aside, rock on guys (and girls!) !

Read More
AOFIRS Association
AOFIRS Association
This comment was minimized by the moderator on the site

Thank you for the great work. I really love the design and functionality.

Schipperijn
Schipperijn
This comment was minimized by the moderator on the site

Looks fantastic

Svyatoslav
Svyatoslav
This comment was minimized by the moderator on the site

Cool, Cool, Cool! When?

Andreas Kunze
Andreas Kunze
This comment was minimized by the moderator on the site

Thanks for your preview!

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.

NR
Nikhil Roy
This comment was minimized by the moderator on the site

excited !!!! an waiting

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.