HN Books @HNBooksMonth

IMO, a book every developer should read is "The Non-Designers Design Book" by Robin Williams (no, not that Robin Williams).

It's short and to the point, so it won't take long to read, yet it covers all the basics of design to just the right level for the average developer.

"Design for Hackers" by David Kadavy is also quite popular, but IMO it just takes longer to say the same things.

Amazon links for the lazy:

https://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Wil...

https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133...

Edit: Since several of the latest comments seem to be saying similar things about programmers not "getting" design, I think one thing that may come as a bit of a revelation is that design starts with a hierarchy of information and there are certain rules for how that information should be presented. There is an artistic aspect to compelling design, but when it comes to things like wireframes and UX modelling, your average programmer probably has more design skills than they realise.

⬐ brightball

I'd tend to agree with this assessment. I've never been a designer, from scratch...but once I have a design to work within I don't have any issues with making UI/UX decisions that keep things smooth for people.

This is probably one of the reasons that Twitter Bootstrap has done so well for people like me.

You ask me to worry about visual recognition, spacing, minimizing number of steps, 80% interfaces, etc and I'll have no issues.

You ask me to come up with a color scheme, tones, gradients, proper fonts, line spacing, negative space, etc and I'll curl up in the fetal position.

Developer as well here - mainly server side Java and Node.js on my spare time.

I started looking into useful material to help improve my non-design skills, because well... they are non-existent.

I started with Twitter Bootstrap but I don't think it is the way forward if you want to learn design the proper way. I recently bought this book: The Non-Designer's Design Book (http://www.amazon.com/Non-Designers-Design-Book-The-Edition/...) and would warmly recommend it to anyone who wants to put one foot or their whole body into the design world.

I now try to spend more time analyzing the design of websites, brochures, menus, etc. It is very fun and I believe it is my observing and analyzing other peoples' work (mistakes included), then practising, that you can improve your eye(s) for design.

> "it feels like so much bullshit with all those 20$ offers getting the upper hands"

You can't just put in a bid that looks the same as theirs except for the dollar amount. You have to differentiate yourself:

- Communicate clearly. Before you've even put in a bid, ask questions and discuss the technical challenges you foresee. Be prompt; respond within hours rather than days. Make it clear that they're getting a whole different level of ability with you than with the bottom of the barrel.

- Be willing to offer a quick turnaround on a sub-project, as a proof of ability. It's a big risk to commit thousands of dollars to you sight-unseen, but if a client can commit $50 to have you fix a smaller problem, this can give them confidence to go with you for the full project.

- learn some rudimentary design (something like http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... ). "Full stack" isn't full enough; your clients don't want to put together a team, they want to pay their money and get a complete product. Coders who can make an ugly website are all too prevalent; separate yourself from them.

- if you're going through a freelance site that has certification tests or similar, take a day and go through them. It shows you're willing to put in the effort -- or, rather, not having done so shows the opposite.

This looks like it could be an interesting book, and I'll most likely buy it when it comes out. In the meantime, another great book is "The Non-Designer's Design Book":

http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

This is complete plagiarism from Robin William's "Non-Designer's Design Book." She identifies the four principles of design as Alignment, Contrast, Repetition, and Proximity. She even makes a reference to the fact that "CRAP" would be a poor acronym.

The author simply reorganized the principles, and that's dishonest. http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

⬐ pbreit

The author states very clearly in the introduction that the principles come from Robin Williams (not the comedian). Unless the author added this after you commented, I think your comment is excessively accusatory and off-base.

⬐ sixtofour

The author cites Williams. Is it plagiarism to discuss someone else's work? The blogosphere would look pretty empty.

"There are at least four key principles of visual design that have an important impact on usability. These four principles — contrast, repetition, alignment and proximity — were originally given the engaging acronym CRAP by Robin Williams (the visual designer, not the comedian). You can exploit these four principles to make user interfaces both more attractive and easier to use.

Let’s look at each one in turn."

The Non-Designer's Design Book: https://www.amazon.com/dp/0321534042/ref=as_li_ss_til?tag=de...;

Should give you some basic ideas. For the logo or other important stuff, maybe hire someone to do it.

I think what's really difficult is developing an internal feedback loop so that you can critique your own work, and thus improve it. I simply don't have the sense that some poeple do, for instance, that one design is 'good' and another isn't.

⬐ giulivo

hi David,

thanks for the suggestion, I managed to find the preview online and it looks great.

Also, hiring someone is currently out of my possibilities but I'd be happy to share my idea with someone who does have some graphics skills to see if likes the project and would get involved.

Are there "places" on the internet where such a kind of "networking" can happen?

⬐ davidw

Seeing your other comment/submission, another book you might find interesting is "Start Small, Stay Small". Here's a talk I gave about it, in Italian:

http://www.bettersoftware.it/conference/talks/start-small-st...

Sounds a lot like the much praised Non-Designer's Design Book http://www.amazon.com/dp/0321534042/

The "Non Designer's Design Book" is pretty good. It was suggested to me on this forum some time ago, and I got a lot out of it, even though it's still a struggle to really internalize it

https://www.amazon.com/dp/0321534042/ref=as_li_ss_til?tag=de...;

(And, yes, I have an affiliate link there. That's why I got a high karma score here, so I could start raking in the millions with affiliate links to books...)

⬐ dirtyaura

Agreed, The Non Designer's Design Book has been the most helpful for me. When you've learned the basics of UX design, you can probably improve your overall UX design best by learning the basic skills of visual design.

⬐ revorad

You're clearly not greedy enough. Here's the UK link with my affiliate ID :-P :

Papaerback - http://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Will...

Kindle - http://www.amazon.co.uk/Non-Designers-Design-Book-3rd-ebook/...

⬐ DenisM

I recommend against the Kindle version, as the illustrations are messed up. Which is really bad, because they are supposed to illustrate design

⬐ davidw

+1

I do not fathom the people who have been downvoting my comment. By all means, if you find someone on this site who submits nothing but link spam, downvote and flag them. Otherwise, why get your knickers in a knot about me getting a pittance for recommending a book I happened to like?

⬐ rapind

The affiliate link affects the way some of us see the recommendation. In turn this reduces the contribution of you comment. It's kind of an internalized spam filter.

I would never downvote you for it, and I'm not saying you're wrong to put it in, I'm just trying to explain how some of us here will see it.

I'm more likely to check out the link if (a) you have nothing to gain and (b) I've seen great design work you've done. Without that I usually can't be bothered.

⬐ notbitter

Why would you sacrifice your objectivity for what you admit is a pittance?

⬐ davidw

I'm not sacrificing my objectivity. I wouldn't post a link to something merely for the money. But since I'm posting a link to something I feel is worthwhile, I might as well put some money in the stash for more Kindle books.

⬐ wnight

Probably because so many people are reasonable until there's seventeen cents towards their wishlist on the table and then they'll shill for anything to get it.

An Amazon link doesn't save as much time as it would have in the 90s and the message looks spammier for it.

⬐ revorad

I have learnt to ignore HN downvotes on my comments, and am now learning to also ignore upvotes. Thinking about internet karma is not worth anyone's time, especially because it robs you of your sense of humour.

⬐ cageface

The whole karma system is childish and unnecessary. Assigning imaginary points to posts doesn't improve them any more than taking them away discourages trolling and juvenile behavior.

⬐ lobo_tuerto

I agree wholeheartedly with your last sentence.

After stoping to care for downvotes and upvotes, I started to see my karma as a _wallet_, with it I could _spend_ points in irrelevant comments, bad jokes, etc., but not carelessly, just enough to have a good laugh without compromise or worry. Positive points in my _wallet_ means I'm still contributing positively to this community, just that.

I Am Not A Designer (terrible with colors), but I've read this book: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia... Which I very much recommend.

What you're observing is probably the lack of a strong line on the left side. The right edge of the Y Combinator logo ought to form a guide line down the page, with the voting arrows' right edge X pixels to the left and the text X pixels to the right of that, and this line should also propagate through the text entry box and the reply button and so on. Instead, there's the logo, the link, the textbox and reply button (which do at least line up with each other), and the first layer of comments, each of which has its own individual vertical line. (I think. Comments and the title text are close but I'm not sure it's quite right, and there's so much interference in between it doesn't matter.) I Am Not A Designer but I know enough to know that's wrong.

Also, the bottom of the Y in the logo should form a horizontal line that the rest of the text in the title bar lines up with, whether or not that happens for you appears to depend on the zoom level of your browser. (For me right now the "Add Comment" is visibly above the Y, but when I zoomed in to look closer it actually dropped below that line. By the way, designing on the web is hard. Also my website sucks and I know it. It's on the list.) Something should probably also be done with the horizontal line the voting arrows line up on.

Cleaning that stuff up would be a start. It probably wouldn't be enough, and then I'd be stuck, because I only get the really basic mechanical stuff. Everything I've phrased as fact in this comment should be taken to be opinion, it would just be very tiresome for me to type and you to read the same caveat over and over.

The book that changed my outlook (as an engineer) and got me started on the road to appreciating good design is The Non-Designer's Design Book (http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...). It taught me the basics of what makes a good design vs a poor design-- but beware, after reading this you will notice (and be annoyed by) poor design forever :D

I'm in the same position as you. And I've been trying to do this without much sucess. And then I found this book and it really has the very basics down pat:

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.

Buy this book:

http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

EDIT: It's a great book. It's not a "Hello World," but it will help you get to the point of being able to make one. It covers a lot of fundamental design concepts that I, as a developer, didn't know but am now glad I did.

Start with "The Non-Designer's Design Book" by Robin Williams http://amzn.com/0321534042

You can devour that book in an afternoon.

And since Typography is such an important part of design. You should read this blog post here: http://www.informationarchitects.jp/en/the-web-is-all-about-...

and:

The Elements of Typographic Style Applied to the Web http://webtypography.net/

typo: "Thanks for registering! Please ake the time"

Landing page:

make the logo bigger upper left. make the logo subtitle a phrase that is formatted as a direct answer to the question "Why are you here?" make the logo aligned with the body text to make the left axis of alignment on your page stronger. Consider changing the background gradient to something radial rather than linear and more stylized. Maybe a darker luminosity to emphasize that the notebook page is the foreground. Do not use centered alignment in your content page. Always use left or right alignment unless you have a really good reason for making it centered. There isnt much repeated style between elements Uh... I'm going to stop mentioning design stuff and just say you should either hire a designer before a programmer\hacker or get this book for some really easy to act on practical advice: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

App: On notes under an idea I like how it hides unnecessary interface features unless you mouseover..... I think you need to incorporate this design methodology in more places with cruft on the site. I am allergic to cruft, squint until your eyes go blurry and see how many different "chunks" make up the page and try to limit it to 5-7. Tags is plural but only seems to accept one thing. You need to show "state" better. For example you know how some sites use breadcrumbs? Like it will say "Metamemetic's Ideas > A First Idea > Notes" or something and they are all links to navigate back and forth, and they are all the same style in the same location and instantly convey where I am in the site. You don't have to use breadcrumbs just make it super obvious for the user to tell where they are and what they are doing at all times with no clutter around whatever the "state" indicator is. and don't have multiple "state" indicators, just one all informative one.

overall it's a good idea though with a good code foundation! Props for getting something out there

I would try and leverage the fact that you are creating tree data structures with ideas and notes to do some interesting things in the future, but just improve the UI and UX first.

[I don't know if I would use the site personally because I use Git to version control my local repository of random ideas, but there could be a good target market. Not sure who your target market is... you should pick one and post on whatever forums they are currently sharing ideas on and see what features they would need\want to use your site. Or if your site ends up functioning better as a personal planner\to do list than a collaborative editor, maybe market it as increasing ones organization and productivity]

⬐ metysj

Great return, thanks. If you are or know a good designer you can recommend, I'm a taker.

I'm not sure I know exactly what you mean by web design. So lets start there.

a. The look: the graphic design of the page.

b. The interaction: Usability and UX

c. Designing and coding with good software design principles.

d. Some thing else?

I can point you to some good books for b. or c., however a. is the holy grail. I have never found a good book on web design from a graphic design perspective. That said Ill share with you what I would consider the closest I have found.

----------------------------------------------------------

a. (Web site Graphic Design)

* The non Designer's design book - http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

* Visual Language for Designers - http://www.amazon.com/Visual-Language-Designers-Principles-U...

* Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...

* I have found some good online articles http://delicious.com/csmeder/ux

----------------------------------------------------------

b. (Usability and UX)

* Web Form Design: Filling in the Blanks - http://www.lukew.com/resources/web_form_design.asp

* The Design of Sites: Patterns for Creating Winning Web Sites - http://www.amazon.com/Design-Sites-Patterns-Creating-Winning...

* And again Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...

* Information Design Workbook http://www.amazon.com/Information-Design-Workbook-approaches...

----------------------------------------------------------

c. (software design and coding)

* Bulletproof Web Design - http://www.amazon.com/Bulletproof-Web-Design-flexibility-pro...

* Handcrafted CSS - http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Desig...

* jQuery in Action - http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/...

⬐ ewoodh2o

I found the SitePoint book "The Principles of Beautiful Web Design" (http://www.amazon.com/Principles-Beautiful-Web-Design/dp/097...) to be very informative as well. It's a great introduction to a lot of different aspects of design that programmers generally don't think about when trying to mimic more professionally-designed sites. I read it two years ago, and it was a bit easier to digest at the time because most of the designs presented still felt current.

However, keep in mind that while the designs presented in many of these resources may look outdated, the principles behind them are solid. Tastes and trends may change, but running through a few Photoshop tutorials will get you up to speed on the execution of the latest styles. More importantly though, design basics such as readability, whitespace, proximity, alignment, proportion, color, texture, etc are timeless. If you can distill those important aspects from the materials you're reading, you'll be much better off in the long run than if you just try to copy techniques from whatever the most modern resource currently is.

⬐ jamesbritt

(a) is quite the tough one. Large part of the problem is taste. You need it, as does the author of any guidelines, and you and the author need to be in sync.

Worth looking into are grid layouts, and CSS frameworks that making working with grids easier. I'm a fan of 960gs, but there are a few good ones.

http://www.thegridsystem.org/

http://delicious.com/jamesbritt/Grid

⬐ DenisM

I suggest you read the non-designers design book. A lot of it is pure math - colors, alignment, contrast, repetition, and proximity. Even if you won't learn how to design you will learn to tell good design from bad, and what makes it so.

Stay away from Kindle version though - in a twist of irony the book's layout has been severely corrupted, serving more as an anti-example to its own content.

⬐ daleharvey

great list, thanks

I wrote a blog post the went very briefly about design tips for programmers

http://arandomurl.com/2010/07/07/design-tips-for-programmers...

there is also a few linked resources from there, the video and the book at the end are really good.

⬐ csmeder

Ha, yes I liked it. In fact your actually part of the list above under:

I have found some good online articles http://delicious.com/csmeder/ux

⬐ barmstrong

Added yours to this list (with some voting) in case anyone is interested:

http://buyersvote.com/categories/the-best-books-to-learn-gra...

⬐ caffeine

Excellent! What a helpful list. This is one of my major stumbling blocks as a programmer trying to build usable apps.

⬐ irondavycole

For (a) I would recommend Mark Boulton's book, Designing for the Web, which is available free online:

http://designingfortheweb.co.uk/book/index.php

It has really competent sections dedicated to aesthetics: typography, color, and layout. That he made it free is unbelievable. It's a resource I always recommend to the developers I work with (I'm a designer) who want to understand more about design.

⬐ photon_off

Here are some other related websites that might interest you:

http://www.moreofit.com/similar-to/?url=http%3A%2F%2Fdesigni...

There are a couple different titles, the one linked above is the typography-focussed volume.

The one on general design principles is here: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

There are also volumes specifically for web, powerpoint, etc.

⬐ edanm

You're right of course, that's the one I meant. Copy paste bug! :(

I'm no great designer, but a few things I did:

1. Read "Non Designer's Design Book" (amazon: http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...).

2. Subscribed to a lot of web-design blogs (try Six Revisions, NetTuts etc.).

3. Learned to work well with Photoshop. I especially loved Lynda.com's Photoshop courses.

4. Designed, designed, designed. As with everything else, actually doing is the most important thing.

Read "the Non-Designers Design Book" (http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...)

It covers the basics of design, color theory and typography. It's a great start.

I found The Non-Designer's Design Book pretty useful.

http://www.amazon.co.uk/exec/obidos/ASIN/0321534042/

It provides a list of simple typographic and design rules to follow, and explains why they're important. As written on that Amazon page, they are contrast, repetition, alignment and proximity.

There's no reason why you can't have a simple site that also looks 'good'. There are some fundamental issues with your sites that wouldn't be fixed by merely making them more complicated. The lack of repetition and alignment in your sites particularly jump out at me (once you've read this book, you'll see mistakes everywhere).

Look at the Squeezed Books site. The "Home" link isn't aligned with the links below and above it. The text in the logo in the top left is nearly aligned with the "Log in" link, but is actually centered within the image. Even if people don't consciously spot it, it will likely feel 'off' to them. You've centered the "What is Squeezed Books?" text. Centering looks messy and feels weak. A good rule of thumb is to avoid it entirely until you know when it's appropriate to break the rule. As for repetition, I simply ask, how many different font styles do you count on that page? There are too many.

Highly recommended: Non-Designer's Design Book - http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

⬐ bgraves

Came into this thread to recommend this book and upvoted here.

This is an older book, the 3rd edition is from 2008, but the first edition is a few years older I think. The most surprising thing (for me) was that design principles have not changed much in the past 100 years or so. This book is geared more towards print design (newsletters, fliers, business cards, etc) but the concepts translate really well to the web.

Another point is TYPOGRAPHY! This shouldn't be overlooked and is easily the best way to improve the design of your site. Color schemes, graphics, and ornaments are secondary to getting the typography (font choice and style, layout, colors, pairing, etc.). Please do yourself a favor and read this article from the world-renowned web designers at Information Architects: http://informationarchitects.jp/the-web-is-all-about-typogra... -- be sure to read the resources at the end of that article. It's s a great place to get started.

Good luck!!

⬐ antileet

I recommend the Non-Designer's Design Book as well. However, there are a few little hacks that seemed to work well for some sites I had to put up.

1. A nice compelling photograph is a little easy on the eye and seems to make up for a lack of content on the front page.

2. Use sIFR (http://www.mikeindustries.com/blog/sifr/) to add fantastic typography to your site, and make it more visually appealing.

3. Using wordpress as a frontend for your website (even if you don't have a weblog) allows you to swap in one of thousands of fantastic themes.

Whenever a friend asks me to put together a website, I just ask him/her to pick a theme, and host wordpress with static pages. It's a lot more easier to maintain and has more choices as far as visual content is concerned.

[edit: formatting]

⬐ dirtyaura

Excellent suggestion. Although I think design is a skill that has to be learned by practice (and there's of course natural talent involved), Non-Designer's Design Book gives you a few concepts that allow you to better understand why some designs just look better and some don't.

One of the biggest tool for me was that you shouldn't be wimpy, but make big contrasts: e.g. select large font & small font instead of two that are too close to each other.

⬐ davidw

Cool, I ordered it, thanks!

I already have "Don't Make Me Think", and it's given me some good advice, but the more I get, the better.

⬐ breck

I recommend the Non-Designer's Design Book too.

Also, I recommend Don't Make Me Think, by Steve Krug.

I'm a terrible designer, but have learned a few simple things from these books and other great designers.

First, here's what's most important:

- Copy (most important!) - Size/Shape/Position

Much further down:

- Font and colors

Second(paraphrased from Krug's book):

1. Does this site offer something of value that I want? 2. How hard is it to extract that value?

You should learn basic design principles first. Start reading this book:

Non-Designer's Design Book

http://www.amazon.com/Non-Designers-Design-Book-3rd-Designer...

⬐ ankeshk

I recommend Non-Designer's Design Book too. Its the best starter book on designing.

Combine that with making a few trips to colourlovers.com for selecting your site colours - and you're set.

"The Non-Designers Design Book" by Robin Williams.

It was written without the web in mind. It's mostly about typography and spacing for posters, business cards, flyers, etc. But it translates suprisingly well to web design.

http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...