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.

31 Dec 2011, 4:34am | 6 comments

  • JustinMeltzer

    Great post, and thanks for the link.I definitely agree that exploring other sites’ designs is one of the best ways to develop your own abilities. Whenever I come across something that looks cool, I inspect the source code with Firebug or Chrome’s built-in inspector to examine the CSS. Mostly anything can be designed with just CSS3 these days.Two other very specific technical points that I find useful: 1. Understanding the role that light plays in creating realistic looking 3D objects. It’s amazing what good use of gradients and modest shadows can add to your site. 2. Proper use of colors. Picking the right groups of colors and making them consistent across your site can be very effective. This is a useful site (It’s a bit confusing to use at first but once you get the hang of it, it’s really awesome.)

  • Dan Shipper

    Good points man. I'll definitely check out Color Scheme Designer. I sometimes use Adobe Kuler which seems to work pretty well for color schemes.

  • Andy Morley

    Nice post Dan, I have written something which supports yours here.. little bit if advice from somebody who has been in the industry for 12 years.Good job man.Andy M.

  • Dan Shipper

    Great article. Thanks for sharing!

  • tiffany

    what tool do you use to save a portfolio of sites you like?

  • Dan Shipper

    There are specialized tools for it but I generally remember them or put them in an Evernote.


Never miss a new post