New to the web on 3 February 2007 in a post-AGM (27 January!) burst of enthusiasm and subsequently (like most volunteer projects with little input from others?) developing more slowly, my Impala 28 Class Association site took its main colours of red, black and white from the class sail insignia. Some features implemented included random photos of members’ yachts on the home page, random quotes from reviews on the ‘archive’ page and an SMF-powered forum (previously running at a subdomain of petestack.com), but much of the site was sadly still very much an empty shell when superseded by another (not of my design) in 2011.
While my preference for clean functionality over eye candy in websites means that I rarely start with graphic mockups (normally preferring just to start coding and see where that takes me), the overlapping tabs of the main menu proved the exception to my rule in demanding exactly that approach! So I drew up the whole header from the title to the bottom of the coloured bands in Xara Xtreme and then worked out how to code it...
Not just showing (like the older designs below) as ¼ scale screenshots, but implemented as a live demo on this site.
Since this original design for Lochaber Geopark Association was just a ‘holding page’ (live for about a year from August 2006) pending the design and launch of their full site (too large a job for me to consider as a very part-time designer!), I’ve taken the decision to replace the original top panel text with some explanatory paragraphs of similar length to what was there.
Designed for my good friend Twig Olsen (who ran the business until it closed in 2005), this site used alternative colour schemes for the mill itself and its subsidiary Cruachan Marine (NB the blue and purple hyperlinks showing in the last two screenshots are just the standard a:link and a:visited colours and not actively part of this differentiation!). The red ‘Lorn’ of the header was inspired by the labelling/stamps on the mill’s timber packages, its background taken from Fritz Olsen’s photo of the log yard (with Cruachan behind) and the product pages and pricelists done in PHP to facilitate instant updating from Twig’s master price list.
A later development (coded but not actually uploaded before the mill closed) was a PHP version of Twig’s MS Excel spreadsheet to calculate required quantities of timber from a shed’s length, width, height to eaves, height of roof pitch, joist, stud and rafter spacing and need — or otherwise — for flooring.
My Kinlochleven High School site made use of a sidebar menu with expanding/collapsing sub-menus all done as CSS-styled lists. The yellow/orange theme took its cue from the school badge, but the (faint) page backgrounds were purposefully varied to bring diversity within unity (so the ‘standard’ background showed the school in repeating tiles, the Geography department was tiled with Mercator and Peters projections of the globe, History chose plain white and my Music pages featured a horizontally-centred page with a favourite moment from the finale of Beethoven’s Opus 111 piano sonata!).
While the earlier school newsletters were converted (cutting and pasting by hand!) from MS Publisher format to HTML, the later ones (as shown here in my only IE screenshots) used a valid implementation of the <object> element to embed PDFs into the web pages for those (most of our audience) with Active-X-enabled Internet Explorer and display an alternative download link for those without.
Since no-one else was able to work directly with my clean, valid templates and I didn’t want to see a FrontPage-driven mess, I basically maintained the site (purely on a voluntary basis!) on my own for years, but something eventually had to give and I started work on a basic web editor for staff to create and maintain their own pages to said templates. But this was rushed into ‘production’ before I felt it was ready, met with resistance and enthusiasm in roughly equal measure and ultimately led to the removal of my designs after the 2005 summer break (when I was simply told that the site was being out-sourced).
Feedback to email@example.com