Click Horse Products

This project began as a redesign of a do-it-yourself site. The client was taking orders through the site, utilizing simple PayPal buy-me buttons, but with patents pending for their product, they wanted to get serious about their web presence.

Hock Shield.com Before

Hock Shield.com After

There are pros and cons to redesigning an existing website. On the plus side, the content is there… it’s just a matter of cutting through what’s not needed.

That was definitely the case with HockShield.com. Out of the gate, I tackled clutter, shuffled content, and refined the presentation into five basic pages: Home, About Us, Photos, Product Info, and Order.

Creating a Pastoral Background

Above all else the design needed to capture the client’s vision of a beautiful rustic scene that would appeal to their customer demographic. I began by selecting a photo of the client’s horses grazing out at pasture. I lifted the horses off the background in PhotoShop, ran several filters, and blended layers until I achieved a sunnier version of the same scene.

Client photo

Photo retouched in PhotoShop

The altered color in that field, yellows now popping amid brighter greens, lends warmth. The depth of shadow falling on the grassy field adds further dimension. The result is the viewer drawn into that perfectly sunny afternoon.

Photo as page background

From Logo to Banner

Shari at Click Horse Products was finalizing the company’s logo while I was knee-deep in content. The logo would be the final element, completing the look and feel of the site. From the start, I knew I would be integrating the logo into the page as a sign, but I didn’t receive the fully realized version with text until deep in development. In the meantime, I studied reference images of horse signs and came up with two viable options. I could render the sign like the kind hanging from a horse stable or I could simply mount it on a fence. I chose the latter because of the shape and dimensions of the logo (stable signs tend to be smaller than would be practical).

After struggling to place the fence on the bottom of the page—I original envisioned a static footer that didn’t scroll, but that presented a myriad of problems—I stumbled on a better solution. I would use the fence and sign in a traditional header then integrate the menu with a letterpress effect into the bottom fence plank.

Click Horse Products logo

Logo rendered as a sign

I constructed the fence in PhotoShop using a dark wood grain. I used the same texture to frame the sign. For the interior of the logo, I chose a golden wood pattern. I colored the logo lettering then weather it to give a wood-stained, realistic appearance. Drop shadows gave the sign and fence added dimension, really making it pop.

Fence with Sign

E-commerce Made Simple

E-commerce doesn’t have to be difficult or time consuming. For HockShield.com, I used Cart66 Lite to manage products, a free plugin that integrates PayPal Standard as payment gateway. Cart66 allows for product variation (Small, Medium, Large), and it’s designed to easily drop products onto any page on your website. Of course, there was a good deal of customization involved, but the solution here was simple and cost-effective for a small business.

The newly designed HockShield.com launched in March 2012. By September, Shari more than doubled her daily / monthly sales averages. I recently checked in to see how things were going. She said, “Your wonderful web page has created so much work for me that I am busy sewing ALL the time!!!” What a great problem to have!