Ask HN: (Backend) coders, did you learn web design? If yes, how? | Hacker News Reader

Ask HN: (Backend) coders, did you learn web design? If yes, how?

20 pointsjaipilot74715 comments

I can work with backends but when doing projects solo, the site design becomes very important and I suck at it. If you could list some resources you started with, it'd be very helpful.

View on HN

I think there's an inherent tension in frontend web programming, particularly when you're the sole operator in charge of UX, visual design and implementation.

The part of you responsible for the UX and visual design wants to design nuanced flows and pretty pages. The part of you responsible for implementing wants designs that will be pragmatic (or easy) to implement.

My own personal exploration of this stuff began in late 2009, when I got into web programming again after a nearly 10-year hiatus.

What has helped me is to study design and implementation separately. The more knowledge I have of the modern frontend ecosystem, the more I expand the realm of "things that are pragmatic to implement". And the more knowledge I have of how design works, the more flexibility I develop in terms of "acceptable UX and visual design".

Put another way: if you know what is easy to implement, you can combine that with a study of design to combine those building blocks into something that looks good and works well.

Design resources:

The Non-Designer's Design Book by Robin Williams

-- An excellent book that lays out clearly and concisely principles that will make your designs work. Perfect for the analytically-minded.

Thinking With Type by Ellen Lupton

-- The web is still largely a written medium. Getting the typography right is a huge win. And this book is great.

Implementation resources:

* Head First HTML with CSS & XHTML by Freeman et. al.

* CSS Mastery: Advanced Web Standards_ by Budd et. al.

Helpful:

* CSS frameworks like Blueprint, Bootstrap, Compass

* Using grids

* SCSS/CASS/LESS

Also, Smashing Magazine (web) is very good.

To build implementation skills, it is helpful to take a screenshot of a site that you like and then implement it. To build design skills, it is helpful to sketch layouts that you find aesthetic and then build them out using lorem ipsum text.

You'll get there. It gets easier. And as someone told me when I complained about the breadth of stuff one needs to know: web development isn't going away anytime soon, you have plenty of time.

This is a little bit beside your question, but since it's something I've noticed before: I think the best way to look at it is not, "I'm a back-end coder who wants to learn front-end design." The more honest truth is, "I'm a beginning design student." Trying to tie it directly into your back-end knowledge will probably not produce optimal results. Design is a different discipline, so if you approach it with the wrong preconceptions, the impedance mismatch will make it hard for you to get better at it.

Here is my road from blank page to final product:

1. Start with pen and paper. Thinking a lot about usability draw everything there. You could use balsamiq.com & similar, but for me paper & pen works the best in this phase.

2. Look for design inspiration at dribbble.com & similar

3. Look for colors inspiration at colourlovers.com, kuler.adobe.com

4. Create PSD

5. Create HTML+CSS

6. Implement

That's it. At least for me it works very well.

I second this process! The pen and paper get the creative juices flowing quickly.. I would also add that I found Smashing Magazine a great resource.

I started off with a learn html in a couple of hours type book. Eventually I went on to http://w3schools.com/

To really become proficient with front-ends you need inspiration (for designs, ways of doing things).

There are many aspects involved in UI design, including but not all - psychological, preference, design theory, limitations, layout, typography, efficiency.

If you see yourself doing it 'part time' - learn html/css/js/jquery scripting and borrow designs and figure out how they work and how these patterns can work for you.

I have a firm belief you do get 2 types of designers - those who design for themselves and those who design for others.

Don't be too hard on yourself, it's really a full time job to get it right most of the time.

And here's a freebie: plan before you do - I personally like scratching on the old notepad.

Thank you for the tips.

I don't have much of a problem with HTML4, but when given a blank page and asked to design something pleasing, I have absolutely no idea where to begin. Most of my colour combinations are awful. I am not sure about page utilisation etc.

I'm learning CSS and jQuery whenever I find time.

Pick a grid framework you like. I recommend either using the grid framework in Bootstrap[1] or Skeleton[2]. Skeleton I prefer because it has sensible typography from the start, and slightly more padding than you usually find in grid frameworks. These will help you control spacing and layout pretty easily.

As for color, you can find a palette that you like on colourlovers[3], then just work by varying what colors you want to use and when.

[1] - http://twitter.github.com/bootstrap/ [2] - http://getskeleton.com [3] - http://colourlovers.com

Every time design questions come up, design is made out to be some kind of mythical force people ether have or don't. Well that is not the case, design is a discipline like any other and can be thought to anyone willing, just like maths. The mythical force people see as design is what's called art, and is a highly subjective process based on feelings and emotioms, where as design is a logical progression from raw data to workable interface.

I'm not a good designer but i've been improving for years mostly by putting in my hours. Aside from learning some basic photoshop skills, the best piece of advice I can give you is to read and re-read this article: http://flyosity.com/tutorial/crafting-subtle-realistic-user-...

Note the word subtle. That's the key.

Bootstrap from twitter is a good resource for getting a minimalist but still sexy looking frontend going quickly.

I also browsed ThemeForest, searched the "Admin" themes, and then wrote web projects using them. I have found the code quality of all of the themes I have purchase to be very high - all of the components were modular, and I've been able to put high quality frontend stuff together with no design skills :)

Out of my frustration in writing HTML, I took a look at Bootstrap and some sites that were built using it and they looked very professional.

But I'm confused if I should learn to do webdesign by hand before using readymade frontend packages.

ThemeForest is a great resource. Thanks for sharing this. I found what I was looking for under the Site Templates dropdown.

Check out Bootstrap open source project from Twitter on Github. It can give you polished look quick. I supposed Bootstrap is meant for backed coders.

xscope is great, definitely try it out

http://iconfactory.com/software/xscope

http://chengyinliu.com/whatfont.html

https://github.com/thoughtbot/bourbon

Another vote for Bootstrap - I use it on my site and it's fantastic and easy to implement.

Reply on news.ycombinator.com