Ask HN: Getting over the web design wall? | Hacker News Reader

Ask HN: Getting over the web design wall?

11 pointsrufugee16 comments

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

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 looks decent. It's completely frustrating and debilitating...and I have to surpass it.

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?

Thanks for any advice you can offer.

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.

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.

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...), or you can just buy a prefab theme from themeforest like pius11 suggested.

Thanks Alex. I spend most of my time on linux, so photoshop/illustrator hasn't been an option, but the gimp and inkscape have. Still, I do have a macbook over in the corner and largely unused, so perhaps it's time to invest in some adobe software?

yea I would definitely invest some time learning photoshop at least, it's the most powerful package up to date. Since almost all designers use it, it'll be easier for you to communicate with them knowing the basics of the software. Let me know if you need any other help in this area, I'll try my best to point you to some resources.

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

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.

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.

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.

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.

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.

http://themeforest.net

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

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.

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.

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.

Reply on news.ycombinator.com