Site Redesign

Welcome to the new site.

Check out Welcome Back for details about what's here so far.

Why redesign?

The existing site does not clearly identify buisness and personal content. I still want to have mixed content, but it should be clear how to find things.

I want a consistent look & feel that shows off design possibilities using web standards. Even though I am not a designer I want to make my best attempt at showcasing what can be done. To this end I will make use of my graphically oriented friend Barb Wade

I also want to experiment with multi-content pages and think this is a good places to do it. Perhaps this will take the form of blog content and main content using the same space. The ability to navigate separatly will be important.

Redesign vs. Rebuild

Up until now, this site has grown in incremental stages. New features have been added, code has been refactored and new templates have been applied over a continum. After a couple of years I feel like this site could use a step back and a bigger view. To borrow an otherwise useless phrase from a friend of mine "it is what it is, and it will be what it becomes". This has applied to this site for long enough and I feel it is time to apply my knowledge about what this site is and what I want it to be. This will involve both a re-design and a rebuilding. I want to change the CMS, apply a new theme, and re-scope what the site does all at the same time.

It all comes down to presentation, and as I want this site to represent me, I want to re-present what this site is and does.

Requirements

  • Multi-column content
  • Variable width
  • Rotating banner image/color theme
  • Flexible navigation including fixed & menu based.
  • Ability to place images throughout content without jaring clean look
  • Flexible font sizing

Ideas

  • use a scrollable navigation frame
  • use javascript to enable/disable display of second content panel
  • xml-rpc to change content frames
  • generous use of images and content transparency
  • linking images to pages with levenstein pattern matching

Ideas from other sites...

http://www.autisticcuckoo.net/blog.php
Nice sidebar menu

http://glish.com/
has personal and work stuff in multi-column layout. cluttered look!

http://www.stopdesign.com/
one layout concept with differnt theme per section. Multi-column-ness.

http://www.csszengarden.com/?cssfile=http://home.it.net.au/~flashboy/zen/z03.css
feels out of the box but still simple to layout. really dig this one.

http://www.csszengarden.com/?cssfile=http://www.chrisrobins.com/css_zen/stylesheet.css
clean, easy to read. doesn't have the feel of being stuck in a box, but still adhears to easy to layout block elements.

http://www.csszengarden.com/?cssfile=http://www.elek.dk/csszen/zengarden_sample.css
non-standard use of layout to incorporate sections, but needs to be a little better defined

http://www.csszengarden.com/?cssfile=http://timeforless.ca/csszengarden/css.css
nice use of image flowing into content. too limited content space

http://www.csszengarden.com/?cssfile=http://digilander.libero.it/simoberto/zengarden/sample.css
flexible content space -- not closed boxes

http://www.csszengarden.com/?cssfile=http://www.nihplod.co.uk/zen/001/001.css
multi-column content, center nav -- original bold look

http://www.csszengarden.com/?cssfile=http://Benn.orcon.net.nz/utilitarian.css
simple a bunch, again, feels out of the box, doesn't need a lot of white space so can accomidate a lot of content.

http://cavlec.yarinareth.net/
Very distinct feel that makes you think your not on just another website.

http://www.hicksdesign.co.uk/about/?c=hicksdesign&css=default
last weeks redesign of this site includes inovative use of imagery

http://www.allinthehead.com/
flexible width that looks like it has fixed design

http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
Very interesting visually and doesn't use up a lot of white space.

http://www.devx.com/webdev/Article/22338
Like the lower half of the sidebar design -- and almost nothing else.

Design history

The original version of the site was a remarkable piece of elegance and simplicity. It's dark theme made up for the stark lack of content and navigation was simple. Getting lost wasn't an option. In a stroke of original briliance I called this theme redcross after the color and use of a grey-scaled cross image orignally cut out of a gold leafing.

the redcross themplate

Because I'm a simple guy, having a theme with no visual distractions has always been part of the site. Whether for use in print or for special purpose pages, the "plain" template has always been availible.

the plain template

The redcross theme had a fixed width and limited navigational abilities. As time went on and content started appearing, a some tweaks started making their way into the template and I eventually renamed it "new". Being the third template, this nameing scheme made a lot of sence. By the time it was complete this template featured a cross much more personal to me (off of my necklass), sectionalized navigation.

the new template

At some point, the hankering for simplicity took control again and black and white was in. The horizontal navigation was built from the same html-list code that made the original verions tick, but new css make things tick and simple.

the new-lay template

Tersly known as simply "fg", my next attempt at design involved a croped and skewed portion of a snapshot I took from a moving vehicle, a return to fixed-width content and a very simple color scheme.

the fg template

The next template file I have is labeled "growing" and is a painfull reminder of my lack of design sence. The one significant advancement here was the use of a wiki-page for editing the navigation pannel. I am thankfull that this attempt to make a bold statement about simple design never made it to press, but here it is in all it's growing pains.

the growing template

Still one of my favorite templates, "cc" was hacked together in about an hour late one night after I found a photograph of myself taken by a friend at night in the back of a pickup truck in mexico city while driving home in the rain. The photo used is straight off the camera and the colors for the site were ripped off the image. The layout featured a flexible content width and simplified navigation. I got more compliments on this theme than any other.

the cc template

I have forgotten what "hwga" stands for, but this template appeard on the scene when I wanted to change the picture to one from my latest missions trip. The banner is a picture I took in Izmir turkey, the link color is left-over from "cc", and the other colors were choosed in grey-scale in an attempt to not make a fool out of myself. The floating content frame idea was a rip-off from somebody elses site and the use of lines was trial and error finding something I liked.

the hwga template

I have since used the floating content frame as the basis for several other designs as it is easy to implement and flexible enough for almost any use. It also easily accomodates pop-up menus

Edit Revisions Backlinks