Ask HN: Visual Design for Hackers

A fun way to learn a little or at least get inspired is to check out LayerTennis on fridays:

http://www.layertennis.com

Each round, each layer, ask yourself "do I like that or not"? and then try to articulate why or why not. Why is this layer: http://layertennis.com/100910/07.php not as effective as the next volley: http://layertennis.com/100910/08.php For example, I didn't notice at the time that the quote had six letter 'O's in it, but now that I see it it's hard to miss. They create a lot of repetition a rhythm that ties them to the shape on the other side. The symbol and the text relate to each other even before considering the meaning of the words.

Seriously, one of the hardest parts of design is to learn how to form strong opinions and understand your reasons for them, without being arbitrary. Design is just a million tiny decisions.

Hi Dan

I also think that the stuff that came out of Rails Rumble looked pretty awesome especially done in 48hrs. I created ShelfLuv in about that timeframe as well and see both sides of the coin to use your terminology.

Part A: To me the design and UX is first and foremost. Especially w/ a hackathon - think of your product like a runway fashion show. On the front side it just needs to look and work perfect. Under the hood for me, out of the gate doesn't matter as much as long as it works and isn't slow to the point that it affects the user's perception of the product. I typically try to think of the user's interaction/perception/experience first. Mockups in Photoshop are pretty useful to me, but so are HTML mockups. It all depends on what I am trying to achieve. A visual experience - playing around w/ that would be best served to me by toying around in Photoshop. An interaction experience, mocking variations of that in jquery is best because I can click around. I can touch and feel my app. However I mostly start everything with sketches on pieces of paper or my notebook. I try to draw different variations. I look at how other webapps/apps do them. With ShelfLuv there werent many ideas or variations. I didn't start having variations until I had something working to show. If there's nothing to show yet, I feel that people have no baseline with which to compare. It's a lot easier for most people to say A is better than B, than to just show them B and ask them if this is any good.

Part B - I find that a layperson is immensely useful in this arena. One of my sounding boards is my wife. She's very intelligent but is not what you would call a techie or designer type. Alot of times I just want to use icons but many nontechie people will have no clue what these icons mean. Of course it's a compose icon - it's a pen and paper.

Part C - I would say you can outsource visual design, but it would be hard to outsource the interaction design and how the app works. Interaction is a process that can be very iterative. You try something, it doesn't work and you try it again.

Part D - I am an engineer by training but started focusing on user experience and interaction about midway in my career. I felt like I could have the most impact on users through a great product experience. I started by reading a lot of blogs and sites of great designers. I look at and try a lot of web apps and sites. I also buy a lot of iphone/ipad apps to see how they work and what they've done. Major obstacles for me is that I'm not a graphic artist and I can't design from scratch. I know designers who like to create textures and stuff from scratch and to me I feel more like a cobbler of design elements rather than an original creator of design. I will put this design element together with that element. I'm basically pretty handy at tweaking and modifying in Photoshop but ask me to create stuff in Photoshop and Illustrator from scratch using the pen/brushes/paths and I'm lost.

Hi Dan,

First off: I gave a talk on this very topic at DjangoCon EU 2010. Video: http://djangoconeu.blip.tv/file/3685673/, slides: http://www.scribd.com/doc/32311867/Design-for-Developers.

A) there always comes a point in any project when I have that "fully baked" feeling -- a stage where I feel like I have spent enough time putting myself in the users shoes to understand how they can best accomplish their goals. Sometimes this comes quickly, and sometimes not -- it truly depends on the project. I don't go further than sketching until I've reached this phase; sketches are cheap and I don't need the high resolution which photoshop affords. Generally, I'll spend some time in photoshop after the sketching stage to work out a visual design "langauge" -- what's the colorscheme, what visual conventions am I going to use throughout the site, etc. I'll take one or two "core" parts of the site and mock them up in photoshop to figure out how the visual aspects affect the design, but I won't do every single page in photoshop -- it's a waste of time.

B: I don't know. There's general stuff about performance from Steve Souders, and overall I think resources like ALA are probably a good starting point.

