Ask HN: How can a programmer learn graphic design from the ground up?
Hello HNers,
I'm a college student and a programmer. My dream is one day I will have my own kick-ass startup.
I know how to write clean code; but what I don't know is how to draw 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!
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.
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?
I'll appreciate your advice, thanks!
58 comments
[ 4.5 ms ] story [ 159 ms ] threadIt 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.
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.
http://www.kadavy.net/blog/posts/d4h-the-book/
http://news.ycombinator.com/item?id=1954724
http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
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.
Also, by typography I don't just mean fonts, but also the layout, the structure, the readability, etc.
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.
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.
http://www.amazon.com/Think-Common-Sense-Approach-Usability/...
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.
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.
"There is no problem that cannot be solved by adding another layer of indirection"
I will never compose a symphony. I could not paint the ceiling of the Sistine Chapel. I can't out-code John Carmack. And I will never best Ken Jennings at Jeopardy. The list goes on...
Identify where you excel and where you are deficient, and learn to strategize accordingly. If you are lucky your blessings outweigh your shortcomings...
You only have to be near the top for one thing, if any. For the rest of the things you do, a) enjoy yourself and b) drag yourself up to somewhere near the centre of the bell curve. You'll still be better than half the people who are actually getting paid to do it.
A programmer getting a few design skills is well worth the effort.
I'm just a college student who thinks coding is fun and wants to build a web app by his own. And learn and do the design by myself seems to be my the only option, since I can't find designers (at least here in China) to be collaborator and do things for free, and I can't afford to hire one either.
BTW, I really don't think "get really good at a web framework in a language of your choice" is the best career advice from one programmer to another.
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:
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.
Non-aff link http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Dap...
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...
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...
So can a designer ;)
I am actually a hardware engineer transitioning into web application development. Design is something that I have never done in my life. However, I am beginning to find it very interesting and believe that it can be very rewarding emotionally as well.
The world of design is so much richer than the hard, concrete world of programming revolving around features and bugs (I do appreciate the art of writing a good, clean, maintainable and reusable code). Even deciding what features to support and what to ignore based on how you want a user to interact with your website is design. No amount of programming skill can rescue you from having to make these decisions.
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.
It's going to come down to practice, like everything else.
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.
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.
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.
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.
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.
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.
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.
#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.
EDIT: fix markup
This one is a good place to start: http://www.andyrutledge.com/gestalt-principles-1-figure-grou...
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.
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.
- 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.