Hacker News new | ask | show | jobs
by samdk 5789 days ago
Web design is a really broad field. You need to understand HTML and CSS, you need to understand the limitations of web browsers as a medium, you need to understand how users interact with webpages, and you need to have a decent handle on typography/visual design. I don't have good tutorials/articles for all of these areas, unfortunately: they're things I've learned over a pretty long period of time by reading a lot of different disparate articles. In general, A List Apart (http://www.alistapart.com/) is an excellent resource for articles on design. While it's frequently linked, a lot of the stuff on Smashing Magazine (http://smashingmagazine.com/) is awful. Their articles on how to do things with HTML/CSS are usually decent, but their articles about actual design usually demonstrate a complete lack of understanding of what good design is. I'm also haven't really found any resources with good exercises. One of the things about design is that you really need to be getting feedback from a real person. If you're doing things and would like design-related feedback, I'm usually happy to give it. (My email is in my profile.)

For learning HTML and CSS I recommend HTML Dog (http://htmldog.com/). It's a bit dated and won't cover HTML5/CSS3 stuff at all, but it does teach good practices, and I haven't found anything better.

I also haven't found a good article/tutorial on web browser limitations. You need to be aware of web browser width (people generally design for a 1024px wide browser these days, which means about a 960px wide site), how colors work on different monitors (some monitors display colors a lot more nicely than others), serif fonts don't display well at small sizes, it's important to use fonts designed for the screen, different browsers look different, and a bunch of other things.

You also need to be aware that not everyone using a computer can see as well as you, and that it's important to design so that people who are colorblind can use your site (there are a lot more of them than you might think), and so that people who use screen readers are able to understand and navigate your site.

For learning how users interact with your websites, I recommend Jakob Nielson's writing (http://www.useit.com/). I don't agree with all of the conclusions he draws from his research, but the raw data he presents is informative. One other important thing to note is that some of the information about how people interact with websites has changed a lot over the past ten years. A study done ten years ago isn't necessarily accurate today, because people are generally a lot more comfortable with using a web browser than they used to be.

My general rule for web usability is to not play too much with people's expectations. People know that things that are underlined are often links, and so I avoid underlining things unless they're links (there are nicer ways to emphasize something visually, anyway). Similarly, if you have a hover effect on a button, make sure you can click the whole button, and not just the text inside the button. Make sure to keep your styling relatively consistent across a site: it will make much more sense to the people trying to use it. One of the best things you can do for usability is to put someone who's never seen your site in front of a computer and watch them try to use it. People do some things that may seem very strange, and it's really hard to catch all of them.

Visual design itself is a huge field: I recommend you get started with typography because it's extremely important, most people don't understand it at all, and you can decent designs out of boxes and type. Typography for Lawyers (http://www.typographyforlawyers.com/) is one of the best general overviews of typography I've seen online. There are lawyer-specific details, but the basics are mostly all there. It's important to remember it's more a guide for print than for the web though, and that influences things like the font choices presented.

In general, remember that design is about purpose, not about making something look pretty. Decide what the point of your design is, and do everything with that in mind. Are you designing to make people buy a product? To interest people in a subject? Are you trying to make a point, or to start a conversation? Every time you're making a decision, remember what the purpose of your design is, and let that be what makes your decisions for you.

1 comments

http://www.quirksmode.org/ is pretty good for what you can do with a particular browser and realize its limitations.
Also http://www.positioniseverything.net/

I'd go so far as to say that the only really difficult thing on the technical side of web design is working round the millions of bugs in IE (and occasionally the odd one in other browsers). That's usually where over half my coding time is spent on a new site, client-side.