Ask HN:How do you become a really good web designer?

[Arun2009]

Hello all.

This question is especially for those who are professional web designers.

I am trying to improve my web design skills, and while I know basic HTML and CSS, I just am not very good at design. I do believe though that I have some artistic talent based on the fact that I used to paint and sketch quite a bit until a few years ago.

So, my question: how can I systematically improve my web-design skills? Specifically,

- What are the tools of the trade that you use?

- What are the component sub-skills I must master?

- What are the canonical books that deal with web design topics?

- Anything else that I've missed?

Many thanks in advance!

- Arun

[rmc00]

I've been asking the same questions lately and trying to find the answers. The problem that I've run into is that a lot of designers just feel what is right. It seems very instinctive, which makes it hard for them to pass on knowledge.

One designer that I found who seems to know and actively apply principles of good design is cameron moll (http://cameronmoll.com). Cameron gave a great talk a while back at the HOW Conference, and he posted a pdf to accompany the talk http://cameronmoll.com/archives/2009/05/free_download_good_v.... I think this document is a great starting point to learn about design. Obviously, a 10-page document doesn't cover everything possible, but it recommends a few books for learning more. I haven't been able to pick them up yet, but I suspect you will find them helpful.

1. How Designers Think by Bryan Lawson 2. The Elements of Typographic Style by Robert Bringhurst 3.Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler 4. The Design of Everyday Things by Donald A. Norman

[alexkearns]

The only way you are going to learn is by doing. Set yourself a challenge of creating a website design each week. Your first attempts might not be very good but, soon, you will start producing good work.

It is also worth checking out design showcase sites for inspiration. www.webceme.com is my own personal favourite.

One of the biggest issues I had when I started trying to design websites was getting the color scheme right. I would suggest, to begin with, checking out the color schemes on other sites. There are also a lot of tools for generating nice color schemes on the web. This article gives a good overview: http://whdb.com/2008/follow-the-rainbow-101-color-resources-...

[noss → alexkearns]

I would also like to push learning by reading as a good alternative.

"Don't make me think" was a great read to get the right attitude in what to strive for.

I have heard great things from people reading the beta book "Web Design for Developers" from pragprog. (I didnt know about vertical grid layout for margins and line heights).

As for practical things I have learned: Avoid singlepage photoshops. Instead break things down into design elements. Invoking these design elements should be as simple as placing some html elements in a div with the right class. Nothing should be allowed to creep into the page that has not been extracted to a reusable design element.

This is important because all sites will evolve. And while evolving you want to keep using your design, and not add band-aid solutions.

Oh, also: Avoid wingdings. :)

[jeroen → alexkearns]

Did you mean http://www.webcreme.com/ ?

[alexkearns → jeroen]

Sorry, yes. Typo. My bad.

[trickjarrett]

Here is a rough outline of my thoughts on what do and how to do it to really build your web developer skillset.

For the front end, there are really three main components: - HTML (make sure you learn about DOCTypes and how to make valid websites)

- CSS - How to style pages, this is really a core skill these days. Table layouts are not 'wrong' anymore as most browsers now agree on how to build them, but as you do work if you client is savvy they will be very unimpressed with them and you'd do well to know how to do a layout using just CSS.

- Javascript - As sites become even more interactive JS is a core tool that you'll call upon for almost every project.

- Javascript libraries - These are things like jQuery, Prototype, moo, YUI, things which extend JS and simplify your work in implementing different things.

For the backend, you'll be best served by picking a language and focusing on it: PHP is probably the easiest in terms of entry costs. ASP.net requires a bit more setup for learning to work with it. Ruby on Rails is up and coming as a backend coding language, quite hot among web 2.0 companies but it isn't near as popular as PHP and ASP.net.

In these languages you'll find frameworks which provide a good basis for web applications. CodeIgniter, CakePHP and a whole host of others currently exist. Again you're just going to have to begin playing around and dive into them.

At a lower level, when writing the sites, you need to understand Object Oriented programming as well as other core Computer Science elements.

For websites, content management systems are a main component in projects these days. Wordpress, Drupal, ExpressionEngine are just a few. You'll do well to research these and begin working with them. Some are rather intimidating and frustrating to work with.

The next step is to begin learning to use other sites and their APIs. Like writing a Facebook application, or a Twitter application. To learn these, a good plan is to reinvent the wheel. Want to learn the Twitter API? Build a web twitter client. What to learn Facebook? Make a simple game.

Etc.

[trickjarrett → trickjarrett]

For those interested, I posted an expanded post on this on my blog: http://www.trickjarrett.com/web-design-primer

[revorad]

Arun, I'm sure others have asked similar questions here before. So this might help: http://www.google.co.uk/search?hl=en&client=firefox-a...

Good luck!

[Arun2009 → revorad]

Thanks! It didn't quite strike me that this would be a recurring topic on HN.

[newacc]

the following links will help u a lot - good luck ...

http://www.blogdesignblog.com/blog-design/25-must-buy-borrow...

http://news.ycombinator.com/item?id=16603