I am hacker who had made a fair amount or progress in learning graphic design.
Here are the things that helped me:
a) read as much as possible on graphic design. The non-designers design book is a great choice. But there are tons of articles across the web on fonts, spacing, coloring, contrast, etc.
b) pick out sites that you like (and that people with design sense like), and practice copying them exactly. If there is some button or styling you do not know how to reproduce, find a photo shop tutorial for how to reproduce it. As you do this, you build up a toolbox of great design techniques. Gradually as you get better and learn how to make pretty sites, your old designs will become embarrassingly deficient to your eye.
c) as you make sites try to solicit detailed feedback from people who know how to design.
Here are some thoughts on specifically why I think your pages do not look so hot:
The text in your logo needs to be anti-aliased, the edges look jagged. The alignment and spacing of the menu links are off (the horizontal distance is not consistent). Again the text is not anti-aliased so it looks jagged. The spacing between the headers and the text feels off, the header should be closer to the paragraph it represents, not the paragraph above. The top of your bio pic is not aligned with the top of the paragraph. Finally, as a general point try and avoid pure black (#000) on pure white (#FFF). Using slightly grayer font ( #555) softens the page considerably. Also, don't use the default blue for links, use a better looking color. The Adwords look very tacky.
Again, anti-alias the logo. Try being creative with the font too, maybe download a font set and try making the logo with a more unique font. Alignment of the menu items looks off, centering them does not work. The bullet points should be aligned left. Even better, use a custom designed bullet point rather than the browser default. The colors for the page overall are terrible. To get good colors, I often download a really nature picture, then use the eye dropper to pick out a couple colors. Doesn't always work, but can be quite useful.
Overall, great design is not about being glamorous versus simple spare. Its about getting all the little details right. The balance, color, alignment, etc. And it's about adding that extra little touch in a lot of places - the custom icon for bullet points, the creative logo.
Getting good just requires a loop of reading/study, practice, and getting feedback.
Spot on. I would like to specifically emphasize bokonist's "b)" - I only made real progress with design when I started consciously seeking out design that looked amazing- even taking photographs occasionally of billboards etc., and then trying to recreate it. Otherwise you're doing the programming equivalent of reading about languages without even bothering to type out examples- let alone composing your own.
Thanks for the advice. One comment though: neither my personal site nor the DedaSys one has 'logos', just text, which Firebug says has the computed style: "Helvetica Neue",Helvetica,Arial,sans-serif" at 48px. So I guess the issue is more one of "things don't render the same in all browsers - use an image if you want consistency". I don't care too much for my personal site, but the DedaSys one I'd like to look nice.
Please remove the ads from your website. Those ads bring you SMALL income now, but they affect your FUTURE income strongly. Removing the ads is delaying gratification - you give up the amount they give you now so that in the future you will earn more (from the larger number of people who will bookmark your site to be read later)
They were mostly there for the articles, where they 1) brought in a bit of beer money, and 2) didn't really seem to detract from anything (I can see the point about the home page ones). Anyway, I removed them.
My thought is usually this - if a person is interested enough in the type of money that ads bring that he clutters up his personal website, then this person must be pretty broke. And pretty broke people in the IT industry are usually not very smart people, because it's easy to make money in IT.
That's just my thought process, no personal offence intended.
...and there's your problem. Helvetica and Helvetica Neue both tend to look lousy on the web unless they're used in a graphic (where you get to control kerning and antialiasing) or at a relatively small size (10-14pt equivalent), and then only in Safari for the most part.
There are fonts that are just a little less elegant than the real Helveticas, fonts you wouldn't likely use in a print application, that render a whole lot better in browsers because they were designed for the screen and play with pixels better.
Arial isn't one of my favorites, but it is a proven web font, and whatever else it may be it is certainly a Helvetica rip-off. Use Geneva then a Helvetica as fall-backs.
Verdana makes great sans-serif body copy at small sizes, but it's a bit, um, portly for headings or body copy at large sizes.
Some folks seem to like Tahoma, but I find it makes some weird word-shapes that slow my reading. It's worth a try. Other popular and widely-distributed fonts like Trebuchet, Calibri and Candara work well, but not in a design as sparse as yours (they're too, well, organic to work in a clinical setting).
If you can find it in your heart to go serif (and you should whenever the text gets long), then georgia, garamond, palatino, "palatino linotype", serif; is what you want in almost every case. (Constantia is also pretty and readable, but less likely to be installed than Georgia, and damn Georgia sets well on the web.)
Comments
I am hacker who had made a fair amount or progress in learning graphic design.
Here are the things that helped me:
a) read as much as possible on graphic design. The non-designers design book is a great choice. But there are tons of articles across the web on fonts, spacing, coloring, contrast, etc.
b) pick out sites that you like (and that people with design sense like), and practice copying them exactly. If there is some button or styling you do not know how to reproduce, find a photo shop tutorial for how to reproduce it. As you do this, you build up a toolbox of great design techniques. Gradually as you get better and learn how to make pretty sites, your old designs will become embarrassingly deficient to your eye.
c) as you make sites try to solicit detailed feedback from people who know how to design.
Here are some thoughts on specifically why I think your pages do not look so hot:
For your home page: http://www.welton.it/davidw/
The text in your logo needs to be anti-aliased, the edges look jagged. The alignment and spacing of the menu links are off (the horizontal distance is not consistent). Again the text is not anti-aliased so it looks jagged. The spacing between the headers and the text feels off, the header should be closer to the paragraph it represents, not the paragraph above. The top of your bio pic is not aligned with the top of the paragraph. Finally, as a general point try and avoid pure black (#000) on pure white (#FFF). Using slightly grayer font ( #555) softens the page considerably. Also, don't use the default blue for links, use a better looking color. The Adwords look very tacky.
For Dedasys: http://www.dedasys.com/
Again, anti-alias the logo. Try being creative with the font too, maybe download a font set and try making the logo with a more unique font. Alignment of the menu items looks off, centering them does not work. The bullet points should be aligned left. Even better, use a custom designed bullet point rather than the browser default. The colors for the page overall are terrible. To get good colors, I often download a really nature picture, then use the eye dropper to pick out a couple colors. Doesn't always work, but can be quite useful.
Overall, great design is not about being glamorous versus simple spare. Its about getting all the little details right. The balance, color, alignment, etc. And it's about adding that extra little touch in a lot of places - the custom icon for bullet points, the creative logo.
Getting good just requires a loop of reading/study, practice, and getting feedback.
Spot on. I would like to specifically emphasize bokonist's "b)" - I only made real progress with design when I started consciously seeking out design that looked amazing- even taking photographs occasionally of billboards etc., and then trying to recreate it. Otherwise you're doing the programming equivalent of reading about languages without even bothering to type out examples- let alone composing your own.
Thanks for the advice. One comment though: neither my personal site nor the DedaSys one has 'logos', just text, which Firebug says has the computed style: "Helvetica Neue",Helvetica,Arial,sans-serif" at 48px. So I guess the issue is more one of "things don't render the same in all browsers - use an image if you want consistency". I don't care too much for my personal site, but the DedaSys one I'd like to look nice.
Please remove the ads from your website. Those ads bring you SMALL income now, but they affect your FUTURE income strongly. Removing the ads is delaying gratification - you give up the amount they give you now so that in the future you will earn more (from the larger number of people who will bookmark your site to be read later)
They were mostly there for the articles, where they 1) brought in a bit of beer money, and 2) didn't really seem to detract from anything (I can see the point about the home page ones). Anyway, I removed them.
My thought is usually this - if a person is interested enough in the type of money that ads bring that he clutters up his personal website, then this person must be pretty broke. And pretty broke people in the IT industry are usually not very smart people, because it's easy to make money in IT.
That's just my thought process, no personal offence intended.
...and there's your problem. Helvetica and Helvetica Neue both tend to look lousy on the web unless they're used in a graphic (where you get to control kerning and antialiasing) or at a relatively small size (10-14pt equivalent), and then only in Safari for the most part.
There are fonts that are just a little less elegant than the real Helveticas, fonts you wouldn't likely use in a print application, that render a whole lot better in browsers because they were designed for the screen and play with pixels better.
Arial isn't one of my favorites, but it is a proven web font, and whatever else it may be it is certainly a Helvetica rip-off. Use Geneva then a Helvetica as fall-backs.
Verdana makes great sans-serif body copy at small sizes, but it's a bit, um, portly for headings or body copy at large sizes.
Some folks seem to like Tahoma, but I find it makes some weird word-shapes that slow my reading. It's worth a try. Other popular and widely-distributed fonts like Trebuchet, Calibri and Candara work well, but not in a design as sparse as yours (they're too, well, organic to work in a clinical setting).
If you can find it in your heart to go serif (and you should whenever the text gets long), then georgia, garamond, palatino, "palatino linotype", serif; is what you want in almost every case. (Constantia is also pretty and readable, but less likely to be installed than Georgia, and damn Georgia sets well on the web.)