Ask HN: How do I become a better web designer?

7 points by heyimwill 10 years ago | 6 comments

Someone1234 10 years ago |

Good artists steal. I know most things I have worked on we've taken different visual concepts from various sites and then incorporate them. The key is to steal IDEAS not actual content, and ideally merging different good ideas to create an original feel. After that you just utilise the feedback loop to polish what you have into something that the majority of your users like.

After you've done the above a handful of times you start to get a gut feeling for things which you should listen to as it will often be more right than more wrong.

TL;DR: Light theft and practice.

JeffreyKaine 10 years ago | |

Haha! Literally posted the same advice at the same time. I guess we're onto something ;)

Someone1234 10 years ago | | |

Or maybe you're just an idea theft! ;P

I suspect a lot of people have a similar-ish work pattern. I'm certain there are a few visionaries that legitimately create new ideas, but the majority of us are just recycling old ideas in a new way.

JeffreyKaine 10 years ago |

This is going to seem overly simplistic, but... Practice!

1) Find designs that you love, copy them pixel for pixel

2) Start mixing and matching elements from different interfaces that you find.

3) You'll start to see repeated patterns, get good at connecting these patterns together into new interfaces.

4) After a while of this, you'll see that you don't need to do as much research and direct copying anymore.

5) Congrats! You are a junior designer, keep practicing :)

liampronan 10 years ago | |

This is the same advice I was going to give and is how I've been working on my design skills.

One addition: you should look through Dribbble [0] or similar sites for inspiration, and you can use pre-existing resources for Sketch or Photoshop [1] to build mock-ups. I find it better to improve on design by iterating a bunch on mock-ups before working in HTML/CSS/iOS (since I'm much more familiar with going from design mockup -> front-end).

0 - https://dribbble.com/search?q=website 1 - e.g., http://www.sketchappsources.com/