< Redesigned

Welcome to the new tyHATCH.com! For nearly a decade this site has sat neglected. To my chagrin—and by being active on Twitter, Dribbble, LinkedIn and the like—I haven’t done much with my personal site and it has become extremely long in the tooth.

So I’m changing that. The new design is fully responsive, uses lovely webfonts 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 introduction, here’s a bit about how I got to the new design:

Content and Priorities, it’s elementary.

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 personal 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 really excited me. Before I was mired in inane questions like “Should I have categories and tags in my blog?”, “Maybe I should have a tag cloud?” or“Do I really 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 put together an Illustrator template that helps me visualize a typical range of breakpoints by using multiple art boards. 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 of 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 with regard to 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 stampeeding 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, 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 poplular 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 all the way to the end. I really do appreciate it and hope you like the new design. Here’s your Special No Prize. Enjoy!

< Done