hyalineskies

The math is simple: Take the old hyalineskies, add Subtraction, and plot on a grid. Welcome to hyalineskies 6.

I originally set out to rebuild hyalineskies well over a month ago. I wanted something clean, modern, and reflective of myself while not appearing too impersonal. I wanted to build a site that handled content gracefully without sacrificing the beauty of web standards.

During the process, I quickly learned that modifying existing templates wouldn’t work; I wanted hyalineskies to follow its own direction as opposed to the one forced upon it by modifying someone else’s codebase.

hyalineskies 6 started as sketches in a notebook. I eventually built logos and numerous designs for this site before scrapping the first two during initial self-critique. Four more made it out to designer friends of mine, all but one of them coming back to me for further revision as opposed to instant death. I set everything aside for a week before coming back to the three surviving templates, dooming the rest in a second round of self-critique. I was in the middle of a designer’s block. I needed more than inspiration; I needed something fresh. I needed a new approach.

As I discussed the state of the web design world with Phil Dokas, a designer on my staff at the Daily, he tried to work me through my creative block. I told him all of the approaches I had taken. Eventually, he asked me if I had seen Subtraction. I hadn’t, and thanks to Khoi Vinh, the light bulb in my head flickered on again due to a brutally simple yet ultra-elegant solution that hadn’t crossed my mind: the grid.

Grid design is something that you’ve worked with if you’ve ever laid anything out on a computer: at the lowest level, you’re laying things out in a rectangular pixel matrix. Eventually, you extrapolate from pixels to larger sectors of them, creating a general layout grid in columns and rows. In most programs, you’ll just snap to that grid automatically to align everything and “clean up” your layout. Why, then, hadn’t I considered doing this on the Web at an extremely strict level? I felt rather stupid. I used grids everywhere else - my softwawre, Illustrator, InDesign, FontLab, math class - so why hadn’t the grid solution ever crossd my mind? I don’t have any idea.

Khoi revealed his process for constructing Subtraction 7.0 earlier this year, building a stylesheet that revealed his grid. It made for a wonderfully elegant solution once the grid was turned off, as well.

I adapted the grid to hyalineskies six, using three and a half larger (210px) columns rather than Vinh’s four full (190px) columns. I spaced the columns at 10 pixels from each other and had the 100px subcolumns spaced at 10 pixels as well. Once I had a simple grid, I sketched layout comps on graph paper. I pulled together all of my previous inspirations as well as new ones, eventually coming up with a basic idea. I built an array of colour palettes (the original hyalineskies 6 designs used sky blues - what happened?). I made my typography specimens. I built a layout series. Eventually, the greens prevailed, Helvetica beat out Frutiger, and this magazine-like layout won over more conventional blog designs. Once I had everything together, I started the XHTML/CSS. A couple of validation changes and a sIFR implementation later, hyalineskies 6 was born on the layout level. I spent another weekend writing the PHP that turns it into a WordPress template.

During the process, I realised two things: the beauty of the grid, and, at the same time, its hidden flaw. To take a rather twisted analogy from a friend, the grid is the generic European foreign chick of web design: clean, simple lines and an attractive overall package, but the untrained eye can’t really distinguish their individuality all too well from their common base. The grid design method puts an even more strict guideline upon the already-strict W3C standards, leaving the developers that use it very little freeform creative direction since so many other grid sites have done most everything possible to begin with.

The grid’s shortcomings aside, it’s easy to see that this layout is dramatically better than anything else hyalineskies has ever had. This just goes to show you that designer’s block pays off: in blocks, that is.