Monday, February 28, 2011

Website Design

The company I work for needed a new website.  I’m not a web designer, but I can piecemeal my way through a bunch of different programming languages.

The existing site had three major issues:
  1. The graphic design focused on PC boards.  We don’t make PC boards.
  2. The aesthetics were dated and the copy was vague.  For example, the home page didn’t describe what APSessco does.
  3. The products page was incomplete, provided no specifications, and even had some stuff that (to my knowledge) we’ve never done.
A proper project starts with requirements, so I wrote up a Request for Proposals and distributed it to some designers.

The RFP briefly described the company, existing conditions, and desired outcomes of the website redesign.  Cost was unfortunately prohibitive, so I ended up doing the new website myself.  I had to plan out what graphics to use, how to size them, and where to put them.  So, I made a quick site map and some pencil/paper concept sketches.  I compiled relevant images from old pictures, our library of 3D designs, and even took a few photos myself.

Using GNU Image Manipulation Program (GIMP), I cleaned up the photos by adjusting the lighting, cropping, and resizing them for use on the website.  All-in-all I made about two dozen files for use throughout the site.
Writing copy was probably the most painstaking part.  Normally a designer would just use Lorem Ipsum placeholder and have the client fill it in later.  In the case of doing it myself in a small business, I started from scratch describing the company’s history and business activities.  No one had comprehensively made descriptions and specifications of products, so I had to scrounge up and compile information.

Hardcore designers will code the pages from scratch.  This gives full control over the content but adds a lot of man hours.  Yuppies will use drag and drop editors for a what-you-see-is-what-you-get effect.  The end product usually looks pretty nice, but most of the time the code is bloated and unreadable.  I chose to go somewhere in between with a template.  Minimalistic-design had one that I liked a lot for the color palette and clean layout.

Editing in my copy and graphics was pretty straightforward.  I just used some formatting tags.  I did have to modify some of the template graphics to incorporate styling specific to the company.  There was a little hiccup where I had to brute force a table to get things to line up properly.  A quick Google search showed me how to set one up.  I stitched all the pages together in accordance with my site map.

I tested the pages for compatibility in IE, Firefox, and Chrome.  I used WinSCP to push everything onto our remote server using FTP.  Voila.  Start to finish was about 40 man hours.  The new site meets all the requirements I set out in the RFP.