- Lack of white/negative space: You need room for your elements and type to breathe. Along this same line, you need to give generous padding and margins to things. If you ever have type squished up against the edge of a box, that's guaranteed to look bad. Have a repertoire of spacing that gets used in multiples: 5px, 10px, 20px, etc.

- Lack of hierarchy/scale: I think these two go hand in hand. One of my typography teachers in school had a saying: "Don't just make it 60pt, make it 600pt." Rather than bumping the heading up 10px, bump it up 30 or 40.

Bonus tip: Read about Gestalt Theory and you'll start to understand the psychology behind design. Might work for you if you're a techie: http://en.wikipedia.org/wiki/Gestalt_psychology

For me, biggest tell-tale of a new designer is overuse of design elements and frills. Adding gradients, shadows, faux 3D, outlines, images, etc. should not be done without a good reason, and sparingly.

Your user’s attention is limited. Plan for this. Visually emphasize only the most important thing(s) on the page — 2 or 3, maximum. This often means not using many saturated colors (ever notice how much there is grey in OS X? It stays out of the way. I find Aero Glass unbearably distracting at times.)

You don’t have to make your content (as opposed to nav) hyperlinks use a color from your branding palette. In fact, don’t, as rule of thumb. Make them a decent blue (not super saturated like #0000FF), and do vary them for :visited.

If it sounds like I am saying “don’t have fun,” I apologize; I tend to be overly minimalist. Do the fun stuff, just use them as demos, not in production (music band sites excepted).

It covers the basic principles of graphic design:

Proximity

Alignment

Repetition

Contrast

It also covers the basics of using color in design.

Universal Principles of Design is also a fascinating read.

I've found that reading these books, then trying to design something is helping. It helps if you've tried to design something before reading the books as well.

Amazon link: http://www.amazon.com/Non-Designers-Design-Book-Typographic-...

The one on general design principles is here: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

There are also volumes specifically for web, powerpoint, etc.

But trust me, this book is one I'm very glad to have read. More importantly, glad to have read first. It's a list of no-nonsense principals which teach you the basics in an easy-to-understand manner. I really can't recommend this highly enough, cover or no.

Note that the book I linked to is the wrong one. One of the comments has the correct book.

Also note, this book doesn't talk about color, but only the other basics.

This seems like a dichotomy but its not. The reason the cover sucks is that Williams is not naturally good at design. This means for her to get good at it she had to actually learn and understand it. This is why this book is so good. However, she never learned how to design with color. Most of the designs she makes using color I feel are bad.

That said this book ROCKS, is hands down the best book when it comes to design basics of: Proximity

Alignment

Repetition

Contrast

Typography

Sketch designs on paper on a grid, with a nice pen. It's easier to try out ideas and evolve when they only take a minute.

Practice.

- bold colourful blocks

- tend towards minimalist

- use no more than 3 colours in a design

- use colourlovers.com for palettes

- copy nice bits/ideas off other people (obviously without ripping off entire designs)

- avoid gradients

EDIT: oh, one other thought. One or two fancy bits of design or JS magic == good. Too many == very bad :)

1. http://www.errant.me.uk (minamilist) 2. http://www.startupwiki.co.uk (bold colours, blocks)

In short, you embarass yourself less. You already know how to make a 'good enough' simple design. You might prefer to make a glorious, exciting complex one, but odds are you don't know how. Which makes sense, because this is hard to pull off. If you stay simple, you get 'good enough'. Try to get complex and fail, you get visual torture. If you'd like to make more interesting designs, learn the techniques little by little, but make your finished products no more complex than you can be confident in.

Regarding gradients: when you do use them, be subtle. A gentle shift from one color of red to a slightly deeper one can be nice and help draw attention. A shift from red to a green will make babies cry. As a general rule of thumb, colors should only gradient towards different shades of themselves or towards black or white. Seems obvious, I know, but...

Yes. I want to share a design an unqualified team member once seriously proposed: http://img.skitch.com/20100630-m473a35wsrcwsis547mmxjetcq.pn...

Also I think it is about personal taste; my designs tend towards the same minimalist, centered, coloured menu bar, links in a certain way etc. design because I vastly prefer sites like that :)

(also the beauty of minimalism is that you can "impact" buttons and so forth really easily if you have a good colour scheme - Startup Wiki is an example of where I got this pretty wrong...... :))

For example: Holiday Inn Express just redesigned their logo to look like some Web-2.0-style icon thing with gradients and drop shadows. They look absolutely horrible on signage. They look like gas station signs now.

