Here’s a useful little idea designed to help you bridge the huge gap between mockup graphic and code.

The guys from Twinsparc have produced a very tidy set of what they call ‘HTMLstamps’ for your downloading pleasure. After dropping them into the symbols library of your preferred graphics editor, the idea is use them to visually tag your mockup by dragging and dropping ‘tag symbols’ (representing H1, H2, P, LI and all other major tags) onto page elements.

HTMLstamps in action

The real advantage of using this method is it forces you to take a ‘big picture’ overview of your markup strategy. I can see this being particularly handy on large and complex projects, where various page and template components are often built at different times by different developers. HTMLstamps may well help you to keep consistent relationships between those components.

Their original HTMLstamps was an Illustrator-only gig, but it’s good to see the guys have most bases covered now by providing versoins for Photoshop, InDesign, Fireworks and even Visio (?). They also provide a handy quicktime tutorial showing HTMLstamps in action.

I’m not sure if I’m 100% sold, but I’m going to give it a go — I could see this becoming part of my workflow process.