5 ms·
Ask HN:Beautiful Web UIs - how?
I don't know about you lot, but I often hear programmers in general complaining that they can't design, yet many of the web site demo's I've seen recently are beautiful, and IE compatible.
Where are people getting their designs from? Do they have a designer on the team? How are they "just knocking out" good designs so quickly? Or are they paying some photoshop wiz to do it for them?
- MattBearman 15y agoI can't speak for all developers, but when I'm knocking up a quick and dirty demo, ThemeForest is my friend :)
- bsaunder 15y agoProgrammers in successful startups (like the ones producing the demos you mention) ignore what people tell them that they can't do. They just try and they get something done. Then they iterate as long as "the demo's ui sucks" is the number one problem. Probably the designs are sourced from their experiences. Just like you, many of them have seen beautiful sites. It's not impossible to find a few you like and mix/match design elements plus some of your own originality to produce your own variant.
- chris_dcosta 15y agoThis is a very interesting point well made. It's not what you said, it's what you didn't say: about prioritising work effort. But surely most creative programmers are never happy to draw a line under the coding, to concentrate on the graphics. What's your experience? Sounds like you know...
- TorbjornLunde 15y agoI think it is one of two: 1. They hired a designer to work with them. 2. They have become good at design themselves. It’s kinda obvious when you think about it.
- chris_dcosta 15y agoI'm looking for a consensus of experience. There is one other possibility, that out there in start-up land is a whole bunch of graphic designers not getting paid but just working with startups because that's what they're into.
- malux85 15y agoThemeForest my friend. The pages come with a demo, then just use them as modular components. Worth every cent
- Axsuul 15y agoDribbble and PatternTap are my goto's for inspiration. I pretty much browse Dribbble everyday. Basically, a beautiful UI comes from iteration in my opinion. I feel it's counter-productive to immediately strive for a beautiful interface. Rather, start with something plain and grayscale and you'll soon discover ways to slowly make it more beautiful and usable just based on interfaces you encounter on a day-to-day basis.
- enleb 15y agoI'm in a similar situation to you. I've spent the past 2 hours browsing themeforest as recommended by others in the thread. There are some gorgeous designs on there but they seem heavily geared toward blogs and admin interfaces...? Maybe I'm not looking in the right section but I can't seem to find anything suitable for consumer style web apps. It would be really helpful if someone could post specific templates that they've used on their projects
- chris_dcosta 15y agoThis is not going to help in the beauty department but as someone mentioned usability above you couldn't go far wrong with Balsamiq - it's actually fun to use, which you can't say for most design software.
- AznHisoka 15y agoThe best designers copy different things from different sites, combining them in a way to make it distinct and unique.
- ahoyhere 15y agoThe best programmers copy from different sites, combining their code in a way to make it distinct and unique. Do you see why this is inaccurate?
- omarchowdhury 15y agoYou are comparing apples to cantaloupes here. He's talking about imitating or drawing inspiration from other websites for the visual elements of a particular website. Everyone does this.
- ahoyhere 15y agoOh, is there a button in Photoshop that helps you "draw inspiration"? Or can that happen without Photoshop or any design tool whatsoever? It is the exact same thing.
- omarchowdhury 15y agoNo it isn't. You can look at a visual element or style on another website and mimic it for your own. You can't look at, say, Facebook and determine the exact code structure and replicate that.
- thijsc 15y agoThe Bootstrap CSS framework is a very good starting point: http://twitter.github.com/bootstrap/ http://twitter.github.com/bootstrap/
- decadentcactus 15y agoI implemented this yesterday into a project I had been working on. Admittedly, only one page and a pretty simple layout so far, but it's very quick to get benefits from it (especially grid layouts).
- ahoyhere 15y agoGood design has nothing to do with being a "photoshop wiz." Unless, of course, you as a developer describe your main skill as being "a text editor wiz."
- snowwrestler 15y agoWell Photoshop is a bit more complex software than a text editor; it's more of a deep toolset than just a frame. Being great at Photoshop means that at least the tool command is there to do great design work. It's probably more akin to a development platform, like saying someone is a "Ruby wiz." It still doesn't mean they'll do great work, but at least they CAN do great work. If someone sucks at Ruby (or Photoshop) they are going to have a hard time developing great products with it.
- ahoyhere 15y agoNo, saying somebody can use Photoshop is not like saying they're a Ruby whiz. Here's how you can tell: "Oh, Bob! He's an Eclipse wiz!" How much does that actually tell you about Bob's programming skill?
- snowwrestler 15y agoHow much does saying someone is a Ruby wiz tell you about the programs they create? Knowing how to write functional, efficient code is no guarantee of producing a useful, interesting, or beautiful program. Edit to add: beautiful software is a design problem--encompassing both function and looks. If the functional design is good, but the person doesn't know Photoshop, it makes sense to hire a Photoshop wiz to help them with the looks. I think we're in agreement, though, that being good with the tool is not by itself evidence of good design.
- ultimoo 15y agoThat definitely doesn't tell much about Bob's ability to craft beautiful code fast. However, in my experience, people who have mastered their tool-chains are most likely good developers too.
- boboroshi 15y agoGood design starts with good usability. There are no tech shortcuts (bootstrap or otherwise) to this. Your application's interactions are probably unique. There may be some design patterns (God, I hate the abuse of that phrase) that apply. Bootstrap, etc are simply tools used to implement interfaces. They are not magic bullets. Design, like programming, takes time. It's not about gradients or drop shadows, but those are tools used in design. It's often an iterative and collaborative process. It is not, however, "Agile". You can't design the interaction for a piece without looking at the whole. Find someone who cares about interface, interaction, and usability. Ideally they can do graphics, html, and css. Ideally they've done some user testing before or are just really good at getting users. If you find someone like that, be prepared to pay. The good ones are few and far between and all that I know are gainfully employed or have hourly rates exceeding $200USD/hr. If you want to learn more about this, there's a library of stuff out there. But just reading a bunch of books won't suddenly make your UIs prettier. But if you implement what you learn, it may improve their functionality. And that's far more important.
- chris_dcosta 15y agoThis is a "form follows function" argument. Which of course has its supporters and I'm one, But there is an argument that "it's what you leave out that makes it good" which means you are thoughtfully not putting in elements - and this requires good judgement. Maybe I'm getting old, but it is just quite amazing that engineering / CS graduates have this sense seemingly "built-in".
- dholowiski 15y agothemeforest.net - the design challenged programmer's best friend.