Perfectum Dashboard | Hacker News Reader

Perfectum Dashboard

wrapbootstrap.com

254 pointsmrholek47 comments

Really nice to see all the bells and whistles in operation. This author understands the importance of "theme marketing." I feel like a lot of theme creators spend hours and hours building cool shit into their themes and then skimp on filling it out with demo data. IMO being able to visually play with all of the elements is just as important as creating them in the first place.

I'm not a fan of the "windowed" modular design that is very common in admin interfaces; it wastes a lot of space and adds clutter. I believe a flatter design (like this http://dribbble.com/shots/564078-Minimal-Dashboard) or at least with lighter chrome (e.g. Ducksboard) would work much better.

It's incredibly annoying to have the loading screen on each page, no matter how much it takes to load. It should appear only on the content (don't cover the nav!) after a 100ms or so timeout.

Apart from that, beautiful theme

That is the first thing I noticed.

Honest question here (and I hate how I feel compelled to preface with that): In what situations are the "circle stats"/circular representation of a bar graph useful? Aside from its aesthetic appeal, it doesn't seem very functional.

If I were to guess, it'd be because dashboards in general are en vogue right now and this is a nice way to fit it in a (more or less) square area.

Apart from the aesthetics it also reads like a gauge so it's fairly easy to spot progress or high values.

To be honest, I think gauge like controls/graphs have become so popular on dashboard because their physical world counterparts all featured gauges. Check the dashboards of an airplane or nuclear facility for example.

