Perfectum Dashboard

http://wrapbootstrap.com/preview/WB0PHMG9K

by mrholek • 14 years ago

254 47 14 years ago

atldev• 14 years ago

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...

coderdude• 14 years ago

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

kposehn• 14 years ago

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

habosa• 14 years ago

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

mrholek• 14 years ago

it's jquery knob

http://anthonyterrien.com/knob/

oceanic• 14 years ago

Hey, don't call him a knob.

JacksonGariety• 14 years ago

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

therealarmen• 14 years ago

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.

streblo• 14 years ago

This is really fantastic. Amazing work.

enigmabomb• 14 years ago

Impressed at how good this looks on mobile.

moe• 14 years ago

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.

mase• 14 years ago

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

ineedtosleep• 14 years ago

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.

callmeed• 14 years ago

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.

risratorn2• 14 years ago

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)

RBerenguel• 14 years ago

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.

TeMPOraL• 14 years ago

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?

emillon• 14 years ago

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

jalfresi2• 14 years ago

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.

grey-area• 14 years ago

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.).

ricardobeat• 14 years ago

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.

eungyu• 14 years ago

This is good, but Ratchet kinda stole the thunder today

gabyar• 14 years ago

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

sloyan• 14 years ago

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

obisw4n• 14 years ago

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.

creatio• 14 years ago

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

vyrotek2• 14 years ago

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.

lousy_sysadmin• 14 years ago

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

risratorn2• 14 years ago

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.

CWIZO• 14 years ago

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.

sylvinus• 14 years ago

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

AJ007• 14 years ago

That is the first thing I noticed.

mattmanser• 14 years ago

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.

kfk2• 14 years ago

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.

jimwalsh• 14 years ago

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.

vyrotek2• 14 years ago

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.

kfk2• 14 years ago

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.

instakill• 14 years ago

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

durzagott2• 14 years ago

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

swah• 14 years ago

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

jalfresi2• 14 years ago

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

littlesparkvt• 14 years ago

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

mnicole• 14 years ago

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.

krenel• 14 years ago

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.)

Perfectum Dashboard

Related Stories