7 ms·

Ask HN: Visual Design for Hackers

137 points by DanI-S 16y ago

Take a look at the Rails Rumble 2010 entries: http://railsrumble.com/ 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 <xyz> 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

enra 16y ago
We participated in the Rails Rumble with Splendid Bacon http://splendidbacon.com http://splendidbacon.com and I did the design and most of the fronted ui. (I wrote a summary about the process: http://news.ycombinator.com/item?id=1803155 http://news.ycombinator.com/item?id=1803155) A) - Usually in our projects or in my projects, I try go with the design first, starting with describing what we are doing, why, for who and how.(The Five W’s Of http://52weeksofux.com/post/890288783/the-five-ws-of-ux http://52weeksofux.com/post/890288783/the-five-ws-of-ux). The concept, being 5 lines or 5 pages, sets the background for the whole project. From there I try to go with sketches, or wireframes to iterate the views or the interaction flows. Then start doing the ui in Photsohop. When I'm quite set with the UI I start implementing that and iterating the interface along the way. After that, or about in the same time we start coding the features. B) - I'm not sure how much wisdom we have accumulated. About some things sure, but natural multitouch interfaces or multimillion user web services are still quite new. If we would have followed Jacob Nielsens advice on everything, we woudn't have sites we have today. I think the best way is to keep updated what's out there and from there you can get inspired to find your own solutions. That's why I have iPads & iPhones, try to use most of the new services to understand how they work and how they're built. I try to learn from other people and their process (like with simple todo app, Cultured Code produces a lot of sketches and mockups http://culturedcode.com/things/iphone/makingof/ http://culturedcode.com/things/iphone/makingof/ and one of other Rails Rumble attendees described their process: http://www.thevisualclick.com/notebook/2010/10/2010-rails-rumble-the-design-process-of-commendable-kids/ http://www.thevisualclick.com/notebook/2010/10/2010-rails-ru... C) - In our company we usually have 2-3 person teams, where one of them is a designer, which is something I would recommend. Personally I think the best is if the designer can also implement the design, because Photoshop mockup is not the actual design, the app or it's interface is. For best result, you need to be charge of the whole interaction. D) - I'm not that sure which way around I got started, I had some classical arts education as a kid, and later started making websites and developed some web services. I'm quite bad programmer, altough in addition to html&css I can handle javascript, rails and php. I think the first step is to know what's is great and what isn't so you know how well you're doing in your own projects. So develope your taste by surrounding yourself with great design. And like in any other learning, the key is just practice. If you have coded hundreds of features, then by the same time I might have done dozen of designs. For me the hardest part still finding the right process for some cases. Sometimes I'm able to see the whole thing right way, and sometimes I'm just stuck or feel that something is wrong with the design without knowing what.

137 points by DanI-S 16y ago

enra 16y ago

We participated in the Rails Rumble with Splendid Bacon http://splendidbacon.com http://splendidbacon.com and I did the design and most of the fronted ui. (I wrote a summary about the process: http://news.ycombinator.com/item?id=1803155 http://news.ycombinator.com/item?id=1803155) A) - Usually in our projects or in my projects, I try go with the design first, starting with describing what we are doing, why, for who and how.(The Five W’s Of http://52weeksofux.com/post/890288783/the-five-ws-of-ux http://52weeksofux.com/post/890288783/the-five-ws-of-ux). The concept, being 5 lines or 5 pages, sets the background for the whole project. From there I try to go with sketches, or wireframes to iterate the views or the interaction flows. Then start doing the ui in Photsohop. When I'm quite set with the UI I start implementing that and iterating the interface along the way. After that, or about in the same time we start coding the features. B) - I'm not sure how much wisdom we have accumulated. About some things sure, but natural multitouch interfaces or multimillion user web services are still quite new. If we would have followed Jacob Nielsens advice on everything, we woudn't have sites we have today. I think the best way is to keep updated what's out there and from there you can get inspired to find your own solutions. That's why I have iPads & iPhones, try to use most of the new services to understand how they work and how they're built. I try to learn from other people and their process (like with simple todo app, Cultured Code produces a lot of sketches and mockups http://culturedcode.com/things/iphone/makingof/ http://culturedcode.com/things/iphone/makingof/ and one of other Rails Rumble attendees described their process: http://www.thevisualclick.com/notebook/2010/10/2010-rails-rumble-the-design-process-of-commendable-kids/ http://www.thevisualclick.com/notebook/2010/10/2010-rails-ru... C) - In our company we usually have 2-3 person teams, where one of them is a designer, which is something I would recommend. Personally I think the best is if the designer can also implement the design, because Photoshop mockup is not the actual design, the app or it's interface is. For best result, you need to be charge of the whole interaction. D) - I'm not that sure which way around I got started, I had some classical arts education as a kid, and later started making websites and developed some web services. I'm quite bad programmer, altough in addition to html&css I can handle javascript, rails and php. I think the first step is to know what's is great and what isn't so you know how well you're doing in your own projects. So develope your taste by surrounding yourself with great design. And like in any other learning, the key is just practice. If you have coded hundreds of features, then by the same time I might have done dozen of designs. For me the hardest part still finding the right process for some cases. Sometimes I'm able to see the whole thing right way, and sometimes I'm just stuck or feel that something is wrong with the design without knowing what.