How can a programmer learn to design websites that don’t suck | Hacker News Reader

How can a programmer learn to design websites that don’t suck

vascop.github.com

91 pointsvasco39 comments

I think many programmers don't put an emphasis on design because they think it doesn't matter. They would rather get something done rather than make it look good. There is nothing wrong with this approach, but I would say the first step is to realize that design is important, too.

Many people say, "oh, well, I don't have design skills". I think everyone has design skills, it's just something you have to work at. And the first step is to pay attention. I like this line from the article: "I started to look at things, and I saw what looked right and I tried to memorize it." That's basically the advice I would give too. Even if you can't design, you can tell what looks professional from what looks half-baked. The next time you come across a well-designed site, ask yourself, what makes this so much better than other sites? Is it the way things are laid out? The choice of font? The colors?

And once you have a good foundation, look to the details. Consistency in spacing or alignment, emphasis of elements, etc. Use your instinct - if something looks bad or unprofessional, fix it.

That's really all there is to it.

I think many programmers don't put an emphasis on design because it's really frikin hard. A really good visual design is like a really good system design. It takes a lot of thought, experience, and a ton of work to achieve.

With enough experience you'll get significantly better, and like programming there are some core concepts that will continue to be useful. However, like programming, it's also changing constantly and requires effort and passion to keep up with it.

One person can certainly achieve both, but it's definitely not an afterthought; "oh yeah, I need to do a little design here, shouldn't take too long".

I'm a programmer, and I care about it. And I agree that it's really frikin hard.

I can look at a design and know if it's good or bad. That's easy. Knowing why and how to fix it is the hard part.

I would argue that programmers, for the most part, care very deeply about visual design. Every time you choose where to place line breaks, text alignment, even the use of variable names and other language constructs involves you making a choice about how your code is visually laid out in the editor.

The problem is, I propose, one of deeper social conditioning. I have worked professionally as both a designer and programmer, but I have never found a workplace that take both abilities completely seriously. Designers do design work and programmers do programming work and that is just the way it is. I think this leaves a lot of developers feeling like design is a completely different career that is out of their reach.

The first thing you'll notice in this article is that each section header is closer to the previous paragraph than to the next one.

Also the text is fully justified, which is generally not the way to go on the web.

Maybe out of context, but I really hate justified text.

I only noticed it after your mentioned it. Yes, it is true, maybe a pixel or so.

But that doesn't negate the content of the article, it just shows that the author is still a programmer learning to design.

Actually the first thing I noticed was the typos (or grammar and spelling mistakes).

Even with its blemishes, the article still has a nice message: decent design is pretty simple and gets easier if you just keep at it.

I did not notice and still cannot see it. I guess I'm a programmer.

I don't see it

The headers are not visually associated with their paragraphs. So you have this:

  para para para para
  
  Header
  
  para para para para

instead of:

  para para para para
  
  Header
  para para para para

Not sure that the ascii art does it justice, but that's hopefully clearer.

It's actually not that. Spacing a header equally between preceding and following paragraphs can work fine. There's an obvious association with the following paragraph, because headers are expected to come before content, and so you don't need to imply that association visually.

In this case, the header is closer to the preceding paragraph (~15px) than to the following paragraph (~19px). It's visually implying a connection that doesn't exist, which is why it's problematic.

I think this highlights something that is missing from the article. That is, the importance of hierarchy. Colour, contrast, position and weight (ie. 'boldness') are all highly important in communicating the order of importance. One should be able to squint a distance away from the page and know instantly where the most important elements are.

I'm currently reading "Design for Hackers". It's an interesting book and with some parts it's made me think differently with how I see things.

I know a lot of people will probably dismiss "learning how to design something" as "don't try it" or "if you're coder then you're not going to get it" but I kinda disagree. It doesn't hurt for someone from a coding background to learn about design or to try design themselves, or at least know what makes a good design. Even knowing just a little bit could be beneficial.

Oldies but goodies - The Mac is not a typewriter and Beyond the Mac is not a typewriter by Robyn Williams. It's not Mac-specific, and both have a lot of examples of how you can improve design.

