Through my friend Blair and my work on her site, I met George Hartner of Outdoor Illumination of NC. His current business website at the time was an old-style, non-interactive, single page of plain HTML. He had seen the site I designed for Acacia Tree Wellness and asked me if I’d be interested in making a site for him. And he even wanted to pay me for it, which was pretty amazing to me since I would have done it for free.
Since his work is outdoor lighting, he has a lot of pictures to show off his projects. They’re taken at night, so a black background for the site was a requirement. Since he had a bunch of wonderful pictures, I decided to make the pictures the main focus of the site. Again, I tried for a “metro” inspired design. The list of his projects (wordpress posts) would be displayed in a 3×2 grid and display the title and link on an overlay when hovering over the image. I chose “Open Sans” at a 300 font weight for the font, from Google Fonts, and used small-caps for most of the headers and titles.
The project details (single posts) consisted of a piece of text containing George’s comments about the project and a gallery (I decided to use kept the social media buttons but made them appear/disappear when the page is scrolled.
Pages were generally straight forward, but George wanted some fancier things on some pages that required some specialized content. For example, the “Why choose us” and “Contact” pages. Instead of a plain bullet list of Outdoor Illumination’s virtues, we decided to have the main “catch words” showing and a blurb about each appear underneath when the user hovers on the word. I structured the html in a definition list (
dd tags, fetched the html content when the associated
dt tag was hovered, and put the content into a display
Overall, I’m quite pleased with how the site turned out, though I do feel there are some aesthetic touches to be had here and there in order to bring up to the next level. Or maybe I just don’t use enough gradients and spiffy fonts.