TL;DR — I'm a UI and interaction designer, and I'm going to be making this site better with progressive enhancements and improved organization. I like horse racing, photograhy and other lifelong learning opportunites, including trying to keep my skills up to date.
Slightly expanded version: — I'm a UI and interaction designer who can code enough to build my own projects and communicate/collaborate well with engineers. I've been employed doing some form of web-based design since 1996. I've worked in a wide variety of industries including television, network news, finance and healthcare. See my LinkedIn profile for more information.
The beginning of my career was primarily editorial and content design. For the last 15 years I've been working in the enterprise space, which is great for hard interaction design problems, and not so great for keeping one's front-end dev skills up to date as a matter of course.
Until I figure out how to best put together a decent representation of my work, I've listed of some of my side projects and other fun(?) things I've done in the recent past. I've been slowly leveling up my front-end skills, especially with the more recent projects, which has been very enjoyable (and a never-ending source of "Oh wow, I have to go fix that now").
At some point I might add a Week(ish) Notes feature to track some of things I'm working on. Once I have a more robust version of this site built out, perhaps using Sergey, I will go into more detail on the bigger projects. Spoiler alert: I'm really into horse racing.
Usable data is bizarrely hard to come by in American Thoroughred horse racing, so I created a way to share datasets that people had put together. This site started as a flat site that I later migrated to Airtable/Vue. In July of 2019 I launched a redesiged version. The main upgrade was adding the ability to view datasets by category or type, whereas initially it was all one big page. I'll talk more about the process and implementation when I expand this site beyond one big page, but the quickie version is: Designed in browser from the get using Tailwind CSS and uses a combo of Vue and Sergey SSG. Originally I thought I would use Vue routing, but I couldn't get it to work how I envisioned, and using a simple static site generator did exactly what I wanted with very low overhead. More on all this later!
When friend and fellow horseplayer Adam Wiener and I started this project in 2008, there was not an easy way to learn about Thoroughbred horse racing online. My role was everything on the creative and implementation side from concept to execution. This included design, dev (don't look at the code, unless you'd like to get a good picutre of my pre-leveling up period hackish CSS chops), Wordpress admin and editorial (both as an editor and writer). Basically I'm everything from Creative and Editorial Director to production assistant.
Not long after launching Hello Race Fans we purchased this site from talented friend and collaborator Jessica Chapel. Chapel launched it as an aggregrator and original content site in 2007. I've managed not to screw it up, and have built on the success of The Wire by adding Tout Wire for aggregrated racing picks and tips.
In the time since the inaugural 2018 version I got a bit more serious about improving my vanilla JS skills and was able to do some refactoring. It's definitely more streamlined, and I'd love to hear any feedback or suggestions about making the approach better!
I'm not good at data visualizations, but that didn't stop me from creating a few! I think this is the most most effective one I've created. I used a sankey diagram to illustrate the graded stakes prep race path of Kentucky Derby winners in their 3-year-old year. Since many winners also prepped in a mix of graded and non-graded races, I also created illustrations of each winner's full path.
These are pretty vanilla as far as data visualizations go, but I wanted to see if there was a way to make it easier to answer simple questions about what has produced winners of an indivdual race over the last almost 30 years (the time period for which there is usable data). I think the is "For the most part, yes".
An overall super fab resource, especially if you find yourself wanting to brush up your CSS skills. This post from Issue 5 inspired my profile pic approach, even though I ended up implementing it a little differently. But I did integrate his fluid type utility from Issue 1 on my h1 & h2s!
Grabbed my snazzy background pattern here. A nice, easy to customize collection of reating SVG background patterns from Steve Schoger of Refactoring UI. If you want to take it a step further and make your own, Schoger has a nice video tutorial on how to create one in Sketch.
Honestly I just used the default palette here, but I've used this to generate palettes for other projects and it's very handy. Close readers of this page will have noticed by now that I'm incredibly fond of generators.
If you're looking for inline SVG code to copy and paste, then this decent sized collection might be of use, it was to me! Babtiste Briel converted several free icon sets available at Dribbble to be used inline. There's also a link to each set if you'd like to download them.