

Ask YC: Where to learn web design? - alextp

I already know how to do most css+html+js voodoo necessary to get a site up and running, but always with a crude and smelly design. Any pointers on books/blogs where one can get some tips?
======
bwh2
Read Don't Make Me Think! by Steve Krug. Also watch this talk titled "Don't
Make Me Click!": <http://www.youtube.com/watch?v=EuELwq2ThJE>

It's really helpful to deconstruct website designs. So I frequently look at a
website and think about sections I would redesign, how I would do it, and most
importantly - why. Sometimes I break out an image editing program and redesign
the sections or even the entire page.

The huge advantage with this approach is that the content is already provided.
When I started learning web design, I would come up with hypothetical website
ideas (like "I'll design a website for a law firm") and then try to create the
content in addition to the website. But it doesn't work like that. You need
content to work with before you can create the site. So you're much better off
finding an actual law firm website, using their content, and redesigning
sections or the entire page. Along the way, with a little help from usability
resources like those mentioned above, you will also figure out which content
actually belongs, which doesn't, and why. But the point is this: take
something that's already built, break it down, and rebuild it.

------
gigawatt
Depending on how far you want to take it, I think it's very important to study
Design before studying Web Design. Learn the principles of good design - the
rule of thirds, color theory, negative space, typography, etc. - then apply
that to the web. One wouldn't study open-heart surgery without first going to
medical school. That analogy may be a little dramatic, but I hope you get my
point.

~~~
wmeredith
Not to totally discount gigawatt's advice, but I've watched many a graphic
designer fail miserably at web design. Be wary of trying to apply print
principles online, in particular.

~~~
alabut
I agree and would go even further - most designers that start out as graphic
designers are doomed to fail as web designers and I've rarely seen any that
made the transition completely. The high profile people making high bandwidth
flashturbation for movies, rock bands or new vodka brands don't count - just
because an ad agency can sell it to a big corporate client doesn't mean that's
what the website's visitors will enjoy or be able to use easily.

Web design is not graphic design. It's not a subset of it, not even a sibling
design branch and if anything, it's a distant cousin. Making stuff for the web
is much closer to industrial/product design and architecture than anything in
the communication arts. It's a different matter to design things simply to
look good than it is to design how they work.

Longer explanation at alistapart:
<http://alistapart.com/articles/understandingwebdesign>

So then how would you learn fundamental design principles without getting
polluted by the biases of print design? The best answers below are a bit
dispersed (too many pointers to the css/html/js skills you said you already
know) so I'll distill: 1) learn only the core graphic design principles - see
endlessvoid94's book recommendation. 2) I second PStamatiou's advice to get
your own site and start tinkering with it immediately, preferably a blog.
Can't stress this second tip enough, actually.

