Dynamic Graphics+Create Magazine
HOME   |   MAKEOVERS  |   ARCHIVE  |   EDUCATION  |   JOBS  |   ADVERTISE
Topics
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Makeovers
2008 Makeovers Issue: Website
We redesign the websites for an animal-transport company, an artist and printmaker, and a Colorado fire-rescue team. 
July 2008
HOOVER'S TRANSPORT
This website redesign cuts loose with animal magnetism.

Designer: Kim Schroers

Hoover’s Transport provides ground transportation of live animal shipments anywhere in the U.S. and Canada. But, as designer Kim Schroers asked, what kind of animals, how small or large, exotic only, aquatic animals? “Do they only service zoos and research labs, or if I had a llama, would they transport it for me?” wonders Schroers. The first thing Hoover’s should do, recommends the designer, is “hire a professional writer so their site gives a clear understanding of all their services.”

Also, rather than having a Flash intro that halts and slows down the viewer experience, as the current design does, Schroers incorporates Flash as a page element. “In my final version, I have the home page open to a Flash element that would peel back the page to reveal the road and tagline. The overview of the company would then appear. I think it’s a more efficient way to invite people into the site than the current Flash.”

Schroers updated the font for the company name; she selected Alte Haas Grotesk—which is a clean, sans serif, minimally distressed font, according to the designer. “I liked that it was slightly rugged around the edges, but it’s not something you notice at first. I paired that font with Gill Sans for the body copy and button links. Gnuolane Free was used for the header font. I didn’t want to introduce too many fonts into one page, but they all have a similar appearance so I think it works,” says Schoers.

“I tried using [rotating] animal imagery in the header, but it seemed to make the site too cluttered. Plus, I used imagery in the body copy and when it was also used in the header, they seemed to compete. I didn’t want to confuse the eye on where to look first, or to distract from the logo,” says Schroers.

For the equipment page, the designer recommends the free software AutoViewer to create a gallery effect within the site. “It’s free software that will be simple for them to use if they want to swap out photos on a later date,” suggests Schroers. “In looking at their code, the site is all table-based, which is unnecessary and not up to today’s web standards.” She recommends using CSS instead.


1. Original site
The current website for Hoover’s Transport “lacks pizzazz needed to increase sales,” according to owner Shoani Hoover. “Even though we are small, better marketing can make us appear big.”

2. Redesign
Designer Kim Schroers recommends the company build in more pages to increase traffic and search engine optimization (SEO). She also suggests Hoover’s work with a professional writer to create a clear message and brand.

3. Fonts
The company name is updated from Copperplate Gothic Bold to Alte Haas Grotesk. The headers are Gnuolane Free. And text is set in Gill Sans.

4. Colors
The designer “sought tans and a gray-blue that could refl ect the gravel of the road used in the intro. I wanted to take a more earthy approach.”

5. Flash
The home page opens with the page peeling back to reveal the road image and Hoover’s tagline, and finally the company’s story appears. The Flash elements in the new design add to the user experience, rather than halt it. Schroers initially considered having the gorilla in the logo act as a Flash-based guide throughout the site, but disregarded that due to budget.

6. Images
Schroers recommends showing more images of the types of animals that Hoover’s can transport, so visitors to the site don’t have to work to figure out how Hoover’s can help them. The designer also suggests using the free software AutoViewer to set up pictures as a gallery rather than opening a new window to view each image.

7. Contact
Along with the contact page, an e-mail link is provided on every page as a call to action.

| 1 | 2 | 3 »|
Events & Courses

WebMediaBrands
mediabistro learnnetwork freelanceconnect SemanticWeb
Jobs | Events | News
Copyright 2009 WebMediaBrands Inc. All rights reserved.
Advertise | Terms of Use | Privacy Policy