Major changes
Our goal was to keep the interface simple yet modern. Since ERPNext is a big project in itself, the redesigning phase was lengthy, and to track the internal work, the Framework team used the Kanban method.
Lists, forms, dashboards, reports, e-commerce, kanbans, all were given a major facelift. The below-mentioned screenshots contain a comparison between the legacy designs and the new ones. Here’s a walkthrough of the vivid changes you can expect.
Form and Timeline
One of the major focus areas of the redesign was effective space utilization. Form view now supports a 3 column layout, earlier, buttons used to consume 2 lines, and now it is adjusted in 1 line. Increasing the horizontal area and somewhat reducing the vertical area leaves a large click surface while saving some space.
Other changes are a card-based layout instead of using borders for separation, font contrast has improved, buttons have a better shape.
(Before)
(After)
Kanban
Kanban board is a visual way to manage tasks and workflows with columns and cards. When we use Kanban our focus is on cards, therefore, we have removed the sidebar and extra space is gone. Stripped away all unnecessary imagery. Now, we can showcase titles and dates. We have increased the size of the cards which helps in adding more valuable information. It looks less bulky with lighter lines and no borders.
(Before)
(After)
Dashboard
Chart designs are enhanced now and they look modern. Unnecessary borders have been removed. From removing dots in the graph to showing a more readable legend, everything is an attempt to make the dashboards more visually appealing.
(Before)
(After)
Desk
The module list on the left has icons for each module so you can associate that icon with the module and navigate faster as you get used to it. Shortcuts and forms below are in sharp white while keeping the background gray for finding and opening forms faster.
(Before)
(After)
List View
Earlier, in the list view, the view switcher was on the sidebar on the left. Now, you will see it on the top, on the right side. Filters used to take up additional two lines, now it’s just a single button.
(Before)
(After)
Logo
The goal of the branding was to project a brand that is minimal and aesthetic. After working on Frappe Books, the team got into a discussion with the design agency, Timeless and they collectively decided to work on the branding for ERPNext and Frappe. The logo has changed, earlier it was in purple, now, we have switched to blue.
(Before)
(After)
Dark theme
Initially, a dark theme was not on the list. However, during the redesign, the CSS was structured such that all the styles were based on CSS variables, making it very simple to introduce different themes. The next step was to get a dark theme design from the Timeless team after which we quickly updated the UI elements for dark mode. Then with just a few UX enhancements, our dark mode “Timeless Night” was good to go! Users who are looking for interfaces with more contrast, we heard you :).
(Before)
(After)
Source Credit: ERPnext Official Website