But as a "pretty bad designer" gradients tend to be territory that is destined to fail. :)

In the limited design work I've done, I've found it extremely helpful to look at the subject's face when they see your design. You want to see their gut reaction: you'll see displeasure in their eyes long before they'll verbalize it. You can break the social tension around criticism by saying, "Oh, I see there's something you don't like. Where are you looking right now?"

You want feedback to be a conversation - if your subject knows what you intended, they can give you hints on what you actually wanted to design.

Can they make the buttons any smaller or the scrolling any more touchy?

Instead, think how you can solve problems, how you can make your users' life easier. And this actually begins with a lot of thinking.

I cannot recommend you any specific sources but most of the people learn design by trying. If you want to improve your visual skills, look at other designers' works. Try to copy them (do not steal :), read tutorials.

0) learn new design techniques. Try to do this regularly. Its like adding new tools to your toolbox. A list Apart has a bunch of great tutorials, and checking out design galleries (http://html5gallery.com/ has some nice sites) helps to give you inspiration and give you something to try to duplicate on your own. I don't mean to duplicate good designs for your own work, but to duplicate good design so you can learn the techniques used.

1) Sketch a design on paper. I don't focus on making it look cool or pretty because I don't know how. I try to focus on solving the user's problems. I do several sketches, and ask friends to glance at each. At the very least to see if they get the idea of the website from looking at, but also to know which ones they like best.

2) Graphical Mockups. I use the gimp or adobe fireworks. Again, I make several different mockups from my best sketches (between 2-4). And again, I have friends and colleagues review them and get their feedback. I put as much detail as I can into each - hover effects, shading, et cetera. I try to make a pixel-for-pixel mockup of what the actual html/css will look like.

3) Finally write the html/css for my best design.

1. Apply Eric Meyer's CSS reset to strip all presets from your site.

2. Fix your site.

It doesn't necessarily help you to reach good design, but it forces you to consider how many things you need to worry about.

Link to Meyer's reset: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

"Stop Stealing Sheep and Find Out How Type Works", by Erik Spiekermann

http://www.amazon.co.uk/Stop-Stealing-Sheep-Find-Works/dp/02...

Focus on what you're good at. Design is serious trade that takes designers years to get good at. If you need a quick design then check out some free css template sites or the many sites that will sell you a prefab design for cheap.

About the only thing you need to be able to do is edit the design with a program like Photoshop or Fireworks so you can make minor changes if you need to.

Again, focus on what you do best and be resourceful instead of trying to become a designer yourself. Also, once you have a good design in place don't forget to make use of PSD to HTML services like w3-markup.com or psd2html.com. They're cheap and will save you a lot of precious time.

(Also, having a basic grasp of design will help you decide whether your designer is doing a good job.)

Seriously... probably looking at examples of beautifully design sites and getting some 'insipration' from them. Articles on smashing magazine are pretty good, http://www.smashingmagazine.com/

And I've recently found http://www.metalabdesign.com/

I reckon it just boils down to practice and lots of redoing your design over and over again. I don't like doing it because it seems like a waste of time compared to the amount of code I could have written.

http://blip.tv/file/3685673 - Design for developers: Making your frontend suck less.

Practice - Get a tool like Photoshop. Make a mockup, then turn it into a real website using HTML/CSS. Design at least 4 or 5 sites. You'll get better at Photoshop, better at HTML/CSS, and better at design.

Iteration - Don't expect to get a mockup right the first time; don't be satisfied with a mediocre first revision. Keep iterating on a design, tweaking it and changing it until it looks great. This part always takes me longer than both the initial design and the coding.

Inspiration - Coming up with designs from scratch is difficult. Instead, hang out on design-related websites (I especially like SmashingMagazine.com). Check out the numerous web design galleries online. There are also some cool UI galleries out there. Make note of what inspires you, and mix and match elements from different designs to create designs of your own. Or, just blatantly steal haha. I laugh, but I'm not kidding -- copying someone else's design is decent practice. And once you start iterating, it will become your own.

What's important is to realize that becoming a good designer is a path you must traverse; it's not a destination you can simply teleport to. So start walking!

Padding has been mentioned also. One common mistake made by non-designers is to pack everything in. Have fat padding on bordered boxes or separating elements.

But something I didn't see in a skim through the comments was alignment. The single biggest improvement you can make with your work is with horizontal alignment (ErrantX, if you spot this comment, you could easily do this with the URLs you provided as examples). It will make your design appear neater and simpler - less chaos can mean that your target-points are more obvious. So, in a simple design, make sure your top-left logo is aligned with your H1 down the page which is aligned with your paragraphs.

