- A Peek Into Shane’s Site Design Process Part I
- A Peek Into Shane’s Site Design Process Part II – Design Decisions
If I Had My Time Again?
I’ll be the first to admit that this is not a shining example of rockstar HTML genius. However, in the context of a quick and functional wireframe, I’m pretty happy with how it turned out. But what would I refine further or do differently?
960gs CSS Grid System
The 960gs CSS grid layout worked perfectly for what I wanted – a quick and lightweight way of dividing a web page up into a grid for testing layouts. I am very fond of grid layouts (maybe even a little obsessive about having things line up neatly) and I found 960gs made it very easy to mock things up the way I had pictured them in my head and in my notebook. While 960gs made it easy to set things up to a grid, it also made it very easy to become rigid in my design thinking. Adding graphical headers and mouseover events made it difficult to style things exactly how I wanted. There were also some issues using the 960gs
<div> tags and CSS for background colours in IE7 (worked just fine in Firefox 2 and 3, Opera 9.5 and Safari 3.1 for Windows).
While the idea of a rollover triggering background colour changes to indicate a clickable link a was good one and allowed me to further develop the colour theme for the site, the execution was lacking. Some graphics were not centred inside the
<div> so they looked poorly placed once the rollover triggered the background changes. In hindsight, I’m also unsure that the background change to a different colour was a good choice. A simple thin white border around the target area better appeals to my own aesthetics. On the other hand, my wife quite liked the background colour change. It would be her site so she would get the final say.
Sadly, I’m not a Photoshop guru (yet). At the time I knocked up a quick header, sought client approval and inserted it in as a placeholder. More important problems needed to be fixed and the header remained as is. I would either choose to spend a lot more time trying to come up with a header with some personality or (more likely) outsource the header to someone more talented in this area than I am. It looks cheesy to me and the more I look at the header the more I don’t like the font.