Ask HN: How to learn design as a hacker? | Hacker News Reader

Ask HN: How to learn design as a hacker?

117 pointsdkyc49 comments

I'm a full stack web dev and hacker by heart. However, all my front-end designs just can'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'm getting tired of hiring freelancers.

I tried hackdesign.org, but figured it was way too high-level and since it's only a blob of links to blog-posts it didn't create any continious learning experience for me. I'm looking for resources that help me with practical problems like whitespace/margins, color schemes, font-sizes etc...

View on HN

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

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.

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.

exactly

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

IMO, this is very important and a common pitfall for lot of hackers. Hackers get overzealous and apply their programming creativity into UI design, which confuses users. It is better to stick to common UI patterns initially (or just look at popular apps for patterns) and learn from user testing before jumping into insanely great design.

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

Largely disagree with the above statement. Consumer psychology is largely irrational, therefore frivolous attributes like the "look" and "feel" of a site that have nothing to do with functionality can influence what you perceive to be "easy to use."

A good example of this irrationality in action is how the taste of food can be influenced by how it looked visually prior to the act of tasting.

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.colormatters.com/color-and-design/basic-color-the...

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/

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

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/

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)

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.

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/

---

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/

---

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/

---

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/app-design-handbook/

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

---

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/

---

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

---

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

Edit: formatting

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

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.

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

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.

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.

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

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.

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.

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/ [2] http://www.amazon.com/Elements-Typographic-Style-Robert-Brin...

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

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.

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/

[1] - http://www.amazon.com/Elements-Typographic-Style-Robert-Brin...

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

[3] - http://pythonconquerstheuniverse.wordpress.com/2010/05/30/un...

I disagree on hackdesign; I believe they're overrated. It's mostly just a daily blast of minimally curated stuff; you'd have as much success as a daily Google search for "design".

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

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/

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.

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

There's a book, Design for Hackers: http://www.amazon.co.uk/Design-Hackers-Reverse-Engineering-B...

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

It was a book with a good design, although it didn't help me learn much about design. The references were useful, but I would have liked to be a step-by-step guide (similar to Drawing on the right side of the brain, but for design) instead of a showcase of 'good' design and some side note tips.

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/

2. http://lifehacker.com/stick-to-these-font-sizes-to-simplify-...

I'm surprised no one has mentioned Cadence & Slang by Nick Disabato: 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.

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

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.

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

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

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

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/ ?

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/

"Rules of thumb for novice designers"

http://shazow.net/everything/rules-of-thumb-for-novice-desig...

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

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

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.

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

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.

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.

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

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

https://hackdesign.org/ is a really nice collections of design articles, videos and tutorials.

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.

isn't think an iOS specific design course?

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

Nice links.

Reply on news.ycombinator.com