
Ask HN: How can a programmer learn graphic design from the ground up? - tianyicui
(I'm a native Chinese. Being a spelling/grammar Nazi to me really helps me. Thanks.)<p>Hello HNers,<p>I'm a college student and a programmer. My dream is one day I will have my own kick-ass startup.<p>I know how to <i>write</i> clean code; but what I don't know is how to <i>draw</i> things with paper or CSS or Canvas or Photoshop or anything. I can implement Linux device drivers, purely functional data structures, lexers/parsers or socket servers; but I can't even design a simple logo or a good-looking webpage. Sometimes I do have ideas how the logo/webpage should looks, but I just don't have the ability to draw (implement?) them. To be clear, HTML or CSS is just another programming language for me, but I only know the syntax and grammar. I don't know how to do graphic design at all!<p>I want to learn graphic design, both for my current projects and for my future startup (same reason with the suggestion that "non-technical" person should learn to code). I want to have basic skill on how to use computer to draw icons, logos, buttons and webpages.<p>But I have no idea what to do and how to start. How can a programmer learn graphic design from the ground up? Should I learn drawing in pen and paper first? Or should I learn Photoshop? Or should I just learn how to draw by writing code in CSS/Canvas? What books/websites can you recommend? Is self-learning enough or a mentor/teacher is required?<p>I'll appreciate your advice, thanks!
======
astrodust
A large part of becoming a better designer is in studying the design of others
so you can recognize what design actually is. It's in deconstructing things to
identify what techniques were used, what layouts were employed, what the
rationale might have been behind various decisions along the way.

It cannot be over-stated how important it is to be able to recognize design in
order to be a designer. While you won't need to be able to identify typefaces
at a glance, you should be able to understand the fundamentals. You should be
able to identify short-comings and be able to think up ways to remedy that.
Like programming, a lot of design is problem solving in the context of many
constraints.

The other part is simply doing it. Design things. Constantly. Make up logos.
Work with type. Whip up experimental layouts and see how they work, look for
faults, and try to fix them. Re-design sites you're familiar with, even if
you're simply re-implementing them, so as to understand how they work. The way
you gain experience is by exploring and doing.

Everyone focuses on tools as part of their problem. "If only I knew Photoshop
better, I'd be an amazing designer," they say. This presumes that Photoshop
does the designing for you, which of course it doesn't. You can see work from
people who think it does where they've turned on every filter, used every
plugin, and exercised each font in their "500 Free Fonts and Clip-Art"
collection.

Obviously you will need to learn some tools. I'd advocate picking a few that
will get you the furthest along and learn them well. Instead of knowing a bit
of Illustrator and a bit of Photoshop, choose one and double down. You can
also do a lot of designing with a pencil and paper if you know CSS well
enough.

If you're intending to be involved in a start-up, being multi-talented is
essential. Unlike large organizations where there's formal departments, you'll
often be wearing a dizzying number of hats. You'll be the designer-programmer-
customer-support-cleaning-staff-accounts-receivable person and then your
partner might be the sales-testing-tech-writer-photographer-blogger person.
Rarely do you get to focus on just one thing.

Knowing even a little bit of design can help get you started more quickly, get
you further along in projects without having to engage an outside designer,
and will make your efforts come across more clearly.

Design is, after all, not just about pretty pictures but about presentation
and communication.

~~~
runjake
It's posts like yours that make me wish HN would let me save/tag comments.
This is applicable in so many different areas of engineering.

------
keeptrying
I'm in the same position as you. And I've been trying to do this without much
sucess. And then I found this book and it really has the very basics down pat:

[http://www.amazon.com/Non-Designers-Design-Book-Robin-
Willia...](http://www.amazon.com/Non-Designers-Design-Book-Robin-
Williams/dp/0321534042/ref=sr_1_1?s=books&ie=UTF8&qid=1292437264&sr=1-1)

After you finish that, you'll be able to put together great wireframes and
layouts.

For the color part I'm reading a book on color theory. The very first thing I
learnt in this book was that there is a reason that beginners cant work with
color - because they cant "see" true color. This takes a while - google for
"Color constancy"

These are the very basic steps that I wish someone had pointed me to ...
everyhting else builds up from here.

------
ookblah
This is just my $.02. I believe the best way to learn is by imitating. Go on
every CSS/Design Inspiration (dribbble, forrst, ilvdsgn) site you can and see
what is appealing to you and then try to duplicate it in your own time.
Analyze ones that everyone thinks are "cool" and figure out what makes them
so. Look up articles on color theory, spacing, typography.

It might sound lame just copying a design (note: I don't mean rip then release
it, this is just for your own benefit), but by picking it apart you'll slowly
be creating building blocks for you to do your own stuff.

------
silentgroove
I've been a designer for 7 years now, and one of the things I did when I was
first starting out was find examples of designs I liked and attempt to copy
them very precisely. (Should go without saying that this is a practice
exercise, not suggesting to rip off others work). The exercise did a few
things for me:

\- helped me learn new software (learned bezier curves by copying the
starbucks logo) \- forced me to be really attentive to the details of design
\- got me in the physical habit of making good looking things \- let me focus
first on the mechanics before implementing my own ideas \- forced me to find
examples of design to look at

I think this is akin to reading someone elses code when learning a new
programming language. It is also a great way to study art, drawing by hand
others great works. In graphic design, I would focus more on understanding
typography and composition (what things are emphasized and how, I.e. scale,
color, space) than on learning to draw. You can be a great designer with
rudimentary drawing skills.

------
ygtckr
If I were you, I would be inspired from <http://www.cgsociety.org/>
<http://abduzeedo.com/> <http://blog.drawn.ca/>
<http://www.logodesignlove.com/> <http://www.davidairey.com/>
<http://www.helveticbrands.ch/blog/> and will try to create my ideas first on
paper with pencil and then digitize them with proper technology, searching for
tutorials like the ones on tuts network <http://tutsplus.com/> CG Society is a
great place to immerse yourself with graphic design.

But I think that if you want to learn graphic design just to create your own
design and logo, I would say don't bother. You can easily hire a designer to
do that for you and it would be cost effective. Just learn to distinguish good
design from the bad and learn to effectively communicate the ideas you have.

~~~
ecaroth
I would also add creattica.com to that list.. gotten TONS of inspiration off
there

------
ivanzhao
If graphic design is the makeup, then typography is the bone. You should start
with the bone, and I can't recommend enough of this book:
[http://www.amazon.ca/Elements-Typographic-Style-Robert-
Bring...](http://www.amazon.ca/Elements-Typographic-Style-Robert-
Bringhurst/dp/0881791326)

Also, by typography I don't just mean fonts, but also the layout, the
structure, the readability, etc.

------
redmar
I found this (free) book really useful:
<http://designingfortheweb.co.uk/book/index.php>

~~~
tianyicui
Wow, thanks, it seems really helpful!

------
lojack
I'd highly suggest reading "Don't Make Me Think"

[http://www.amazon.com/Think-Common-Sense-Approach-
Usability/...](http://www.amazon.com/Think-Common-Sense-Approach-
Usability/dp/0789723107)

It's more of a usability book, but it covers some visual aspects to design.
Beyond that it comes down to reading, practicing, critiquing and being
critiqued. Any time you visit a new website think to yourself: what looks
good, what looks bad, what is intuitive, and what doesn't make sense.

------
venturebros
#1 HTML and CSS are not programming languages.

#2 you cannot learn how to draw by using CSS. CSS has nothing to do with any
of that .

Onwards, I am not artistic at all. I made the mistake of going to an art
school and it made me hate art even more. I came to the realization I will
never ever be able to create mindblowing amazing websites kind of like what
you see featured here <http://www.thecssawards.com/> and many other sites. I
was not born with artistic talent it is something you have to be born with not
something you learn.

Once I came to the conclusion that I suck as an artist I started to mimic. I
mimic other designs and change them up a bit. I learned that it is best for me
to keep in a grid instead of breaking out of it (do a search for web grid
systems). This has helped me a lot I went from designing websites that looked
like they were in the 90s to something more up to date. My sites still look
kind of tempalatey but they still have a customized feel to them.

I also use free UI elements on my sites you can find tons of them online. For
logos I do the same thing I do with websites find logos I like and mimic with
my own styling.

~~~
tianyicui
HTML and CSS are DSLs. DSLs are programming languages. Programming language
doesn't have to be turing complete. See _Programming Paradigms for Dummies:
What Every Programmer Should Know_
<http://www.info.ucl.ac.be/~pvr/VanRoyChapter.pdf>

EDIT: fix markup

------
noahc
There are two issues here. Learning how to design and learning the tools of
design.

I took two digital art classes in college. You could tell who struggled with
design and who struggled with the tools. The kids who struggled with the
design piece had really crappy images. The ones who struggled with the tools
had really simple images.

You can learn either/or or both. I focus on really simple design because I
don't know photoshop, css, xhtml, etc well enough to pull off complicated
designs. However, using simple tools like size, layout, and color you can do a
lot.

I recommend getting started with blueprint css framework and going from there.
You'll learn more about design than the tools, but you'll also pick up some
css.

As far as self-learning vs mentor/teacher goes. You need feedback. If you can
get feedback while self-learning it can work. I know there are some websites
out there that can help you with that.

~~~
tianyicui
Can you elaborate on places to get feedback? Thanks.

~~~
noahc
I've never used any of the services, so I'd be afraid to recommend any. There
are some free and some paid. Pretty much any web design forum will offer
feedback though for free. The google 'web design feedback' and you'll get a
list of 20 or so different places to check out.

------
twfarland
I've gone in almost the opposite direction, I studied fine arts and have been
steadily moving into dev over the last few years.

I find it inevitable that I study a new thing in terms of what I studied
before. So I approached programming with an aesthetics/communication mindset.

If you are going the other way, you mind find it useful to approach design via
quite formal subjects like proportion, symmetry, colour theory, and user
behaviour. These have syntax and grammar, like any programming language.

Don't worry about photoshop or whatever. Don't focus on 'drawing graphics,'
but on usability. Your programming background will serve you well in that.

What and I trying to day? Basically, you're probably already further down the
path to designerhood than you might think, since you're a practical person who
needs to communicate and handle complex systems.

------
cgopalan
"I want to learn graphic design, both for my current projects and for my
future startup (same reason with the suggestion that "non-technical" person
should learn to code)"

Theres really no strong reason that a non-technical person should know how to
code. Which means you do have to get back to the question - why do you want to
learn graphic design? If you feel that you want to learn it just so you can do
that for your start-up, realize that its not necessary. You can definitely get
those things done for reasonable price through sites like 99designs
(reasonable even for a start-up budget). IMHO, the best reason to learn
graphic design (like most other skills) is because you WANT to do graphic
design. In that scenario, how soon you pick it up will not be a factor, which
is the way it should be.

~~~
tianyicui
About the startup part, let me elaborate. I hope my experience of learning
design, or at least trying to learn design, will help me with my taste and
knowledge in design. For now, I cannot actually tell apart "good designs" from
"bad designs". For example, sometimes I heard people saying things like "It's
terrible they chose font X and color Y ..." but cannot see anything terrible
in what they're talking about.

~~~
cgopalan
Which means you WANT to learn design. Thats great, and there are enough inputs
from the good folk of HN here to get you started. Best of luck!

------
petercooper
There's an HNer writing a book on this very topic based on soke blog posts
they wrote. I can't remember who it is, alas, but hopefully this will remind
someone who can follow up with some links..

~~~
seancron
kadavy is writing a book called "Design for Hackers"

<http://www.kadavy.net/blog/posts/d4h-the-book/>

<http://news.ycombinator.com/item?id=1954724>

------
thechangelog
I had found Andy Rutledge's archive (<http://www.andyrutledge.com/>) to be a
really great introduction to design. The 'Practice' section in his archive has
some really great introductions, especially his articles on perception.

This one is a good place to start: [http://www.andyrutledge.com/gestalt-
principles-1-figure-grou...](http://www.andyrutledge.com/gestalt-
principles-1-figure-ground-relationship.php)

------
blahblahblah
There are a lot of things that can be learned effectively from books, but I
don't think graphic design is one of them. Books can help, but one of the key
skills in graphic design is having an internal sense of how a variety of
different people with different viewpoints will react to a particular design.
I think that skill is best learned through class discussions and the critiques
of your peers.

------
Dramatize
All you need to remember is form follows function.

This means creating a UI that's easy to use, if you do that then people don't
really care about how it looks.

Look and Pinboard.com or Instapaper.com. People love the businesses even
though the sites aren't pretty.

You would get more benefit from learning about how people interact with
websites. Sites like useit.com are useful.

------
juiceandjuice
I've been inspired by stuff from Josef Muller-Brockmann. I'm not a graphic
artist, but I'm getting this book when I get a chance:
[http://www.amazon.com/Systems-Graphic-Systeme-Visuele-
Gestal...](http://www.amazon.com/Systems-Graphic-Systeme-Visuele-
Gestaltung/dp/3721201450/ref=pd_sim_b_1)

------
thereddestruby
To answer your questions:

1) The same way a programmer learned to program.

