
Ask HN: How to learn design as a hacker? - dkyc
I&#x27;m a full stack web dev and hacker by heart. However, all my front-end designs just can&#x27;t compete with anything delivered by a (semi-)professional designer. Are there any CodeAcademy-like resources that provide actionable advice on how to do better UI design? I&#x27;m getting tired of hiring freelancers.<p>I tried hackdesign.org, but figured it was way too high-level and since it&#x27;s only a blob of links to blog-posts it didn&#x27;t create any continious learning experience for me. I&#x27;m looking for resources that help me with practical problems like whitespace&#x2F;margins, color schemes, font-sizes etc...
======
jeffchuber
A little late, but I will add a couple thoughts:

\- Good programming uses sensible patterns to make code maintainable and
flexible. Good design does this too.

\- Insanely great programming is a little insane - it breaks the rules.
Insanely great design does too. But you can't shortcut to this step - you have
to put in the time.

\- For me, I learn the most programming by looking at what other people have
written, and modifying it in some way, or applying something to a project of
mine. Learning design works the exact same way.

\- I would argue against learning anything like color theory, typography or
information hierarchy. This is like take 5 CS 101 classes before beginning
programming. You might have a better "foundation", but you will probably get
burned out before you even start. That stuff can wait. And it will make a lot
more sense when you have some corpus of work to set the context for what you
are learning (same with programming).

\- Don't worry about making anything look like "cool" websites. Honestly most
trendy designs are simply terrible to use. Design should make the products
more enjoyable to use and easier to use. Anything else is intellectual
arrogance.

As with programming, I find doing things like katas is really useful. So grab
a pen and paper and start drawing. Sketch like this -
[http://strongdesignstudios.com/wp-
content/uploads/2012/03/is...](http://strongdesignstudios.com/wp-
content/uploads/2012/03/isospin-website-sketches.png), boxes for stuff and
lines for stuff. don't try to add the detail. keep things light and easy to
change. use a pencil. then start sketching stuff.

\- make a landing page for a construction company

\- make a page to market an event

\- make an app "page" to find good barbers nearby

You will naturally start asking yourself the right questions. "What
information is most important?" "How should information or pages be broken
up?" "Who will be looking at this page?"

if you have more questions feel free to email me jeffchuber @
theBIGsearchgiant.com

~~~
collyw
As someone in the same position as the OP, first thanks for the ideas, it is a
useful post. But I am a little surprised about advising against colour theory
(the only of those suggestions that I actually know anything about).

Sure no need to go into depth, but there are plenty of short easily manageable
resources for getting the basics. Before I read a blog post about colour
theory I had no idea the concepts even existed. Now I'll use an online tool to
help me select colours that will work better together. The effort required is
basically a bit of google, and less than an hours reading.

~~~
kenbellows
I don't think he meant "don't learn color theory". I think he meant don't wait
till you know color theory to start designing. Just as you don't need to know
Object Oriented theory to start banging out some code, you don't need color
theory and typography to start sketching out designs. Its all important in its
time, but don't jump in the deep end too soon. You risk intimidation and burn
out. Pick it up as you go.

~~~
jeffchuber
exactly

------
mikepoint3
As a grahic / fine artist that has moved into webDev (JS, java, grails) there
is no short cut or easy answer to be an all in one coder / designer. You need
the basics of graphic design first: COLOR, DOMINANCE, LAYOUT

