Remembering Cat Doctors

January 28, 2024

This came up in my Facebook memories this morning.

I had mentioned a couple of weeks ago that I had started reading Hardboiled Web Design in January 2011. A couple of weeks after I started reading it, I had an opportunity to apply what I was learning. I had started working on a freelance project about the same time I started reading the book. It was a project that I got to both design and develop for Big Sea in St. Petersburg.

The project was to create a site for Cat Doctors, which was a part of the Tampa Animal and Bird Hospital network. Big Sea had designed and built the parent website. They contracted me to design and build three templates for the child site. Big Sea took the static templates and built the theme as part of their multi-site install of WordPress.

The parent site designed by Big Sea. See the site on Wayback Machine

Big Sea wanted the new site to “hang” with the look and feel they had created for the parent site but wanted the child site to have a distinct “No Dogs Allowed” vibe. The clientele of this vetinary hospital were high-browed, Tampa chic mansion owners. The brief was to create something sophisticated and kitschy. I tied into the branding of the parent site by reusing typefaces and colors. But I used different weights and cat silhouettes to give Cat Doctors it’s own look.

Design decisions

Here are some of the design decisions I made and the reason(s) why:

  • I revised the logo a bit by using colors from the parent site. It was not a big change but it created more harmony with the colors used in the parent site design.
  • I decided to go with a two-color background. I wanted to balance out the blue and I used a neutral brown to bring some balance to the design. This allowed for the logo to have more contrast.
  • I took the cue of the paw print and line from the parent site and used a simpler version of the Cat Doctor logo as a divider on the homepage and secondary pages.
  • I chose to stay away from gradients because I felt the gradients took away from the sophisticated and clean look I was aiming for.
  • I took the cue from the parent site in the style of icons to grab attention on the homepage. I used different icons to create distinction.
  • I used a cat paw print and cat silhouettes to create a distinctive cat identity for the site.
  • I took a cue from the layout of the parent site but gave my design a little more breathing space and repeated elements used in the homepage to create consistency across the pages.
  • I incorporated the theme of “No Dogs Allowed” in a subtle way. I didn’t want that to be the focus. I wanted the cat “imagery” and theme to dominate while still including the subtle message that this is cats only.
My design solution for the homepage. The site was designed before responsive design was a thing.

Development

As I already mentioned, this project gave me the chance to apply things that I was learning while reading Hardboiled Web Design. Most of what I applied was in the HTML I wrote. I used several of the new HTML5 elements like <nav>, <section>, and <article>.

Cat Doctors was one of the first projects that I used Typekit on. Typekit (now Adobe Fonts) was one of the first subscription services that provided its subscribers to access to a large library of fonts. It opened up a whole new world for Web design that we take for granted today. I had just bought my subscription a couple of weeks earlier.

Another tool I used for the first on this project was Modernizr. I only used this tool for a couple of years but it was very valuable in being able to use progressive enhancement and being able to code for browsers that did not support newer features. Feature queries do the job for us today.

It was fun to revisit this project today. It was one of the last projects that I designed so it has a special place in my affections. A year later in 2012 is when I fully embraced being a front-end developer and no longer pursued any design opportunities. But I continue to use that experience everyday.

Comment on this post