How To Become A Competent Web Designer in 2012

After I submitted my 10-hour hack Mixmatic to HN on Tuesday I got a couple of emails and tweets asking me about the design and how to become better at doing good design work quickly. The short answer to that question is: that just like everything worth doing it’s really, really hard. But if you really want to become a competent designer from scratch in 2012 here are a few of the things that I’ve learned along the way.

Ignore the tools

At least one person on the Hacker News thread about Mixmatic asked me what tools I used to do the design. I told him that I used Photoshop to mock everything up and then SASS and HTML (what else) to actually create the site. But the tools you use don’t matter. The only thing that matters is who is using them (you). I know people who never touch image editing software during the whole process and create pretty nice looking sites. Like this. I personally have to design every pixel in Photoshop before I start doing CSS. But to each his own. 

If you’re just starting out and you don’t know what to use, try to find a designer you respect and ask them what they use. Then you can just ask them for help and tips while you’re learning whatever system or combination programs they like best.

Do it a lot

If you want to get jacked you have to lift weights. lf you want to run fast you have to do sprints. The same goes for design. There’s no magic bullet for it. Except maybe Themeforest. But the point remains: if you want to get better at web design you have to do it a lot.

Create a portfolio of sites you like and copy them relentlessly

The easiest way to get started immediately (assuming you have some competence with basic image manipulation and CSS) is to start noticing designs you like. Every time you see a new website examine the design and see if it appeals to you. Go back through the list of startups you like, or software you’ve bought over the past year and look at their websites. Once you’ve built this portfolio up it becomes a lot easier to do design quickly. All you have to do is take whatever your product idea is, and find site designs that are similar to the feeling you want your product to convey. Then take the principles from those designs, put your own spin on them and use them!

For example, the Mixmatic design leans heavily on the Instagram homepage. The DomainPolish design leans heavily on the old 37Signals Basecamp design.

Copying only gets you so far

Copying designs gets you about 80% of the way to being a good designer. The difference between a competent designer and a good designer is in the small details that are almost impossible to pick up by copying. They require technical knowledge. 

Acquisition of that knowledge is difficult to do but not impossible. Take a design class if you can (even if it’s not web design). Read books. Read blog posts. This one in particular blew my mind and changed the way I approach web design even though it’s about Renaissance book design. Once you’ve gotten to the point where you’re turning on the grid in Photoshop to lay out your pages, or you can wax poetic about the Van der Graaf canon you’re on your way there.

I hope you found this helpful. As always feel free to reach out if you want to talk – I’d love to!

If you read this far you should probably follow me on Twitter.