You could call it skeuomorphism if you want. (http://en.wikipedia.org/wiki/Skeuomorph)

I read somewhere that the human brain is better wired to see changes in angles rather than in heights: this is why speedometers are circular. So having in circles some stat that changes in real time or very frequently (I think there should also be a mark for the previous measurement if it is not real time) makes sense.

I found a citation for something opposite.

http://en.wikipedia.org/wiki/Pie_chart#Use.2C_effectiveness_...

> Further, in research performed at AT&T Bell Laboratories, it was shown that comparison by angle was less accurate than comparison by length.

Also, my guess is that speedometers are circular because of technology available at the time first cars were built. I think I'd much rather see a bar as a speed indicator. I guess it could be tested; anyone knows any racing game which allows to switch between standard speedometer and some kind of speed bar?

Just anecdata, but most purpose-built racing dashboards use a linear tachometer (vastly more critical in a racing situation than a speedometer) instead of a circular tachometer. It may just be a packaging thing, though.

Also, they are filled at 100%, which is quite an arbitrary number for relative values.

They arn't. Stephen Few wrote a really good book a few (ha!) years back called 'Information Dashboard Design' (0596100167) which addressed the issue of circular dials and gauges. Here is a good essay on the subject by Stephen Few (http://www.perceptualedge.com/articles/08-21-07.pdf). Basically, it boils down to the same arguments put forward by Tufte et al. It is far easier to compare horizontal or vertical positions than radial values.

If you want to chart values over time or compare values obviously a bar chart or line graph is going to work better.

However these gauges at the top are not replacing a bar chart, as they each only show one value in isolation - that'd be a pretty simple bar chart. When you're showing one value, and at most might have targets to show in relation to it, a radial chart is just as good IMHO, and lets you put other info in the centre (like the figure in numerals for example). The closest tabular representation would be the weekly stats at the bottom.

I think they make a nice compliment to the other graphs on the page, and do not sacrifice usability for aesthetic appeal given that there are other styles of chart used where appropriate (for example the time series of visits etc.).

Nice looking theme, but kinda looks like an imitation of another looking theme released 2 months ago: http://wrapbootstrap.com/preview/WB0F35928

I saw this released a while ago as well and absolutely love it. Almost to the point where I'm making up excuses to use it.

This is beautiful. Well done. This is the first comment I've made in a year - it's that cool looking.

Forgive me for criticising, but I'm not all that enamoured with the design. I find it too chunky, too slow, and somewhat adolescent.

I appreciate that the designer has put a huge amount of effort into the template, and has populated it with some excellent demo data, but I would never use this theme in a business application.

I prefer a cleaner, more subtle design (some might say a tad boring?). Here is an example of what I mean: http://envato.stammtec.de/themeforest/peach/login.html

Do you mean the login form or something that comes after it?

I just chanced it: username 'demo' and password 'demo'.

Saying that, the theme appears to suffer from exactly the same problems the OP was complaining about

Sorry, I didn't mean to link to the login screen. You can actually enter anything you like into the username/password fields.

I agree that the elements I complained about above are still present in this template, but I find it less garish than most of the other that I have seen and it isn't as slow as the one posted in the main link.

I been through (what feels like) hundreds of these admin templates recently and the one I linked too was the one that I settled for in the end. You can see a plethora of these types of templates on Themeforest's site: http://themeforest.net/category/site-templates/admin-templat...

EDIT: I just realised that someone else posted the Themeforest link in the comments here. Apologies for the duplicate.

Total noob question here

how do you use admin template like this..say for a PHP website on a VPS? How do you "connect" the templates with the data? Been googling for a while but to no avail. I would really like to have something like this as traffic monitoring and customer support interface

You include the css and make sure you render the appropriate HTML with your serverside scripts. It's fairly easy, you just need to make sure you output the right HTML and include all static assets like css, js and icons.

I don't think that that's what the OP was asking.

lousy_sysadmin: it really depends on what data you ar trying to display. You'll probably have to roll your own code that will collect the data you want, from the services that collect it. And then display it in the correct way, as risratorn said above.

Very beautiful theme but when I'm on the page my CPU starts consuming 25% (100% of one core). That's insane!

If I move to UI Features the CPU usage is 30% because the Progress Bars. When the animation stops, the CPU is on a constant 6-7%. When using the sliders from the UI Features, the CPU is 31% again. As I said: insane.

I think it's very important to understand that you (the creator of a web framework) don't own the CPU of your users. Using a 5%-10% ocasionally should be the maximum allowed, because the user will be doing other stuff at the same time, and we don't want to leave the computer unusable and a very slow browser.

(Note: I'm using Firefox 16.0.2 under Debian/Testing.)

Using a template to prototype a project has always been helpful for me. Otherwise, I'm cobbling together an 'ugly' MVP or showing someone mockups. Either can work, but using a clean template early on eliminates noise. It allows your audience to think about feature/function vs. "it's kinda ugly, is it going to look like this?" I can customize and make it my own, or start from scratch later.

Here are plenty more to look at for a quick start: http://themeforest.net/category/site-templates/admin-templat...

In the same way that Foundation links spontaneously appear on Bootstrap threads, ThemeForest links spontaneously appear on WrapBootstrap threads. ;)

For more, take a look: https://wrapbootstrap.com/tag/admin

Nice. I definitely like the way it has been presented as a demo; well done.

Nice (not so on ie8 although).

But I am still waiting for a template that works on ie7 (some of us are targeting business users here), on tablets and on phones. On top of that, it should load fast and it should be practical (to be fair, this is rather practical, I would put an accordion on the sidebar although).

At the moment, I am designing this myself, but I would really rather buy it.

For that I would pay double the ammount of this one.

What percentages are you seeing of business users still being forced on IE7? I recently worked with a large bank and they are under almost all the way off of it having everyone on IE8-9 and FF ESR Channel. Like always I hope people are using some form of data analysis to determine if supporting the old browsers are really needed.

There are entire education systems in China and Korea still using it unfortunately. I'm currently working on an eLearning platform for schools in Asia and we are required by the Ministry of Education to support IE7.

An eLearning platform for schools in Asia? Very interesting, could we talk more in detail on email? (tianshuo_at_gmail.com)

I work in a big multinational and the transition to IE8 is not finished.

It doesn't matter if 99% of a company is on IE8. If 1% can't use it, you are still out. Especially when your solution is new and people will not be so open to it from the beginning.

Thin white text on light-colored backgrounds? Color and element weight/hierarchy are some of the most important aspects of a dashboard's design. If you're expecting people to spend a lot of time on these screens, you shouldn't force them to strain their eyes to get the data they need.

This is honestly brilliantly designed. Incredible work to whomever did this, really.

This is super nice. I love it. Sometimes feels over the top, but nicely themed.

That loading screen, albeit fancy, is really jarring.

The drag & drop also seems buggy here (shuffles the div's pretty randomly).

Other than that this looks really nice.

Breaks when you don't have enough content in the body, footer gets all messed up, reproduce by just removing a few rows from the content area.

It looks fantastic, I'm not really sure it's phone ready though. It's very slow on my phone (3GS). And there are lots & lots of js includes. Also the 1 dial per window seems a bit excessive.

HTML's pretty good though, only a bit of div/span nesting, I've seen a lot worse. Also watch out for the custom jQuery UI include in there, I still don't get why the jQuery UI team thought that was a good idea bundling a custom package so you have to start picking apart a min file just to see what was used.

Personally I'll probably purchase this at some point for something.

Impressed at how good this looks on mobile.

I've been watching this guys template sales grow and grow. Congrats on another great template!

This is fantastic. How did you make those circle widgets?

it's jquery knob

http://anthonyterrien.com/knob/

Hey, don't call him a knob.

It's very slow on FF 16.0.2 but it really is so pretty.

This is really fantastic. Amazing work.

that would be PERFECT to have a dashboard like this on wordpress :)

This is good, but Ratchet kinda stole the thunder today

Reply on news.ycombinator.com