Ask HN: Visual Design for Hackers

There's a whole stack of apps there, developed within 48 hours by small groups of people. They're not all beautiful, but there is (to my eye) a pretty high standard of presentation for most of them.

I am sure I am not alone in feeling like there's this chunk of knowledge I'm missing - in terms of how, and when, to go about making something beautiful.

I'm fascinated by the concept of optimizing user experience - it certainly has the potential to make or break an application's popularity. If you can spend valuable time tweaking code to make it more appealing to the compiler, why can't it work in the other direction too? Though I don't think it's reasonable to expect myself to be incredible at both, I'd like to be able to put together a prototype that looks nice. After all, I wouldn't show people code that I knew was bad and ugly.

Part A - I would love to know - how does this aspect fit into the flow of the project? At what point do you start turning things from black-text-on-white-background into a beautiful and intelligent layout? I'm sure it's usually incremental, but is there a specific point at which you decide to shift focus over to implementing your UI? I know I usually go through many notebook pages of UI ideas even before I've written any code. Is it worthwhile doing mockups in photoshop at this stage? Showing different designs to people and asking for feedback? Or do you usually do this after your core functionality is built? And where do you draw the line, say 'this is ready enough for now!' and release the thing?

Part B - In terms of user interface and usability, there's a lot of information out there. Much of it, however, is from the early days of graphical computing and the web. There are still great things to learn from stuff like Joel on Software but I'd like some good information about user interactions and expectations in the AJAX era. There must have been some more wisdom accumulated in the last decade! I'm looking for some shoulders to stand on - 'our experience showed us that you should never do because users find it confusing'.

Part C - I've always been curious about how small teams of people manage to cope with the graphical elements of web application building. Does a team of 2-3 people in an early days startup usually contain a designer/artist? Is that something you can reliably outsource? Is it ever a good idea to have your design done by someone else and then shoehorn your view code and javascript into it (for a prototype/beta), or should it always be a closely collaborative process?

Part D - Finally - I'm interested in any of you people who can see BOTH sides of the coin. If you started off as a programmer and then learned how to make stuff sexy and usable - what put you on that path? Where did you start learning? What were your major obstacles, and how did you overcome them?

Looking forward to hearing what everyone has to say.

Dan

The Gestalt Principles The guiding theory in understanding how the human brain process images and visual data. http://graphicdesign.spokanefalls.edu/tutorials/process/gest...

Web Typography Great resource for understanding typography and especially for the web http://webtypography.net/

A List Apart I am sure you are already familiar with this awesome publication by the Happy Cog crew and other contributors. To me this covers most of the on screen design issues in today's world and it keeps on evolving which is awesome. http://www.alistapart.com/

I Hope this help!

A: I usually have a vision in mind for the project or the feature. To do this I try and break it down into smaller parts and optimize for the one thing I want the users to do for that part. For complicated designs I go through ideas on a notepad before I settle on something. The most important part of this process is to understand why a certain design element needs to be put in. If my design elements lack purpose I take them out.

Once I have that then I go about building stuff. Sometimes the end result will differ from the vision in which case it might literally be "back to the drawing board".

B: I haven't found too many recent ones. But I generally prefer patterns like these - http://developer.yahoo.com/ypatterns/

C: I'm generally against outsourcing UI/UX. I think specific icon and graphic design work can be outsourced. To me UI/UX is the app itself and early on you don't necessarily have a clear view of what it is going to be.

D: I started off as a developer and found the need to incorporate better design. I started by trying to understand what I like and why I like it. I found a couple of big problems: there weren't too many good resources that catered to our type, most design advice wasn't practical enough and improving my taste took a long while.

I'm putting together a series of posts on what I learnt, hopefully that helps people out. Feel free to get in touch via Twitter or email.

You definitely need product developer(s) on your team if your startup is consumer facing at all. In such a small (2-3 person) team, everyone needs to do multiple jobs, so if none of you have decent design skills, then start practicing now.

Part A - Usually a proof-of-concept happens first either in basic wireframe mockups or basic/ugly code. Once you'er clear on the product you want to build, then full designs are done in Photoshop or, once in a while, direct HTML.

Part B - I would mostly ignore that stuff. Simply look at great/big sites and see what the do right, but more importantly look at what they could improve and do that yourself. Basically, make your interface design as simple as possible while having the minimum feature set to make your product useful - finding that balance is where you become a great product developer.

Part C - Don't outsource your design. If you commit to design as a core competency in your development team, then you understand that design is not just visual - design encapsulates everything that the user experiences with your product.

Part D - I started off as a cartoon animator in college, but found I was better at coding, then I realized that to make great products, I need to have great design. I didn't have a design monkey, so I started creating my own designs (poorly at first) taking inspiration from products I enjoyed. To overcome obstacles in design, I simply take the worst part of a page/workflow and fix that first... repeat until the product is due or there aren't any cringe-worthy features.

A - Our design process starts with a discussion of feature ideas and requirements from the code side. Then work goes in parallel until each team has a workable mockup/prototype. This period of work alone is critical to the development of the app from the visual and user experience side of things. It also gives me freedom to try lots of new ideas. I'll usually do a couple of revisions based on comments from my co-founders, and then get some outside opinions.

B - I fear that user interface and usability comes more from trial and error than reading. I haven't found a good resource for the technical side of design, but olalonde's link to uxmovement.com looks great.

C - Our startup has 2 coders and 1 designer. We're a rails shop, and I know enough ruby to implement my designs. This mix usually works really well as far as delegation of work. I'm not sure how standard this is.

D - Can't say much here since I started on the design side and have more recently been programming.

As an aside - if you're comfortable in css and are adding a new page or feature to an existing site, I've found that it can be fast to prototype in html rather than Photoshop/Illustrator.