

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

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

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

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

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

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

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

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

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

------
pdenya
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-...](http://flyosity.com/tutorial/crafting-subtle-realistic-user-
interfaces.php)

Note the word subtle. That's the key.

------
malux85
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 :)

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

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

------
jasonz
xscope is great, definitely try it out

<http://iconfactory.com/software/xscope>

<http://chengyinliu.com/whatfont.html>

<https://github.com/thoughtbot/bourbon>

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

