Design for Drupal: A Template Approach

Nica Lorber

49

January 25, 2010 - 11:46am

We design a lot of websites at Chapter Three and we've developed a systemized approach using a Fireworks template to speed up and streamline the production process. This template can be used as a starting point or a finishing point, depending on the size of the project. This template does not replace our workflow, but rather enhances and supports it by ensuring that we don't miss any key elements.

Designing the "old way"

We used to design sites by creating a wireframe, and then designing a final composition of the front page, and several key sub pages.

The Problem

While the site itself looked great, the tabs did not. They stood out like a big sore thumb.

The Solution

Style all of the elements.

We came up with a list of elements inherent in 90% of Drupal sites, some basic, and some Drupal specific, to serve as a tool to make sure every last element had a style, including ones that were not obvious in the initial designs. Here is our list:

  • Header
  • Footer
  • H1 - H5
  • Body
  • Link
  • Unordered List
  • Blockquote
  • Image Style
  • Code
  • Admin Tabs (secondary tabs)
  • Secondary Admin Tabs (listed under admin tabs)
  • Collapsable Field Sets
  • Block Headers
  • Block Typography
  • More button
  • "Read More" link/button
  • Submit Button or general button style
  • Input Field
  • Input Title style
  • Input Text style
  • Tags
  • Pagination
  • Basic Node Page Layout Style (margins)
  • Table Style
  • Error Message
  • Status Message
  • Warning Message
  • Help Message
  • Default Profile Layout
  • Blog title and Byline
  • Breadcrumbs

Collaborating with our developers and themers, we built a Fireworks template illustrating these elements.

Production Improvements

Using the template speeds up our production by enabling us to edit graphics instead of creating them from scratch each time. This process has also improved the quality of the sites we deploy. End users no longer get that unfinished subconscious sensation that occus when something pops up thats "not like the other".

Download the Template

Download the Chapter Three Drupal Template to start streamlining your design process now or make your own. If you pioneer improvements, let us know!

Template Examples



Floor and I will be presenting on this topic tomorrow at Design 4 Drupal at Stanford and again at Drupalcon SF.

Comments

What you wrote above makes sense and is the only logical consequence in a web production workflow. The only unpredictable thing is if additional/optional/third-party modules are installed after the initial realisation! Since every module brings its own css classes with it, no one can really predict the complete css set entirely.

Hey there Phillip, this is not meant to cover that other stuff. This is only meant to cover the things things that most designers miss when designing for Drupal because they don't necessarily know Drupal.

@Philipp Schaffner I think your missing the point a bit, talking about CSS, though you're right about extra modules potentially bringing in extra widgets. But as Nica requests, if you "pioneer improvements" they can always be added back.

This covers a lot of the bases, and it's all this stuff that's missing when you get handed a PDF/PSD to turn into a Drupal theme. How nice it would be to say "ok, but you'll need to get your designer to make all this stuff match their design too" and hand this png over.

So thanks to Chapter 3 for sharing!

hey Nica:

This is a fantastic resource. We are often in the position where we try and explain to designers how to design for Drupal and a CMS in general.

We've made a style guide: http://www.zivtech.com/zivtech-style-guide as a reference. I've already added a link to your post here.

that list is a super idea as well.

Terrific list! Thanks so much. Will certainly help streamline the design process.

Excellent idea. Thanks for sharing the concept and template. :)

Great write-up. I've found myself wondering if I've covered everything when building out templates. This is definitely an article I will revisit when doing theming, and one I am referring others to as well.

If I may, I think I found a slight typo...

"We came up with a list of elements inherit in 90% of Drupal sites..."

I think you meant:

"We came up with a list of elements inherent in 90% of Drupal sites..."

Very nice design!

I am a drupal learner, and I am wondering if it is very complicated to design my own themes?

If I want to use some functions, do I need to search for the special plugins?

I'm not a coder so I'm not realy the best person to ask, but you should start by going to www,drupal.org.

