Disciplines of User Experience, redrawn with CSS

An old experiment with CSS3 radius and line-drawing techniques.

Originally published on uxthing.posterous.com, Feb 2010

It's like I've been dozing, and when I woke up, the world had changed almost beyond recognition.  Since I made the switch to UX, the web has gone doolally for HTML5,  embedding fonts & swanking it up with CSS3. Hey guys, wait for meeeeeee! 

In an effort to do something about it, I'm trying some HTML experiments / training exercises. 

First time out: some CSS 3.  I'm a fan of Dan Saffer's Disciplines of UX Diagram (PDF), so decided to redo it in pure HTML (with permission). 

Here's the HTML & CSS version. (Chrome, FF, Safari should be ok - not tested in IE)

It's pretty close to the original, plus has a handy draggable wee man so you can decide your UX niche. 

Things I learned:

  • Dreamweaver is a horrible tool, and it's time to switch to Coda or similar;
  • You can make line drawings using the :after pseudo element (hat tip - this speech bubble article);
  • Repeating the border-radius command 3 times is annoying, sort it out browser-makers;
  • jQuery is great but doesn't always play nicely with iOS - drag events, for instance, do not connect to iPad touch events unless you poke at it (which I didn't).  

I thought I could make this semantic somehow, perhaps by using an unordered list, but in the end couldn't figure out how to pad things nicely without divs.

What shall I try next? Maybe some of that newfangled CSS animation stuff the kids love. 

Thanks to Dan for the use of his diagramme. 


blog comments powered by Disqus