------
wensing
Dan Cederholm is a high-quality designer with great jumpstart material.
Namely, his books "Bulletproof Web Design"
(<http://www.simplebits.com/publications/bulletproof/>), and "Web Standards
Solutions" (<http://www.simplebits.com/publications/solutions/>).

If you can afford the time and expense, a one-day Carson Workshop from a CSS
master can help a lot. This one is already past, but for example:
<http://carsonworkshops.com/design-dev/clarke/14May2008.html>

For off-the-web inspiration, study Edward Tufte
(<http://www.edwardtufte.com>), architecture (for example, Christopher
Alexander: <http://en.wikipedia.org/wiki/Christopher_Alexander>), and
cartography (peruse a great atlas like The Atlas of Oregon:
[http://geography.uoregon.edu/infographics/projects/atlasPrin...](http://geography.uoregon.edu/infographics/projects/atlasPrint.htm)).

------
babul
Practice. Practice. Practice ...then practice some more. Only by crafting your
skill can you really get better.

~~~
akd
This is an asinine response, especially for the top comment. Of course the
only way to learn is by practicing, but the right guidance can enhance the
amount of learning you get out of each hour practicing. It's like asking for a
violin teacher recommendation -- there are good and bad resources for web
design out there.

------
xirium
<http://news.ycombinator.com/item?id=216833> \- Beginner.

<http://news.ycombinator.com/item?id=191171> \- Design prototyping.

<http://news.ycombinator.com/item?id=128713> \- CSS and XHTML.

Tags: [html] [design] [css] [xhtml] [newbie]

------
endlessvoid94
"The Non-Designers Design Book" by Robin Willaims.

Absolute classic. The original version was all about design for letterheads,
posters, etc. but all the principles apply suprisingly well to web design.

I believe its out of print but you might be able to find it on amazon.

~~~
alabut
This is an awesome little book and a bit of a secret, probably because the
title, color scheme of the cover and relative thinness make it look less like
something to be seriously and more of a "design for dummies" book. Not at all
- it's a short and excellent distillation of core graphic design principles
down to a few short fundamentals.

An even shorter and online version of the same idea - the blog post on "how
c.r.a.p. is your design?" on the role and usage of contrast, repetition,
alignment and proximity:

[http://www.thinkvitamin.com/features/design/how-crap-is-
your...](http://www.thinkvitamin.com/features/design/how-crap-is-your-site-
designprint/)

------
steveplace
I think 37 signals had the idea to copy the design of a webpage that's
completely unrelated to the subject of the one you're working on.

Where to start?

[http://del.icio.us/search/?fr=del_icio_us&p=webdesign...](http://del.icio.us/search/?fr=del_icio_us&p=webdesign&type=all)

------
noodle
i've not read any books on it, so i'm just going to throw up what i use and
read for quality information and inspiration online:

<http://www.zeldman.com/> (and his book)

<http://www.alistapart.com/>

<http://www.cameronmoll.com/>

<http://www.smashingmagazine.com/> (inspiration and tools)

<http://www.thinkvitamin.com/>

<http://psdtuts.com/> (for photoshoppy help)

------
anirbas
You might find this recent thread useful:
<http://news.ycombinator.com/item?id=204130> I recommended the book 'The
Principles of Beautiful Web Design' there, and reiterate that.

------
abijlani
These two sites are very good resources:

<http://webdesignfromscratch.com/>

<http://www.sitepoint.com/>

As for books this is by far the most comprehensive list of books I have found
for web design:

[http://www.blogdesignblog.com/blog-design/25-must-buy-
borrow...](http://www.blogdesignblog.com/blog-design/25-must-buy-borrow-or-
steal-books-for-web-designers/)

------
xenoterracide
<http://w3schools.com> is good for real real beginners...
<http://www.webdevout.net/> good for some more tips...

I like o'reilly's book web design in a nutshell very good reference (little
dated in some cases (not much for beginner, has all the ropes, just not up on
latest browsers firefox 1.0 or 1.5...) though hopefully a 4th edition is on
it's way)

ooh... and don't forget <http://csszengarden.com> great for seeing how
powerful css really is and getting some good idea's for design.

------
coglethorpe
I'm afraid that the "design" part will always evade me. I'm better at the
plumbing that goes behind the walls. For my next adventure, I'm hiring a
graphic artists/web designer who's previous work has impressed me.

~~~
maurycy
Isn't it like with hackers? I mean, that only good designers can recognize a
good designer?

~~~
izaidi
It's not really the same, because everyone is exposed to design all the time,
whereas only coders ever look at code. It's more like being able to tell if
music is good -- most people have a decent sense for it, but a musician's
taste is a little more refined.

~~~
maurycy
I beg to differ. Usability tastes differ a lot.

A random mother finds VIm's UI hard. A random hacker finds VIm's UI excellent.

------
bprater
One of the ways I've learned a ton is to find a site that I really like and
then begin to clone the design locally.

I'll go line-by-line through their original HTML and CSS and rebuild the page.

This seems simple and obvious, but after years of hacking design, I am still
impressed and inspired by spending an hour or two mucking about in other
people's code.

------
PStamatiou
first off - you already have your own blog/site right? I knew nothing about
web languages/CSS/etc except for basic html three years ago. Then I started my
own blog, got used to wordpress, was active in a theme community and started
tinkering around. Now I would say I have the skills to become a freelance
xhtml/css guy if I wanted.

~~~
alabut
Best tip ever Paul - having your own personal website where you can try out
new styles, programming techniques or even just write about them is critical
for a young designer. Or old ones! I don't use my personal site that much
anymore (I'll revamp it after the wedding) but it was more useful during my
first few years than any book I ever picked up on css, actionscripting,
design, usability or anything else. You'll find new things to experiment with
over time - I'm going to redo the portfolio section of my site as an excuse to
tinker with django and blueprintcss.

It's a bit dated but there's a good book on the topic by Joe Shepter called
"Personal Web Sites: Top Designers Push the Boundaries with Experimental
Design and Graphics" - Amazon link: <http://tinyurl.com/3wxy7h>

------
ideamonk
i recommend <http://www.webdesignerwall.com/> <http://psdtuts.com>
<http://www.mezzoblue.com/zengarden/alldesigns/> for more inspirations

------
Tichy
I wish there were nice holiday-style summer curses for web design, as there
are for classical painting.

~~~
maurycy
Their results would be similar: mediocre skills.

Just ask yourself how you'd rate someone's skills after summer programming
course. (yes, programming; not typography, usability, information
architecture, HCI, CSS, just "design")

~~~
Tichy
I wouldn't expect to be a "certified web designer" after a two weeks summer
course, and get hired by Apple for an obscene amount of money. But maybe I
could learn some basic skills that would enable me to create acceptable web
sites. For example, even creating the graphics for rounded corners is not
straightforward (or it wasn't before I discovered Inkscape).

I can't imagine that such courses are completely useless. Of course you are
not an expert after that, but at least it can get you started.

In fact my gf just had to learn painting in a short amount of time, and even a
one day course teaching some basic skills was very helpful.

------
wmeredith
I'm partial to commandshift3.com for examples of what to do. just check out
their "winners" section.

------
bkbleikamp
Buy books unrelated to web design that talk about design or have deigns you
like and study what makes them "good." Typography, color, etc. are best
learned by experiencing them through the work of great designers.

------
gtani
books to peruse on amazon:

McFarland: "CSS, Missing Manual"

Crockford "Javascript, the good parts"

"Pro JavaScript Design Patterns" Ross Harmes and Dustin Diaz

"JavaScript: The Definitive Guide" Flanagan

------
pbnaidu
If you would like to create your own buttons, graphics, background images,
colors, etc, try inkscape open source image creation, editing tool.
<http://inkscape.org>

------
maurycy
Mimic great people.

------
danielha
Copy and mimic a lot to practice.

Then spend a lot of time tinkering. Always keep the basic principals of
usability in mind.

