The Haystack

Jon Tan and Jon Gibbons recently launched a website for Denna Jones. It’s a great-looking site, and it makes no use of a (single, local) content management system. Rather, the content is pulled from several web services, such as Flickr and Magnolia.

This is an interesting idea, but I’m on the fence about the approach. While the site is a coherent whole, it’s an automatically generated coherent whole; the author herself may not even be aware of the state of her site at any given moment in time. In effect, it seems to me to be a very well-designed, well thought-out feed aggregator. A fan of Jeremy Keith’s approach, I’ve always tended to see these services as extras, at most supplemental bits of not-necessarily-related content.

On the other hand, this isn’t a bad thing. If the aggregated web services are often used by the author, then it’s most likely no chore for her to log in to four or five sites instead of one CMS: one to add photos, one to add bookmarks, another to blog, etc. While I’m so busy doing other things that I don’t have time to attend to this site [I haven't even really designed the thing yet], Denna is creating bits of microcontent which are combined into something bigger, perhaps more meaningful in surprising ways. Her site is updated as she tweets. That seems quite effortless.

Perhaps I need to get over the fear of the fragility of web services, the idea that they can and sometimes do hiccup, burp, vomit or completely self-destruct. The dependency on these sites. Maybe it’s a matter of choosing the services owned by the big players, just to play it safe. But wait! We want control. Our own favorite content management system, tweaked just so. Argh.

Web 2.0 is about reusing information, and Web 3.0 will be about making information more meaningful by defining and discovering relationships between all these bits of information. The Jons are onto something with Denna’s site. There’s a transition here. And now others will follow.

It’s such a logical, natural approach. It’s the gorilla on the table. I like it. I think.

Remember the Swoosh logos of Web 1.0? And the shiny-drop-shadow-reflection-gradient-badge-icon shit we’re still digesting today? Well, get ready for Network Graph logos for Web 3.0. At least, that’s my prediction.

Assuming that Web 3.0 involves the emergence of practical Semantic Web applications, we can expect to see plenty of logos based on a visualization of graphs depicting nodes within a network. Ehm, like this:

Don’t underestimate the highly creative use of the dot on the lowercase letter i as a node within the network. Real cutting-edge designers will possibly use the letter o. Oh, and for goodness’ sake, use orange and blue in the logo, okay? Dare to be different.

If you want to really turn Web 3.0 on it’s head, join me in designing square, tree-hierarchical logos for semantic web applications. In Microsoft Word. No, make that Powerpoint. No, Paint. No, ASCII. Just to keep these people on their toes.

[On a serious note, I'm testing the Twine beta and find it an awesome concept. These types of apps will change how we as end users approach information. To their credit, they are also one of the first apps in this space to utilize the network-graph-logo-with-the-dot-on-the-i-as-a-network-node design meme.]

Though powerful, AT&T Research’s open source graph visualization tool suite might lean too heavily into geek territory to have captured the interest of the visually-inclined OmniGraffle-ish crowd. Nevertheless, Graphviz and the surprisingly simple DOT language it uses makes it possible for creative types to generate attractive and visually consistent graphs by spending only a few minutes listing objects and their relationships. Graphviz will do the rest, laying out the graph according to magical and undoubtedly geeky algorithms. Sounds fun, doesn’t it?

DOT is easy to learn. The syntax is simple and straightforward. But wait: syntax? I want to make a site diagram. Why use some plain text graph description language like DOT?

Don’t get me wrong. As a designer, I love visual tools. OmniGraffle is awesome, and I use it often (especially when applying Jesse James Garrett’s IA Visual Vocabulary). But I love trying old things for new things, and the idea of typing in some labels and relationships and then having a graph generated for me based on my pre-defined (visual) parameters, seems fantastic. Since most of our basic/simple site diagrams use the same style, pushing boxes around the screen isn’t always the best use of my time. Plus, I love plain text (highly portable, as is Graphviz, which runs on Linux, Windows and Mac OS X) and I love the separation of content and layout which Graphviz provides.

Let’s take a look at a very simple site diagram, which I’ve generated using Graphviz:

This was created using the following code:

digraph test {
    home [label = "Home"];
    prod [label = "Products"];
    news [label = "News"];
    cont [label = "Contact"];

    home -> {prod news cont} 
}

Of course, I could’ve opened OmniGraffle, dragged a box, copied it several times, changed the labels, dragged some arrows from box to box, selected them all and clicked an Align button. But, what if the client adds some new items, or new relationships between items, or both? It’s back to box-pushing. Let’s continue with my first example. Now, my very demanding client has added a few things, which force me to change the diagram. Since I’m using Graphviz, I don’t have to think about the layout, only the items and relationships:

digraph test {
    home [label = "Home"];
    about [label = "About us"];
    prod [label = "Products"];
        wid [label = "Widgets"];
        twd [label = "Twidgets"];
    news [label = "News"];
    cont [label = "Contact"];

    home -> {about prod news cont}
    prod -> {wid twd} 
}

Done. From these changes, Graphviz generates the following image:

In a visual layout application, I would’ve had to move things around myself. I would have to consider all relationships, and try and figure out how to best visualize them. Granted, this is not the most complex example. The exciting thing about a tool like Graphviz is that it handles relationships objectively (algorithmically). This will not always produce the very best or most aesthetically logical graphs, but it can help one to look at these relationships in new ways. And if all is clearly communicated and looks nice, nothing’s lacking. Plus, even default settings make for great-looking graphs.

We can tweak the settings a bit to get the graph looking a bit nicer:

You can get pretty wicked with your styles; there are tons of possible parameters to set, and advanced users can add their own shapes. Transparency is also supported. Since Graphviz is essentially a command-line tool, you can send other processes to it to automate the creation of graphs.

What are you waiting for?

To get started on your own Graphviz adventures you’ll need some tools:

• A plain text editor (I’m a Vim-lover, and have been happily using MacVim for a while).
• Graphviz for your system

If you’re interested in a high-level tutorial, let me know in the comments. If enough people want one, I’ll post a walkthrough of the DOT syntax and how to style graphs. For the impatient, a few minutes in Google should yield some decent resources.

Enjoy!