COLOR: a good color palette will take any project up a notch
[http://www.colourlovers.com/](http://www.colourlovers.com/)
[http://www.colormatters.com/color-and-design/basic-color-
the...](http://www.colormatters.com/color-and-design/basic-color-theory)

DESIGN STRUCTURE: much the same way you create Classes that can be extended,
you can do some in design. There are Dominate objects in your code that you
use to create other object. \----dominant, subdominant, subordinate Design
[http://www.vanseodesign.com/web-
design/dominance/](http://www.vanseodesign.com/web-design/dominance/)

Also, if you create a dominate visual design feature, repeat that
element(color / pattern / shape) else where on the site, to build consistency

Also for Page Layout, rules in Photography can be a great help. Looks that the
Rules of 3rds
[http://en.wikipedia.org/wiki/Rule_of_thirds](http://en.wikipedia.org/wiki/Rule_of_thirds)

The most important part of creating anything is inspiration. Pinterest is
great for looking at designs, picking what works for you and what doesn't.

You have to understand that all of your early stuff will look like crap. Much
the same way we've all said "Wow, that code I wrote 6 months ago is a pile of
junk. I'm surprised it's still working."

Alos, buy a sketch book and put it next to your bed. Draw before you go to
sleep. Even if you just doodle.

Advanced Typography is not something I recommend right off the bat, as it can
lean towards fine art at times [http://www.fromupnorth.com/typography-
inspiration-753/](http://www.fromupnorth.com/typography-inspiration-753/)

------
mzarate06
Here's what I did to start solving this problem: I hired a good designer
friend to have weekly design sessions with me.

They've been incredibly helpful, and a lot of fun. Books and blog posts help,
but nothing beats having a passionate teacher sit next to you and coach you
along.

Here are some recommendations and details on how these go down, if you're
interested:

1) Read 1-2 books on design beforehand (I recommend these [1]), perhaps
introductory in nature. There are several principles and beginner concepts
that you can become familiar with on your own that'll provide a better
foundation once you've hired a design tutor or coach.

2) Have a tangible goal to facilitate your learning. Like any art, everything
design related takes time, and having something interesting to retain your
focus over days, if not weeks, if not months, will keep it fun and meaningful.
My tangible goal has been redesigning one of my company's products.

3) Before each session I send my designer a page or two I want to focus on
(e.g. client list and client edit pages), goals and sample content, and
examples of designs I like for inspiration. We both work on designing those
pages independently. We don't share or view each other's work until we're in
session.

4) Once we're in session we review our designs and discuss each of our
decisions on spacing, content choice, emphasizing this or that via different
font styling, coloring, etc. As expected, my designer's work is always
superior, but the real eye openers are when he walks me through why that is,
especially when he points out how much easier, faster, but more relaxed my eye
gets to what it wants on a given page w/his designs vs. mine.

We've had 6 sessions so far and I'm convinced this is the best method of
learning design (just as having a private tutor is superior for many other
things). If you have someone you can hire for a similar arrangement, at least
consider doing so, I highly recommend it.

[1][a] Designing Web Applications (Nathan Barry)

[1][b] The Non-Designer's Design Book (Robin Williams)

[1][c] Don't Make Me Thing (Steve Krug)

~~~
csixty4
I haven't read [1][a] but I highly recommend b & c.

The Non-Designer's Design Book is what got me really understanding design
after a decade as a developer.

------
studiofellow
There are quite a few good resources for developers to learn design.

Disclaimer: I wrote a book on this topic, but because of that, I know
resources made by other people too.

\---

Sacha Grief’s ebook is good for an in-depth example:

[http://sachagreif.com/ebook/](http://sachagreif.com/ebook/)

\---

Design for Hackers by David Kadavy is also well written. He explores the more
traditional way to learn design, with the history of fonts, color theory, etc.

[http://designforhackers.com/](http://designforhackers.com/)

\---

A different approach might be reading about creativity. My friend Paul Jarvis
has some great books about creativity, especially his new one, The Good
Creative, if you’re looking to get inspired:

[http://pjrvs.com/books/](http://pjrvs.com/books/)

\---

Nathan Barry’s design books are great. He also has a course on Photoshop if
you’re looking to learn.

[http://nathanbarry.com/books/](http://nathanbarry.com/books/)

[http://nathanbarry.com/app-design-handbook/](http://nathanbarry.com/app-
design-handbook/)

[http://nathanbarry.com/webapps/](http://nathanbarry.com/webapps/)

\---

One of the best books about UI/UX/usability is Don’t Make Me Think:

[http://www.amazon.com/Dont-Make-Think-Revisited-
Usability/dp...](http://www.amazon.com/Dont-Make-Think-Revisited-
Usability/dp/0321965515/)

\---

Great place for topic-specific books. Some of these are more advanced and
intended for designers. I'd suggest these for after you read up on the basics.

[http://www.abookapart.com/](http://www.abookapart.com/)

\---

My book focuses on design fundamentals instead of advanced theory. It's
intended as a starting point for things you can do right now. Actionable,
focused on building skill instead of knowledge.

[http://bootstrappingdesign.com](http://bootstrappingdesign.com)

\---

Email me anytime if you need help. My email address is on the site above.

Edit: formatting

~~~
blackdogie
[http://TeamTreehouse.com](http://TeamTreehouse.com) also has a design course.
Covers logos and other things like that. CodeSchool also has a course, but I
haven't tried it [https://www.codeschool.com/paths/html-
css](https://www.codeschool.com/paths/html-css)

------
err4nt
Design lies somewhere between art and science, and that makes it harder to
teach and harder to learn. There are universal design rule about what looks
good and works well, and even if you can manage to distill what they are and
vigilantly apply the rules - it doesn't guarantee the result is good, only
that the result isn't bad.

Likewise a person with no knowledge of best practices and the science behind
colour and layout can intuitively design something great, and it's greatest
where it naturally aligns with design truths and weaker where it strays from
them - but it's hard to teach that 'eye' for design that feels what is right
when it can't be measured as easily.

My advice is to learn design from a clean-room approach. You can use HTML and
CSS to learn design as easily as Photoshop or Illustrator. Use a tool that's
comfortable for you to manipulate, and start with empty files. Only bring in
the elements you want to use, and experiment with them. Change their size,
colour, font, placement, rotation, and style. Try different shades of grey on
different backgrounds and get a sense of what is legible and illegible. Try
finding a pair of colours thst match and feel good together and recreate that
harmony using two different shades you have picked.

There's a lot about design thst you can learn by experiencing it, but the true
knowledge happens when you research and play around with things.

------
eriktrautman
I've compiled a mini-course[1] that's exactly this -- design for developers.
It more or less follows the 80/20 rule of getting you through what you
_should_ know without bogging down too much in the narrowly focused stuff that
you don't need. It's geared towards beginners too.

[1]: [http://www.vikingcodeschool.com/web-design-
basics](http://www.vikingcodeschool.com/web-design-basics)

------
peterhil
As a former graphic designer and current programmer, i eould say forget about
design for hackers and learn design as such.

The most important aspects of design are communication, composition, visual
structure and the skill of mixing colours.

Learn to simplify the message to a few elements, make the most important
things to really synd out. Also learn about desining with grids to make the
result clear, pleasant and harmonious.

Learn about golden section, and how it relates to catching and guiding the
viewers eye - look at the works of master photographers and renaissance
painters.

To learn about colour theory, go to library, find a classic book(!) about the
subject and grab some colour pencils and mix some colours! In short time you
will develop an intuitive understanding of using the colour sliders in graphic
programs to design harmonious or disharmonious colour scales. Also learn about
complementary colours.

If you want to learn to draw, also learn about perspective and valeur (shadows
amd lights) and try to imitate different textures.

------
xhrpost
I've often had a similar desire. I see the suggestions here for books and
courses, which I don't dispute as good sources. However, I've come across good
designers who have not gone through such extensive training. They haven't
taken a 3 week course on typography and font selection. Yet their designs look
and feel amazing. Do some people just have a natural knack for design while us
hackers are forced to go through extensive courses to just get the basics?

I'm personally interested in just a simple list or article on the basics of
modern and aesthetically pleasing design. Something like, "rounded corners are
easy on the eyes, use them here, but not here." "Button shadows work in a case
like this, but not this." "Your background and foreground colors need to
complement each other, here's some pairs to try." I have however never ran
across such a list/article.

------
MrAlmostWrong
Master iOS Design is a free resource that covers the theories and principles
of design and then how they are actually applied in design. First couple of
sections should be valuable to anybody interested in design:

[https://www.drawar.com/ios/course/design](https://www.drawar.com/ios/course/design)

------
dark12222000
Learning to design well is like learning to code well: You do it a lot until
you improve. Examine "good" designs, thoroughly. Keep notes of sites or apps
you find attractive, and try to find out why. Emulate those things.

Also, read some actual design theory books. Theory is to design what
algorithms are to code.

~~~
warbastard
I did this and it worked for me. I taught myself design after finishing a
code-heavy computer science degree. I learned how to use Photoshop quite
quickly along with some design theory but it took time to get really good.

I used to look at those sites that were popular a few years ago that list well
designed websites, and take inspiration from one or several of them at a time
by combining the elements to create a new design.

It helped that I was working for a company that wanted a new design created to
a brief each week as it helped me to get better quite fast.

Reading a lot of design, UI and UX blogs to understand why things worked was
crucial to my development too.

------
jradd
IMHO css grids are a simple and fundamental method for accomplishing good
design. I am very fond of Zurb's Foundation [1] as it seems to be the most
logical means to my end design. Trying to stay objective in this matter, I
would focus on fundamental concepts of design that have already proven the
test of time. I think a good example of this would the book; The Elements of
Typographic Style [2]

[1] [http://foundation.zurb.com/](http://foundation.zurb.com/) [2]
[http://www.amazon.com/Elements-Typographic-Style-Robert-
Brin...](http://www.amazon.com/Elements-Typographic-Style-Robert-
Bringhurst/dp/0881791326)

------
dceddia
I feel the same way -- I also tried hackdesign.org and it felt lacking. I
think the key to learning design is building a volume of practice, and reading
a couple articles on whitespace and color themes won't cut it -- much the same
way as taking a CodeSchool Ruby course won't make you a pro Rails developer
overnight.

I'm trying to learn more about design and write about my learning process at
[http://designwithdave.com](http://designwithdave.com) \-- there's only one
post so far, but my goal is to post practice exercises and step-by-step
redesigns of existing stuff in order to get better.

------
izolate
How did you get good at development? At some level, you practiced by copying
patterns and implementing them, learning along the way. The same principle is
true for design.

I have a friend who I've seen progress from nothing to becoming a great web
designer simply by putting in the hours. My best advice for anybody for whom
design doesn't come easy is to take in inspiration (try behance or dribbble)
and copy it. Keep copying until you make something worthy of being copied.

------
sehr
hackdesign.org is pretty good provided you actually take their advice and look
into the materials provided.

For example: there are 5 typography related 'modules' in the top level list.

In module 1. 'Dive into Typography', there are 6 different resources within.

From the one of those 6 resources, here are a list of materials mentioned:

* book - Inside Paragraphs: Typographic Fundamentals [0]

* book - The Elements of Typographic Style [1]

* book - Stop Stealing Sheep & Find Out How Type Works [2]

* post - Unicode Beginners Introduction for Dummies Made Simple [3]

I've found this to be the norm for most posts, they may not cover absolutely
everything about a single topic, but they will most definitely point you to
somewhere that will.

[0] - [http://insideparagraphs.com/](http://insideparagraphs.com/)

[1] - [http://www.amazon.com/Elements-Typographic-Style-Robert-
Brin...](http://www.amazon.com/Elements-Typographic-Style-Robert-
Bringhurst/dp/0881791326?/)

[2] - [http://www.amazon.com/Stop-Stealing-Sheep-Works-
Edition/dp/0...](http://www.amazon.com/Stop-Stealing-Sheep-Works-
Edition/dp/0201703394/)

[3] -
[http://pythonconquerstheuniverse.wordpress.com/2010/05/30/un...](http://pythonconquerstheuniverse.wordpress.com/2010/05/30/unicode-
beginners-introduction-for-dummies-made-simple/)

~~~
dkyc
Typography is one element of UI design - I agree with you that the material
they provide / you linked to is probably high quality, but there must be a
faster and more actionable way to learn to design than to read 3 books on
every one of these elements! Imagine someone trying to learn to program: You
would (probably) not recommend 3 books on Syntax, Compiler Design and Data
Structures to even get started...

~~~
pcurve
I'm a design manager, but I also code too. I buy books all the time for my
staff.

If you want a single book that covers all major topics with theories and
plenty of examples, give this one a go.

[http://www.amazon.com/gp/product/1592532616/](http://www.amazon.com/gp/product/1592532616/)

This is NOT a book on web design. This is book on graphic design and, a good
one at that. It covers types, images, graphics, layouts, form.

Simply copying designs in this book will put you ahead of many 'professional'
web designers. It's because many web designers do not fully understand what
makes a design good (or bad).

Even though my work is all digital, personally I find most of the talented
designers are still found in traditional print design world.

You can pick up a used copy for less than $15 shipped.

------
nutter
I've found Thou Shall Not Use Comic Sans: Design Sins and Virtues: A
Designer's Almanac of Dos and Don'ts to be very useful - each page is
dedicated to one design rule, and the justification, tips on use, etc.

[http://www.amazon.com/Thou-Shall-Not-Comic-
Sans/dp/032181281...](http://www.amazon.com/Thou-Shall-Not-Comic-
Sans/dp/0321812816/ref=tmm_hrd_title_0?ie=UTF8&qid=1408117065&sr=1-1)

------
creature
There's a book, Design for Hackers: [http://www.amazon.co.uk/Design-Hackers-
Reverse-Engineering-B...](http://www.amazon.co.uk/Design-Hackers-Reverse-
Engineering-Beauty/dp/1119998956)

The author also produced a free 12 week email course:
[http://designforhackers.com/](http://designforhackers.com/)

~~~
kadavy
First of all, thanks for the mention! (I wrote Design for Hackers).

I'll just elaborate so OP and everyone else can get an idea of how I approach
things when teaching design.

My goal with the book was to "reverse engineer" everything that comes together
to make a good design. In my eyes, the factors of design are always the same
(purpose, technology, culture), it's just a matter of understanding how they
work together.

OP mentions whitespace/margins. I'm such a white space fiend, I did a whole
hour-long talk at SXSW entirely about white space. So, definitely my book
talks about that. You can get much better at design very quickly if you forget
about everything else (fonts, colors, ornamentation) and just concentrate on
white space first.

I also do cover color schemes, and how to build them. If you want an
understanding of how I approach color check out the article I wrote "Why Monet
Never Used Black"[1].

I also write about font sizes & geometry in design. If you want a sampling of
those particular thoughts, Lifehacker picked up one of my tips on the font
sizes I always use on projects[2].

Of course, there's also my free email course that creature mentioned.

Hope this helps!

1\. [http://kadavy.net/blog/posts/d4h-color-
theory/](http://kadavy.net/blog/posts/d4h-color-theory/)

2\. [http://lifehacker.com/stick-to-these-font-sizes-to-
simplify-...](http://lifehacker.com/stick-to-these-font-sizes-to-simplify-
designs-and-more-1531615325)

------
jaan
I'm surprised no one has mentioned Cadence & Slang by Nick Disabato:
[http://cadence.cc/](http://cadence.cc/)

I found it a gentle but thorough introduction with great references for
further reading. I wish I had read this before trying to design apps for the
first time - it would have saved a lot of headache.

------
cjbarber
Also, a little late, but a bit over a year ago I created:

[https://github.com/cjbarber/learn-design](https://github.com/cjbarber/learn-
design)

And it ended up getting a few stars on Github so I think some people may have
found it useful.

> What is this?

> Resources and tools for hacking design together and (alternatively) learning
> design.

------
tjosten
The best book about User Interface Design / User Experience I've read so far
is Designed for Use by Lukas Mathis: [http://www.amazon.com/Designed-Use-
Create-Interfaces-Applica...](http://www.amazon.com/Designed-Use-Create-
Interfaces-Applications/dp/1934356751)

------
michaelbuckbee
I am still far far from being anything someone would consider a designer, but
I got a lot out of
[http://bootstrappingdesign.com/](http://bootstrappingdesign.com/) \- it
focused enough on actionable things that it was pretty much read + implement
to get going.

~~~
SMrF
This book is awesome! Really glad to see someone mentioned it. It has just
enough about design so you can make something that doesn't look terrible. :-)

------
lukesan
I feel the same, almost all resources I know are stating the basics but don't
iterate on how to use them. Maybe you should also post this question on
Designer News [https://news.layervault.com/](https://news.layervault.com/) ?

------
maroonblazer
Check out Before and After Magazine. I think designers literally see
differently than non-designers. He covers general design principles that
helped me see things in new ways.

[http://www.bamagazine.com/](http://www.bamagazine.com/)

------
osmnshkh
"Rules of thumb for novice designers"

[http://shazow.net/everything/rules-of-thumb-for-novice-
desig...](http://shazow.net/everything/rules-of-thumb-for-novice-designers/)

------
shangxiao
I feel I should mention 'The Bible' of usability: The Design of Everyday
Things [1], which is highly recommended.

[1] [http://amzn.com/0465050654](http://amzn.com/0465050654)

------
alvinhsia
Ask a designer friend to send you a big PSD file and use it as a textbook. You
can learn a ton just from examining the set up of spacing guides, layer
groups, folders, font sizes, shadow effects, etc.

------
mkbrody
I took a course on DesignLab, a platform for learning how to design as a
hacker, and it was really good. Learned all the basics of how to MVP my own
sites with some polish. www.trydesignlab.com

~~~
sanderjd
Just signed up for one of these too. Looks like exactly what the OP is looking
for. I haven't taken the course yet, so I can't speak to how good it will be,
but I like that their approach seems to be learn/build/critique cycles.

------
motyar
Good design is what I miss most as a skill. As as developer I can ship much
faster if I can train myself to design well.

------
BorisMelnik
just wanted to drop this resource my friend made:
[http://www.30images30days.com](http://www.30images30days.com) to try to learn
design, he also came from a very technical background so just went that route.

------
jebediah
funny you ask it like that, there is a book which is literally named "design
for hackers" and it is pretty good

------
dsyph3r
[https://hackdesign.org/](https://hackdesign.org/) is a really nice
collections of design articles, videos and tutorials.

------
lordbusiness
designcode.io

FWIW, I think this is the way forward. If you're a front-end programmer and
you want to be relevant in five years time you better be a good designer too.

~~~
jackgolding
isn't think an iOS specific design course?

~~~
lordbusiness
This is where most hackers fall over. Yes, this particular course cares about
iOS and associated technologies for it's particular teachings, but crucially
it's one of many good ways to learn _design_. Which is of course transferable.

There's no such thing as "design for Windows" and "design for Java" and
"design for Linux" or whatever; there's just design. Pick your tools of choice
to learn. :-)

------
Jayd2014
Nice links.

