

Ask HN: Getting over the web design wall? - rufugee

I'm an accomplished coder and techie. I have developed large, intricate systems that I consider beautiful when gazed upon from afar. I've developed successful software, both on the desktop and on the interwebs. I have kept many companies afloat with my aptitude, skill and energy. I have held positions that run the gamut, from lowly "Client/Server Programmer" to CIO of a company of over 4000. I've Rails it. I've Djangoed it. I PHP'd it in the PHP3 days when it wasn't really cool. I Perl'd it before that, and C'd it even further back. Heck, I've even developed complex web apps in TCL. How many of you can say that? ;-)<p>These days, I'm doing a lot of my own projects, on the web, trying to gain some traction. However, with each new project, I hit a wall that I can't seem to get around...I can't for the life of me design a webpage that <i>looks</i> decent. It's completely frustrating and debilitating...and I have to surpass it.<p>I'm confident other HN'ers have had this sort of block and made there way over it or around it. Would you mind sharing your insights? What books, tutorials, or templates made the difference? When you start a new web project, what do you start with in terms of UI infrastructure?<p>Thanks for any advice you can offer.
======
morganpyne
This may not be what you want to hear, but have you considered partnering with
a designer? Is there some reason that you feel you need to also cover this
part of the project too? It's difficult enough to master and stay on top of
all the technologies that have listed, and design is a huge topic which in and
of itself could consume you. It's also in many ways quite tangental to your
existing skillset.

That said if you do insist on being the fully rounded person and doing all
aspects of the project (which I often find myself doing :-) I would second the
advice given here to simply borrow design elements from sites that you like
(90% of 'design' is simply this anyway, with a relatively small number of
people putting actual design principles to use and even even smaller number of
thought leaders doing interesting and innovative design work). This should
give you a start on getting something that looks somewhat decent, and give you
time to think about how far down the design rabbit hole you wish to dive so
that you will at least start to understand the underpinnings and theory of the
things you had been cargo-culting.

Design is not how something looks - it's how it works. Think like an end-user
and step back from the myopic view most developers have of their own
applications. Ask yourself questions like "Is it obvious what to do here? Does
the UI help me achieve my goals or hinder it?" The actual visual
representation is only one part of achieving these goals. Remove redundant,
confusing or cluttered elements on screen. In good design every pixel pulls
it's own weight and white-space is used judiciously. Perfection is achieved
when nothing more can be removed.

Pay attention to color schemes - there are plenty of sites now which will help
you pick a nice color palette. Pick colors which work well together and are
readable. Colors convey a message.

Don't ignore typography either. Googling will give you good suggestions for
fonts which work well together and carry certain types of messages and
associations. Don't use too many fonts on page. Vertical rhythym and
letter/line spacing can make a big difference to a sites appearance.

Something I do before starting sites is to make a proof sheet - sample content
of the basic types of tags, elements and markup you will encounter, and a CSS
stylesheet defining the appearance of these elements. This may help you
visualise the site a little better and will keep you consistent as you build
it out.

------
guynamedloren
Practice, practice, practice. Duplicate. Practice. Duplicate. Create.

If you aren't feeling very creative, duplicate the work of others. Heck, even
if you are feeling creative, duplicate anyway. Try to copy the iTunes
interface. Figure out exactly what methods and techniques are used to design
certain buttons. Then move on to other parts of the interface. You'll learn
about subtle gradient use, shadows, insets, opacities, font, color palettes,
and more. Before you know it, you'll have duplicated the entire iTunes
interface and picked up a huge skillset along the way.

Then do the same with the most beautiful websites you can find. And the whole
time, tell yourself it's not impossible to design that beautiful website
because somebody already did it. If you get stuck, google the specific
problem. Somebody was in your place before. The only way to really learn
design (or anything, arguably) is by doing. When I browse the internet, I
subconsciously examine every single piece of the design and figure out how
they did what they did. For most websites it doesn't take more than a few
seconds because they're remarkably simple once you know a little bit about
design. For those tricky ones, I look a little closer and can figure it out
within a minute or two, sometimes resorting to opening the source and looking
at how the images are sliced up. If something's really busting my brain, I'll
fire up Illustrator and give it my best shot.

Eventually you'll figure out what works for you and what doesn't. You'll
gravitate towards certain techniques and ditch others. If you're smart, you'll
even end up with a "graveyard file" containing all the little pieces that you
might be able to use in future designs. With that graveyard file, designing
gets exponentially easier - it's like having a box of magical tools at your
fingertips.

------
alexchu
I'd say that web design in today's market is as deep of a rabbit hole as
development and coding itself. You really have to know the fundamentals of
design, grid system, the trends, psychology of UX, and know-how to using the
software packages.

Once you have a good grasp of the fundamentals of design theory (golden ratio,
rule of thirds, color theory) it's really easy to adapt to different trends as
you see fit to what you're working on. I agree with what some of the other
guys suggested here, a quick way is to just copy what other sites are doing
instead of trying to invent something yourself.

