HN Explorer

Ask HN:Beautiful Web UIs - how?

16 points by chris_dcosta ↗ HN
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?

29 comments

[ 6.1 ms ] story [ 240 ms ] thread
MattBearman
I can't speak for all developers, but when I'm knocking up a quick and dirty demo, ThemeForest is my friend :)
bsaunder
Programmers 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
This 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
I 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
I'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
ThemeForest my friend. The pages come with a demo, then just use them as modular components. Worth every cent
Axsuul
Dribbble 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
I'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
This 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
The best designers copy different things from different sites, combining them in a way to make it distinct and unique.
ahoyhere
The 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
You 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
Oh, 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
No 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.

ahoyhere
Visual style != design. End of story.
AznHisoka
Please, stop trying to make your specialty some special voodoo that only gifted, special people will know about. It's a commodity.
ahoyhere
Ah, it only chafes when I apply your statements back to you about your profession. I see.

Point of fact: I started as a visual designer when I was a teenager. Then I learned PHP, then Ruby, then JavaScript, off which I made lots and lots of money and no little fame. Then I got really interested in the way software WORKED and turned into an interface designer. Who designs and develops her own shit. Now I make and sell products directly to people who use them, nobody will "hire" me for anything ever again.

What is my profession exactly, that I am preciously trying to protect?

AznHisoka
No it isn't.

And even good programmers do "copy" certain elements (programming style, idioms, design patterns) from good code they see. It's like reading code is such a great way to be a good programmer.

chc
This is actually kind of close to the truth, though not as phrased. The best programmers do indeed crib cool ideas they find in other people's work and combine them in original ways. Of course, "website" is not a useful unit of programming information like it is for web design, but if you replace it with equivalent terms like "programs" and "academic research," then you're not too far off.

Disclaimer: I actually do agree with Amy's point that randomly stealing design elements without understanding is like copy-pasting code from Experts Exchange. But imitating and remixing is such a time-honored tradition among artists that I hate to see it painted with such a broad brush. There's good stealing and there's bad stealing, and it mostly has to do with how intelligently you do it.

thijsc
The Bootstrap CSS framework is a very good starting point:

http://twitter.github.com/bootstrap/

decadentcactus
I 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
Good 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
Well 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
No, 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
How 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
That 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
Good 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
This 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
themeforest.net - the design challenged programmer's best friend.