

Ask HN:Beautiful Web UIs - how? - chris_dcosta

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.<p>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
I can't speak for all developers, but when I'm knocking up a quick and dirty
demo, ThemeForest is my friend :)

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

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

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

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

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

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

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

------
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?

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

------
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?

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

