Another web design site, another page that's almost impossible to read due to washed out text.
Guys, do you test your sites on anything other than Macs with "retina" displays? For example, I maxed out the brightness setting on my Thinkpad x60 and the text is still barely legible. Granted, this TP has a very average display, but do you really want to limit your audience to Mac users?
Yeah, gray font on the white background is not pleasant. For a page which talks about books like "The Design of Everyday Things" it's kind of a fail ;)
Your base font size is at 12px. I think that's really, really small. I find it much easier to read when it's at 18px instead. Here's a comparison: http://imgur.com/O7F5N,zCyyz#0
Now, anyone can zoom in with their browser... but your entire layout changes width when I do that: http://i.imgur.com/U96Py.png
Not really - it depends on the choice of fonts and their settings. Most sites look good on my system. Occasionally you get such ones, which look weirdly because they rely on some non existent font, and are rendered in fallback mode, using some generic one. If you want to avoid relying on system dependent fonts, use WOFF.
proxima-nova and Helvetica Neue are not common fonts, so putting them as first with fallback to Helvetica is not the best option, if the font isn't provided as WOFF.
Really uncomfortable reading here (regular PC in a regular office environment) and according to Chrome's inspector it's #777. If I remove the "proxima nova" font it improves a bit because of Helvetica's added weight.
Really unfortunate design for an article about design, and blaming the users' browsers, operating systems, lighting conditions or etc. is NOT the correct approach.
On a more useful note, I enjoyed Fred Brooks' "The Design of Design", on the process of design rather than on visual design.
The Design of Everyday Things literally changed my life back when I read it in high school. To this day, I've never been able to look at doors the same way.
But seriously, everything I see nowadays that frustrates me in its design immediately harkens back to a principle in The Design of Everyday Things.
Truly transformative book - couldn't recommend it enough.
I wish even the "deep" hackers would read these books and realise that command line interfaces and C prototypes are human interfaces too. Yet every time something explodes because someone confused -r and -R on the shell or something equally ridiculous, the internet echo is largely "LOL if you cannot read manpages, then why are you even using computers".
I liked the nuclear reactor example in The Design of Everyday Things because it illustrated (again) that usability is important even if only trained professionals have to use <something>.
They don't cover just visual design, but design in general. While visual interfaces are most commonly associated with design, design is actually related to many other areas as well.
Latin is related to many things, but surely we can agree it's not a "must learn" for someone designing a device driver.
Something as general as "don't make me think" may make sense for API design, but honestly I doubt the applicability of "The Elements of Typographic Style" or "Grid Systems" to library documentation and API discoverability.
Because the author of the post probably has a very narrow vision of what the term "hacker" means. And putting "every" and "should" in the same sentence makes it sound like it's some kind of universal advice worth gold or something.
I know 2 of the books mentioned and they are great books, but the poster should mention that the Design of Everyday Things is starting to be seriously dated. At least for the examples exposed - the principles do not age.
hey ekianjo. you're absolutely right in that 'design of everyday things'is an old book. It also has some examples that will probably never age. Out of the 5 books in the list, it has been the most useful of any design book (to me). Changed how I think about design.
I consider the design of everyday things a good book but I am not sure I would consider it a "must-have". I bought it because someone mentioned it on HN before in the same way ("Must-read") and while I found it insightful, most of the principles were not new to me and I found it poorly written (it could have been MUCH shorter and concise). Some pages are really fillers. That's also why I question its "universal" status, as it is far from being perfect (especially in the later chapters).
I found the Non Designers Design Book by Robin Williams irreplaceable. It really improved my understanding and skill. Instead of mediocre and bad designs, I can now create stuff that passes the bar. The most important thing it teaches you, is how to detect what is bad with some design and what to do to fix it.
I keep returning to the moment when I set up an email forwarding in IFTTT for every mentioning of word 'book' on HN feed - boy does it deliver some good links.
From a pure graphic design standpoint, I would recommend The Elements of Typography Style to any developer, as well as Thinking with Type by Ellen Lupton. A solid understanding of typography is maybe the most important, and definitely the most immediately useful, facet of design.
Interesting point about Muller-Brockmann as well. It's essentially a collection of case studies about working within constraints.
I would respectively disagree and so would many design schools.
Design as the original poster is talking about is essentially about communication and although Typography is one of the essential skills needed, it is not the only one.
And we communicate through words, most of the time.
Typography is pretty important there. It certainly isn't the only skill that's necessary, but it's a great place to start and is often key to layout, especially in designs informed by the grid.
I don't want to seem snarky, but that first picture you have there, the one of a collection of books where I have to tilt my head to read them and that book on the left is called "Design of Everyday Things" and talks about designing things so that ... for instance... people don't have to tilt their heads to read them.
Why don't you rotate that picture, 90 degrees counter-clockwise?
I can think of a few reasons why it might be like that: to lead the reader into the article; to provide context of a library; to fit with the visual flow. Easy to criticise (especially on the grounds of efficiency) more interesting to critique... which is why many of these books are worth reading. Every wonder why the design of everyday computers are designed to keep us so stationary?
It seems a week doesn't get by without a post or two in Hacker News about GUI design or graphic design, often entitled something like "Design for Hackers" or "Design for Developers".
The trouble with all these posts is that they are trying to shortcut the methodology of design by various hacks, even something as lengthy as read 5 books is by-in-large a hack.
There is no substitute for practise, for looking and appreciating your world in a different way (this can be self-taught, I will discuss more below) and for in-depth thinking about what either comes down to communication or feedback problems.
Aesthetics largely is difficult to teach and learn and comes from confidence and a place in the brain that is hard to hack, but communication and interaction is learnt from early childhood by everyone - it just needs opening up and awareness of this as we mature.
By looking at the Design of Everyday Things (the book or the things around you) you begin to appreciate or notice the failures in signs, handles, buttons, phones, car controls, packaging and if you are tuned into this way of thinking it can be hard to stop considering the amount of interactions with “things” we have everyday.
Then taking this body of knowledge that is learnt one can then start objectively looking at one's own design and interaction problems, using the same tools that you have been using to analyse potential problems as they occur and working them out to find the best solution. But knowledge of the best solution will also come from practise of working with the constraints of whatever medium are working in (for example print, application, touch screen, architecture or furniture design).
This practise will mean mistakes - this is an important part of the learning process, just as it was when growing up, you will learn what works and doesn't work and in the future intuitively work with this in mind.
As a designer I can recommend each of these books.
I'm seeing in various comments that 'hackers' and 'designers' are two different things, and that a 'hacker' needs a certain type of book or format to the material. I'd submit that most hackers have a thirst for knowledge, part from curiosity and part from a desire to be self sufficient in making their concepts a reality. Digest knowledge, practice the technique until it works and you've realized your goal? Does this not encapsulate the 'hacker spirit'? It's funny because most great designers I know came from the same perspective...
So I say put aside this idea of Hacker vs. Designer and who needs what. A design is a solution to a problem, visual design language/concepts are another tool set to help you make effective software and so much more. Don't treat it like its some sort of voodoo that only left-brainers can comprehend.
All these books are great but they are theoretical in their approach. It's good to be knowledgeable about Golden Ration or Fitts Law but it wouldn't be of immediate help on your next project. The books for Hackers should be pragmatic in their approach and not very theoretical.
The books I recommend are:
Non-Designers Design Book by Robin Williams. It focuses on topics like Consistency, Alignment, Proximity, and Contrast. With these four rules, you can make 90% of your designs look good. It also explains briefly on what colors and typography to use. When you've firm grasp of the fundamentals, it would make sense to arm yourself with more theory.
Don't make me Think by Steve Krug. It teaches you to simplify and focus on the end-user.
"All these books are great but they are theoretical in their approach."
You've never read them then, as they all use real world examples. Don Norman's has 3 Mile Island for example.
"It's good to be knowledgeable about Golden Ration or Fitts Law but it wouldn't be of immediate help on your next project."
The Golden Ratio is one ratio, there are many. Some more, some less, aesthetically pleasing.
Fitt's Law is basically about the metrics of completing any action involving your hand and a target, say a button or a link.
Consider an HTML pag with no graphical embellishments beyond a white body colour and a dark gray text colour, the proportions and spacing allocated to each bit of content will decide if people find it beautiful or not, and the ease with which they can interact with buttons and links will decide if they find it usable.
Actually, Universal Principles of Design is a somewhat misleading title. I was excepting a book deeply theory-driven, with few principles derived from even fewer concepts, but it turned out to be a compilation of 210 notions loosely categorized. It contains the topics you suggested, and many more. I think his purpose was pragmatic, but I'm not sure it suceeded.
Indeed, statements like "four rules cover 90% of design", as you said, are both theoretical and practical: they strive to simplify and unify a conceptual landscape, which in turns helps you in your work, because you don't have to remember and apply many vague heuristics.
Of course, whether a true and satisfying theory of design exists, is another matter.
Good books, but not particularly good for hackers. I have the "The Elements of Typography Style" for example, it is certainly a classic, but it is written for people already familiar with typography to some extent, is very long and most of it isn't very relevant to web design.
A good design book for hackers, would have less than 200 pages and deal with the essentials, basic typography, using whitespace productively, grids, color theory etc. in a systematic way. If anyone has any recommendations for that kind of book, I would love to hear them.
Agreed. These are great books, but "design for hackers" implies that these book will help you "hack" design, which they won't.
These books will help you get a better understanding of the principles of good design at root level, but they won't do much if you're just looking to make your app look or work better.
On the other hand, these books are much more practical:
The most compact book on design is only 46 pages, called "Notes on Graphic Design And Visual Communication." It's IMHO the best book on design even though it's a compact overview of the concepts and terminology... It's handwritten and probably the only handwritten book you'll ever read. It's worth buying just to own it.
I have met AIGA award designers and Internet design celebrities who don't know some of the basics laid out in this short book.
I guess that main point of this post isn't about visual/graphical design - it's about ways of thinking and about design approaches to problem solving. It's good to find some new ideas (which could be useful in software development, like idea of Software Designs Patterns has been derived from Architecture formerly) to try think by different way.
The problem is not with the book, TETS, but rather then web is only now becoming able to deal with some of the advanced typographic treatments that physical books have been using for 100's of years.
The book opened my eyes, and has certainly affected my ebooks and the css I created to style them.
I've long wanted a good book that covers design principles in a way similar to how one would introduce a student to calculus, but for graphical design, layout and their interplay with typography.
Most books I've found so far are merely coffee table books: Pages of very nice illustrations, but weak on explaining the theory and principles of applying it to, e.g., a book, poster or website.
Does anybody know of such books? What do serious students of graphic design read? Is the book "Universal principles of design" a good fit?
I would also recommend "Designing with the Mind in mind" by Jeff Johnson.
Less generic that what has been listed in this article since it focuses more on user interfaces, it's a great overview of basic design principles, with clever illustrated examples.
There is not. And honestly I don't think it's a must have. It's certainly a beautiful book, but you can learn most of what you need to know about grids just by Googling around. Typography is a comparatively much more complex topic, warranting the purchase of a book, and there's more to layout than grids and Swiss-German design.
The copy you get from Amazon is bilingual in German/English and it's totally worth it. The way they set the bilingual text in itself is a pretty fascinating study on grid systems.
I read this book in design school and its probably some of the best reading I've ever done. If I had to pick one book out of all of these, it'd be this one.
As someone who has owned it for years, it's still one of my favourite books, but you don't need to read it for UI design, there are other references now days
This isn't about programming related design, but "A Pattern Language" is a classic, with architectural and urban design principles that apply in many other domains:
http://en.wikipedia.org/wiki/A_Pattern_Language
Another great one: Frank Chimero's "The Shape of Design". More about the design process than design itself, and that makes it all the more applicable to anyone who creates anything at all.
I would definitely add "Nudge" by Thaler & Sunstein to the list. It really helps understand how people choices are motivated, thus how to make good design choices.
can you expand on why you think it would be a good resource about design ?
I read "understanding comics" a couple of years ago and while I think it's an awesome book I am not sure of why you think it's a good resource for designing stuff that is not "sequential art".
and also: you can't separate text from design (like in comics) a point that "understanding comics" makes quite clear.
and user interaction: changing from one state to the next, from one webpage to the follow up webpage is a transition, a transition like form one page to the next, also from one panel to the next - and you can determine how the users experiences the transition, like in comics you can go from one detail to the next detail, from moment to moment, from one aspect to another aspect, or from boring to surprise (or, you can even go completely dada).
"understanding comics" is not a 1:1 analogy for website/webpages, but it helps you to really understand your pages, your design and how the users experiences them.
I agree, but it's a good kickstarter. I don't know if the said 'every hacker' will understand the one about type (I haven't read it, but even as someone interested in design I find typography quite a difficult subject).
Don't worry about being intimidated - there's nothing inherently complex that'll stop you from intellectually appreciating the subject - there are quite a few abstractions and moving parts, but treat those like an API - "pages have margins and text blocks, and text blocks have leadings and..." The more important part is the intuition (or "taste in design") that lets you combine those parts together - and Bringhurst aims to give you his view on how things should work by specifically prescribing style. That gets you over the initial hurdle in figuring out what works for you.
I'm not intimidated, and the things you mentioned aren't that complicated. what I don't get is all those stuff about what makes a font good. I can spot out flaws in ux, recognize a good ui solution from a bad one, and I see when something falls off the grid, ohter than those technical sides I like photography, illustration and many other forms of visual art, etc., I enjoy looking at good type, but with all of that I have literally no idea why designers say arial sucks (I know comic sans suck though, fortunately). what I always do with fonts is basically a negative selection so the end result is legible and doesn't look awful for my taste, but I'd f.ex. find problems mixing serif with sans correctly (serif is in general a mystery to me, I use sans as a safer bet).
Typography is hard, if only because it's quite subtle until you really start paying attention to it (in everything). How good or bad a typeface may be is irrelevant beyond a minimum quality, e.g. it's kerned well, it has been pixel hinted. It's simply a question of appropriateness.
The reason Arial is often, arguably inappropriately, slated as a bad font is because it stacks up poorly against other fonts in the situations where it's appropriate. Helvetica is more sterile, balanced, and tasteful — it does most of the things Arial does, but better. The only advantage Arial has over Helvetica is at smaller sizes on the web, where the head of the t, tail of the g, and terminal of a help to make the characters more distinguishable (in theory).
So beyond quality, it's about what's more appropriate. Then of course you've got to set it well, but that's practice.
Guys, do you test your sites on anything other than Macs with "retina" displays? For example, I maxed out the brightness setting on my Thinkpad x60 and the text is still barely legible. Granted, this TP has a very average display, but do you really want to limit your audience to Mac users?