How can I learn the design side of web design?

July 31, 2011 6:09 AM

Are there any good books/free online courses/tutorials for learning the basics of graphic design for web sites in particular?

I took a class on HTML and CSS, and I like the idea of making web pages, but I feel like I lack the design chops to really make attractive and readable web sites.

Most design blogs I find are mostly long lists of things not to do, which I find very confusing when I'm trying to determine what I can do to make an aesthetically pleasing and usable site. I tried reading a bit of Don't Make Me Think, but it seems to be more usability than aesthetics oriented.

So, is there any way to improve my knowledge of this stuff without formal coursework in a school? I could take more multimedia design classes, but I am really full up on electives and kind of want to focus on core computer science coursework right now at school.

posted by mccarty.tim to Media & Arts (8 answers total)

Response by poster: Just to be clear, the class only taught me the syntax more or less of web design. I can effectively turn an idea for a layout into a web page and style it. The problem is coming up with that layout and styling it tastefully.
posted by mccarty.tim at 6:17 AM on July 31, 2011

I went with this when I was having similar concerns in the past: It's short, well written and will give you a lot of the high-level concepts to help you think more productively about the subject.
posted by Dr Dracator at 6:55 AM on July 31, 2011

Best answer: You can definitely learn the basics of design on your own but the best way is, as usual, practice and observation. I always suggest the Non-Designer series by Robin Williams et. al. They are easy to read and offer good advice. Some would argue that her design sense is not bleeding edge but they are reliable and will not cause excessive pain. You can skip the Scan and Print book since that one is woefully outdated but she raises things to consider when thinking about the print process. After learning her CRAP (contrast, repetition, alignment and proximity) it throws you to more advanced texts on design such as, Making and Breaking the Grid.

Design is a conscious process and part of that process is accessing the situation, audience analysis, solving for genre, technique, and execution.

Observe, observe and observe. Train your eye with art history, commercial art and things around you. Recognize patterns and read books that discuss those patterns such as, Design of Sites by Duyen and Hong or Tidwell on Designing Interfaces.

I am in a rush so mefi mail if you need more.
posted by jadepearl at 6:58 AM on July 31, 2011

Best answer: There's A List Apart.

A few others:

Web Designer Wall

24ways.org

Opera Dev Web Standards

Java Script goodies

Read Write Web

WC3 Validator

Open Source Design

Sitepoint

CSS Mania

Web Designer Depot

CSS tricks

Six Revisions

2expertsdesign.com

5by5.tv

I am in the same boat as you. I have a fairly solid understanding of backend stuff, but coming up with something is the hard part.

I did my current site in photoshop. I made a page. Created boxes for content and ad blocks and mocked up the page. I tried all kinds of things to get that into a website, but ended up hand coding it in the end. I threw a couple tricks and tips sites in there because they often have design articles as well.
posted by cjorgensen at 7:21 AM on July 31, 2011 [4 favorites]

Hmmm, I just got this out of the library. Rather than being domain-specific to the web, it deals with fundamental concepts: texture, figure/ground, etcetera. It may be rewarding to read it (and work through the exercises on the website).

Graphic Design - The New Basics

Website with exercises
posted by sebastienbailard at 11:11 AM on July 31, 2011

Yes, it was printed in 1961, but Grid Systems in Graphic Design should positively be on the reading list of any web designer. (There are other books on grid systems that could very well be worth a read, but this one seems to be the canonical entry for the genre)

Edward Tufte's books also talk extensively on information design, and are worth a read even though they also don't exclusively discuss issues pertaining to the web.

There are a lot of good sites linked above. Lately, I've been a huge fan of JavaScript weekly. They curate great content, and deliver it in bite-sized chunks.
posted by schmod at 11:28 AM on July 31, 2011

Another vote for Robin Williams' non-designer books. They are entirely practical, and aimed directly at someone in your positions.
posted by AmbroseChapel at 5:18 PM on July 31, 2011

Response by poster: Thanks for the tips, everyone! I was so afraid there wouldn't be good resources, and I'd just have to conclude I didn't have an "eye" for design.
posted by mccarty.tim at 7:35 AM on August 1, 2011