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.
We used to design sites by creating a wireframe, and then designing a final composition of the front page, and several key sub pages.
While the site itself looked great, the tabs did not. They stood out like a big sore thumb.
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:
Collaborating with our developers and themers, we built a Fireworks template illustrating these elements.
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 Chapter Three Drupal Template to start streamlining your design process now or make your own. If you pioneer improvements, let us know!
Floor and I will be presenting on this topic tomorrow at Design 4 Drupal at Stanford and again at Drupalcon SF.
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.
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.
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.
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
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".
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.
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
I love working with Chapter Three. They are THE Drupal experts and have helped 7x7 and California Home+Design with everything from troubleshooting sticky bugs to designing and building out entire sites. They understand both our editorial and business needs and have delivered top-notch products that satisfy both.
Jennifer Pollock, Online Managing Editor, 7x7 and California Home + Design
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.