I’ve been running an intellectual marathon for the last four months, but today things have finally calmed down enough to get my wits back about me. After spending Monday and Tuesday under house-arrest writing twelve hours a day, our team has finally submitted our paper for the 2009 CHI Student Design Competition.
The CHI conference is kind of a big deal in the research and academic community, and it’s where a lot of the intellectual powerhouses in human-computer interaction like to hang out. Don’t beat yourself up if you haven’t heard of it, though. I have been violently active in the web design industry since 2003 and I went to SXSW three years in a row, and I had never even heard of CHI until enrolling in the HCI/d program at Indiana University.
And this program. Wow. I felt like I was on a reality show for much of the first semester. My mind was destroyed, quite literally destroyed at a few points during the last few months, and let me tell you how great it feels to finally be on the other side. That said, I believe it had to happen. Even given the fairly sophisticated understanding of design I already had upon entering this program, I realize now just how naïve I still was.
So I’m better. Now. I grew a beard, and I shaved it off after it had served its purpose.
Schmortfolio.
In other news, I updated Brainside Out with a new online portfolio, in my quest to fetch coffee and shine shoes as an interaction design intern somewhere this summer. All the old versions still exist, including Terra, Rosco and the old weblog Siskiwit, but I wanted to revamp the whole thing to better reflect where I am right now, and where I think I am going.
The process of building it is a story unto itself, but I can offer the Cliffs Notes version right here, right now. In planning out the portfolio I wanted to feature my work, certainly, but I didn’t want to do so in a cookie-cutter sort of way. I realized that I have worked on a ton of incredibly diverse projects, and the last thing I wanted to do in sharing them was shoehorn this eclectic collection into a standard portfolio template. You know the drill: header, screenshot, description. Lorem ipsum, only with more references to branding and marketing.
It took discipline, but I forced myself to describe each project, and write out the primary content for each before putting down a single line of code. I collected all my photographs, sketches and screenshots. I re-photographed all my sketches, on a day when the low winter sun was shining perfectly through our deck door. I dragged our dining room table into the living room, shined it up with Pledge to bring out its wonderful wood texture, and stood on a chair with my camera photographing paper. Why not a scanner? Because design is deliberate, man.
I created sketches of what I wanted the layout of the portfolio to look like, of course. However, I wanted the design to emerge from the content it would be cradling, not the other way around. Thus, each of my primary projects came out with its own unique layout, as determined by the work itself. Jason Santa Maria’s latest website turned out to be a huge inspiration for me, and while my work can’t hold a candle to his, I can still recognize a real man of genius when I see one.
Better push up your nerd glasses.
The technical underpinnings are fun, and I’ll give ’em to ya even though they hardly define the experience of the website. Brainside Out uses Blueprint CSS for its pixel-perfect grid layout, and it is served up by the lightweight CodeIgniter PHP application framework. I maintain the codebase in a Subversion repository hosted at Beanstalk, which I interact with via Versions for OS X. I wrote all the XHTML and CSS by hand in TextMate, which I will continue to do until someone convinces me that I can do the same work in CSSEdit, only ten times faster.
Cabel Sasser’s FancyZoom made the killer image effects possible. Any other JavaScript wizardry is courtesy of Prototype, if only because no matter how hard I try, I cannot wrap my brain around the documentation for jQuery. Believe me, if I could learn how to do what I needed to do with a 56KB JavaScript framework, I would be all over it.
While the entire site works perfectly in Internet Explorer 7, I had initially hidden all but most the basic Blueprint CSS styles from Internet Explorer 6. I tested extensively in IE7, but since I couldn’t get my standalone installation for IE6 to identify as anything but IE7, I was unable to test compatibility until I configured a fresh install of Windows XP under VMware Fusion. Once that was settled, however, I was startled to discover that nearly everything rendered just fine in IE6. So, for all 7% of you who browse Brainside Out in Internet Explorer 6, you’re welcome.
That said, I did try to fix the transparent PNGs in IE6 using this handy script, but ultimately abandoned said efforts. There were a few isolated rendering glitches, where a normal PNG <img> would stretch to fill the full width of its containing element, and the fix didn’t behave well with FancyZoom. Hey, I tried.
Future work.
So anyway, that’s where all that has been. My time back in Minneapolis over winter break was wonderful, Kate is on her way back from Hawaii as we speak, and our new semester starts in three days.
Let’s make this a good one.
