Design tools and documents for a templated site

24 Feb

On our team, we’re exploring the best process for web design as we work from explorations of flows, into wireframes, finished page designs and on into developed pages. It’s often an iterative process as we refine how pages and interactive elements will interrelate, the best content to include, media and form factors for the content, and how to optimize for user experience. Also, a key objective in the process is to be sure the finished design document relies on the components and css of our templates. We’re a relatively small group, so the more seamless and agile we can make the process of wireframing through design and development, the better.

The use of Indesign for templates and libraries for wireframing is certainly an option. Some members of our team went to a great session led by Nathan Curtis of Eight Shapes. Lots of folks must be interested in this topic–Nathan is giving a sold out session on component libraries at a DC web design conference next week.

However, our team is relatively small, and we frequently need to work quickly from design into development. Also, we’d like to find a way to build interactive prototypes, to test out the feel of a flow or interactive experience, prior to committing to full development, which can often be a big investment of time and resources—painful to go down that path and find we aren’t happy with the experience at the end of it. So we’re hoping to find a way to use Fireworks, with it’s pages and master pages, libraries, rich symbols and 9-slice functionality, as a means to work in a unified process flow through wireframing pages, creating interactive prototypes in some cases, bringing in more refined visuals from Photoshop and Illustrator, and delivering the final design file for development and porting over into our Typo3 templates all by using the same tool. This is a little different than the workflows posted in the Adobe Fireworks resources because we won’t want to export html or new css out of the Fireworks file in most cases, but be documenting which existing CMS templates and components to use, and be providing the images and text content within Fireworks to be ported over into those templates.

Last week our IA/UE designer, Michael Everitt, attended our local Fireworks user group, Fireworks on the Bay, and connected with Adobe’s Fireworks evangelist, Alan Musselman there. Apparently he’s been around the globe (or to Japan anyway) working with groups on this and other opportunities with Fireworks for web design and work flow. He’s agreed to visit our team so we can pick his brain, get his ideas on how Fireworks could work for us best in the model we’re envisioning. It’s a great opportunity for us to take the next step toward getting this into the works in the best way.

I came across a handy set of tools to help with documenting design into development. It’s a set of html stamps to use as notes on a design, to mark which html tag should be used. These are brush sets and libraries (depending on the application) from Twinsparc. Here’s their updated post about this, and also their original post which contained a tutorial on use.

I’ll try to update here as we evolve our plan for a system of design templates, libraries and documentation for a smooth web design to development flow.

Advertisements

One Response to “Design tools and documents for a templated site”

  1. tomokeefe March 25, 2008 at 10:08 pm #

    It’s about time!!!! I’m so happy that Fireworks will be used! *jumping up and down*
    I swear I don’t like Fireworks at all. Nope not me.

    http://blog.mycardmywork.com/?p=294

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: