Ask HN: Learning Web Design

There are a ton of books on the subject, most are fine.

Regarding graphic design, I would check out something like Pixel2Life (http://www.pixel2life.com) as it provides a lot of tutorials and step-by-step exercises.

Regarding the bigger issue of web design, my best advice to you would be to start following those in the industry that are proven leaders. Most big designers write blogs; follow them and read up on their tips. There are also a number of design magazine-like sources on the Internet, including sites like A List Apart, Drawar, and Smashing Magazine.

That would be a good mix of both contemplating theory and actual exercises.

Do a rough sketch on paper, then a heavily detail diagram in GIMP/Photoshop, then spend your time trying to make the site look as much like the pic as possible.

Pull out your hair when you then view your site in a different browser when you realise you'll have to do the same for that one.

Not really. Here's what there is tho

http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

http://www.amazon.com/Principles-Web-Design-Joel-Sklar/dp/06...

Other than that, I'd ignore dublinclontarf and learn to design directly in your edit + your browser. That's where the magic happens. As far as I see it, there is absolutely no reason to use Photoshop or Gimp up front for that much stuff if you are a html/firebug/css ninja.

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-...

The http://boagworld.com podcast/blog is great. They are on hiatus at the moment but they talk about really interesting parts of web design; tools, techniques and inspiration.

From the previous threads about design I would recommend "Non-designer's Design Book" which includes simple exercises. I also found this (http://www.betaversion.org/~stefano/linotype/news/169/) article very helpful. And "Designing for the Web" book (http://designingfortheweb.co.uk/) which focuses on core principles of design and how to apply them for the web. For basic understanding of usability I recommend "Don't Make Me think" by Steve Krug which is an excellent book.

View source and attempt to recreate websites you like. I suggest copying designs from other media too: there's plenty of untapped potential in print. Keep a scrapbook with bits of design you like looking at. You'll develop a personal style over time.

I do interface design as a living, and that's my tip.

Read about the basics on http://htmldog.com and try it immediately. After running through the entire tutorial, find a project, actual or fictitious. Visualize what you want it to look like and stick with it and start reading books once you run into problems.

Smashing Magazine and A List Apart are good places to search for answers to CSS and HTML in detail. If you read five books before you get your hands dirty, you can be fairly sure to have forgotten most of it by the time you actually try it in the wild.

After that, you can check out resources and literature, but don't overtheorize it. Many people keep researching, when they seem afraid to try the actual subject.

Ok, so as someone that walked this path and is currently on the other end as a freelance graphic and web designer, i'll put out a brain dump.

# Development

1. For web development, you'll find tons of best practices (i.e. alistapart, smashingmag, diveintohtml5, etc). This is the easy part, you can browse these or skim them whenever you get bored. HTML is pretty straightforward, but css is a bit trickier.

1.5. An too-long aside on css. CSS is one of the most important things to try to master as you actually start implementing design. CSS is pretty gross, it's alright and not that difficult, but it's gross and it's nearly always a mess. There are lots of frameworks around that try to remedy this, but i recommend that you actually try to figure much of it out before you start adopting frameworks. Similarly, before you use a css reset, you should actually try doing some work without them (the big problem is that each browser's default css is rendered inconsistently, so you make some assumption about webkit and find that opera and mozilla think you're a fool).

EXERCISE ZERO: try to see if you actually understand a) the box model and b) floats and c) positioning. These are the trickiest things. You can only really understand these if you try to figure out how you would use any of these things in practice. I put up a page with some stuff about those topics when i was teaching a web design class recently: http://risd.generic.cx/review.html

# Design

2. Learn typography. This is a long process. I don't even know how to explain it correctly, but the most important thing is that you become incredibly sensitive to typography. Look at stuff around you, think about what's happening; be critical: ask what about something is successful and if not, why? Don't be an ass. The first year that you're really getting into typography, you'll see bad kerning or questionable typography everywhere and you'll annoy the hell out of your friends, it's usually best to keep these observations to yourself unless you're geeking out with other type nerds.

EXERCISE ONE: make it a goal of yours to take a photo each day of type somewhere in your environment. This isn't very hard, but it gets you looking I just did it: https://twitter.com/nsfmc/status/21232532041

3. Learn some art-history. You don't have to learn very much, but the more your learn, the more you'll have a grounding in what has been seen/done/discussed/etc. Most importantly, you will be able to be eloquent about form/aesthetics that you like. It is hard to talk about visual things, so in this way, it is imperative to have a good set of words when talking about form. A few great books: Robert Hughes' The Shock of the New, Reyner Banham's Theory & Design in the First Machine Age, Rosalind Krauss' Passages in Modern Sculpture.

4. Make things. this is perhaps the most important thing. Make things and be critical of them. it is difficult to be critical of things you make, so the corollary of this is that you should surround yourself with people smarter than you and that are better designers than you. talk to them about what you're doing, the worst thing you can do is work in a bubble (this is true in programming as well, c.f. the myth of the genius programmer [motgp])

5. There are some books you can look at, i would probably recommend the following: Armin Hofmann's Graphic Design Manual, Emil Ruder's Typographie: a manual of design, Josef Mueller-Brockman's Grid Systems in Graphic Design, Robert Bringhurst's Elements of Typographic Style. Ellen Lupton's Thinking with Type and John Kane's Type Primer are good intro resources. Also, these are interesting books: http://www.flickr.com/photos/joekral/sets/72157594264845751/... With the Hofmann and Ruder and Lupton books, try to do the exercises...

As a side note, you don't have to know CSS/HTML to be a web designer. As a matter of fact, in most places I've worked, web designers did the graphic part on Photoshop and web developers sliced the images and wrote the HTML/CSS.

For CSS, Andy Clarke is my favorite. He wrote Transcending CSS (http://www.transcendingcss.com/) which was very impactful in my understanding of "semantic" markup, as well as general design philosophy.

When I began, my friend had me start here: http://www.amazon.com/Think-Common-Sense-Approach-Usability/...

I would recommend you check out http://www.reddit.com/r/webdesign there are tons of articles submitted and I've learnt a lot from it. Although its a news aggregator, I learn a ton from the comments.

See also http://www.quora.com/What-are-the-best-books-on-UI-UX-design...

Finding better way to learning is always a difficult task. Especially for those whom english is not the first language. We faced some hard problem and still facing. To solve this we started a very small attempt. Created a user generated tutorial site where reader can find simple tutorial post. Please have a look on our CSS section here already some bunch of basic tutorials added which we think very helpful for the newbie.

http://www.codesnipr.com