Ask HN:Beautiful Web UIs - how?

https://news.ycombinator.com/item?id=3247322

by chris_dcosta • 15 years ago

16 29 15 years ago

news.ycombinator.com

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• 15 years ago

I can't speak for all developers, but when I'm knocking up a quick and dirty demo, ThemeForest is my friend :)

bsaunder• 15 years ago

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_dcosta4• 15 years ago

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• 15 years ago

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_dcosta4• 15 years ago

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• 15 years ago

ThemeForest my friend. The pages come with a demo, then just use them as modular components. Worth every cent

Axsuul• 15 years ago

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• 15 years ago

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_dcosta4• 15 years ago

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.

AznHisoka3• 15 years ago

The best designers copy different things from different sites, combining them in a way to make it distinct and unique.

ahoyhere6• 15 years ago

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?

omarchowdhury2• 15 years ago

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.

chc• 15 years ago

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• 15 years ago

The Bootstrap CSS framework is a very good starting point:

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

decadentcactus• 15 years ago

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).

ahoyhere6• 15 years ago

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."

snowwrestler2• 15 years ago

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.

ahoyhere6• 15 years ago

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?

boboroshi• 15 years ago

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_dcosta4• 15 years ago

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• 15 years ago

themeforest.net - the design challenged programmer's best friend.

Ask HN:Beautiful Web UIs - how?

Related Stories