Tufte—A New Style for Mint
Posted 3 years ago, mid-May.
I 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 heirarchy 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.
Hit the download link below—installation instructions are included in the .zip.
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.
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.