Show HN: Free React template that makes “Admin Dashboards” easy(mdbootstrap.com)
mdbootstrap.com
Show HN: Free React template that makes “Admin Dashboards” easy
https://mdbootstrap.com/previews/free-templates/react-admin-dashboard/
11 comments
Yes, it seems like it is ripped and then mangled. Some of it looks good, but overall I do not like it. It looks awkward to me - but perhaps it's just me.
I was skeptical about your comment at first since this layout is a pretty common dashboard style... but you are right. A lot of the elements are identical, which makes it a bit weird to be shared on HN. As a designer, I take inspiration from others work as well but I try to spin my own style into it, this just doesn't really feel genuine.
There are quite a few visual glitches and inconsistencies that would make me skip over this project right away when evaluating options. I kinda enjoy spotting such issues in UIs, so here we go:
- Roboto font is being loaded, but a local font is used; I'd definitely prefer Roboto
- The search box on the dashboard is vertically misaligned next to the button and the space between the placeholder and bottom line is way too big
- The dashboard grid view is not ideal, a masonry would be great or some other strategy to avoid so much blank space
- The progress bars on the bottom of the dashboard look glitched when compared to the top of the dashboard
- The labels on the side bar buttons with the icons should be aligned i.e. the icons should have the same width
- Text on the (secondary?) pink color on the tables pages should be white, otherwise the contrast is too low
- The footer is floating in the air when the content isn't long enough
- The resizing effect of the top bar is useless and distracting, it should probably only be used when the bar position is fixed
- The navigation sidebar does simply not exist in a narrow browser window making the site impossible to use
- Roboto font is being loaded, but a local font is used; I'd definitely prefer Roboto
- The search box on the dashboard is vertically misaligned next to the button and the space between the placeholder and bottom line is way too big
- The dashboard grid view is not ideal, a masonry would be great or some other strategy to avoid so much blank space
- The progress bars on the bottom of the dashboard look glitched when compared to the top of the dashboard
- The labels on the side bar buttons with the icons should be aligned i.e. the icons should have the same width
- Text on the (secondary?) pink color on the tables pages should be white, otherwise the contrast is too low
- The footer is floating in the air when the content isn't long enough
- The resizing effect of the top bar is useless and distracting, it should probably only be used when the bar position is fixed
- The navigation sidebar does simply not exist in a narrow browser window making the site impossible to use
I have build a lot of admin dashboards in my career, and I've always wondered if any of the designers of these templates actually build or even used a dashboard before.
What you need in 99% of the cases are just grids and forms, which need to be controllable without a mouse.
Admin dashboards are used to manage data (basically just a GUI around the DB), and to perform day-to-day tasks (basically buttons to trigger certain actions). In practice, the eye-candy graphs are almost never looked at by the user. If you really need fancy graphs, you're probably much better of using something like grafana.
Ask any experienced worker who actually use these dashboards for 8 hours a day, and they will always tell you the prefer their old AS/400 or DOS terminals over webforms, just because it's so much more usable.
- Don't spend your time on building graphs, give your users the ability to export CSV or give them SQL access. They will learn.
- Don't use paging, you need search. Paging is an anti-pattern that just indicates users can't find the relevant data.
- Forms with loads of whitespace and animated labels don't add anything useful for the user. Focus on accessibility and feedback instead.
What you need in 99% of the cases are just grids and forms, which need to be controllable without a mouse.
Admin dashboards are used to manage data (basically just a GUI around the DB), and to perform day-to-day tasks (basically buttons to trigger certain actions). In practice, the eye-candy graphs are almost never looked at by the user. If you really need fancy graphs, you're probably much better of using something like grafana.
Ask any experienced worker who actually use these dashboards for 8 hours a day, and they will always tell you the prefer their old AS/400 or DOS terminals over webforms, just because it's so much more usable.
- Don't spend your time on building graphs, give your users the ability to export CSV or give them SQL access. They will learn.
- Don't use paging, you need search. Paging is an anti-pattern that just indicates users can't find the relevant data.
- Forms with loads of whitespace and animated labels don't add anything useful for the user. Focus on accessibility and feedback instead.
It looks really beautiful. Well done!
We use react-admin (https://github.com/marmelab/react-admin/) and it was a total life saver to create a backoffice for our app in less than 2 weeks.
Hope this takes off and you can provide some code example for how to use this project for that purpose.
We use react-admin (https://github.com/marmelab/react-admin/) and it was a total life saver to create a backoffice for our app in less than 2 weeks.
Hope this takes off and you can provide some code example for how to use this project for that purpose.
My gripe with react-admin and to a lesser extent Semantic UI is their idea of also writing a full REST api layer. Just give me a good front end tool and let me handle my data layer!
Reminds me of a mixture between Bootstrap 2 and Windows 10
Semi-off-topic: There's a really strange shaking effect when scrolling down one notch with the header bar just in view.
I can also replicate this issue, Windows Chrome latest.
Very nice - nice, clean... just what’s needed
https://www.creative-tim.com/product/material-dashboard
Or did this happen the other way around?
It's within the rules of engagement of open source, but it still feels weird.
Edit: (Removed some extra information that was here because I was personally mixed up about the maintenance / ownership boundaries of various packages)