Hello World

Click images for bigger pictures

Design #1

This was the initial design on the site, except it had a lighter background.
I kind of like it, but it's kind of... plain. Very basic. Simple sites aren't bad, but I like sites that actually have some depth in them. This design did not have much depth either.

Design #2

This one was a bit more graphical, but I wasn't able to create a submenu that would've fit it well. Also, I was never very happy with how the content area looked like. This had a lot nicer overall feel than the first one, at least I think so, as it didn't look as flat and had depth.
This one had a slightly altered version, based on feedback from a few people, but I ended up hating it since it no longer had the look I wanted but the look they wanted/liked. This one displays one of my biggest problems with design: I can get it started and the initial parts of it will look nice, such as the header, but I'm not able to finish it - I can't figure out what kind of things would go well with the more finished parts.

Design #3

This is the third and in my opinion the very best of the bunch. It has color and graphical elements. It's not too flashy, but it's not too boring. It also has room for additional things on the right bar and it also looks good without the right bar so I can remove it for pages where it isn't necessary. This is definitely one of the best designs I've ever done.
This one also has some intresting CSS features... and this one is also broken in IE since I'm too lazy to change PNG's to JPG's at the sidebar... but I eventually will.

Basics

Some basic considerations on designs. Now, I'm not a designer, just speaking from my personal design-as-a-hobby experience.

• Color
  The first design didn't have very much color in it. I do like grays though, so that didn't bother me. Generally speaking having some more color is good.
  
• Depth
  I also mentioned depth while talking about the designs. What I mean by depth is that the design doesn't look flat; Things don't appear to be on the same level. This can be easily achieved with gradients. As you can see, in design #2 and #3 there are more gradients than in the first one.
  Depth can also be achieved by adding shadows to elements or using contrasting colors.
  
• Graphics
  Websites often have a lot of text, this is why you need to have some kind of graphical elements. It doesn't matter what it is, it can be those little gradients too, but you should have something. You could for example consider adding images to your blogposts as long as they're related to the topic.
  

Out of ideas?

So - as it's probably obvious, I'm not a web designer by trade. It's purely something that I do because I enjoy doing it. I think because of this I often run into problems like the one I mentioned in design #2, not being able to finish designs because I can't think of things that go well with the rest of the design. The problem isn't my lack of Photoshop skills; I've done a lot of that and I'm pretty good to say so myself. It's just a lack of ideas (imagination?)

When this happens and when I don't have any ideas to begin with, I usually just wait until an idea pops into my head. If I try to force it by opening Photoshop and trying to do some things, it never turns out very well. One thing that does help is browsing the web, especially design related sites, Flash sites and even tutorial sites.

Design related sites often have good looking designs so I might pick a thing or two from those. Some of them also sell or give away web site templates which are also very useful for finding the look and feel that I like.

Sites made with Flash are good because many of them have intresting interfaces. Even the ones I don't like because of the extra flashiness and stuff may have some part that looks nice or gives me an idea.

On tutorial sites I just randomly browse articles that look intresting. Usually ones about web design or user interfaces are helpful. Even if the article is about a technique I know I may take a look because it might be applied in a different way or the end result may be intresting.

Bad at picking colors?

I'm sometimes very bad at picking good colors. I actually have a slight color blindness: If you have two colors that are almost the same, I may not be able to see the difference.
Now, I don't know if I'm really that bad at picking colors, it's just that I think I am because of the above. But no worries, there are sites that can help you pick colors that go well with some other color! Here's one
Someone on IRC actually told me about an another site/tool that does this too, but I forgot it.

So

Wrapping up, I would say you should keep your designs the way you like them the best (if possible). It's of course useful to ask for comments, but at least I ended up going the wrong way after that. For the note, the same people who I asked comments for on design #2 liked design #3 more.
Use the internet for what it's worth - Search for nice looking sites to get ideas and use sites that help you with things you're not good at.

It's also useful to know something about user interface design, webpages are user interfaces in the end: Interfaces to your site's content. I recommend checking out Designing Interfaces, which is based on a book released by O'Reilly.


So I'm pretty happy with how the design for codeutopia ended up. I am going to post stuff about the Content Management System I'm working on for the site, so look forward to those; there's a lot of intresting stuff coming.

What are your design tips?