2) Yes. As practice, draw from real life everyday.

3) If you want.

4) If you want.

5) I recommend reading Drawing on the Right Hand Side of the brain, Don't Make
Me Think, and Design of Everyday Things to start.

6) Whatever you feel works best for you.

~~~
tianyicui
If I'll learn design the same way I learn programming. Personally, I learned a
lot from participating programming contests such as ACM/ICPC and TopCoder.
Learning from and taking part in open source projects also give me a lot. Are
there equivalences for graphic design? Thanks.

~~~
thereddestruby
There's plenty of forums and design contests.
<http://www.drawar.com/crits/design> is an ok place to start. I'm sure there's
more.

It's going to come down to practice, like everything else.

------
harrybr
A developer like yourself would benefit far more by focusing on UI Design than
the far broader area of Graphic Design. You don't need to design logos. You do
need to be able to design bare-bones interfaces well.

------
petercooper
Just found this (not related to me):
[http://robots.thoughtbot.com/post/2167846199/recap-design-
fo...](http://robots.thoughtbot.com/post/2167846199/recap-design-for-
developers)

------
varikin
I had a long answer but HN died for me.

The short answer, take a drawing class to learn the fundamentals of how to
draw. From there, start drawing those ideas you have, but can't implement.

~~~
tianyicui
FYI, in modern browsers, when a website crashed when you submitting a form,
just use "Back" and what you wrote are still there.

