Ask HN: Visual Design for Hackers

[B] - Definitely some good resources I've used in the past (being a developer wanting some inspiration) - one more I'd add to the list is http://sixrevisions.com - I like to pop in there every few weeks to see what's new - they typically have articles similar to Smashing in topic

Hi. I am a designer that is trying without too much zeal to learn to program. Here go some advice, no idea whether it helps.

First, i believe that "looking great" and "being good user experience" are actually very, very different things. Designers are good just at the first. The second remains a dark art for programmer and designer alike.

For example, thinking about which user input you need or could do without, which order to ask for them and so on, falls i believe neither there nor here. Which effect you should apply to the input box is utterly immaterial, and i would venture that a competent designer can make any kind of use-process beautiful to look at.

As for making beautiful, i have found no way to develop this except by endless boring practice. The best illustrator is generally the one who has done more illustrations. Rules or techniques (as in crutches) tend to give good results in the very short term and become stifling very quickly.

If you lack the stamina or interest to simply draw, i guess this is not a bad thing. The other way to see the thing is that you'll eventually get better at it.

That said, designers do tend to develop a variety of manias and sensibilities that, well, seem to be related, vaguely, to their craft. If you're willing to try to get that, i would recommend a very, very old book. I know this goes directly against what you were looking for, but, again, that is my opinion: Symbols and Signs, by Adrian Frutiger. (Amazon has it, not sure if it is bad form to put an amazon link here... Also, i do only know the Brazilian edition so i can give no advice about that...). Maybe this book can come out sounding like full of rules, but that is not the point.

Another, more recent book that is also incredible, but even more paranoid (the guy goes pages and pages discussing commas, then semi commas, then colons, and i just love it!) is The Elements of Typographic Style by Robert Bringhurst.

Finally, designers always do end up getting a bit of cognitive psychology, and it is a good thing, but no self-respecting psychologist could purport to understand the human cognitive system, so i would say avoid the ones who are too sure of themselves like how-to guides to Gestalt, those are just gimmics. Find something that is serious about cognitive science, but not serious enough that you'll sleep, and that is it. You can always go back for more...

As a friend of mine says - marketing and good UX is like laying grass out for the goats. It must be easily reachable and in digestible chunks.

1) Mock-ups. Supposed to be mocked upon. Take a good page design you like, import it into Photoshop (or w/e) and start boxing the important elements. A lot of well designed sites are on the 960px width bandwagon (even Apple's homepage + most YC startups). Short answer - look up Blueprint CSS framework and 960px grids on Noupe.com

2) Mockingbird is awesome! Just worry about the creative flow first, then put it on a grid.

3) Like a special effect or design on a site, google "jquery site-name effect-name" will usually net some good plugins. Learn and repeat. Don't know what effect-name is? Firebug it :-)

I am by no means a true designer, but I feel that the only thing stopping you/me/anyone is the labeling. When you feel that happening, just think of Iron Man, he designs the whole stack ;-)

Part A - I am on the side of completing as much UX up front as possible. Bad visual design is something that no one can ignore. I think that ideally before you even have done the "black-text-on-white-background" prototype you start with UX.

Part B - Steve Krug has a couple of simple concrete usability books. Other than links I have seen mentioned. http://ilovetypography.com/ learning good type will help a ton with design http://www.useit.com/ Jakob Nielsen is kind of the godfather of usability, some people love him, some hate him, either way you will learn something from this guy. Also, going through tons of websites and critiquing them by yourself or with peers, writing down everything that works well and doesn't work well, that you would change. Do little usability tests on your sites, even on sites that aren't yours with family or peers.

Part C - I don't know as much about startups. I do know that having a designer on hand is much nicer to work with than outsourced. Ultimately I think it would be like dealing with anyone else outsourced in terms of reliability.

Part D - I actually started as a designer, and IE 6 crushed my soul. I am still very interested in UX though. I think starting as a programmer, I would just try to recreate designs you think are appealing. I would also try to learn the grid system. Use CSS frameworks as training wheels that have a solid grid, and decent typography (eg. Blueprint). I started constraining myself to HTML and CSS, and I think you should too, leave Photoshop alone until you can make decent designs in just HTML and CSS. Then, when you are completely comfortable using the two, then look to PS to add details that you can't achieve otherwise. The big obstacle you will run into, is that you will feel like you aren't making as good of designs as designer X. Design in my opinion is much more personal and emotional than programming so don't let that get to you.

Good Luck!

Part A - I always make few screens in Photoshop before coding. These screens include form, items listing and generic text page. These are not complete and finished designs, they just help me to visualize stuff upfront, and to design some common elements (buttons, form controls etc). After that I customize every screen based on content it displays.

Part B - There are many sites that write about UI and UX, they should be googleable :)

Part C - I'm doing both development and design of our apps. I think that designers that don't code can't really design good app because you must have all of the interactions under control, and for that you must understand how things work both on server side and client side. I don't think they should know how to setup server and deploy app, but there must be some understanding of how things work.

Part D - When I started working as a developer, I worked in web studio that also did great design. But they also gave me the ability to try and design stuff along them. They taught me about typography, layouts etc. I even did some print stuff because I wanted to learn it. Little by little pieces started to fall in place. I'm far from great designer, but I can design things that are nice and usable. The biggest problem is that I really like boxes. When I'm designing stuff I'm automatically placing things so they can be easily sliced. But I'm working on it.

My advice is to just start working on some designs, and to find some friendly designer that will help you with constructive criticism.