It’s Ocean a Redesign

Welcome to Ocean, a design I've been working on for about a month. I started out by going to Layout Gala for the structure. I chose a design with two columns on the right and a content column on the left.


I chose a green color, went to Cameron Adams' valuable Technicolor web colour designer and created a color palette.


I modified the structure be elastic with one column on the right and two columns under the content area, much like a design I like very much at StopDesign.


Now that I had a prototype to experiment with, I sent the link to a few friends for a usability test and discovered that this structure just didn't work for a blog. It pays to test and doesn't cost much, just get five friends to perform several tests and give you feedback. With a failed usability test, I went back to the drawing board and redesigned with a content column on the left and a navigation column on the right. Around this time I increased the size of the banner image.


With a successful usabilty test, I now looked at the design. I had struggled with the green theme from the beginning because my site has been blue since 2003. I felt that blue was part of my branding. I used ColorSchemer to select a primary color from the picture I took near Malibu and back to Technicolor to get the theme colors. I just started to use ColorSchemer and I'm not quite used to it yet.


Here's the mockup I came up with from the color palette.


I modified the design from Layout Gala to be elastic for the structure and used Faux Columns for the background color of the navigation column. IE conditional comments combined with the star hack for IE 6 made the layout happy in IE. Once I was ready, I tested the layout in BrowserCam. Most browsers worked fine with the faux columns but Safari and Konquerer did not truncate the column background image. This meant that the right side of the background of the body was the same color as the column! The only information I could find about the Safari error was Nick Cowie's article on Elastic Faux Columns. I could not find a CSS fix. Finally in desperation I used javascript to add a class to the body so the CSS could use a Safari and Konquerer browser specific rule. With the class added to the body I can overwrite the rule for the elastic width faux column and use a fixed width faux column. I really don't like this method as both browsers can pretend to be a different browser. I'm beginning to think that Safari is just as bad as IE because of the many rendering and javascript problems I've come across. Firefox and Camino seem to be much more stable.

Overall I've been very happy with Layout Gala, I have used it for structure at Eric Mack Online as well as a few more sites for Eric that are coming soon. Combine a stable structure with Technicolor and Eric Meyer's Color Blender for a color theme, Adobe CS (Photoshop) for a few images, Domino Blog for content management and I'm very happy with the result.


What tools do you use to create web sites?


Gravatar Image1. Posted at 03/21/2007 11:04:38 by Adeleida

"What tools do you use to create web sites?"

Well.... in the future I am definitely going to use this blog entry. THANKS! Very, very useful...

Gravatar Image2. Posted at 04/03/2007 10:49:02 by Pat

Hi Tanny, I found you over at Robert's Blog... I just wanted to say what a nice design this is, and the colours are so easy on the eyes. Well Done! I also see you did this a while ago :)

Tools I use:

- Edit Plus (To code in text)

- Paint Shop Pro (To edit pics, and to also design my layout before creating it in HTML)

- My Blog was hand coded by me in Perl. (I use OmniHttpd to test my scripts, and I also have Perl installed locally).

:) Nice Blog!

Gravatar Image3. Posted at 04/26/2007 22:53:10 by Todd Moy

Cheers for taking the time to hallway test this with a few friends. I'm of the camp that any review, however impromptu, is usually a Good Thing. I'm interested, though, in hearing about what "failed" the first usability eval. What specific comments or criticisms prompted the re-evaluation?

Add a comment

Discussion for this entry is now closed.