------
ldargin
I recommend learning by working with a graphic artist on a small project. In
return, you can teach him/her some programming.

------
badmash69
As one programmer to another -- don't do it. Programmers can never learn the
ART of graphic design from books. B

Graphic design is a black art -- for most programmers; you could end up
spending a whole day trying to create a 32x32 icon and still hate it. I have
wasted many afternoons cussing at my own design work.

My advise is to get really good at a web framework in a language of your
choice and create code that separates logic from presentation. Leave the
design work to the pros.

~~~
gte910h
It's not a black art -- it just doesn't use many of the same skills most
programmers have. That's like saying "playing music ia a black art". No, it
just requires a skillset other than you currently have.

Graphic design in particular, is a speciality in which the process of learning
pays off greatly. I mean you go from utter crap, to able to alter common
designs to your purpose pretty quickly, after about only 80-120 hours of
actual education on the topic.

The skills involved in _graphic design_ are:

    
    
      Drawing
    
      Conceptualization of Space 
    
      Conceptualization of Color
    
      Functional Organization
    
      Effective Information Visualization
    
      Execution in tools
    

And I honestly don't think most of those overlap with programmers base skill
sets you have to pickup to do code.

It honestly sounds like you're suffering in the "Execution in tools" section.
That's actually the easiest one to "get" in my opinion. Almost any programmer
who can follow directions, and has a drawing program can do a bunch of the
tutorials (we're talking 40-120 hours of doing tutorials) and practice making
different things using those tutorials. You'll then make things "close enough"
to fake it for awhile.

Notice this isn't like 20 minutes. It's a real effort. But it's not years
before you start seeing real improvements and serviceable work.

~~~
tianyicui
Can you recommend a design tutorial for programmer to follow? Is _Drawing on
the Right Side of the Brain_ your recommendation too? Thanks.

~~~
gte910h
Robin Williams (Same name, different person than the comedian) makes s set of
books targeted at the non-designer. Amazon has lots of them.

Non-aff link [http://www.amazon.com/s/ref=nb_sb_noss?url=search-
alias%3Dap...](http://www.amazon.com/s/ref=nb_sb_noss?url=search-
alias%3Daps&field-keywords=robin+williams+design&x=0&y=0)

To learn to draw, Mark Kistler's Draw squad isn't a horrible thing to get you
going and to start to look at shadows, etc (however is aimed at children).

As far as tools, trying out the following are good:
<http://www.pixelmator.com/learn/> (Scroll to bottom of the page)

<http://qrayg.com/learn/fireworks/>

visual photoshop: [http://www.noupe.com/tutorial/30-useful-abstract-
photoshop-d...](http://www.noupe.com/tutorial/30-useful-abstract-photoshop-
design-tutorials.html)

And while I think the actual lessons are sorta ugly they're not bad on tool
usage fundamentals: [http://www.pvmgarage.com/2010/11/top-ten-photoshop-
website-d...](http://www.pvmgarage.com/2010/11/top-ten-photoshop-website-
design-tutorials/)

------
iterationx
Play around with GIMP is simple to learn.

------
phomer
Programming and Graphic Design are opposites. Logic, reason and lots of self-
discipline makes for good programmers. Art on the other hand is grounded in
emotion and perception. It's more about escaping discipline, while allowing
yourself to get in touch with some inner irrational being (so that you don't
mess up the design with logic and symbols). Art touches you, while programmers
build things. Graphic Design in some sense, is just the industrialization of
Art for specific purposes (although often less emotional).

It's best to realize that a good Graphic Designer can outrun a programmer in
the same way that a good programmer can outrun someone that can't think
logically, although some programmers seem oblivious to this. If you need good
Graphic Design, it is best to hire a professional that is well suited to the
task.

If you really want to try to bridge the two worlds, then a degree in Graphic
Design is a good idea. Drawing, painting and photography are also good hobbies
that can help you develop an aesthetic. A good reference to start with (and
explain why logic and rules fail) is Drawing on the Right Side of the Brain.
It's an old classic, but helps in understanding how our brains interfere with
our perceptions.

~~~
Zev
_Programming and Graphic Design are opposites. Logic, reason and lots of self-
discipline makes for good programmers. Art on the other hand is grounded in
emotion and perception._

If you think there aren't "rules" to graphic design that are typically
followed, you're fooling yourself. Just like there are times when the best
answer to something in programming isn't necessarily the intuitive or logical
answer.

~~~
phomer
There are "rules of thumb" which nice people have put together, but they are
just a starting point. If you follow the rules pedantically or even closely,
the results won't be good. They're just hints to get you going. It's not about
obeying rules, it's about how it looks.

The book I referenced is a great resource in explaining why this is true. Part
of the brain sees things symbolically, so that when someone is drawing a face
for instance, they don't draw what they see as the eye, instead they
substitute a symbol in its place. To the person drawing this might look OK,
but to other people it looks like a kid drew it. To get good at drawing, you
have to shutdown that symbolic part of the brain, and just draw what you see,
not what you think you see.

~~~
Zev
Rules was in quotes for a reason. Yes, there are a bunch of "rules" that are
generally followed. Except when they aren't. Hot and cold colors, mixing font
families and types up, etc.

A good designer will know when to break the "rules". Like a good coder will
know when to hack something together, rather than obsessing on architecture
and keeping code "clean". Its all perfectly logical. Except when they said
"Fuck it, it will work better this way."

Massimo Vignelli had his grid, but David Carson threw it all out the window.
Coder X might spend a few days writing his code in what he thinks is a clean,
maintainable manner, while Coder Y might hack it together and worry about
maintenance later. In both cases, both approaches can be right.

~~~
phomer
A designer breaking the rules will generally enhance their work. A coder
violating an architecture will often just create long-term technical debt, at
the expense of some short-term gain. That is, they'll get their piece done
faster, but leave in its wake a nasty problem for someone else. Of course that
only applies if the architecture is reasonable and its rules are correct from
an engineering standpoint. In practice, many of the 'coding rules' are too
brittle for the circumstances, thus making things worse, not better.

The difference is that one change is done purely for the improvement of the
aesthetics, while the other is done because of some fundamental disagreement
about the underlying engineering principles. One change is done irrationally
because it "feels" right, while the other is a disagreement on the nature of
the rules (or a lack of understanding of the purpose of the rules). But there
are rules (whether or not they've been articulated).

Usually when programmers "hack" things, they cause a raft of other problems in
their wake. As software development progresses from an art, to a science and
onto engineering, hopefully the desire to hack at things will diminish. We can
actually reliably build complex systems, but only when we choose to think
about the right way to do it, rather than just react to our environment.
Personally I don't think good programmers "hack". They build. It's very
different.

