Print-friendly version
Send to friendEasier wireframing with Drupal components for Balsamiq Mockups
This little project had been on my hit list for months, but I finally put together some Drupal-specific components for Balsamiq Mockups, the wireframe application. It’s cross-platform (Adobe AIR) and costs $79, but is free or discounted in a number of situations (including if you’re an open source contributor, ahem).
Simply download the attached .bmml file, open in Balsamiq and you can copy over any of the components to your wireframes, including:
- Header with logo, site name, slogan, primary and secondary links
- Node teasers with $submitted, tags, different types of $links, feed icon
- Sidebar with common blocks like search, user login, menus
- A Drupal-style pager
- Footer menu and footer message
- Drupal messages: warning, help, status, error
- Breadcrumbs, local task tabs
- Full node page with comment thread and form
- A few extra blocks like Quicktabs, view of recent comments, and Ubercart shopping cart block
I hope it will help save a little time for Drupal site builders, IA professionals, and designers!
This site runs on the Fusion theme for Drupal
Fusion is a powerful Drupal theme framework, with point-and-click layouts & built in styles for blocks, Views, and other modules. Download a Fusion theme for an instant, easy to configure design, or harness the power of Fusion in your own subtheme for a totally custom look.
And it’s free!
Comments (9)
Thanks for the starter kit
Thanks for the starter items. I had recently found Balsamiq myself and had been thinking of doing something similar - when I had a chance ;-)
I believe that their roadmap mentioned a future update that would allow you to include your own items in the official palate. This is good, but that will be great
Thanks again, for both this and the Fusion base theme.
Any requests?
Yeah I'm looking forward to that too. It's on their roadmap: http://www.balsamiq.com/blog/2010/01/03/balsamiq-roadmap-for-2010/
I'm happy to expand this going forward so I'm open to other ideas that you want to see. I'm trying to stay away from adding things that are either totally generic (contact form or views' exposed filters -- just drag in some form fields) or highly likely to be totally customized in any project (node content).
Forums and search results seemed like potential candidates, and maybe more Ubercart stuff, since they have their own 'drupalisms'.
Nice
Thanks! I've been using Balsamiq Mockups intensively for a while now and I'm very happy with it. These components help slap together a wireframe even quicker :-)
Looks really useful. Thanks.
Looks really useful. Thanks.
Well, just the other day, I
Well, just the other day, I spent several hours looking at various prototyping and wireframing tools and Balsamiq was constantly mentioned as a useful tool. It looked a bit basic to me compared to AxurePro, but, with the drupal integration, it sure is going to be worth trying it out.
Many thanks.
Excellent. I just downloaded
Excellent. I just downloaded Mockups and sent the do-gooder e-mail for a license. Thanks, Steph. : )
thanks so much for sharing!
Stephanie, thank you so much for sharing your Drupal BMML template, it's awesome!
Hey do you know about http://mockupstogo.net/ ? It's our community-driven site where people share their BMMLs. Your Drupal stencils would make a fine addition to the collection (or even just a link to this post), what do you say? Instructions on how to post here: http://www.balsamiq.com/blog/2009/01/17/introducing-mockups-to-go/
Thanks again for sharing, we're big Drupal users ourselves! :)
Peldi
Already on mockupstogo
http://mockupstogo.net/drupal-cms-components :)
Glad you like!
Drupal wireframe stencil
Here is a very similar recreated using MockupTiger
http://www.wireframemockups.com/wp-content/uploads/2011/11/drupal_4ece5e...
http://www.wireframemockups.com/drupal-wireframe-template