Creative Tip: View Website Structure as a Graphic.
Interested in Adobe Creative Suite? This is a weekly newsletter for creative professionals who use Macs (but Windows users are welcome too). If you're new here, you may want to subscribe via RSS or Email or Twitter for a mix of new tips each week. Thanks for visiting!
Here is an facinating website that creates colorful graphics that visualize the structure of whatever webpage you give it.
Type in a website address and watch as intricate flower patterns springs to life based on the pattern of HTML tags used in that particular site.
But is it useful?
These website graphics are more entertaining than useful. However they do provide some interesting visual feedback on how different websites are designed. The colors used for each dot represent a different type of HTML tag:
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags
December 14th, 2009 at 6:30 pm
Hello everyone,
December 27th, 2009 at 3:46 pm
I was hoping this would save me some time, but instead only raised even more questions. Time to hit big G now…
December 27th, 2009 at 4:22 pm
Just read it and went gosh, I know why I was poor in the debate class.
December 30th, 2009 at 2:07 pm
Hello i read your website frequently and thought i would wish you all the best for the New Year!
January 29th, 2010 at 10:08 am
Hey, This is a great string. I found you on msn. Keep up the work.
March 11th, 2010 at 11:00 am
Interesting tips, i’ve been trying to find for this all day. Your a life saver