HN Books @HNBooksMonth

You can't have a collection about design without having Josef Müller-Brockmanns' Grid Systems.

https://www.amazon.com/Grid-Systems-Graphic-Design-Communica...

You'd be interested in this then (1968):

https://www.amazon.com/Grid-Systems-Graphic-Design-Communica...

> Among graphic designers and studio artists, a "grid" was always just a fun-to-try curiosity for noob artists to learn composition.

Some very famous graphic designers used a grid as the basis of their designs.

http://www.amazon.com/Grid-Systems-Graphic-Design-Communicat...

⬐ pjbrunet

If you're going to use a grid, it's typically a starting point, when you're looking at a blank canvas, blank screen, blank piece of paper. And as your work takes shape, you no longer need the grid. The finished work may still have some pleasing hints of underlying structure, even though the grid has been taken away. You may want to shift things just above or just below alignment to create a little interesting tension, which you can see in Cezanne's work. But usually the grid is completely gone by the time you're done. Most of the time, it's not there to "rule" the composition from start to finish. The grid is typically a reference point.

Anyway, my real complaint about grids is all the technical debt it adds, and in the case of Bootstrap it's bad, in my opinion. And it's totally unnecessary. If you want two columns, just work from 50%, you don't need a complex system for that. It's harder to make changes when there's a cryptic grid system in place. When I see code like class="grid-12c" next to class="grid-9b" I'm thinking what the hell? Is that supposed to be human-readable? To me, it seems like a bad trend. If people want grids so bad, then why did we stop using tables 15 years ago? Seriously. I thought floated divs were a step in the right direction, more akin to how designers/artists work, like I can just imagine Matisse saying, "Float that margin a little lower. Perfect!"

⬐ rangibaby

> If you want two columns, just work from 50%, you don't need a complex system for that.

That's what you'd think, but intuitive CSS working differently, or not at all, depending on your browser is what made Bootstrap necessary in the first place.

Bootstrap's great feature is that it works at all. I assure you that rolling your own site with a level of functionality provided by Bootstrap is a massive pain in the ass.

Tables were a pain in their own way. Don't you remember "font" tags?

I strongly believe that in order to do good interaction work you really just need to understand typography well. That might not be a popular viewpoint around here, but I encourage you to consider some of these references.

I recommend Josef Muller-Brockmann's Grid Systems in Graphic Design: http://www.amazon.com/Grid-Systems-Graphic-Design-Communicat... or Emil Ruder's Typographie: http://www.amazon.com/Typographie-Manual-Design-Emil-Ruder/d....

There are many, many other good resources but those are important primary sources. So is The Elements of Typographic Style, by Robert Bringhurst: http://www.amazon.com/gp/product/0881792128/ref=pd_lpo_sbs_d....

⬐ blawa

Thank you. While not exactly what I was asking for, this is great to know.

⬐ mattmanser

It doesn't sound like you know what software design patterns are. This has absolutely nothing at all to do with design patterns, which is about software design and how to manage complexity and nothing else. UX is not code.

⬐ ulisesrmzroche

The origins of patterns in software are actually from architecture. Code is just a medium that we work with, but they've been used in other fields for millennia.

Plus patterns in software are not all about managing complexity, and only some of them are about code construction. Like, do you know what the pattern is before you debug anything?

They're heuristics, basically.

In any case, a good ux pattern would be a top nav, but not fixed to the top.

⬐ domedefelice

@mattmanser the op asked specifically for UI patterns: "To give an obvious example of what I'm looking for- I would say, use margins to separate multiple instances of same components (among other uses)."

⬐ scarmig

Question of the day: did design patterns originate with the GoF, or did they originally exist in the world outside of code as patterns to improve human experience?

⬐ thuuuomas

Code producing bad UX is bad code.

⬐ bigtunacan

While I agree that the TC intended software design patterns, I don't think a WTF is in order for the confused reply.

The term "design patterns" stems from architecture, not computer science, and is used by designers as well for the common patterns that may be applied for good UI/UX design.

http://ui-patterns.com/patterns

Somebody better let Google know that "design patterns" don't apply to UX.

https://developer.android.com/design/patterns/index.html

https://developers.google.com/web/fundamentals/layouts/rwd-p...

⬐ hamburglar

> The term "design patterns" stems from architecture, not computer science

Do you have any references? I find this fascinating, but googling "design patterns" and "architecture" together just results in lots of "software architecture" topics. Who originated the idea?

⬐ Isofarro

http://en.wikipedia.org/wiki/Software_design_pattern#History

My opinion on the matter of learning design has always been to place a primary focus on the basic elements and principles (see link at bottom).

There are plenty of abstract design theories to study, but when it comes down to actually working, there is no substitute for a mastery of the basics. Paul Rand has some practical thoughts on design in his books.

Overall, I would place an emphasis on learning to articulate the problems you need to solve through design. Design is not something you can learn in the abstract—there can be no effective design without first defining the problem(s) your project presents. I would say design is 90% problem solving and 10% aesthetics.

I've found the best way to learn design is to first understand the basics, then go out and apply them to the designs you encounter. Look at other interface/web designs and ask yourself questions based on the principles you've learned. The key here is to understand the "why" behind the "how".

As for the "how", project-based tutorials are okay, but you should be careful not to get lost in the actual project. You want to be gathering techniques, not just following steps.

Resources Wikipedia: Elements & Principles of Design http://en.wikipedia.org/wiki/Design_elements_and_principles

