Welcome to the 2013 edition of tyhatch.com! For nearly a decade this site has been neglected. To my chagrin—and by being active on Twitter, Dribbble, LinkedIn, and the like—I haven’t done much with my site and it has become extremely long in the tooth.
So I’m changing that. The new design is fully responsive, uses lovely web fonts served up by the great folks at WebInk and is much better looking visually and simpler to navigate than the previous incarnation. My trusty old blog has been put out to the electronic pasture, and while things aren’t perfect they’re heading in the right direction. With that as an introduction, here’s a bit about how I got to the new design:
Content and Priorities, it’s elementary.
The first to get attention was content. Since mine is a personal site and I’m a designer: samples of my work, my thoughts on various topics, and a way to share things that piqué my interest made sense and felt right to me. I started fiddling with how to organize my portfolio—since that is the most important part, right?—when the realization hit me that I needed to apply the same level of planning and effort to my site as I do with my other projects. So I refocused, starting with my site’s priorities, and discovered that the site could be broken down very simply: Show and Tell.
Pow! I felt like I’d just gone through a wormhole back to kindergarten. The simple elegance of this thought excited me. Before I was mired in inane questions like “Should I have categories and tags on my blog?”, “Maybe I should have a tag cloud?” or“Do I want to use WordPress, or is there something new and fancy, like Barley?” All of these questions melted away to reveal a more focused strategy as I attended to my overall priorities and something considerably more doable and friendly—free of impending technical decisions—appeared.
Keep on sketching
With my priorities squared away, I plodded on and started noodling with the layout. As a longtime fan of 19th and early-20th-century broadsides with their single-column layout and dense information delivery, but knowing that we live in a flat, minimalistic digital world, my design goal was to have something that referenced both. As my sketches evolved, I saw some encouraging progress.
Mind you, none of the sketches I did were masterpieces by any stretch of a gnat’s imagination. Rather they served as visual markers for me as I worked through concepts and ideas as they rattled out of my head down my arm and onto the page. These sketches were quite raw and very minimal—just enough to trigger my memory about the direction I was heading—and perfect for my purposes.
Once happy with the concepts emerging from my sketches, I fired up Illustrator to flesh out details like color, typography, icons, and the like. Perhaps I could have gone straight to code, but I’ve found that staying static when working through initial concepts is very helpful. I’ve even created an Illustrator template that helps me visualize a typical range of breakpoints using multiple artboards. It might not be the best approach, but it works.
The hot pokers of branding
The last time I worked on my site, I didn’t do too much about branding. All the social networks we use today didn’t exist and avatars were infrequent. Since then I’ve continually fretted about the right level of personal branding and as a result, it’s nearly always proven my undoing. This time—while it wasn’t easy—I’m happy with what I’ve created. It’s fun, current, and references many of my eclectic likes and personality without being cheesy.
By the way, many projects I’ve worked on have bypassed this level of thought about branding because it’s typically the last thing to be fully fleshed out—and it can be tedious. A project/product takes on a life of its own as you’re working on it and the end is often when you’re most familiar with it and it’s at its most vibrant, which makes it the best time to put the finishing touches on the visual identity. Just because your deadline is stampeding toward you like a runaway herd of elephants doesn’t mean you should push it off and launch without. Stay engaged just a little longer for the final details and you’ll find the effort well worth your time.
Codification
Over the years I’ve written my fair share of code and have accumulated a lot of baggage. This time I wanted to stretch out of my comfort zone. Do stuff I’ve not done before without the predetermined constraints of this or that framework. I chose to use LESS for CSS, and jQuery (because I couldn’t get some functionality rewritten that would work with Zepto in time to launch—I’m not the best with javascript) for some JSON and other functionality and good ol’ HTML. That’s it. Nothing more.
Honestly, my success has been mixed. I did manage to get some dynamic elements loading with JSON (Thank you Joe and Daniel for your help!) and have simplified how I present my work. I’m not a true javascript ninja and there are parts I want to improve. So while I conceptually know the direction I want to go, from a practical standpoint I still have some distance to go before I can do it all myself.
For example, the Work section started with a great tutorial of a thumbnail grid with an expanding preview for inspiration which I modified to load using a JSON file and tweaked the CSS to display a bit better. I also found an improved version of a resize debouncer that helped eliminate some weird behavior on touch devices, but it also tied me to jQuery. I’d like to tweak that and the thumbnail grid so I can use Zepto instead of jQuery and allow more flexibility with the data I feed into the outgoing links in the expanding preview—provided there is a link.
With my blog, I’ve eschewed all blog software in favor of hand-coded entries. I don’t write posts too often, although Editorially that might change. Eventually, I’d like to create something more robust utilizing server-side Markdown files and javascript to generate static HTML files (I know: node.js, but I have a few constraints like not having root access with my shared hosting account. Ember looks promising in this regard.) There will be additional functionality introduced as I write more, currently, I’m happy with what I have.
Testing things out
Building the site responsively, I am keen to have it work well on a range of devices and have informally tested on a few of the more popular devices and browsers and am pleased with the results, for now. Sure there are things I’m missing, but from a UX perspective, it’s what I’m aiming for. Plus it’s better to launch and improve as time goes on. So if you see something that might be improved, drop me a note or a tweet.
All wrapped up with a bow
And there you have my rambling account of how I arrived at my new design. Thank you for reading to the end. I do appreciate it and hope you like the new design. Here’s your Special No Prize. Enjoy!
