Is there any plugins or frameworks or tools to make the web pages nice, for a programmer?

Question

I'm a programmer, I can build a web site, but the pages looks ugly. I don't know how to choose the colors, how to design the icons. Building a simple website cost me several hours, but tried to make it beautiful will cost me several days.

I don't want it as nice as those famous websites, but I want it clean, and all pages have same styles.

Thank for any helps.

---

UPDATE

For icons, I know there is a good site http://www.findicons.com

I have also downloaded several tools like "Color Scheme Designer", and I even know how to use "Photoshop/Fireworks", I have read some books about design. But, I found I'm lacking artist spirit, the page I have designed are always not nice enough.

What I'm looking for, is something like ZK, see its demo, which defines some common widgets with nice styles. I hope to find some similar plugins or tools can be used in rails.

---

UPDATE

I just tried http://colorschemedesigner.com, and found the "Light page example" and "Dark page example" is very usefull. Thank you!

---

UPDATE

This website is very helpful: http://www.freecsstemplates.org

Answer 1

For color schemes, Color Scheme Designer is a great resource.

For icons, there are so many resources out there that it's really just easiest to say "search for what you're looking for" - googling for things like "free icon sets" or the like can generally turn up quite a few promising leads quite quickly.

Answer 2

As I had to find out the hard way - at some point we(developers) have to learn something about the web design. I don't think that there are any tools to the magic automatically, but there are a few great books targeted specifically at programmers struggling with design - I can heartily recommend Web Design for Developers: A Programmer's Guide to Design Tools and Techniques. There is also this fun article, about the common design errors developers make.

Answer 3

The key with appearance is just like programming UI. Encapsulate like elements using id and class tags within each html element. Once you have consistent content layout among the pages you can use simple css code to make things look good. It often helps to do a UI specification for your web pages.

For instance <p> tags will always contain Arial style fonts with size 10. All links will be #e33 if they are not being hovered(#3ee) or clicked(#fff). The background of the page will always be #eee. Colors, margins, fonts and borders all fall into such a specification but are not necessary. One trick you can use is find a Content Management Framework, like drupal or dotnetnuke, check out some themes for each of them and borrow and steal code from those to suit your needs.

Oh and of course at the top of each generated page put the style sheet attachment call:

<link href="your_stylesheet.css" rel="stylesheet"/>

or place all style declarations in a generator to land inside a:

<style>
  body{
    font-face: Arial;
  }
</style>

if you are comfortable with a certain tools look and feel (I use Jira but you might use campfire) then look at how they do it and copy and paste the styles they are using. You will find it easier to use your own web documents when they match the other systems you use.

Answer 4

@Freewind, my answer to you is that it would be far better for you to partner with a graphics designer, than becoming a jack of all trades. You should concentrate on your technical skills while your partner concentrates on the creativitiy part. Why? Because scientifically, our brain functions differently - logically on your left side of the brain and creativitiy on your right side of the brain. You are not expected (in normal situation) to be blessed with both talents. Also you could be learning from your partner a few simple golden rules that would take you "yons" to master.

Of course that should not stop you from learning some basics on design but as I said, it would take a while before you can become an accomplished all rounder.