Screen Shot 2014-08-17 at 4.39.00 PM

A New Portfolio!

It was Masonry before Masonry was everywhere, it had a new cheeky logo for myself that was done at 2 a.m. amidst much giggling (fun fact: the logo used to sport devil horns to really hit home the holy vs. the heck. I’ve matured to the point where this feels gauche, so they are gone.) The code was repurposed from the Eephus League (next in line for a redesign, I promise) and only took a day to construct. The old design actually ended up in a book about web typography, believe it or not. Thankfully, the bar for that has been raised significantly, and I knew I needed to bring my site up to snuff.

RIP, Heckhouse 3.0. You had a good run.
RIP, Heckhouse 3.0. You had a good run.

Because of my profound laziness, I hadn’t bothered to update much work on the site, or been able to muster up the motivation to redesign and recode the thing. I needed something that was more current, flexible, easy to manage, and would allow me to write when I felt like it. Which isn’t often, but hey, dream big. Oh yeah, and the site needed to be responsive, because, you know, smartphones exist now.

I finally broke down and asked Phil Moody if he was available to code a new site for me;  thankfully he was, and it was off to the races. After doing some research on current trends and looking back through my body of work, I started playing with designs. I won’t bore you with talk about the design itself, because it’s quite straightforward. If there’s anything unique about it, it’s how many premium fonts it’s using (4!!!).

The Design

Ok, I lied, lets talk about the project pages. I’m a big fan of modular webpage designs. You can set up a handful of arrangements for text and images and construct hundreds of combinations from that, ensuring that you can serve any project. I wanted to lead with a large image when I could, but I don’t have that for every project, so mark that optional. What if it’s just a piece from school that only needs a brief writeup? Nix the intro and the 3 col section. I actually got such a head of steam going when I was building out my project pages that I ended up making big banner images and writing a fair amount of copy to accompany each project, but I’m planning for future, lazy self. The site is super easy to use because Phil is a wizard. I got emotional after I loaded in all of the work and saw it for the first time. It’s better than anything I ever could have made on my own.

The Footnote/Caption system in action.
The Footnote/Caption system in action.

The other vaguely unique thing I wanted to do was a caption and labeling system for the images that was detached from said images, similar to what you’d see in books and publication. Try telling your developer you want to try something like this and watch them dissolve into tears. Phil’s such a trooper. It’s extremely helpful to be able to tuck away tidbits of info about specific images in this kind of setup, and you also don’t have to worry about covering up any more of the image than you have to. The captions are also linked to their labels so you can easily glide between the image and it’s caption. It’s a great idea and YOU’RE WELCOME.

The blog pages are similarly modular, letting me write dinky little ditties as well as transposing talks I’ve given and making sure they stay all visually rich. It was important to me to have some nice scale variation in the typography on these posts without having to rely on imagery to jazz them up. I might have gone a little overboard having two different pull quote styles, but hey, go big or go home. More than anything, I hope that I can generate content for the blog that’s interesting to you all.

“So I’m about to talk about Galaxie Copernicus. Here it is again in all its chunky, curvaceous glory.”

The Fonts

Galaxie Copernicus Heavy

Let’s talk about the typefaces, while we’re at it. We’ll start with the big daddy that’s on every page: Galaxie Copernicus. If you’ve looked through my portfolio, you’ll see I’ve used this weight of this font in a lot of web projects. There aren’t many fonts that just make anything look gorgeous, and Galaxie Copernicus is one of them. It’s available for web licensing, it renders beautifully, and I mean, just LOOK at it. It’s voluptuous, it’s got personality, but it still has a presence about it. It’s my crutch. Go buy it. The only small issue is that I’m really using it at larger sizes than it’s meant for, and as a result you’re going to see some wonky kerning on some of the blog headings.

Interstate Bold

I love to contrast Copernicus with a geometric sans serif, but for this site I mixed it up a little and went with Interstate. We’re all familiar with this font, with it’s distinctive quirks and wide weirdness. I actually looked at some of the other adaptations of the Highway Gothic fonts, but I couldn’t beat the best. Interstate has many of the old imperfections of it’s inspiration while being usable at a variety of scales, and to make things even better, the folks at Font Bureau have lovingly tweaked Interstate for the web, keeping its eccentricities while insuring it scales well and doesn’t get horsey in browser.

Harriet Text Light Italic

Next up is another Webtype font, Harriet. If you haven’t checked out the Harriet Family by OkayType, please do so now. I’ll wait. Are you back with a lighter wallet? Good. OkayType describes Harriet as “a rational serif typeface,” but I call it PRETTY. Guys, it’s so pretty. Picking just one weight to use was a real dilemma. I went with Harriet Text Light Italic. “But Bethany, why the text weight when you’re mostly using it at a large scale?” Well, I’m glad you asked. The display weights have the added visual construct you’d expect from a  display face, and given the heftiness of Copernicus, I thought the display italics felt a little too fragile, like they would crumble under the impossible weight of the mighty slab-serif. The text version of the light italic has all the positive qualities of the typeface: the musical rhythm and the lovely yet legible curvaceousness, while being suitably sturdy and self sufficient to hold up to the bolder fonts and also be used at smaller scales.

Nimbus Sans

The last guy to the party is Nimbus Sans. It’s based off Helvetica, and frankly is a better version of that typeface. It’s used here to be legible, subtle, and stay out of the way, and it does it beautifully. Look at how crisp it stays at small sizes! It’s a perfect final bit of icing on the Heckhouse cake.

So, that’s the site. It’s not too fancy, but I think it’s going to serve me well, hopefully for a long time. Thank you all for visiting, I hope I’ll be able to keep creating things that are interesting enough to draw you back from time to time.