
Ask HN: I'm an engineer, how do I learn design? - od2m
Dear HN, I am a decent Rails/HTML/JS/iOS/Android/C# programmer. I want to be able to do a project from beginning to end (web+mobile), but I never have any idea what I need to make should look like. How can I learn design?
======
commieneko
As an illustrator, graphic designer, animator and software developer for over
35 years, my advice is to start off by taking some drawing classes. Being able
to draw means being able to _see_. Most people don't see, they look and
recognize. Before you can evaluate a design you have to be able to see it. A
lot of designers could stand to improve their "seeing" skills.

If you can't find a class, get a hold of Betty Edwards's _Drawing on the right
side of the brain_. A lot of it is mumbo jombo, but the exercises are
excellent and work wonders. Once you've developed some observational
abilities, get a copy of Andrew Loomis's _Creative illustration_, just
recently back in print. It covers layout and design, and a good bit of color
theory in a very accessible manner.

Don't get discouraged, anyone can learn to observe and sketch usefully, but it
oes take practice. And it is a fundamental skill for _anyone_ who wants to
communicate visually..

~~~
radley
That's not design - that's drawing. There's plenty of ways to design without
getting into illustration. What's you're advising is similar to learning
Assembly instead of Basic just to learn how to code.

I agree with: Admire. Emulate. Innovate.

~~~
SkyMarshal
You can't admire and emulate without being able to see first.

Learning drawing is for designers as learning Lisp is for programmers. You may
never use it, but some of the skills it teaches are transferrable no matter
what the tool or medium, and will make you fundamentally better.

~~~
radley
Not saying drawing doesn't help. I am saying you don't tell someone brand new
to programming to start with Lisp. You tell them to start with something
simple like HTML. There's equivalents in design.

~~~
SkyMarshal
No, I don't tell them to start with HTML at all. That's not programming,
that's markup/text formatting.

I do in fact tell them to start with Lisp, Scheme more precisely. Best
learning language available [1].

Real learning is about understanding the underlying concepts and being able to
reapply them in different contexts. That's what Lisp/Scheme (and C for
imperative concepts and memory management) does for learning programming, and
drawing does for learning design.

[1]: <http://www.trollope.org/scheme.html>

------
melvinram
Admire. Emulate. Innovate.

ADMIRE

When you're starting off, you're not going to be able to create amazing
looking stuff because you don't know how to and you won't necessarily know
what is good. The first thing I recommend you do is build up your pallet and
figure out what you like. If you don't know what is good, look at work that
others say is good and observe what they have in common and how they make you
feel.

EMULATE

Once you start to get a sense of what you like, next recommendation is
learning the raw skills needed to do what you need. In your case, knowing how
to do all the things you'll need to do, such as how to create a box with
rounded corners, or gradients. With that knowledge, start trying to recreate
work that you admire and try to get as close to it as possible. As you do this
repeatedly, you'll start noticing different patterns and choices the
"original" designer had utilized. At this stage, you're simply trying to walk
a mile in their shoes.

INNOVATE

As you become comfortable at emulating styles and feel a decent level of
mastery over the skills required, you'll automatically start to have thoughts
about how you might want to try doing things differently. Try it. Most of what
you do will be shit. Allow yourself to create shit. Keep trying things and
you'll build up your own style, taste and sense of what should take priority.

PS: I am a self-taught designer. I used to feel like I was faking it in a
world of real designers but over time, I've looked at my body of work felt
proud/happy... and I've become "comfortable in my own skin" as a designer.

~~~
latitude
This is it. This is not the only way, but this is what worked for me as well.

od2n, the main problem for you at the moment is that you don't know what you
don't know. So you have to try and recreate things in order to understand
what's involved, how it's done, what are the limitations, etc. Software design
is in a very big part an acquirable skill, so the only way to master it is to
exercise.

------
garry
Some of my favorite resources:

[http://www.amazon.com/Dont-Make-Me-Think-
Usability/dp/032134...](http://www.amazon.com/Dont-Make-Me-Think-
Usability/dp/0321344758)