Fairly eye-opening if you're not used to having a design eye. Even simple things like alignment and grouping related things can have a big impact.

I agree with you. For example, not all of your projects are going to need a designer. Your code won't be used without a front end, and sometimes the only person to do it is you.

Hey, thanks for mentioning Design for Hackers!

Read Bret Victor's amazing post on the subject: http://worrydream.com/MagicInk/

I don't think "Never use absolute positioning" is sound advice.

It has it's place and is a perfectly valid way to position things. And once you know how Absolute works in relation to containing divs, it's quite simple to use absolute in a flexible way.

IMO, absolute positioning is one of those "don't use until it you know when to use it, at which point you won't need a guide like this" things. It's good advice until you have the foundational knowledge to disregard good advice when appropriate.

I suppose it's good advice for starters who would otherwise use absolute positioning as a crutch when they get stuck.

Other than that, you are right, there's a time and place for every technique.

Yep. I've seen far too many people taking this "no absolute positioning" habit too far, they end up positioning everything with floats. Float abuse is a lot like playing Jenga.

Design requires effort and practice just like anything else.

SmashingMagazine, Forrst, and The Non-Designer's Design Book are all great on teaching fundamentals and talking about things you should keep in mind.

Programmers can learn quite a bit of it just like anything else.

Hey! I bought Woody Landing for a project I'm launching soon. It's a nice one.

Another good resource for learning design is the eBook: http://bootstrappingdesign.com/

Man, $39 seems like a terrible price point for that. Forty bucks is a really good price for a well-designed, full-color hardcover book, not an e-book. $10 and I would've bought it already, but now I'm just queuing it up on Goodreads to maybe buy at some point in future.

EDIT: wording

Seriously? $39 is a great deal for learning something so absolutely fundamental to working on the web.

A good theme from themeforest will run you $10-$30. If you stick 100% to the theme you'll look generic (also true with twitter bootstrap), if you deviate to differentiate but don't know what you are doing you'll still end up with a mess.

The recommendation here is essentially "Start with this very common design (a Bootstrap theme), then add/change {something}, and voila!" which is obviously missing a significant "something" in terms of instruction. I believe that there is a way to acquire design intuition of the kind I seek as a programmer to bridge me into more robust design work, even if it takes time and practice, but reading another article telling me to use Bootstrap themes isn't it.

I think the best way to get into this is to follow web design blogs and inspiration galleries. From my experience, designing websites becomes a lot easier after experience. Also, in terms of CSS, LESS and SASS are really great, everyone should use them.

Just let your interest in design be bigger than your interest in programming for a little while.

Also: 500px wide text boxes are hard to read.

copy paste some css?

What worked for me was to constantly look at designs in templatemonster and try to write down the reasons they looked good; then I would try to create one design using those ideas. Of course, I also read a lot of Photoshop tutorials.

1. Don't Try. 2. See 1.

Seriously. Some people have artistic skills and sensibilities. Most don't. So you're much better off spending a small amount of money to get a proper designer to help you out.

It is absurd to generalise like this and tell people not to try without knowing their background and goals.

While I personally don't see the point in spending my time learning design skills, this is because my current goal is to move away from doing the work myself to managing others doing the work.

Assuming your statement that only some people have artistic skills is correct, and even assuming the proportion is very low for the statement to be interesting, you're still making an assumption that people with artistic skills and sensibilities are always aware of them. What does e.g. a 22 year old "programmer" have to lose trying their hand at a new skill? They may discover a passion or talent they never realised they had and your advice would see them miss this opportunity.

I could argue that there's much better programmers than you right now who could do whatever you want to do in less time and with less bugs. Just spend a small amount of money and get them to help you out.

Trying to improve is never a bad thing!

What's your position on "learn to code" meme?

see http://www.codinghorror.com/blog/2012/05/please-dont-learn-t...

This is total crap. While some people have a more intuitive grasp of things, most of it is looking at certain principles and looking FOR certain principles and evenly applying them. Talent is often practice masked by a lack of individual history on the person. The person who draws well at 22 has been practicing since they were 5, etc.

That is one expensive ebook. $39 bucks!?

Reply on news.ycombinator.com