June 3, 2013
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.
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.
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