Sing App – Open Source Admin Dashboard Template with Stylish Design | Hacker News Reader

Sing App – Open Source Admin Dashboard Template with Stylish Design

flatlogic.github.io

98 pointsPhilipDaineko37 comments

as someone who is struggling to modify the sh.t out of metronic to make it look good and usable while fitting all needed information on the screen of our saas ecommerce app I have to say this design suffers from the same issue others do: little contrast between background color and text color as well as very thin font. my eyes hurt trying to look up a button or a link or trying to read text.

In case you're looking for alternatives, this thread might be of some help: https://news.ycombinator.com/item?id=17241487

AskHN: Which is your go-to free Admin Dashboard template?

I have been building my FOSS using Tabler: https://tabler.github.io

lovely design on this one.

Wow, that looks really good.

looks neat. whats the terms if i wanted to use it for commercial purposes?

The dev was great enough to use MIT: https://github.com/tabler/tabler/blob/dev/LICENSE

thank you

Looks very neat! One drawback (as a user of admin themes), is that there is no list example, admin UIs are lists, lists, lists

We use Propeller (http://propeller.in)

Some people think Material is old, but this has all the components we need and works well.

Hey @PhilipDaineko – just an FYI there are a number of spelling mistakes on the landing page, "custorem" "accountign"

Very very cool. I wish people built reactjs dashboard templates. I would literally throw money at it.

Aren't there plenty already? For example https://sigma.batchthemes.com

oh pretty cool. thanks for this!

http://creative-tim.com has a bunch of decent dashboards

Hmm. I could do that.How much money would that be valuable to you?

Why do all these dashboard app waste so much space?

There's not a lot of info on that screen, and yet it doesn't fit in my laptop... I could fit 3 times as much in an Excel spreadsheet...

My pet peeve is low contrast, makes it really hard to quickly distinguish between parts of the page.

Simply by changing the light grey background for something much darker makes the individual charts and boxes pop out, making it so much easier to compartmentalize the information.

edit: https://imgur.com/a/2cUQAXr

The reason why designers don't do that is rooted in the modern guidelines advising against higher contrast as "bad style". That's why on many websites we need to read dark-grey text on light-grey background. Black and white are frowned upon in the UI design community.

Which guidelines? W3C's Web Content Accessibility Guidelines specifically recommend a minimum contrast ratio of 4.5:1. Most web style guidelines that I'm familiar with inherit this recommendation, including Material.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont...

https://material.io/design/usability/accessibility.html#colo...

Whitespace improves legibility.

https://www.nngroup.com/articles/chunking/

> I could fit 3 times as much in an Excel spreadsheet...

Which doesn't necessarily mean that it actually helps you to find the information or data you seek faster. Proper spacing is needed to separate groups of objects.

However I agree that this dashboard template is simply not good, though spacing is one of the lesser concerns here.

Washed out, thin fonts, horrible contrast. What's not to like?

I have yet to find an admin theme which uses proper legible fonts.

What fonts are good in your opinion?

Standard system fonts

What system? What standard fonts? My system has no standard fonts and I wouldn't want to use fixed-width fonts on a website anyways; I'd also be very unhappy if the website changed based on what device/system I'm using (I often don't have control over that device).

While the documentation could use some work, Looper[0][1] has been working very well for us. There's not an obscene amount of wasted space, the fonts are legible, and it does a good job of adding useful features to Bootstrap without going overboard.

[0] http://uselooper.com/ [1] https://themes.getbootstrap.com/product/looper-responsive-ad...

Is there a dark mode?

Indeed my first thought. At least an option to toggle from light / dark mode as I've seen in other Bootstrap Admin UIs.

Yeah, somewhat odd creating a dashboard catering to sysadmins and not have a dark theme.

mdbootstrap has good samples and admin to has anybody used that.

I increased contrast, removed the nonsense drop shadows, decreased the global font size. https://i.imgur.com/r8CegSS.png Still far from perfect, but just wanted to see how easily I could recover this unfortunately nonfunctional design.

Yeah still a bit more to do but definitely an improvement. Sorry to ask, but would you mind sharing this work with us? As a fork of the original?

I'm not sure if I can, since I just edited some things in Web Inspector. I only changed the following though.

- body color to black

- removed all instances of "drop-shadow"

- set backgrounds to white

- reduce global font

I would recommend further to

- slightly reduce padding between boxes

- use a font designed for the screen. This one might have been, but it is not as readable as certain other fonts.

A principle in web design is that everything is rectangles, but you usually don't have to actually make the rectangles visible. The eye can usually make out the "boxes" of the page by glancing at the layout of the text.

Thanks for the hints, really appreciate it. I'm not that good with CSS nowadays.

Reply on news.ycombinator.com