As usual, we won’t make the intro too long. I will shortly introduce you to the Material Framework and mention our traditional criteria for evaluating dashboards/admin templates.
So, what is Material Design? Material Design (codenamed Quantum Paper) is a design language that Google has developed in 2014. Material Design is about lighting and shadows.
Based on our experience in the construction of dashboards/admin templates, we use the following criteria in their evaluation:
- Design quality
- Code quality
- Ease of installation
- Documentation quality
- Number of unique pages
- How often the project updates
- Quality of support
- Price
- Company and Team experience
- Clients
React Material Admin by Flatlogic
React Material Admin is a react dashboard template built with Material-UI framework. It is jQuery and Bootstrap free. This react template will be a great start for building a front-end for SAAS, E-Commerce, IoT dashboard or whatever web app you like.
I won’t dive into details on its design, just mention the template follows all guidelines and everything is done properly.
The code has minimum extra dependencies and well maintainable. It is well-tested and documented. You can install the dashboard via package managers.
The template is in general well documented. There is a quick start guide with an explanation on how to set up the dashboard. Also, all structure and components are explained and described.
The angular Material dashboard has more than 10 components. The dashboard provides analytics charts, emails, chat components.
The company has been developing and selling Templates for 5 years. Alongside the development of templates, Flatlogic has a vast experience in developing custom commercial applications. It includes e-commerce websites and appointment management systems. Flatlogic has sold admin templates to companies like Samsung, Cisco, Doculife, Walmart.
The dashboard is completely free and open-source.
Meanwhile, a premium version of React Material Admin with more than 40 pages and 100+ components is currently being developed!
In conclusion, this template will be a good option for you to start a side project or take a look at the material design. The number of built-in components will ease the task of building an application from scratch.
Material Design Template
Material Admin is a free admin template that is entirely built using Google’s Material Design for the Web framework to comply with the Material Design guidelines. It comes with the basic components and a set of pre-built pages required to lay the foundation for any application.
The design of the template is neat, not overloaded with details. Suitable for commercial applications. RTL version is available, you can choose a dark or light sidebar and one of six color schemes for the template.
The template is based on Angular, bootstrap, SaSS. There is support for all modern browsers, including IE10 +. In order to set up the template, you need to use Gulp commands, but it is possible to use the immediately built version.
The admin dashboard has basic documentation. It can help install the dashboard and describes the structure of the template.
The product has more than 20 unique components including Data Tables, Maps, Calendar, Breadcrumbs, etc.
We haven’t found any information on how often it updates and what is the quality of support.
The price varies from $25 for a single site to $249 for an extended license. It includes 1 year of support and free updates.
Material Pro
Material Pro is a premium quality admin dashboard template with flat design. It is a fully responsive admin dashboard template built with Bootstrap Framework, HTML5 & CSS3, Media Query.
The design matches the material canons but looks a bit amateur. Not really balanced. Some images in the template are inappropriate. Some colors mismatch. If I had to give it a mark, it would be 3 out of 5. In my opinion, this is the weak side of this template.
It is a simple static HTML template, so it is easy to install. The template has very good documentation. The installation process is described in detail, the structure and all components are also described. Documentation is done nicely, very convenient and professional.
The admin template has 120+ UI Components. The description is rather colorful, but we are not sure that the number of pages and components is true.
The product has a well-developed support service. The website says that the support works 24 hours. Support is provided through the site, chat or email. We did not find any information about the frequency of updates to the template.
Price ranges from $29 for Single Use to $69 for Multiple uses and $399 for Extended License. This cost includes 1 year of free support and updates.
The company has been on the market for more than 3 years. We did not find any public information on the number of sales, but among the company’s clients, there are such names as Forbes, Huffington Post, and others.
Material Dashboard by Creative Tim
Material Dashboard is a free Material Bootstrap 4 Admin with a fresh, up-to-date design inspired by Google’s Material Design. Material Dashboard was built over the popular Bootstrap 4 framework and comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.
Material Dashboard PRO makes use of light, surface, and movement. The general layout resembles sheets of paper following multiple layers so that the depth and order are obvious.
We are not sure about the code quality. We noticed that Creative Tim doesn’t have developers in the regular team, meaning they probably use outsourcing services. In our experience, the development of templates with the help of other companies does not compromise the good quality of the code.
Dashboards are installed with the help of npm. To do this, simply enter the npm i material-dashboard into the terminal.
The product has good quality documentation. Everything is convenient, well structured and easy to read. Each component is described, it is easy to find how it is written and how to use and modify it.
The material dashboard comes with 60 components and 27 example pages. Components and pages include the following notification elements, maps, table charts, and others.
The price of the product depends on the license and varies from the free version to $374 for the extended license. If you buy a paid version of the product, then you have half a year of free support. You can also extend it to 12 months for a separate fee. Support is divided into 2 types: community support and premium, differing in how quickly they respond and the quality of these responses.
Creative Tim has been working in the template market for several years. The company has strong expertise in this area and a well-established support system. You may not be afraid that you will remain without updates if you buy a product from them.
Mdbootstrap
MDBootstrap is an admin dashboard template containing different styles, data presentations and a number of components. It is built with the newest Bootstrap 4, Angular CLI and Material Design, and delivered under MIT license – free for personal and commercial use.
The template is fully responsive. A design similar to tools by Google gives you a clear view of your data. The style is intuitive and informative. Each piece of information is connected with the corresponding category.
The code is clean and has a well-designed structure. This version doesn’t use jQuery at all. All Bootstrap script was rewritten in plain TypeScript and compiled to pure JavaScript.
You can download the template via direct download, then simply open the folder and work with the template.
The project has good complete documentation with every component described.
This template is built with MDBootstrap, containing 400+ material UI elements, 600+ material icons, and 74 CSS animations.
The project is updated 1-2 times a month.
The company has a knowledge base of support questions. The community is also there to help users with questions. The free support is also included in commercial licenses.
The price for commercial use of the product vary from €79 to €149, personal use is free.
This template has good quality and an experienced team behind. The support quality is at a good level with a lot of answers from the community. Updates are quite often. But Material design is not a thing everyone would prefer. Plus, relatively high price and a small number of components in the free version are nothing but discouraging.
Angular Material Admin
If you are going to build a web application like CMS, data visualization app, or SAAS, with the help of the Angular Material Admin you will handle it successfully. This template is versatile in the sense of a responsive layout, so it will fit any device. Angular Material Admin is created by the Flatlogic team using Angular 8, Material Design, and Typescript.
This beautifully designed template can leave nobody indifferent. It contains several dashboards, four-color themes, hundreds of pages, and components. The left sidebar is made not only static, but you can also hover it for your convenience. The template has a demo version and a documented codebase.
Vue Material Admin
Vue Material Admin Template is based on Vue.js and uses Vuetify.js Framework. There are tons of layout components, pickers, widgets, and other necessary sections. This Material Template is enough to make a complex Dashboard or App: it has all the possibilities required to configure a complicated App.
The project is installed through yarn. It looks quite amateur, we did not find any documentation and support. Most likely all support will come from users. Updates from the community occur with a frequency of about once a month.
The template is completely free. Inside you will find all the necessary components:
Social media, Site Traffic, Locations, Sales, Activities, Projects, and some other components are placed in the dashboard to look attractive. Layout comes with some more components which need some time to arrange the APP or Dashboard. Some other sections like Jumbotrons, Lists, Menus, Tabs, Timeline, Toolbars are available here too.
Now concerning the most important section for any type of Admin Dashboard. It contains Editors, Selects, Steppers, Text Fields, General and Selection control options. These are necessary to get data from user or member.
Recap and Conclusion
The dashboard market with material design is not as well developed as other templates. There are few solutions, but there are both proven products for making mature projects with, and amateur projects to get acquainted with the material framework.
About Flatlogic
At Flatlogic we develop admin dashboard templates and React Native templates. We are listed among Top 20 Web Development companies from Belarus and Lithuania. During the last 6 years, we have successfully completed more than 30 big projects for small startups and large enterprises. As a team, we always have a deep desire to help our clients.
Originally published at https://flatlogic.com/blog/top-material-design-dashboards/
Top comments (1)
Thanks for sharing this Ana.
Might be useful to the audience to mention a few open-source admin panels with material design, released as coded web apps:
Thank you & Happy Coding.
P.S. BTW, your team craft some amazing designs, the Light Blue Dashboard is one of the best open-source dashboards out there.