Ask YC: Where to learn web design?
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?
22 comments
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.
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.
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.
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.
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.
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.
Good point, wmeredith. The principles do apply to both, though. When I've seen print designers fail, it's been when they try to force the web to behave like a magazine or a book. Seems like the author is already accomplished at building websites, so he probably has a good idea of what works and what doesn't.
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...).
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...).
Practice. Practice. Practice ...then practice some more. Only by crafting your skill can you really get better.
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.
By this I mean learn by doing. It is generally the best way.
Look at examples/sites that make you say “wow” and try to disseminate them and rebuild them. Always challenge yourself to do something just outside your current ability. When you start building (anything) you will usually suck. After n builds you will suck less. After 2n builds you be ok. After 3n builds you will be fairly good ...and so on.
Take the teachings/examples/tips you come across in the books/blogs/youtube and apply them to yourself and your work. Build a wiki (or any document) with what you find useful and tailor it to your learning. In due time, with persistence, you will find you start to get better/good.
Look at examples/sites that make you say “wow” and try to disseminate them and rebuild them. Always challenge yourself to do something just outside your current ability. When you start building (anything) you will usually suck. After n builds you will suck less. After 2n builds you be ok. After 3n builds you will be fairly good ...and so on.
Take the teachings/examples/tips you come across in the books/blogs/youtube and apply them to yourself and your work. Build a wiki (or any document) with what you find useful and tailor it to your learning. In due time, with persistence, you will find you start to get better/good.
Practice and lookout at designers' portfolios for more insights, inspirations and try thinking and doing what they did by yourself. soon your bag of tricks will be full of nice tricks & skills
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]
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]
"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.
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.
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...
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...
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...
Where to start?
http://del.icio.us/search/?fr=del_icio_us&p=webdesign...
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)
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)
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.
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://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://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.
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.
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.
Isn't it like with hackers? I mean, that only good designers can recognize a good designer?
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.
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.
A random mother finds VIm's UI hard. A random hacker finds VIm's UI excellent.
I' m not really sure. A good design is more visible than good code, from outside (at least if you're looking without prejudice).
Well, I can recognize that the guy I'm working with for design is great, even though I can't design the way he can. What he does really impresses not only me, but others who see his work, so I do have feedback besides my own.
No, in the "art" worlds much of what is respected by other artists is completely incomprehensible to ordinary people. Unless you're trying to win design competitions, the measure of a good web design is how well it is received by your site's typical users.
My resume, sir: http://wademeredith.com </shameless self promotion>
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.
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.
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.
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
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
i recommend
http://www.webdesignerwall.com/
http://psdtuts.com
http://www.mezzoblue.com/zengarden/alldesigns/
for more inspirations
I wish there were nice holiday-style summer curses for web design, as there are for classical painting.
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")
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")
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.
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.
I'm partial to commandshift3.com for examples of what to do. just check out their "winners" section.
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.
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
McFarland: "CSS, Missing Manual"
Crockford "Javascript, the good parts"
"Pro JavaScript Design Patterns" Ross Harmes and Dustin Diaz
"JavaScript: The Definitive Guide" Flanagan
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
Mimic great people.
Copy and mimic a lot to practice.
Then spend a lot of time tinkering. Always keep the basic principals of usability in mind.
Then spend a lot of time tinkering. Always keep the basic principals of usability in mind.