Publication Date
Categories
Comments
Next
Previous
Subscribe
Tufte—A New Style for Mint
Published 2 years ago, mid-May under DesignI spent the weekend building a new style for Shaun Inman’s Mint 2 called Tufte Mint. The inspiration and namesake of the style was Edward Tufte’s The Visual Display of Quantitative Information—a fantastic book that chronicles the history and theory of data graphics.
Tufte Mint’s design is focused on maximizing data-ink and minimizing chartjunk and decoration. The graphs in particular have been designed in a style Tufte presents in his book. Keep reading for more info on the design and to grab the free download.
Tufte’s Five Principles in the Theory of Data Graphics
In The Visual Display of Quantitative Information, Tufte (pronounced tuff-tee) provides five principles in the theory of data graphics which I’ve tried to employ in Tufte Mint:
Above all else show the data
The data tables in Tufte Mint have little decoration aside from some horizontal rules, spacing, and typeface selection. I’ve also tried to include a notion of data hierarchy by highlighting certain important figures and changing their typeface to a serif to draw attention.
Maximize the data-ink ratio
The graphs in particular strive to reduce the amount of non-data visuals on the page. Aside from the baseline there are very few non-data elements on the graph. I’ve removed the gridlines behind the graph and the tick-marks to the left in favor of the “invisible line” idea Tufte promotes.
Erase non-data-ink, Erase redundant data-ink, Revise and edit
I spent a lot of time tweaking the design to remove as much un-neccessary visuals as possible. There’s not very much redundant data in Mint to begin with—implementing these last three principles is more appropriate when selecting which pepper to install.
Enough Talk—Gimmie!
Hit the download link below—installation instructions are included in the .zip.
Mad Props
Thanks to Mr. Inman for building an amazing product and making it incredibly easy to create your own Mint 2 styles. Thanks to Mr. Inglis for his feedback and testing help. Update: 5/22 — Thanks to Mr. Mall and Mr. Croft for letting me know about a rather nasty CSS bug.
Out with it!
Yay! It’s OK — I really didn’t do much anyway. I really love this theme. I shall be sticking with it.
Very nice. I wonder if it’s possible to have this “style” with the original Mint color scheme?
Wonderful! I’m a Tufte fan too. Thanks!
Wonderful work Rob. I really enjoy the “reduced” look.
One of the top Mint themes out there!
[…] het kader van het schijnbaar lekkere weer dat eraan zit te komen heb ik mijn mint installatie (stats) een fris nieuw uiterlijk gegeven. Voorlopig ben ik voor het Tufte thema gegaan. Kijken hoehet duurt voordat ik deze zatben. […]
Rob, this is awesome. Many thanks for making Mint even better.
By gum, it’s got both a Tufte and a ShortStat look to it. I love it!
Andrew—I’ll think about releasing a green version of the style. I chose red as it’s a common second color in basic typographic design. Once I iron out all of the bugs from the red version I’ll consider green. In the meantime, you’re welcome to modify and re-release Tufte Mint in green.
Very nice! Good work.
As everyone else has already said, the Tufte style is gorgeous. I might have to try it out in my own Mint install at some point.
I’m really digging the data table changes as well as the login form (I always felt that the default Mint look had forms that were much too small). Nice work, Rob!
Looks great Rob. My only criticism is that a number of *interface* elements have also been reduced to text-only (which in my opinion introduces more visual clutter than the more representative and distinct tab and button treatments). The data Mint presents may be quantitative but the interface and widgets that provide access to that data is not. This lack of differentiation (especially when Mint is set to collapse vertical whitespace) actually makes it harder to focus on the data compared to the default Vanilla Mint style. It is a little more manageable in single-column mode but the interface elements still feel like they’re competing with the data.
Shaun—That’s actually my biggest dis-satisfaction with the style as it stands. I was considering adding more whitespace between the modules to try to solve the data-clutter problem, and I still may do that. The data clutter is particularly bothersome when the graph is turned off and the Visits table is showing. I want to figure out a solution without adding more ink to the page, but the sheer amount of data on the page might make that difficult. I actually prefer Vanilla Mint to my own style—Tufte Mint is more of an experiment for me.
Thanks for the feedback—it’s really helpful for figuring out where to take this thing next.
[…] Tufte, a new style for Mint, from Rob Goodlatte. As far as I’m concerned, this is the best style going — it kind of feels like he sat down with me and built it at my direction (read: I really, really like it). […]
You should have used Gill Sans for true Tufte-ism.
Thanks for making this. : )
Doug — I wish I could have used a nicer typeface for headlines than Georgia, but image replacement wasn’t possible due to the dynamic nature of Mint (e.g. you can install whatever pepper you want), and flash replacement like sIFR wasn’t possible as the styles are limited to CSS changes.
Gill Sans, given the context, would have been pretty hot : )
Actually, if you released a paneless Pepper to accompany the style you could use the onAfterDisplay() Pepper method to insert your sIFR code (check out the Refresh Pepper for a sample implementation of that method). That said, while technically possible, I don’t think distributing Gill Sans would be wise (or legal) ;)
This is a fantastic style. I do not think there is any cluttering going on and, in fact, I find it much easier getting a quick overview of my stats. Very pleasant layout and perfect for me. Thanks!
Nicely done, Rob, I’m installing it now to give it a whirl…
Thanks for installing Tufte for me, Rob. What service!
[…] Rob Goodlatte […]
I just downloaded it. It is really awesome. Thank you for this.
This looks great, Rob. Unfortunately, the download link you provide for the Tufte package is broken. No problem, I found the proper download over at Mint’s Peppermill.
A very eye-pleasing design.
However, perhaps you overlooked the poor ratio of the data-ink of the bar graphs? Just reducing extra lines and grid marks is not the end of fixing bar graphs. Look at how thick and large each bar is to represent only two data points each. If the bar graph is to remain, each line should at least be minimized in thickness and height.
Perhaps instead of the bar graph, some beautiful sparklines [1] should be implemented instead. I don’t know if is possible to do such a thing without changing the code of Mint, but remember another Tufte mantra: “Do not abbreviate the truth in a sacrifice for technological limitations.”
[1] http://sparkline.org/
You’ve taken a very thoughtful approach to this. Fantastic.
Not to nitpick, but “heirarchy” is misspelled.
Ted— thanks for giving me the heads up. Corrected.
Ha! Kinda looks like my blog, which incidentally was inspired by Tufte too.
[…] I ran across a well-designed style for Shaun Inman’s Mint stats package called Tufte Mint. It’s based on Edward Tufte’s book on data graphics. Rob Goodlatte, the author of the style, explains how he stripped out as much non-data visuals in this post. […]
Beautiful.
[…] Tufte—A New Style for Mint — RobGoodlatte.com A visualisation plugin for Mint: Tufte Mint’s design is focused on maximizing data-ink and minimizing chartjunk and decoration. (tags: mint theme stats visualisation dataviz) […]
I love the style and immediately installed it on one of my installations of Mint, but isn’t it a bit presumptuous to brand this with Tufte’s name without his endorsement?
A very nice and clear style! Thanks, I installed it on all my mint stats.
[…] Link: Tufte Theme for Shaun Inman’s Mint […]
[…] Tufte—A New Style for Mint — RobGoodlatte.com (tags: mint design theme stats) […]
Eliot — I would love to use sparklines in the graph. Unfortunately that isn’t possible as a simple Mint style to my knowledge.
There is a sparklines pepper for mint that displays sparklines for your statistics data, but it would be very difficult to replace the standard bar graph with a sparkline.
You are somewhat correct that the primary focus of that graph is the trend, so a sparkline might be appropriate. That’s closer to what Google Analytics uses with their graphs.
Rob, wow, this is so perfect. We use it to track hits to our site and really… this is the best stats presentation I’ve ever seen.
Rob-
It seems that the new Visits Diff pepper doesn’t show up with Tufte Mint. Any hope of a fix?
Andrew
I don’t think Tufte would approve of the zebra/striped tables:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001IV
My favorite theme!! I see that it doesn’t work by default with the Visits Diff pepper. It shows a blank bar graph.
If possible, could this theme be updated to work with the new Peppers?
I took a stab at fixing it but the bars don’t quite line up but at least its visible now.
Again, thanks for this theme!
I agree with Shige Abe. The Visits Diff Pepper shows up with a blank graph. Ia it possible to correct this?
Just wanted to say great theme and thanks for translating Tufte for this app. Very appropriate and much easier to read than the default. Also having problems with Visits Diff btw, woudl be interested to hear if anyone has fixed this.