I recall trying to convert you in DC. Sounds like it's working for you.

It's working great. Buggy, but great.

Yah, sad about the bugs. But even with the bugs its such a rapid tool.

I downloaded the template zip, but when I unzip it's just a PNG file? Is it the way it was saved as c3_drupal_template.png.zip? Sorry if I am missing something - the post was great though!!

.png files are how Fireworks saves files. It's confusing for prople who are new to it for the first time. But yea, open it in fireworks and you'll find a multi layered multi page file.

Any chance this file can be saved out of Fireworks as a PSD for those of us without FW? I can see this being very useful!

Fireworks won't export layered files to PSD. I recommend you get a version of Fireworks. It's the best program ot there for web design. I've used Photoshop, Illustrator, Flash, InDesign, and Fireworks, and Fireworks wins hand down.

So this is what you are suppose to do with Fireworks. I've always used Photoshop for web design and have never really tried Fireworks for anything and always wondered why it keeps trying to open my .png files. I might have to give it a try and see what it can do.

I only see a subpage screenshot when I open it in photoshop, if I would open it in fireworks would I see a more screenshots?

Unfortunately I only have photoshop, no access to fireworks here.

I just downloaded the trial version of Fireworks, and yes, there are 11 different pages in the file, including some admin pages, profile page and error message. Very nice! I resaved as PSD, but I think you lose all those different pages. I guess I'll resave them as individual files for when my FW trial ends.

This only works in Fireworks. Sorry, but it's the best program out there for web.

Very well developed idea Nica. Congratulations also for the presentation made at DrupalCon San Francisco. This is indeed a step forward into a better design approach/performance.

I've only a small input to make which makes fireworks even better. Fireworks sure do export PNG to layered PSD files. I worked 4 years with Fireworks before jumping to photoshop (market standard) and was doing like this.

The way to do so is: FILE > SAVE AS (then select "photoshop PSD") then, before going ahead and save, click into "OPTIONS" right after the combo. Is plenty of options there. The only issue I had with that was the blending options on vector elements. It needs further adjustments in photoshop.

cheers

I'd really like to convert your Fireworks PNG and template concept so it could be used in open tools such as Inkscape and possibly GIMP. I've not had any luck converting it yet, but haven't yet given up. If I am successful, or if I end up recreating the elements in Inkscape - would anyone else be interested in using them?

I've got limited access to a mac with Fireworks - so tried exporting as .PDF and .AI to import into Inkscape - as Fireworks doesn't seem to be able to save direct to .SVG - so next step is to save as .PSD to see if that preserves the layers.

Nica - thanks for your work on this - and for your fantastic presentation at DrupalCon - it was really inspiring.

cheers

Donna

Thanks Donna. You can download a trail version of Fireworks that will work for a month. Use that for your experiment. Let us know if you're able to get it to work in Inkscape of GIMP. I'm sure there are others out there who would like that as well.

I've tried to use both those programs, but prefer FW, but I support your efforts 100%.

Been a long time coming, and it's nowhere near finished (and perhaps it never will be) but I've made a start on creating an SVG file containing drupal web widgets, and created a sandbox project on D.O. to share and collaborate.

http://drupal.org/sandbox/kattekrab/1263304

It's very rough. Actually it's a total mess, but it's a start.

Fireworks may, as you contend, be the "best" - but since it also is not nearly as widely used as Photoshop, this post is not of great value to a lot of people... If you want to add true value, you might consider supplying the file in the format that everyone can open as well as in the format that is the "best".

We're making Fireworks the norm through using it. You can't change the playing field by staying with the old stuff if it's not as good. Fireworks saves us time and money, which is why we're sharing it with you. It could save you time and money as well.

I just finished watching the video recording of this presentation. Great work, Chapter Three!

I think a lot of true value has been added, here. Fireworks is part of the Creative Suite and this sample file is a great way for "a lot of people" to kick the tires on an app they may not use often.

