By Alex Walker

Marking up your Designs with HTMLstamps

By Alex Walker

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.

  • rutibei

    I’m wonder if isn’t already exist a Firefox extension to do something like that?

  • Looks extremely useful. I will be giving this a try on my next design project.

  • On any extremely precise graphical layout, that concept will just not work IMO :)

  • I use photoshops built in text/audio comments feature for making notes about code that can go with layout. The Header tags thing seems unneccesary to me.

  • I think fair enough if you want to use PS comments, but this seems to have a more visual reference for specific tags. I think it could be more useful for matching CSS.

  • I have used a similar system in the past, but more from a content perspective with CMS systems where content reuse is pretty common. I created some symbols that were used as references across several page samples (homepage, section index, detail pages) to show a common source for content. For example, one piece of content might show a headline and blurb on the homepage, headline with summary on a section index, and the full content on a detail page.

    This HTMLStamp idea looks awesome for bridging the gap between pixel-happy designers and HTML/CSS coders. Great work!

  • Who uses Visio to design web pages? I wasn’t even aware it was capable of web design. Go figure, a flow charting tool exceeding the boundaries of what it “should” be doing. You have to wonder why MS keeping putting all the same features into each of their Office products. Pretty soon there will be no need to have seperate apps for word processing, spreadsheets, web pages, database, etc because they can all do it anyway. They only differ in gui these days.

  • Who uses Visio to design web pages?

    I thought the same thing myself, but I guess you might could it as a wireframing tool to get the base page structure right. You’d design the wireframe, convert it to code, test the usability and THEN wrap a look’n’feel around it.

  • Useful

  • codeninja

    Ok, I watched the movie…. is it me or is this guy the same guy from Odd Todd? (

  • hairstyle

  • Anonymous

    I found a setback to the brush.

    When stamping on gradient background or clashing solid colors, you’ll need to alter the stamp color because there isn’t a solid background behind the words. It’s see through. :(

  • sleahcim

    Who uses Visio to design web pages?

    For quick prototyping Visio can hardly be beaten. I’ve used it for the last three years with positive results from clients and user testing groups. Here’s a link that explains how it is used.

    Hopefully someone will find it useful.

Get the latest in Front-end, once a week, for free.