FWIW, I co-wrote Web Graphics for Non-Designers around 2002/03: http://www.amazon.com/Web-Graphics-Non-Designers-Nick-Boyce/...

My chapters were Color Theory, Visual Elements, Layout and maybe another one - can't remember. Parts of the Color Theory chapter were put online as a sample when it was published:

http://www.webreference.com/authoring/graphics/color/nondesi...

If you're in South Australia, I have a few spare copies of the book lying around if you want one (too lazy to post, sorry!). As I said, it's ancient in Internet-years now, but might be more useful to someone than it is to my bookshelves.

I find that the best way to proceed is to design an "overall style" for the site first. That means, pick a color scheme, typography, and base layout according to the principles mentioned in other comments (e.g. CRAP). Thereafter, the problem becomes user-interface engineering (which, in turn, may lead you to change your design).

I found this talk to be really helpful: http://37signals.com/svn/posts/1952-i-gave-a-talk-on-ui-fund...

Also, +1 on The Non-Designer's Design Book.

I've also found many useful articles here: http://www.azarask.in/blog/

In particular, http://www.azarask.in/blog/post/know_when_to_stop_designing_... and http://www.azarask.in/blog/post/how-to-critique-an-interface...

2. find another existing design you like, e.g. the designiskinky.net - they doesn't have to be related.

3. try to combine them. what do you like about each of them? what do you dislike? try to replace the parts you dislike with your own variations. get inspiration from other sites. also, change some of the basics: color scheme (there are online color scheme generators), fonts and -sizes, spacings, ...

4. cobble it all together.

5. it will look horrible, so change a few things and iterate.

6. it will still look horrible. the color scheme doesn't fit somehow. the font - looking good on its own - is still terrible for headlines. the menu is not where others expect it. you notice that the one cool gimmick you invented is not only useless, but totally distracting. you'll find you took a great website, took all the good parts out, replaced them with other good parts that totally make no sense in this context and that the result is horrible. also, the site will look boring. you'll want to throw it away and start again. you'll start to notice those sites were made by experienced designers and there was a reason their sites were built that way. now your website is ugly, your motivation is gone and also time ran out. you'll put it online anyway because you don't have an alternative, but it wont cost you any money because the site sells nothing and - be honest - it's still better than most of the sites out there.

great, you learned a lot of valuable lessons!

but i tell you as much: you'll never be happy with your designs. they will always look dull and boring - that's because you made them and stared at them for hours. don't worry, just put them online. you can always redesign them in a year.

- http://colourlovers.com

- http://0to255.com

- border-radius

- text-shadow

Don't make me Think by Steve Krug http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/032134...

Non-Designer's Design Book http://www.amazon.com/Non-Designers-Design-Book-Typographic-...

Universal Principles of Design http://www.amazon.com/Universal-Principles-Design-Revised-Up...

Also make sure you go through design's everyday on Behance.net, they have some really amazing designers and design.

For a broader perspective that will serve you well, I recommmend:

1. Take an art history course - Or watch a video survey of the subject

2. Learn to draw - Drawing on the Right Side of the Brain is a good introduction

3. Learn the basics of typography - Bringhurst's The Elements of Typographic Style is a classic

4. Visit museums of art and design

Since you're talking about web design in particular, I'd recommend reading Jakob Nielsen, as well as Steve Krug's Don't Make Me Think to make sure your design ideas don't clash with usability.

1. Read "Non Designer's Design Book" (amazon: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...).

2. Subscribed to a lot of web-design blogs (try Six Revisions, NetTuts etc.).

3. Learned to work well with Photoshop. I especially loved Lynda.com's Photoshop courses.

4. Designed, designed, designed. As with everything else, actually doing is the most important thing.

Every day, visit a variety of CSS galleries and make sure to view at least 100 designs, saving the ones you like the best.

Start a personal website if you don't already have one, and begin creating mockups in Photoshop or Fireworks of what you want it to look like. Most likely, you will be unhappy with what you create more often than not, but it's important that you keep iterating.

When you finally create a design you personally like, subject it to outside criticism from designers who know their stuff. Do not take anything they say personally. They will probably rail on you about typography, whitespace, the grid system, proper color matching, and so on. Go through the process of fixing your design to address those critiques.

Last, and most importantly, redesign. Although I think that there is an element to design that's innate, I would argue that it's mostly about practice and pattern recognition. It's all about being able to pick out the best designs and have your opinions match up with the largest percentage of the population as possible.

