Hacker Web Design: Words of Wisdom for Building Great Apps

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

David Kadavy’s upcoming book concerns a topic of great interest to us and to many of our developer and entrepreneur friends: design for hackers.

His blog posts geared for folks building quick-and-dirty web apps have been hits with the Hacker News community; he dispenses sound advice for technically minded designers who need to do a good job and do it quickly.

He spoke with us via e-mail this week about the needs and pain points of would-be (or must-be) designers in the world of web development. Keep an eye on his blog for updates about his book, Design for Hackers: Reverse-Engineering Beauty, to be published by John Wiley & Sons.

What’s one fundamental principle of design that you think most hackers are wont to overlook?

I think many people, when consciously attempting to create a design, will worry too much about certain details that don’t matter that much.

For example, some people worry an awful lot about font choice, when really, you can get a wide variety of moods and feelings from just a few fonts. The fact that there are so many fonts available just confuses and distracts them.

The hard — and more important — part is differentiating chunks of information into a clear hierarchy, and mastering the use of proximity, size, and font weight in establishing this hierarchy is far more challenging and impactful than figuring out the exact font to use.

Do you think it’s more necessary now than it was 5 or 10 years ago for hackers to know about and be able to do their own design work?

Absolutely, and I think that’s why there seems to be an explosion of interest in design within the hacker community.

Hackers are becoming more business savvy and recognizing that good design is an important part of running a successful business. …Many hackers are finding that teams as small as one can start a startup. Everything goes faster, with less friction and with more clear vision if different skills can be consolidated into one individual.

Design is a critical tool in getting customers to trust your business, but when you’re starting with little or no money, you need to get decent design for next to nothing. So what are you to do?

Good designers are hard to find, expensive and one more person in your development process is just added friction. If you’re a single founder/hacker, you’ve taught yourself everything else about running your business, so why not learn how to design and take care of that until you can afford someone more specialized?

The problem with that is you can’t solve design issues with a couple of Google searches like you can with programming issues.

I strongly believe that the overarching trend is toward everyone learning how to design… Now that everyone can publish, everyone needs to learn to design in order to communicate clearly.

What’s one example of great hacker-created design — perhaps something that works better than its maker intended?

The first thing that comes to mind is Craigslist. It has been cleaned up a small amount, but in many ways it’s really hideous. It’s been wildly successful because it addresses a huge pain point. Additionally, the unpolished aesthetic expresses the fact that its a community-driven site that’s extremely modest, commercially.

I think many designers overlook the economics of design: that perfect design just isn’t economically feasible or necessary in every situation. I know when I was in design school, myself and my fellow self-righteous design students would rip on the poor design of something as simple as a lost dog poster, without even thinking about the economics of it. It all depends upon where the product lies within its landscape.

With Craigslist, the power of the democratization of information transfer superceded the need for beautiful design. As design savvy spreads throughout the population, however, the standard will be raised.

Is there anything that you like or that you find refreshing or amusing about how the typical hacker approaches design?

The thing I like most about working with technically minded people is that they understand the medium of the web: the whole concept of structured information, the practical limitations of CSS-based layout, SEO best-practices, etc.

The lack of this knowledge always frustrated me when working in advertising or the print design world. You still see it today, designers who were trained on print, trying to cram their design vision without regard for the spirit of the medium.

Design is — and always will be — about the transfer of information, and I haven’t met many designers whom that really excites: the fact that if you design something in harmony with the medium and use SEO best practices, your message will reach more of the people who are looking for it. Aldus Manutius rolls over in his grave every time a designer throws up a web page straight from Photoshop’s “Save for Web….”

Another thing I like about working with hackers is that they tend not to obsess over inconsequential details… If you’re just launching a product and don’t have huge distribution, it won’t make any difference to your business whether that photograph is half an inch to the left or not. You have bigger, more mission-critical things to worry about.

What’s a common mistake hackers make when throwing together UIs for their applications?

The biggest oversight I see amongst hackers and designers alike is lack of consideration for the relationship between the chunks of information and the white space around it.

If I have a header that is 16px, and below it is a subhead that is 9px, there should be some rationality to the amount of white space I have between them — maybe there should be 9px since that’s the height of the subhead. There should also be some rationality in the margin to the left of that information.

A lot of times, information is just haphazardly set on the page — lots of things that are just too close together, and it just doesn’t look right. As a result, people start using crutches like color shifts and ornamentation (such as a horizontal rule) when consideration for geometric relationships between elements and white space can go a long way in making things look nice and clean.

Series supported by Rackspace

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More Dev & Design Resources from Mashable:

– 5 Better Ways to Read “Hacker News”
– A Beginner’s Guide to Integrated Development Environments
– 10 Chrome Web Apps to Check Out
– HOW TO: Make Your WordPress Blog More Like Tumblr
– 10 Tools for Getting Web Design Feedback

Image courtesy of Flickr, localcelebrity.

Reviews: Craigslist, Flickr, Google, Hacker News

More About: david kadavy, design, design for hackers, developers, hacker news, hackers, web design, Web Development, web development series

For more Dev & Design coverage: