Ask HN: How to learn design as a hacker?

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.

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

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/

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

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

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.

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/

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

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/

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.

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

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

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

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

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 feel I should mention 'The Bible' of usability: The Design of Everyday Things [1], which is highly recommended.

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

"Rules of thumb for novice designers"

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

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.

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

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

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)