Monday, August 30, 2010

Baby Steps...

As soon as Joli asked us to help redesign the website, we started work on a basic layout. We weren't sure at first how much of a change they really wanted, so we tried to keep it at least somewhat similar to the existing design.

Website version .01
Step one was to strip out all of the random links and "ads" that no one probably even saw. Again, we wanted the main page to be no more than a single screen; if it made the user scroll, it had to go.

Step two was to rearrange the left menu a bit. We grouped the links a bit more logically and added indents for grouped items. We also added a basic menu across the top of the page of the links we felt were the most important.

We placed an Announcements section at the top. It's not really evident in the screens from the previous website, but any announcements, lost pets, etc. appeared under the "Welcome to HART!" text. We wanted give them their own area so they would stand out more.

Other small changes, the "HART Spotlight" became "Featured Pets" and got bigger, the Events section moved up the page a bit, and "Overlooked," "Special Needs," and "Needs Fosters" lost their images and were condensed a bit to make it above the fold.

Website version .02
We made a slight revision of this layout later on. The biggest changes were losing the color behind the left menu and the "Events" sections.

In addition, "Events" became "Upcoming Events" with a heading that matched the Announcements heading. We also added a "Fund Raising" section. This section would have some of the more "ad" type things, such as the Awesome Sauce, GoodSearch, etc.

On one hand, we like this second version because it had more white space, and felt more open, but at the same time, it is a bit boring.

Thursday, August 19, 2010

Where We Came From

In The Beginning... This is only about a third of the page's entire length.

This is a screen shot of the website from about 2-3 years ago. At that point, Meg and I were volunteering regularly, helping out with special events, and fostering dogs. We had really no involvement in the website itself, with the exception of the odd banner that Meg would create for an event. In fact, I think that Yard Sale banner is hers. 

You thought I was kidding earlier
After creating a number of banners for the website, Meg began to develop a relationship with the current webmasters of the HART site; she even became a fill-in photographer for the dog events. Eventually they asked us if we would be interested in helping them redesign the layout of the website. The biggest issues with the website were it's length, it's bandwidth usage, and its overall clutter.

The primary focus was to get as much of the important info "above the fold" and to cut down on the overall length of the page. There was so much information about ways to help HART and our animals, but I doubt many people got that far down the page. Even after visiting the HART website for over 2 years, I still wouldn't have been able to tell you what was below the two featured pet photos.

Armed with Photoshop and some sense of what should change, we set out to brainstorm some ideas...

Wednesday, August 18, 2010

Getting Off to a Flailing Start

As some of you know, I'm one quarter of the Web Team for the Homeless Animals Rescue Team. Recently I was going through some old files trying to find something we'd done for HART previously and found a bunch of the old designs we did for the website. After looking at them, and seeing where we came from to get to the current design, I thought it might be interesting for people to get a chance to see some of it. A blog seemed like a good way to go about that. Also, and I'm stealing this idea from my friend Christina, having something like this to write on might help me to get better at non-technical writing, and perhaps even help me to get better at designing stuff as I look at what we've done in the past.

So the basic purpose of this blog is to chronicle some of the work I do for the HART website, to explain where designs came from and how they changed, and maybe even why some things worked and others didn't. I'm sure some other stuff will crop up on here as I go along; I like to think there's a least a little that happens in my life outside of HART.