Marking up your Designs with HTMLstamps

By Alex Walker | September 22, 2005 | Web Design Tutorials & Articles

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.

Written By:

Alex Walker

Alex manages design and front end development for SitePoint.com and writes Design Festival's monthly design newsletter, the SitePoint Design View.

Website
>> More Posts By Alex Walker

{ 13 comments }

sleahcim October 10, 2005 at 12:53 pm: 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.
Anonymous October 7, 2005 at 9:18 pm: 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. :(
hairstyle October 3, 2005 at 3:00 am
codeninja September 27, 2005 at 4:47 pm: Ok, I watched the movie…. is it me or is this guy the same guy from Odd Todd? (http://www.oddtodd.com)
RaS! September 26, 2005 at 3:33 am: Useful
AlexW September 25, 2005 at 8:02 pm: 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.
mrsmiley September 25, 2005 at 6:21 pm: 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.
dhoran September 24, 2005 at 11:35 am: 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!
Web Design Ireland September 23, 2005 at 1:04 pm: 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.
peach September 23, 2005 at 12:08 pm: 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.
Dean C September 23, 2005 at 8:06 am: On any extremely precise graphical layout, that concept will just not work IMO :)
Web Design Ireland September 23, 2005 at 8:03 am: Looks extremely useful. I will be giving this a try on my next design project.
rutibei September 23, 2005 at 5:59 am: I’m wonder if isn’t already exist a Firefox extension to do something like that?