<http://www.edwardtufte.com/tufte/courses>

Also make wireframes before you code, when something is complicated -- or when
you're starting out, for virtually any UI. Use Omnigraffle Pro, and you can
also use Graffletopia's website to find stencils, e.g. Bootstrap Stencils. Or
use Easel.io.

~~~
niels_olson
Big upvote for Edward Tufte. If you style yourself as a hardcore engineer,
start with his book Visual Display of Quantitative Information. I'm away from
my copy, but as I recall, John Tukey reviewed the manuscript.
(<http://en.wikipedia.org/wiki/John_Tukey>)

~~~
SCAQTony
Tufte is extraordinarily dry for someone new to design. Great recommendation
though but it would be like going to Saul Bass and asking him how to draw a
"stick man."

I would start by using grid based layouts and study those who have used them.
Start with wikipedia article on the

subject: <http://en.wikipedia.org/wiki/Grid_(graphic_design)>

------
febeling
One of the most confusing things about designing for programmers and other
brainy / rational-minded people is, that when you read about it by actual
practitioners, you mostly look at post-rationalisations. That means you can't
expect to have reproducibly success with applying them. Quite often someone
does the opposite of what the rules suggest, and meets much approval.

Designers will tell you about depth, and structure, and rhythms, emphasis, and
similar categories. But it is often not obvious how you create these effects
with color or shape or other design means. Or when you have them, they don't
convince anyone and get scraped, even though fulfilling the formal
requirements.

So what you read about design is not really what designers do to achieve great
results, it is rather what they like to think about while working. Or that is
my interpretation of this process. For a rationally thinking person, it is
often just not conclusive and confusing, and you wonder about what you are
being told and what it has to do with some specific decision.

The thing is that nobody really knows how to create beauty or good design,
mostly because nobody knows what goodness is here. (Some try to sidestep the
whole discussion by demanding reduction to functionally essentials, but that
yields mixed results.)

For me personally other strategies have been much more helpful:

\- expect hard work and some suffering: to create something of great quality,
you have to go through a painful process of searching, thinking about meaning,
trying different approaches, and learning techniques. Expect it every time
anew. (You can vary the same design, or style, though, and thereby "reuse"
it.)

\- don't expect to be able to synthesize design from principles; it's the
other way around: you come up with it and realize it is good. Later you
understand that you can find principles that can to some extend explain (but I
have always felt they don't explain it sufficiently.)

One great discussion of this for me has been the book 'Zen and The Art of
Motorcycle Maintenance" by Robert Pirsig. I know this has somewhat of a
pseudo-philosophy reputation, but I think undeservedly. (Maybe this is just
because it is mandatory reading in many undergrad curriculae in the US?)

------
studiofellow
A small community of designer/authors is releasing ebooks aimed at teaching
design. I'm one of those authors.

I'm biased, of course, but I recommend looking into these books as they are
vastly more practical and beginner-friendly than most design books (which are
usually intended for already-experienced designers).

Learning design is tough because of all the information thrown at you. You're
supposed to master color theory, the history of typography, difficult design
software, and many more advanced topics, seemingly all at once. The ebooks
below are not going to shape you into a design expert, but they'll give you an
entry point into learning. The most difficult part is figuring out where to
start.

Here are a few links for you:

\---

Step by Step UI Design by Sacha Greif

<http://sachagreif.com/ebook>

-Shows process of designing a web app UI. Short with lots of examples.

\---

Designing Web Applications by Nathan Barry

<http://nathanbarry.com/webapps/>

-From what I can tell, the focus is on usability, interaction design. (I haven't read this one, but Nathan knows what he is doing.)

-Nathan also has a separate ebook about mobile:

<http://nathanbarry.com/app-design-handbook/>

\---

Bootstrapping Design by Jarrod Drysdale (This is my ebook.)

<http://bootstrappingdesign.com>

-I focus on teaching design fundamentals and how to practice design so you can get better. You'll get a lot of "do this, don't do that" kind of advice.

-If you're interested, email me and I'll shoot you a promo code. (My email address is on the site.)

\---

* Edit: formatting

~~~
od2m
Thanks Jared, I'm going to read your book :)

------
ronyeh
Do it. Get feedback (or compare your own work vs. other nice works you find).
Improve it. Rinse & Repeat.

I'm an engineer by training. Probably about 9 years ago, I started learning
Flash, Illustrator, and Photoshop. Early projects were painful and very
amateurish. I kept working at it, by making diagrams for my presentations, or
designing UI mockups, etc.

Nowadays, my art & design is pretty good for an engineer. But what's better is
that I've gained an appreciation for good UX design and good graphics. I can
tell the difference between my "good-enough" designs and the really good
stuff. And that will make you a better entrepreneur, because you can then hire
people who are better than you.

------
cooop
A large aspect of design that separates great professional designers from
amateurs is very hard to teach. It can be described as training your eye and
developing your taste. This simply comes from repetition and practise. Ira
Glass articulates this well describing the creative process —
<http://www.youtube.com/watch?v=PbC4gqZGPSY>

Another aspect of design is the mindset and mentality required when looking to
solve a problem. Something I feel often gets overlooked in the software world,
where culture is generally engineer focused. IDEO pitch this in as 'design
thinking'. While I'm not so keen on the term they do a good job of
communicating the importance of certain mental traits that designers possess
that are key to the design process.

Sketch. Considering a user flow/feature or user story? Sketch out 50 ideas,
explore and exhaust all possible scenarios, no matter how achievable, obvious
or silly. Get it down on paper. I often think that getting the idea down on
paper allows my mind to forget on it and move on to another potential
solution. Try to not let your technical expertise constrain this exploration,
that'll come later as you whittle your ideas down.

Personally, if I have the time I quite like to produce hi-fidelity sketches.
It may seem frivolous when a quick sharpie sketch will do, but as I spend time
sketching I find the thinking time valuable and often find myself with another
piece of paper jotting down notes/ideas etc.

Learn to draw — I believe designers should sketch and draw. There are so many
lessons to be learnt that translate to what we do when designing interfaces.
It provides a foundation in understand proportion, lighting, white space,
suspense etc. It's also an exercise in discipline and training your brain to
accurately produce the image in your minds eye.

------
dreamdu5t
Same way you learned engineering. Go read about design, design stuff, and get
feedback. Try and replicate sleek website designs. CSS takes a long time to
master.

The most essential design education book ever written is " Notes on Graphic
Design and Visual Communication" by Gregg Berryman. You cannot design without
reading this. It's very short, 45 pages, and the only handwritten book you'll
probably ever read. [http://www.amazon.com/Crisp-Graphic-Design-Visual-
Communicat...](http://www.amazon.com/Crisp-Graphic-Design-Visual-
Communication/dp/1560520442)

~~~
MetaCosm
Yep. Beyond that, realize that some parts of design like dealing with visual
hierarchy ( <http://hackdesign.org/lesson/19/> ) can come very easily to
engineers. Other parts like color theory or font design might feel less
natural. Find a hook that you enjoy playing with and grow from that.

------
tptacek
If the only reason you want to learn design is so that you can do an end-to-
end delivery of a product, consider just using a template, or Bootstrap. Most
products do not actually require heavily tailored designs, and even fewer
require them to be prove themselves viable.

------
ejpastorino
David Kadavy is offering a free course in a few days:
<http://summerofdesign.com/>

Looks really promising!

------
philipDS
I'm subscribed to <http://hackdesign.org/>. Haven't had the chance to follow
the course itself yet, but it sounds interesting.

~~~
QuantumGuy
I can vouch for them. The lessons are easy and the material is indepth. It
covers from typography all the way to UX design. They keep adding more
lessons. Which reminds me I need to catch up.

------
zhs
As with most things: practice. A great way to learn is to find free resources
on dribbble, open the PSDs and analyze all of the techniques used on each
layer and how they fit together.

------
jot
I got loads out of the first couple of lessons here:
<http://www.trydesignlab.com/>

It's like Codecademy but for design.

~~~
hv23
Designlab co-founder here. We're starting to roll out invites to our private
beta and quickly bulk up our lesson content. Our goal is to be the definitive
place for hackers to learn design and design thinking skills. Sign up! We'll
shoot you an invite as soon as we can.

------
Snoddas
Design! Show the result to potential users. Get criticised. Do more design.

------
meerita
Well, design and other professions can be selftaught without any problem as
long as you know what to learn and have time to practice.

Since design is a very large area, I assume you want to learn how to design
stuff that would be later in Internet, so it will be better to learn (in this
particular order): typography & grid systems and colors. When you master these
areas, you can go to the stadium of the composition with color and form, where
you will learn to draw.

90% of the design of an application through the use of typography, the
arrangement of elements on the screen using grid systems and interactivity.
The rest is cosmetic. You can master cosmetics later learning to copy styles
and practicing to master them. For example, being able to illustrate, in this
case, it's a matter of drawing, not doing extreme typography use, but that's
another area of design.

------
AliAdams
I came from an engineering background to design -

My advice would be to use a few principles to get you started for UI design:

\- map visual hierarchy to information hierarchy (more important titles
bigger)

\- use legacy (familiar layouts such as a top navigation don't require a
learning curve)

\- use visual metaphors / skeuomorphism to hint to the user where they are and
what they can do (buttons look clickable, draggable elements have ridges that
the user could imagine gripping, overlays have a shadow to imply something is
above another)

\- keep things simple - people tend to be more interested in utility than
ornaments when it comes to design but once you gain a bit more confidants you
can start looking at adding in more little details as 'delight ears'

There is a bit of a gut instinct element when it comes to spacing things out
but some grid templates might help with that to start with.

------
dakridge
<http://dribbble.com/>

from an engineer to another, I remember reading an article about how a company
doesn't use a designer for their site because enough tools already exist.
Dribbble was their favorite

------
gdubs
Read up on Dieter Rams and Bauhaus for some foundational lessons on aesthetics
and design. (Go to some museum exhibitions if you can in your area.) Look into
Jeff Veen and his work on HotWired in the 90's.

Hoefler & Frere-Jones have some great blurbs on typography. IDEO and Frog
Design have written good stuff. Tufte, as mentioned,is great for information
architecture.

When it comes to actual design, I recommend starting with scrap paper and a
fat marker. The bigger marker prevents one from getting too detail oriented --
particularly helpful when designing for mobile.

------
damon_c
When I am not feeling design intuitively, I approach it as a problem solving
exercise as that's what we do as coders... solve problems.

Ask yourself, what problem is this design solving? Is the goal of the site to
get people to buy things? Ok, Problem 1: show them things. Problem 2: Make the
user's eyes look at the right elements to get them to buy.

Each design element will either serve of obstruct your problem solving goals.
It becomes obvious once you break the problems down into small enough goals.

------
freijus
Nice answer from a previous similar question on HN :
<https://news.ycombinator.com/item?id=4318154>

------
rbreve
For the web/mobile one of the most fundamental aspects of design is
typography, study it, I recommend this book. Also it will teach you to diagram
and grids, your design will improve a lot with that.

[http://www.amazon.com/Thinking-Type-2nd-revised-
expanded/dp/...](http://www.amazon.com/Thinking-Type-2nd-revised-
expanded/dp/1568989695/ref=sr_1_1?ie=UTF8&qid=1369514406&sr=8-1&keywords=typography)

------
whytaka
Design is getting increasingly competitive. As people learn about the
theoretical foundations of visual design (e.g. golden ratio, usability, etc),
the more they will be impatient with amateur attempts at design.

I have been a designer for over 10 years and not to toot my own horn, but it
is a practise. You have to do it constantly to get good enough to the point
that your design solution IS a solution, and not just a makeshift.

------
sunnynagra
This might be a different context than what you were asking but I try and have
DigititalColor Meter open on my screen and when I come across a design or
color scheme I like, I use DigitalColor Meter to help deconstruct how that
design was set up. This helps break down button designs, gradients, shadows,
and textures. Doing this over and over helps me understand what makes certain
designs work at a pixel level.

------
danmaz74
I'm an engineer too, and many years ago I read a book that I really found
illuminating: [http://www.amazon.com/Designing-Visual-Interfaces-
Communicat...](http://www.amazon.com/Designing-Visual-Interfaces-
Communication-Techniques/dp/0133033899)

The examples about applications design are outdated, but the principles and
clarity of exposition are still top notch.

------
sachingulaya
[http://www.amazon.com/gp/product/1560520442/ref=oh_details_o...](http://www.amazon.com/gp/product/1560520442/ref=oh_details_o00_s00_i00?ie=UTF8&psc=1)

From the thread "Design Books Every Hacker Should Read" . See
<https://news.ycombinator.com/item?id=5058583> for reviews.

------
deny
Work alongside a designer. Easiest would be at a startup where you are
interacting with one another on a daily basis. As a designer at a startup,
when I'm updating the interface or creating a new flow I'll often include my
design thoughts. Side note: I do find myself repeating the same things over
and over: spacing, hierarchy, etc.

------
kaa2102
Don't Make Me Think by Steve Krug is a good start on principles of usability
and web design. Also, you can find website layouts, graphic designs, and get
help with infographics from istockphoto.com, gettyimages.com, themeforest.net
and visual.ly.

------
the_cat_kittles
My learning philosophy has always been to start by just doing. After a little
time spent doing, when you stop and take a look at resources and discussion
about whatever it is you are trying to learn, you are much more able to use
the info.

------
rom16384
As a developer, I recommend that you read "The Non-Designer's Design Book" by
Robin Williams. It teaches design fundamentals, and it made me much more aware
of the principles of good design, and I think it would be a good starting
point.

------
_yb
Try to recreate the designs of your favorite sites. This way you'll practice
your skills and get a lot of "I see what you did there" moments. Later on you
will be able to implement those things in your own original designs

------
combiclickwise
<https://www.udemy.com/how-to-design-great-products/>

Sheepishly adding my own course to the list. Its free for a while so see if it
is for you

------
mattmanser
There's this course, not sure what it's like yet as I decided to learn
javascript in depth first before I move on to design:

<http://hackdesign.org/>

------
lifeguard
Read:

<https://en.wikipedia.org/wiki/Golden_ratio>

<http://nostarch.com/modernweb>

------
halayli
I found imitating designs is really helpful in learning how to design. And of
course spend as much time designing as you would for programming. It takes a
lot of practice.

------
pknerd
Go to HackDesign.org and follow their lectures/

Also buy Design for Hackers.

~~~
manish_gill
I tried this. Thing is, just reading about design does nothing for me. I can
read about typography all day, but I still feel like a novice when I have to
decide what font "looks good" (besides the obvious ones, that is).

I simple don't feel the urge to go open Photoshop/Gimp and toy with new
designs - I won't know where to begin, and yet, I want to become better at
design. :-/

I wish there were more practical, interactive lessons somewhere where I could
see the reward for learning some new design-related skill.

~~~
hv23
Try Designlab -- <http://www.trydesignlab.com>. :)

~~~
manish_gill
Invite only. :(

~~~
hv23
Co-founder here -- we're rolling out invites and bulking up lesson content, so
sign up and you should be in in no time.

~~~
manish_gill
Cool. Signed up. :)

------
od2m
Hi, I'd like to thank everyone for their great replies. More good info then I
could have hoped for here.

Thanks, od2m

------
dpolaske
Awesome resource: <http://hackdesign.org/>

------
zerr
Designing in your head is one thing, but would you actually enjoy doing it?

------
CitizenTekk
Last thing you want to hear, but you need to find a designer. It'd be hard for
UI &/ UX designer to handle Rails/JS.

~~~
CitizenTekk
[http://www.uxdesignedge.com/2010/03/dont-design-like-a-
progr...](http://www.uxdesignedge.com/2010/03/dont-design-like-a-programmer/)

