↞ My work

This website: portfolio as data visualization

I developed a portfolio website from scratch, both as an information visualization and a self-reflective art piece.

The challenge

I set out to design portfolio that reflected both my work and my mind. In one sense, my portfolio is a data visualization of the work I’ve done. As I grow as a designer in different areas, particularly information design, I decided to restructre how this information to show both the breadth and depth of my work. In another sense, my body of work is a reflection of who I am; the point of view that informs my sense of design and thought.

My design needs converge in my appreciation of the “affordances” of old technology. For example, each usable button and panel of the original Nintendo is accentuated with embossed plastic.

Also, in Star Trek: The Next Generation, the ship’s user interfaces (LCARS) have bright buttons, with thin spaces in between, on a dark background. The boxy aesthetic of the era emphasizes both each usable component, much like a data visualzation emphasizes the actionable contours of a datum, and my inclinations towards play, discovery, and the analog as a designer.

The design

The analog counterpart of the digital portfolio is the sketchbook. The grid of the home page (top of previous page) references a dotted sketchbook page, augmented into data visualization; each dot is a link to recent portfolio piece.

A reminder of the designer “within” the sketchbook, a video capturing a moment of my sketching process comprises the background of the page. The video explodes with glitches every few seconds yet persists, reflecting both old finicky technology and my response to failures and distortions with an embrace as part of the process.

The “My work” page serves as an overview of the type of projects I like to work on. Inspired by Schnidermann’s mantra “overview first, then details on demand,” my portfolio pieces are categorized into stacked bar charts at the top of the page with individual pieces below.

The website embodied boxy, retro feel. I used a mono-space font for text acting as metadata and aligned nearly all content to the left, a reference to old computer terminals.

Development

I began with a blank WordPress theme, customizing each page with custom PHP and CSS. I used D3.js to set up the “sketchbook” grid on the home page.

In order to film the home page video, I traveled to my favorite coffee shop and filmed myself working in my sketchbook. To create the glitches, I used Adobe Premiere to arrange the clips and Ademux to create the glitches with a technique called datamoshing.