Anything you can find by Paul Rand. Some of his books are out of print, but if you're creative you can find them on the web.

Grid Systems In Graphic Design by Josef Muller-Brockmann http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

1. [Visual Grammar](http://books.google.com/books/about/VISUAL_GRAMMAR.html?id=w...) by Christian Leborg

2. [Emotional Design: Why We Love (or Hate) Everyday Things](http://www.amazon.com/exec/obidos/tg/detail/-/0465051359/) by Don Norman

3. [The Elements of Typographic Style](http://www.amazon.com/Elements-Typographic-Style-Robert-Brin...) by Robert Bringhurst

4. [Grid Systems](http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...) by Josef Muller-Brockmann

5. [Ordering Disorder: Grid Principles for Web Design](http://www.amazon.com/Ordering-Disorder-Principles-Design-Vo...) by Khoi Vinh

6. [Why Customers Really Buy: Uncovering the Emotional Triggers That Drive Sales](http://www.amazon.com/Why-Customers-Really-Buy-Uncovering/dp...) by Linda Goodman (I've had the pleasure of meeting her and overhearing her office conversation during my daily tasks at the office in Houston, where she worked for a spell. Incredibly sharp, and it is clear that her principles exposed in this book are thorough-going in her interactions with people. I think it would be important to apply her research to Lean methodologies, building Features only around Emotional Triggers. This is what we are aiming at, but I am making this connection right now, I believe, in saying this.)

7. [Contextual Design: Defining Customer-Centered Systems](http://www.amazon.com/Contextual-Design-Customer-Centered-In...) by Hugh Beyer, Karen Holtzblatt

I wish. I can't read German either :( Some secondhand copies around, but they're still expensive. http://www.amazon.com/gp/offer-listing/3721201450/ref=dp_olp...

Here you go:

http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

⬐ papsosouid

The fact that I recognize your name solely because you seem to constantly deliberately misrepresent what people say so you can respond with nonsense is rather depressing. That is graphic design, not web design. See how I pointed out that tightly coupling content and presentation is the problem with using grids for web design? Notice how that book never even touches on the subject? Web design is not just graphic design, it is a different medium, with different needs.

⬐ tptacek

You'd be a more compelling troll if you chose a different one of my comments to attach this to, since the comment you're replying to is literally just a link to a book.

⬐ egonschiele

> Purchasing my copy of grid Systems in Graphic Design, by Josef Muller-Brockmann, was the best money I've ever spent on a design text. I was a relatively seasoned designer with 6 years of pro-experience when I was fortunate enough to find a copy of this masterpiece. I was largely self-taught however, and while I knew from working in various layout programs about grids, I had no idea how powerfully they could be utilized. Within a weekend of reading and absorbing this book, my designs had improved substantially.

Sounds about right!

⬐ tptacek

Raster Systeme of course being one of the more famous graphic design books of the 20th century.

Books are designed. Lots of consideration is put into the typography, layout, rhythm and form of printed books, and those design choices stretch back over a hundred years. There is much more at play than "justification, and paragraphs, and if you're lucky a nice font."

https://en.wikipedia.org/wiki/Jan_Tschichold

http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

https://en.wikipedia.org/wiki/The_Elements_of_Typographic_St...

You use grids to group and align your content.

Basically you need look at your design in order to determine what would make most sense.

A very popular choice is to divide it into three equal sizes and then have one of them be the right or left column, while the two others combine to form the other column.

So you end up with two columns one for content and one for navigation (typical blog look)

Grids can obviously also be much more complicated as those used in photoshop, 3dmax, word or windows/osx.

If you want to get really into grids I can recommend probably the best book written about them.

Josef Muller Brockman Grid Systems

http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

⬐ tptacek

I have this book and like it, but I doubt it's particularly useful for the typical nerd wiring up a credible looking web application.

⬐ tstegart

Can you recommend a different book that would be more useful to someone trying to edit Twitter Bootstrap from a beginner's perspective?

⬐ moizsyed

Khoi Vinh's Ordering Disorder is a good book on grids, and its focused entirely on web design.

Although, nothing beats Brockmann's Grid Systems book mentioned earlier.

http://www.amazon.com/Ordering-Disorder-Principles-Design-Vo...

⬐ tptacek

You don't need a book. You just need to build a hello-world application with the Bootstrap CSS/JS code, using one of the layouts they provide as a starting point. Then just use the page of Bootstrap demos as an a la carte menu as you find yourself needing UI features.

The Grid Systems book that was recommended earlier is a better bet if you're a typographer or graphic designer, and particularly if you're thinking about designing novel grid systems. But you're not doing that. The Bootstrap grid is trivial and does not require any background in design to use.

⬐ ThomPete

That doesn't mean one can't educate oneself on what it is though no?

I mean I am a designer but still taught myself programming and is generally interested in technology.

Understanding design better will make you a better programmer IMHO.

⬐ tptacek

All I can offer here is my opinion. I have the book. I like it, because I geek out a little on typography and graphic design (I am horrible at both). I wouldn't put the book on my "buy immediately" list of practical design books for developers.

_Elements of Typography_ (which also has some coverage of grids, along with meter systems), yes. _Elements_ is a buy-immediately book (and a joy to read).

The best resource on why and how to use grids is: http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

It's primarily used as an aid for visual layouts, but it took on the other useful qualities everyone else has listed as the grid frameworks got popular in the web.

I've been inspired by stuff from Josef Muller-Brockmann. I'm not a graphic artist, but I'm getting this book when I get a chance: http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...