C: It depends on your product, but I'd argue that good design is something that happens primarily before code gets written. The frontend of your app should inform your backend, and vice-versa -- ergo a designer co-founder is an extremely important asset, IMO. Every project with design "added later" looks like it had the design added later, not baked in from the start.

D: I'm a designer/developer combo, coming from a formal background in computer science.

I guess I started getting into graphic design and photography during high school. Learn about graphic design for print since it has a lot of history; the web is still in its adolescence and is heavily informed by this history. Don't neglect to learn a little about typography. In the end the web is mostly about reading words, so it behooves you to learn the art and science of arranging words on a page so as to maximize legibility and beauty.

The biggest obstacle to learning this stuff is a broken understanding of design. It's a discipline like any other; you might not have the aptitude to become a master but you can learn the basics and become proficient, just like you did with code. It took you a decent amount of time to become a proficient coder; don't assume that three weeks of reading will turn you into a proficient designer. Stick with it, learn the terminology so you can start to read things written for an audience of designers, and don't forget to actually do stuff yourself -- like in code, there's no substitute for sitting down and grappling with some work on your own.

I'm not sure if this comment is quite appropriate on this thread (as it is a borderline commercial offer and quite possibly off-topic for the OP's question), but I think your model is interesting and I'd love to know a little more.

1) Is your 5-10 hours/week offer indefinite or for some fixed period? Are you capping the number of start-ups you are working with? (This offer doesn't seem to be infinitely scalable.)

2) Do you see this role more as employee-working-for-stock or as angel-investor-contributing-design-skills-instead-of-money? Maybe another way of asking that is: are you taking direction from the founders/owners or are you offering advice/support as you see fit? Are you OK with a founder who only wants you slice up a PSD she designed or are you looking for an adviser role?

3) I think there is a lot of sense in pg's advice around giving up a small percentage of the company in exchange for a much greater chance of success, but I'm not sure it is obvious that your offer is a "great deal" for the founders as you state.

I'll accept that in some cases a good design can increase the value/success of a company by 10% or more but I think in this specific scenario (early stage start-up, possibly with long-hanging fruit design challenges):

a) A 10% improvement in the current value of the company probably isn't worth 3% of the eventual value of the company if it is successful. That is, it may be easy to take a company from $1000/mo to $1100/mo through 5-10 hours of design, but barring major oversight I think it will be a lot more difficult to take a company from $10M to $11M through graphic/web design alone.

b) On the founder side of the equation whether or not the design work will increase the value of the company more than it cost is really only half of the question. The other half is comparison shopping: is there a cheaper way to do this?

For instance, if you assume a modest $500,000 exit then 3-5% is $15,000 to $35,000, which may be a roughly competitive rate for design services (e.g., that's $60 to $100/hr if you assume 50 5 hour weeks). Obviously if you assume a $1M exit those rates double. If you assume a $5M exit those rates grow by an order of magnitude, and I hope I'm not a cheapskate in thinking that $600 to $1000/hr is a disproportionately high rate for all but the most remarkable web designers and even then is probably only appropriate for the most design sensitive web apps (whichever those are).

I may well be wrong, but I have a hard time believing that for most start-ups a bit of early stage design work really provides an additional 6-7 figures of valuation in the long run. Is that what are saying is "ridiculously easy"?

c) A moderately successful start up should be able to afford market rates for design services, and I'd guess that it is rare for great rather than merely acceptable design to be the difference between moderate success and failure. Why shouldn't a firm just limp along with an acceptable design until they can afford a great one? (And if they don't have an acceptable design yet they can certainly get one for less than 3% of the company.)

In other words, I think the major challenge to your offer isn't about whether or not design can offer a 10% improvement but more about whether or not 3% of the company is the easiest/cheapest/lowest risk way to get that improvement.

One reason that Rubyists are Rubyists and not Java developers is because they care how stuff looks rather than solely how it works. Given this, there's an aesthetic culture that doesn't exist so greatly in other spheres.