Your first homework assignment could be learning how to convert Fireworks pages into individual Photoshop files. So in this case, instead of ONE file to deal with, you would have 11. ;-) Take some time and learn a new app (but not when one is on a deadline); you might be surprised at how much time you could save in the long run.

And if not, well, there's always those 11 Photoshop files to work with.

To all of you complaining about getting a useful, easy-to-use, multi-page, multi-layer Fireworks .png editable file (instead of 11 Photoshop .psd files):

1) If you don't own an Adobe Suite that includes Fireworks (highly improbable), go to www.adobe.com/products/fireworks/ and download a free 30 days trial of Fireworks CS5. In case you already have Fireworks installed, simply open it.

2) Then open the Fireworks PNG editable file.

3) From now on, it's easy. The Fireworks interface is very intuitive and in 10 minutes or less, you'll be able to work with the file pretty well! In one hour or less, you'll start asking yourself "WTF?? Why I was trying to create/edit these rounded rectangles in Photoshop, when in Fireworks, it is 3 times easier and 5 times less time to spend? And gradients are not so limiting and they are so easy to create and edit, too!" And so on! :-)

In case you have some experience with Illustrator or Photoshop (khem, khem!), then you'll feel comfortable in Fireworks in no time!

Guides? View > Guides > Show Guides.

Want to see all pages in the file? Window > Pages.

Want to see all layers in a particular page? Windows > Layers.

Want to edit a particular property for a particular object on the canvas? Simply use the Select tool (press "V" or use black arrow) and click on *any* object. The object (and its "layer") is automatically selected and almost all of the object's properties are immediately available for access and modification using the PI panel (Property Inspector panel, usually docked at the bottom of the Fw interface). Same is for groups of objects.

Using the PI panel, you can instantly edit any vector, bitmap or text object, or a group of objects! No need to open extra panels, no need to dig into the Layers panel. You can edit any property for any object, using this panel -- including Live Effects, blending, colors, gradient, stroke, etc.

Fireworks is the right program for Web development (web design). Sorry, but that's the truth. And if you use Photoshop for Web design... well, this simply means you overlooked the right tool for the right job!

Fireworks is faster, easier and more powerful -- for Web design tasks!

A couple of useful resources for you:

1) A review of Fw CS5 over at Smashing Magazine might give you an overview of latest Fireworks version:

http://www.smashingmagazine.com/2010/05/22/adobe-fireworks-is-it-worth-s...

2) Why Fireworks - 10 reasons to prefer it to Ps:

http://boagworld.com/design/fireworks-vs-photoshop

3) The Fireworks compression:

http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/

Sure, there's much more than that... but you can always use Google and Adobe Devnet | Fireworks to find out more!

And... if you really don't want to make you life easier -- open the Fireworks file, and create the 11 .psd files out of it, as Jim Babbage suggested earlier. :)

Finally -- Adobe Fireworks is used by many design professionals, working in the sphere of Web design. The fact that you don't know the program and don't know how to use it perhaps means that you're too obsessed with your Photoshop world of bitmap graphics... perhaps it's time to broaden the horizon and see what other professionals do! :-)

I completely agree with you Michel, anyone in the professional web design field has moved over to Fireworks. Photoshop is great for at home personal type projects, but I don't know that I would ever go with a design company that used it exclusively.

Web Design Services

Gr8 technique and I'm glad to see that someone else is seriously using fireworks for a web design...it beats the photoshop and is good not only for a quick mockups. Will share this template with my team. thanks!

Drupal development

Hello,

First of all, thanks for this template and info. Second, I'm new to Drupal theme design, so bear that in mind as you read the following..

From scanning your list of elements above, I'm having a hard time understanding what makes this template "drupal specific". It seems all the elements you listed I would normally design for when designing on any PSD comp or any for any other CMS (with the exception of "Basic Node Style"). Am I missing something? Do you have any resources that would help me understand this better?

Thanks.

Hey there Bexar. You're correct. Most of the stuff is standard in most sites. The difference is that a lot of times people who design with Drupal forget to style certain elements (secondary tabs, input fields, error messages, etc) or go with a basic style that comes with a standard Drupal theme and it ends up looking sort of bad, or Drupal-y. Mostly because folks tend to start with a base theme.

But you are 100% correct in noticing that the majority of elements listed appear on ALL websites. But again, often designers don't do a style guide for a project and stuff gets missed is all.

I know a lot of people who use drupal and they say it's great. I have yet to try it. But I will now. Thanks!

I am actually enjoying creating my own PSD from scratch. I used 4 of the pages in this Fireworks template as a starting point and now I'm fleshing it out with different pages and content elements not featured in the template.

Thanks for this valuable resource!

I never considered using drupal but thanks to your guide, I will be considering it for my next project. thanks for sharing.

Hello,

Thank you for the brief tutorial! I have been using Drupal for 2 years, and have never been disappointed. The last version of templates is also good. Just a bit pressed for time to speculate on this subject. Just wanted to share a short video on drupal http://www.tubesfan.com/watch/drupal-template-theme-install-drupal-insta... which gives additional info on how to get new Drupal themes, templates and tips. Might be helpful for Drupal beginners.

:) Best regards!

Thank you for a very informative post, I particularly like the point that comments should be useful and add value to the blog. Blog commenting is an effective and valuable part of a well developed link building strategy which should include adding your URL to quality directories as well as creating quality and informative subjet content then submitting to article directories. Have a nice day!

Hi Nica. I came across your video from the drupalcon in SF and thought it was great. I recently became interested in drupal so I'm very new at all of this (sorry if I'm missing the obvious). When I downloaded the .png fireworks file, I realized that most elements (buttons, boxes, and some text) were rasterized so that I couldn't use the template. For example the header options were rasterized. So was the login/tabs box so that I couldn't modify the "log in" button. I could certainly recreate all of these elements but just wondering if I'm doing something wrong. Thanks you.

Did you open it in Fireworks?

That sounds strange. The .png should open in Fireworks and be a mulit-page document. Let me know if that is what you did...

The other thing it could be if you're not familiar with Fireworks would be that you're not viewing it at 100%. Press CMD+1 to view 100%. Maybe that was the problem?

I just downloaded it again to test and it looked okay on my end...

@Toni, the elements you are referring to are grouped and therefore you can not select buttons or text. To ungroup select the group with the elements you are interested in. Then go to Modify > Ungroup and you'll see every element is now selectable.

Wow, what a brilliant & helpful template! Thanks so much.

I do agree, that often, many of the more "Drupal" bits get forgotten about in the Design. So this is a very useful approach.

Fabtastic!

Just got psyched to try the template after seeing your Rapid Design for Drupal presentation video. The download link isn't working anymore, though -- any chance you can put it back up?

Thanks!!

The link isn't working anymore. I'd love to see this resource. Can you share it again?

I restored the link. It should be working now.

Thanks Nica!

Thank you for the video and the PNG on this subject!

My question is: is there a way to export one of these pages (basic node with sidebar) as html in fireworks?

I'm building a page framework and am looking everywhere for a block of code that does essentially what you are doing for fireworks... to demonstrate all the sorts of things that are on a page e.g. headers, p, lists, blockquotes etc. with dummy content.

Hey there Cory,

I think there is a way to get Fireworks to spit out code, but I wouldn't recommend it. The kind of code it would produce is something along the lines of what Dreamweaver does. It's not symantic, nor is it easy to maintain in the long term.

Ultimately this approach is about creating pretty pictures that you then use to reference to build a real site from scratch.

Mostly, this post is meant to communicate that when designing, it's important to account for all of these elements. Many of them get ignored or forgotten.

Post a comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
Let us know you're human by typing in this code. The code is case sensitive.
Image CAPTCHA
Enter the characters shown in the image.
To prevent automated spam submissions leave this field empty.