Reading time: 2 – 3 minutes
Yesterday during the wee hours of the morning I started working on an info graphic about the structure of a web page. I was broadcasting my illustration process live via ustream.tv . A few people joined to watch and gave me their thoughts on the spot. Quite an interesting experiment! I have to say that I’m fascinated with screen casting and instantaneous-ness (is that of word?) of the internet.
Click more to watch the video (30 mins) and see a few screen shots of the progression of the design.
Design 1: Ven Diagram
My initial idea was to visually show the makeup of a webpage. I was going to use this graphic in an article about why separation of structure and styling is important.
Design 2: Circular Pie Chart
Another attempt at showing the same information with a different graph style.
Design 3: Layered Circular Pie Chart
A viewer pointed out that behavior isn’t necessarily an equal part of what goes into a web page, but rather something that goes on an additional layer. I tried to show this by placing behavior as a blue circle with transparency overlapping and above the circular pie chart.
What do you think of the design?
Please let me know your thoughts on this graphic! Feel free to critique me to your hearts content! I’m a total newbie to information design and want to get better!
How does social networking affect your design work?
Do you let people view your work in progress? How would designing live (broadcasting your screen) affect your design? Good? Bad? Let me know! Sorry to overwhelm you guys with questions – I really would like to have an open conversation about this! 
Share This Article
6 Responses to “Info Graphic In The Making”
Trackbacks & Pingbacks:
-
Pingback from AndySowards.com :: Web Development Nerdy Daily Links For 11/04/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
November 4th, 2008 at 4:14 am[...] Info Graphic In The Making | The DesignO'Blog An experiment in social design. [...]
Stephen Tiano says:
I’m sorry, I just don’t see it. It should be as easy to understand as reading a few sentences that describe the info the graphic is supposed to convey. I’m certainly not the end-all, be-all on such a subject, but one thing I remember from Edward Tufte–and I am paraphrasing–is that every bit of ink should serve a purpose. There’s so much ink there that I simply can’t hear what it’s expressing.
November 3rd, 2008 at 6:57 am
Stephen Tiano says:
Oops! Sorry. Didn’t mean that I don’t understand it because there’s too much ink. Rather so much of (i>what is there doesn’t convey its meaning to me.
November 3rd, 2008 at 6:59 am
Stephen Tiano says:
Oops! Sorry. Didn’t mean that I don’t understand it because there’s too much ink. Rather so much ofwhat is there doesn’t convey its meaning to me.
November 3rd, 2008 at 7:00 am
Nathan Rutman says:
What about a “layers” diagram? One that looks like 3 sheets of paper on top of itself? The bottom layer would be HTML, which contains the raw data. The next layer would be CSS which transforms that data for presentation. Then the third layer would be JavaScript which attaches behaviors that modify the first layer (DOM) which filters up to the 2nd layer (CSS).
November 3rd, 2008 at 8:37 am
Steph Adamo says:
I’m not really sure what you’re trying to communicate with these graphs–i didn’t watch the video, maybe that would explain it.
Personally i like to hide away and work on a design and don’t show it to anyone until i deem it finished, because i go through a lot of motions that i know are total poo before i get to where i’m going. You know? My process isn’t pretty, but that’s not the important part anyway.
November 3rd, 2008 at 9:46 am