Design critique

[rendezvouscp]

Hello. I just finished a design this morning that I'd love to have critiqued. To begin with, I am not a designer, I'm much better at coding than designing. However, I felt like I needed to create something for my own website, something that I could say that I did. Now I've got that, but I'd like some suggestions to see if I can't improve what I already have.

The design is supposed to be very simple and very self explanatory. My focus was on having clean, semantic, and valid xhtml. I haven't applied any hacks in the code, but it seems to display well in most browsers except for the two bugs I have listed on the page.

Here's the link. If anyone wouldn't mind giving suggestions, they'd be greatly appreciated. Thanks in advance.
-Chase

 

[MontyZ]

.

 

[rendezvouscp]

Thanks for the critique MontyZ.

I'm planning to use this design for my blog, my website (media stuff and more writing), and for a future wiki. I might decide to use a different design for the wiki, but I'd like to keep it uniform if possible.

I haven't quite figured out how to pull in the blue into the design, but I definitely know what you mean. I'll have to keep playing with the colors to see what I can come up with.

I guess the gradient wasn't pronounced. There's actually a gradient behind the header and navigation, as well as the footer (but it's very subtle).

I made the secondary navigation a bit smaller, so hopefully it's clearer that it's secondary, and not part of the main.

I've also added more whitespace, but I'm unsure if it's in the right places. It really bugs me that the space between the text is bigger than the space between the sidebar islands, but I think it looks best like that. Perhaps someone will agree or disagree with that.

The banner is plain, and all I've done is change the text color. I'm thinking about adding an image to the back (perhaps of some water), but I haven't figured out what I want to do. Perhaps I should use an image with colors other than gray and blue, to contrast with everything else?

I'm pretty decided on those sidebar islands, since they'll eventually be collapsable and re-arrangeable.

The codes a bit of a mess now that I've been just adding things, but I'll clean it up when I'm done tinkering. Thanks for the comment though.

I'm all open for suggestions, and now that I've integrated it with WordPress, hopefully everyone can get a better idea as to how it'll function. The navigation doesn't work, so don't try. Thanks for the comments. Perhaps a new link is appropriate?
-Chase

 

[cleanup]

I will keep this short.

Black on grey = bad.

Midtone grey on light blue = also bad.

Needs some margins on the bottom.

A more interesting navbar would be nice, and a more intuitive one. Is the second row supposed to be contents of the selected item in the first row?

[Edit] Just found the second link. I have some more suggestions.

If you'd like to keep the grey on light blue, give it some sort of separation, some sort of contrast that differentiates between the two, so it's easier on the eyes. I suggest making the grey lighter, or choosing a different colour, or applying a border or drop shadow.

Also, white on grey looks better than blue on grey.

Again, black text on a medium grey background does not look very pleasing. Especially the navbar.

 

[johan_tanying]

Hi!

Nice design - it looks clear and clean also on a 12" iBook display. Easy to read and well-chosen font sizes for body text and all headlines (with one exception - see 2 below)

Just a few comments:

1. The outer, light and rather bright blue frame may look ok on a 800x600 display but is getting a bit wide, (too) colourful and "overwhelming" already on a 1024x768 display (not to mention how it will lokk on even bigger screens. Maybe it is that I simply do not like that blue colour or that it does not render well on my iBook's lcd... (Then I like better the very light blue and greys on these forums).

2. The top banner looks very unfinished, something like a powerpoint or website template that asks for replacement. An image (maybe toned or one/few colour) would probably do wonders. It may even be further faded and used behind the nav. buttons? A more descriptive and interesting name than the site URL would be better in my opinion. I guess you can play a bit with the banner but keep it clean and not too colourful since it may "take over" the otherwise clean site.

3. This type of text-based site asks for a"printer friendly format" button/link. That is, of course, that you like your audience to print out or save your articles/work as pdf etc.

Please ignore if you don't agree - I am an architect, not a professional in the field of web design.

Good luck!

 

[rendezvouscp]

Alright, I'm definitely going to work on the colors. I've decided to start from white and add complimentary colors from there. We'll see how that turns out...

cleanup, you must be using Safari. I haven't figured out why, but Safari refuses to display a margin between the footer and the bottom of the page. I'm still investigating that.

johan_tanying:

Thanks for the comments about the design. I still have a few things to add that will address the two issues. At some point I'll allow users to expand or contract just the width of the design, as well as just the text size. As of right now, they expand almost perfectly together, which is useful to some but not all. Either way, I'm going to work on the colors to make your number one not be a problem.

As for number two, I'm thinking about adding some sort of picture in the background or something just to give the header some life.

As for number three, I've already worked out the details so there won't be a printer friendly version, but when you print it, it looks fine and doesn't waste ink. (read: style sheet for print)

Anyway, I'll keep working on it, and when I have something better in terms of color, I'll post back and see if I've made progress. Thanks guys.
-Chase

 

[clayj]

I'd recommend for the banner ("chasenlehara.com") that you use a graphic in place of text... you could anti-alias the text so that it is displayed more smoothly.

Also, I'm a bigger fan of having your section headers ("Search", "Archives", etc.) being left- or right-aligned than being centered. Just a personal preference.

Finally, I'd look into using a more distinctive font... Arial's OK, but pretty vanilla. Or you could try changing the size slightly.

Just some ideas... good job!

 

[rendezvouscp]

About a month later, I've got yet another design that I'm thinking about using. This one is a little bit more "complete," it's a little bit more creative, definitely not as boxy, and a few other things. I tried to take some of the previous suggestions and work them into the design, but I'll see how I did. Here's a link.

It's a lot more graphic heavy, the code is not as clean as I'd like it to be (and I'm still working some things out with css validation), I haven't fixed all of the browser bugs, and I'm still working out what fonts I'll be using for the text (since PCs generally don't have Lucida Grande or Lucida Handwriting). Also, I still have to make my own black picture for the header (the current one is only makeshift). Most of the navigational links don't work right now, so if you end up in no man's land or at the front page of my current website, my apologies.

Ok, so I've got a lot of work to do, but I'd really like a little bit of feedback to see if I've gone off the deep end or if this could actually work out. Thanks in advance (and remember to be as critical as you want!).
-Chase

 

[jayeskreezy]

About a month later, I've got yet another design that I'm thinking about using. This one is a little bit more "complete," it's a little bit more creative, definitely not as boxy, and a few other things. I tried to take some of the previous suggestions and work them into the design, but I'll see how I did. Here's a link.

It's a lot more graphic heavy, the code is not as clean as I'd like it to be (and I'm still working some things out with css validation), I haven't fixed all of the browser bugs, and I'm still working out what fonts I'll be using for the text (since PCs generally don't have Lucida Grande or Lucida Handwriting). Also, I still have to make my own black picture for the header (the current one is only makeshift). Most of the navigational links don't work right now, so if you end up in no man's land or at the front page of my current website, my apologies.

Ok, so I've got a lot of work to do, but I'd really like a little bit of feedback to see if I've gone off the deep end or if this could actually work out. Thanks in advance (and remember to be as critical as you want!).
-Chase

I like it. Some of the links don't work though.

 

[MontyZ]

.

 

[MontyZ]

.