Most of good design is just re-applying the best elements of other people's designs. Truly innovative design is a rare thing and hard to pull off. It's a bit like fashion or modern art - most people will balk at truly creative stuff, but it can make it into the mainstream with enough persistence.

TL;DR view css galleries obsessively and save your favorites, perpetually redesign a personal site, frequently ask for feedback from other great designers, accept criticism gracefully, practice, practice, practice.

Especially if it doesn't come naturally to you, getting good at design takes a ton of practice. But if you do practice, you can definitely improve your design sensitivities and skills.

Make sure you're getting feedback--and not feedback that says "I like that" or "I don't like that". Specific feedback is really really essential to improving what you're doing.

Purpose and focus

I think purpose and focus are the key to a good design. Never do something without a reason. Remember that the reason you're doing design, at a very high level, is probably not to make something pretty. It's to help whatever you're designing better accomplish its purpose. Making pretty might be (and likely is) part of that, but it's not all of it. Always keep that in mind.

Typography

The other stuff mentioned here is also essential to know, but don't forget type. Type can (and will) make or break a design. I recommend taking a look at Typography for Lawyers (http://www.typographyforlawyers.com/) to get a start, even if you're not a lawyer. It has a good overview of a lot of the things you need to be thinking about, and you can ignore the lawyer-specific details. Type, like everything, takes practice. I recommend finding a couple of fonts (1-2 sans-serif, 1-2 serif) and getting very familiar with them.

If you'd like more help, or feedback on something you're doing, feel free to send me an email--it's in my profile. I'm far from an amazing designer, but I am pretty good at giving feedback.

Will Photoshop/GIMP be necessary for web developers now that we have HTML5? The various components of HTML5 can create many of the things we've used images for in the past - buttons, layout, etc. Do us non-designers still need to learn photo/image tools, or can we just focus on HTML5/CSS3/Javascript?

Of course, layout designing in Photoshop always seemed a strange habit to me, ever since I tried it 8 years ago ... because fonts rendering doesn't match; many HTML designs have fluid elements that aren't properly captured by Photoshop/Gimp; and in general you tend to make overly complex designs when working in an image editor.

Good practices transcend fashion IMHO.

http://nicolasgallagher.com/demo/pure-css-social-media-icons...

Photos obviously can't, so I guess that's a reason to keep photo editors around. But is that all?

And yeah, I never liked mocking up sites in photo editors either.

After that, practice all the time. Do a ton of self-initiated projects or design for friends pro-bono. Always be looking at designers who you admire and figure out what about their work is so admirable!

It's easier to mature and gauge your progress when you choose a style and then mature it progressively. The through constant practice and maturation, you willl become better at the process. Both a drawing with great detail and one with lack of therefore can be drawn by the same "talented" artist.

I'd say the three basic places to start are typography, proper padding, and style (which can be use of borders, rounded corners, sharp edges, or minimalistic as long as it's consistent). There defiantly is always a style that can be identified with each artist's work. And even with someone with the greatest portfolio you can usually identify elements that reveal the artist art work. So what you will have to do is iterate and experiment with the above until you develop.

1. A style to commercial (or your) liking.

2. Basic sensibility when it comes to web design or your relevant project space.. the sensibility changes with the medium at least to a small degree (design common sense).

Just like you use your judgement to decide to at least a small degree who's advice is worth listening to in this post, you need to build that same common sense up for design. I suggest doing mini front page fake products up to build up your skills. When you get better at that (you should notice significant improvement after 6-10 projects) try to go a little further and create an FAQ or about page for that product with that style it will become alot easier since you've already gave "definitions" to how some elements should work and the overall spirit of the project.

