Admin 2 + Rubik: Improved UI for Drupal Admins
Alpha releases available for the reckless
Admin 2 provides a versatile, pluggable UI for administrative tools in Drupal and is complemented by a new theme Rubik that radically reduces visual noise. Alpha releases are available for users interested in testing. This code is very new, so please be prudent using and deploying these projects.
Admin theme accompanied by Rubik
Admin 2: A pluggable framework for admin tools
Admin 2 provides an interface for other developers to leverage when implementing administrative tools. Supporting the administrative tools in modules like devel and localization client required a fresh start but were heavily influenced by
- Key contrib projects like Administration menu by Daniel Kudwien and Navigate by Chris Shattuck
- The D7UX work of Mark Boulton and Leisa Reichelt
- Feedback from users and my colleagues at Development Seed, including conversations with Eric from years ago over lunch : )
Devel components in Admin 2
The result is a toolbar that offers
- Pluggable tools via plain old Drupal blocks. Blocks that declare in hook_block() that they are usable with admin can be added or removed from the toolbar.
- Versatile layout and position. The toolbar can be collapsed to any corner of the screen and displayed horizontally or vertically to accommodate different themes and screen sizes.
- Inclusion of a variety of sensible defaults in CSS and javascript - traversible menu trees, accordian/tabbed panes depending on the toolbar layout.
Rubik: Less noise, more signal
Rubik is a new admin theme that started as an implementation of the D7UX team's designs (for a direct adaptation, see the backported D7 admin theme Seven). It has since grown in its own direction to include some experimental changes that focus on reducing visual noise:
- Hidden form item descriptions until a user hovers over an element.
- Pushing fieldset collapsers/expanders out into the margin that makes it easy to scan and spot the next major set of options.
- Aggressive templating and consolidation for many Drupal core forms.
Callibrating icons to the task at hand
A particularly strong influence on the new icons in Rubik was an idea from KDE Oxygen - to vary color saturation by the importance of the task presented to the user:
"Normal" colors ... are used mostly for mimetypes, folders, system applications, and actions. Vibrant colors are more saturated and used to emphasize important action icons on a toolbar, for rich media mimetypes, for application icons and, generally speaking, used when there is need to focus the attention of the use on a particular element, helping the user to find his way by following a “subliminal” color language.
While it may sound overly theoretical (I remember thinking this myself when reading the idea for the first time a few years ago), in practice it is spot on: imagine the chaos that would occur if your file and folder icons were as bold as the "Firefox" icon.
Rubik applies this idea to Drupal and begins categorizing administrative pages into several groups:
- Essential content management and system management pages
- Build/task pages where you create or manipulate new site building structures
- Informative pages like reports or logs
- Configuration pages where users adjust settings
The end result is a much more balanced set of icons where the most common and critical administrative tasks stand out visually from the rest.
Next steps
A screencast with a bit more developer information about the guts of these projects is available here.
In the coming weeks I'll be working hard on these projects to get them to a stable point for general use as well as working with the maintainers of devel and localization client to integrate their UI components into the admin toolbar.
rubik
Developmentseed, quicksketch, aegir and the south-africans formed my most impressive new impressions from drupalcon paris, and here you are proving >again (after news manager, whitehouse)< why developmentseed is in that list. I almost regretted leaving the former admin module but after 2 days i’m sold and ofcourse splitting form and function is good stuff. Unfortunately, I’m on a small screen this month, so i had to set config to horizontal. It’s still awesome. With regard to Rubik i see some tweaks I can’t wait to make (but I have to). I’ll point them out here for your convenience. I would suggest an option for fixed positioning for the save button. Bringing it up to the top is an improvement that i’ve longed for, but now that it’s here, i’ve found myself in the situation where i had to hit home instead of end to get to it. The plus/minus widgets for the open/close actions of the administrative filefields are dropping outside of the main box and i see why but the saturation difference is so slight that the box’s border confuses the grouping of the widget with the filefield, if you get my drift. Something very specific is that some of filefield_sources’ text boxes are not rendered when enabling rubik for content management.
That said, this is peanuts. Someone coming from garland would go bonkers when they saw this stuff. Kudos.
great
Nice work.
Just one question/suggestion: why rubik theme isn’t commited to drupal.org ?
Rubik is on
Rubik is on code.developmentseed.org and the git repository is hosted on github. There are a variety of reasons for this – if you’re curious you can read an interesting discussion about the matter here:
http://github.com/developmentseed/rubik/issues/closed#issue/1
rubik front end theme
Will there be also an front end version of the rubik theme? It’s a real beautiful theme. :)
Good question – I’m not sure
Good question – I’m not sure yet : ) I may start playing around with Rubik subthemes aimed at being front-end, and you’re certainly welcome to as well.
Go for gold
Tried out the combination of Rubik and the admin bar. What is really, really slick is the admin bar. All that fancy Javascript really makes sense. You hover an item, you get a short description what this setting is about. Great, this could make users explore what all these settings in Drupal are about.
What I really do not like too much is the Rubik theme. Drupal has a lot of options and there is always a real estate problem of economically putting them somewhere and keep the overview.
The theme is wasting way too much space and puts large paddings around everything.
Also, Young, I gotta say I have a problem with your “medium grey on light grey” style. Personally I like more contrast. It is difficult in many areas of open atrium as well.
So I guess I’ll stick with Pixture reloaded as Admin theme for now, and think about how to get the nice styling of the admin bar over to that theme :P
Very good work all together. Dev Seed keeps pushing out products that take up ideas swirling around in the community and make something palpable of it. So this could start a healthy competition who can do the most usable and beautiful Drupal stuff… Rock on.
installed & testing
I have hust installed the alpha admin theme and I love the clean design. :)
Thumbs Up!
These icons are fantastic.
These icons are fantastic. Could be made available for Drupal 7?
can i test this? i tried
can i test this?
i tried installing the current context github version of context but i get errors: * warning: Missing argument 1 for context_enable() in /var/www/test/sites/all/modules/context/context.module on line 257. * warning: Missing argument 2 for context_get_plugin(), called in /var/www/test/sites/all/modules/context/context_contrib/context_contrib.module on line 78 and defined in /var/www/test/sites/all/modules/context/context.module on line 409.
i’m looking forward outlining different approaches on creating multi-column layouts at drupalcamp vienna. so the new context layout features look quite appealing as a maybe more lightweight solution. http://drupalcamp.at/sessions/panels-0
thanks, dasjo
Nice work
I especially like the context bits and the drag n drop .. very cool stuff! Cant wait to test this out! wOOt!
you rock
Simply beautiful!
Excellent stuff! Good work
Excellent stuff! Good work
Administration
Nice!
At some point, we should start to collaborate on Drupal administration instead of working in isolation.
Although I’m not a fan of administration themes (in general), I think your Admin 2 introduces a lot of similar stuff that’s already in the pipe for Administration menu — not to mention that Navigate equally provides a pluggable, vertical toolbar…
Perhaps I should do a better job at marketing. :P
Anyway, http://groups.drupal.org/node/20138 contains some (meanwhile old) considerations between Chris and me.
Despite what others may think. I love you guys. Keep up the excellent work!
Very very nice!
Coincidentally enough I stumbled across the 2nd iteration of this earlier today having grown a little frustrated with the old one and this seems to be much more responsive, easier to navigate and with added javascript beautificity!
Perfecto & thank you
love it
So this is how a Drupal theme looks like?! Awesome.
BEAUTIFUL. Two questions
BEAUTIFUL.
Two questions if I may:
a) I know the concepting took a long time, but how long would you say it took to get this from final concepts to code? b) What software do you use for those beautiful icons? (since Adobe doesn’t run on Linux)
Thanks!
A) It’s been about a month
A) It’s been about a month since I started working on this code? When you know what you want code practically writes itself… but a lot of concepting also happened during the course of work.
B) The designers at Development Seed use Inkscape (http://www.inkscape.org) for the majority of our graphics. Highly recommended.