By copying, i don't mean a verbatim clone of other website's visuals. Look
deeper into how a site is laid out, where certain elements are positioned, and
try to figure out why the designers visualized the content the way they did.

All this would be assuming that you have a good understanding of
photoshop/illustrator. If you don't feel comfortable using photoshop. I'd
suggest you to either spend some time to pick it up (sites like tutplus have
some basic tutorials that are pretty easy to follow
[http://psd.tutsplus.com/category/tutorials/interface-
tutoria...](http://psd.tutsplus.com/category/tutorials/interface-tutorials/)),
or you can just buy a prefab theme from themeforest like pius11 suggested.

~~~
guynamedloren
> _You really have to know the fundamentals of design, grid system, the
> trends, psychology of UX, and know-how to using the software packages. ...
> golden ratio, rule of thirds, color theory ..._

I disagree. I literally know none of those things, and have never even heard
of most of them. I would consider myself a fairly competent designer having
done several freelance projects and as well as my own
(<http://letspocket.com>, <http://madebyloren.com>, <http://snowday2011.com>,
<http://beetnikaesthetics.com>) and always receiving the highest complements
on my work. I think you're approaching this from an academic standpoint and
neglecting the fact that it is very, very possible to learn design from a
"hacker" standpoint.

~~~
accomplice
I'm sorry you received such praise for the design of these, you may have been
mislead. But yes, it's its entirely possible to hack together a look-a-like
design and people will like it, but that does not make it good design. The
same principle applies to code for what I hope are obvious reasons.

------
damoncali
I can't say I'm the coder you are, but I know what it's like to have
lackluster design skills.

Accept that you suck at design and start copying. Find sites that you like,
and recreate the elements that catch your eye. If your experience is anything
like mine, you will wind up with a look that's worse than what you're
borrowing from, but it will be better than what you would have done on your
own. In the process you get to see why things look good or bad. Note that I
don't mean snagging CSS and images, I mean actually recreating the elements
from scratch.

Do that lots of times, and eventually you go from sucky to decent. Not sure
how to get from decent to good.

~~~
henryfarbles
I've been doing more web programming lately and have been doing pretty much
the same thing. These days when I visit a web site I pay attention to the
design and keep an examples folder in my bookmarks that I can reference for
ideas and code.

------
georgecmu
Is your design block general or web-specific? Can you make a decent-looking
presentation in powerpoint? Do your word documents look like geocities web-
pages ca 1996? Any useful advice would necessarily be context-dependent.

In any case, my specific advice for dealing with web page design is to
'outsource' it. Build your sites in a themeable CMS and just play with themes.
It sounds like you can tell a good looking design from bad, so just spend the
time trying different looks, and something will come out in the end.

~~~
rufugee
I think I could probably mock something up that was decent in powerpoint or
something similar. In a past life, I studied advertising, so I had a bit of
schooling in paper advertising and creating a proper layout. I struggle taking
that to the web though...getting it to look just right with the right mix of
CSS, image slices, etc. That's a dark art to me.

------
_pius
<http://themeforest.net>

------
gexla
"I PHP'd it in the PHP3 days when it wasn't really cool."

Are you saying PHP is cool today?? ;)

This is a tough issue to get around. I could list some ways to get better a
web design but it's probably a waste of your time to try it. Like with
programming, a good eye for design comes with a lot of practice.

There was a post the other day about how someone used crowd sourcing sites to
create a decent design, perhaps you could look into something like that.

Otherwise, on a very low budget you might just use freely available templates.
Once the site starts paying it's own rent, then you could start looking into
hiring someone to create a more unique / branded design.

~~~
rufugee
Hah...yeah, sorry. It wasn't really cool in the PHP3 days. PHP4 came along and
suddenly, it was very cool. Then Rails came along and suddenly PHP as Brian
from the Breakfast Club ;)

Regarding templates, I'd love suggestions for decent ones that lend themselves
to customization. The free ones out there seem to be chock full of images in a
way that makes styling them to any thing else difficult.

And, templates aside, I simply must get across this design chasm. I've crossed
so many technical hurdles at this point. Thanks for your suggestion though.

------
khanm
I'm sort of the opposite, where when it comes to development the most I can do
is create a nice feedback form. My biggest achievement thus far is printing to
a text file.

But I have realized that the time I spend on trying to find out how to
completely code what I need will take far too long and should be complimented
by someone who eats and sleeps development.

So sir my point is maybe instead of trying to learn a whole new profession it
would be wise to partner up or even outsource that part of it.

And if you need it done for free try bartering your dev skills for design
skills.

------
Dramatize
Web design is mostly typography/copy.

I'd put most of your effort there.

Have a look at sites like Pinboard or Instapaper for good examples of simple
type based design.

Sites don't have to be flashy to be successful.