(One thing to note is it helps to have at least SOME Photoshop and Illustrator skills, at the very least you might want to add some texture to your products and custom gradients. IMHO it's alot easier to get great work out when you can over kill the project. Just barley getting through it with hard "Crusty the clown" colors will bleed your project. This is coming from someone who taught himself good web design)

I'd be glad to show you my latest projects for you to judge for yourself. Hope this helps.

I remember spending a couple of days on my old website design. I listened a lot to soma.fm and I noticed that the music kept me focused on the design I was working on. I remember dreaming about what I am going to tweak/change the next time I opened Photoshop.

Also, learning to imagine and think ahead on "how to do this and that in HTML/CSS" will save you a lot of time and effort.

Also, I don't have proof for this, but based on my experiences, designers need to be less analytical, and a little more intuitive. While programmers need to try to be as analytical as possible (while programming at least). So, I think it's not really easy to be good at both (again, my opinion).

Advice: develop an eye for design, so you know what's good and what's not, and learn how to communicate with designers more effectively than most programmers.

http://fivesimplesteps.com/books/practical-guide-designing-f...

It's more about the theory of design, but presented in an accessible style and 'web' context.

There's also the Pragmatic Programmer's 'Design for Developers' book, but I haven't gotten around to anything more than skimming that one yet.

http://www.pragprog.com/titles/bhgwad/web-design-for-develop...

Hope these help.

The best designed sites out there aren't designed on the web, but rather designed for the web. Try to make a good design first and then use your html/css skills to adapt it to the web (and obviously since you know the limits of html/css you can keep yourself from going to far in a direction that would be overly complicated to implement).

Also, keep it simple to start and make incremental changes.

Do you have any friends who are designers? What I have been doing is when I see designs my friends make, I ask them constantly(they must be getting annoyed by me now) why they make particular design decisions. Using this knowledge helps me make better design decisions going forward. I'm still super terrible, but I am slowly getting better.

One thing that separates good designers from hacks (in my opinion) is their appreciation of the history of design. Say you take your text, shrink the font down, and then jam the paragraphs far away from each other in a two column layout leaving a giant gutter (is that the right word?) in the middle and no left or right margins. That's (whether you want to or not) referencing a period in design history; if my memory serves, starting with some reasonably high-concept magazines in the late 1960s.

Same idea, but add thin borders as if you cut the text out of a block of paper, rotate randomly and slightly, and you're referencing fanzines of nearly the same era, a little bit later.

Now, distress the text horribly, and make everything bigger like you photocopied on 'enlarge', and you've got '80s punk.

Now, sharpen filter it all, crisp the whole thing up, stylize the borders and cut-aways, choosing a font with built-in crispy distressing, add a muted dark distressed background with a large image pattern (and probably a little pink) and you've got some sort of 2010-era crispy new proto-punk / ironic nod to punk design.

All that to say, you still want to have some understanding of the 'rules' of design, and typography, but they will be nearly worthless to you without some experience of the mental and emotional connections people make with existing significant design movements.

Luckily, this experience is pretty easy to get. http://www.designhistory.org seems pretty cool, although I just found it for purposes of writing this response.

With some of that experience, you will be able to 'parse' design in a technical way alongside your own artistic sense -- and since you're a technologist, you'll be able to understand how the changing technology allows new design looks to spread as well on the web, and that will put you ahead of 95+% of 'designers' on the web. Early web 2.0 was puffy letters, reflections, and large fonts for forms -- all this enabled by browser changes, and design needs of the time.

Late web 2.0 looks like we're going to have a lot of rounded boxes, shadows, and browser-based gradients, since those things are getting easier to do; whether or not that's what happens, I will be able to assess the online designs when they come about with some sense of what's come before, and appreciation for what people are doing now.

On Typography: all this goes for typography as well, one of my pet nerdy subjects. I really love The Elements of Typographic Style by Bringhurst. Design's 'rules' are far less codified than typography's rules; despite that, there continues to be amazing work and amazing font design happening, in fact, maybe more and more high quality font design. A thorough understanding of typography is a great joy for anyone who reads, in my opinion. Check it out. http://www.amazon.com/Elements-Typographic-Style-Robert-Brin...

p.s. I was thinking about what design group HN falls into in my head while I wrote this, and I decided "neo-Greenspun". Thoughts anyone?

Interesting question: since they're easier to do, more people will do them, and they won't stand out. So the 'cool kids' will move on to something else?

I also personally use lynda.com - they have great tutorials for all the adobe programs - also some good general videos about color theory and design principles.

I also liked this PDF by Massimo Vignelli: http://www.vignelli.com/canon.pdf

Believe it or not one book that helped me with designing web/desktop interfaces was a game design book.

Both books teach interesting stuff about designing interfaces and the game itself that can be translated to software and web, specially the first book.

Also the only corporate looking tutorial "Design a Professional Business Web Layout Use drop-shadows and gradients to create a stylish 3-D look." (about a third of the way down) looks terrible! Unbalanced, unfinished and instead of professional just looks deliberately boring and stereotyped.

Having said all that, they are a nice set of tutorials, thanks!

Outlines a self study course.

study and practice.

you might never have the creative drive to be able to make something really interesting, but you'll be able to understand and apply trends and concepts. how artistically inclined do you think you have to be to create a nice looking gradient-based design?