Visual grammar

What Hacker News says

1. RobertKeransJul 2021
   That's similar to my experience, it seems so trivial when you describe it to people, but it's ridiculously useful.

   Just a recommendation for anyone reading the comments & wants this kind of base level knowledge, Visual Grammar by Christian Leborg is this, basically, it's an excellent book, can normally get it dirt cheap off Amazon or wherever but link from publishers:

   https://papress.com/collections/design-browse-books/products...

   Show morethread
2. jayshuaJan 2019
   I was in your boat about five or six years ago. Programming was fine, CSS was kinda-not-really ok, and design was just non-existent. Over time though, it really is something you can learn.

   I started by cloning designs in CSS that I liked. Same way I write programs just to learn. Pick a design and try to reproduce it. (Here's a good simple one that could probably be finished in a single sitting. [1]) Eventually I was able to clone an entire website while only referencing the internet for CSS details, not core concepts. It'll take time just like learning any language, but the theory behind CSS does make sense if you can peel back the layers of features built on top of it. (Like Git, the core model is beautiful - the CLI not so much.) Reading about the "cascade" part of "cascading style sheets" would be a good place to start if you get the basic syntax already. Then study the selector operators. All of them, there aren't that many.

   Then read books on design. Info about CSS the language is readily available online. Info about design, not as much. Design for Hackers [2] is targeted at programmers and explains not just the what but also the why certain designs work. The way our brains interpret color and how that causes certain colors to work well together. How people process information and how to leverage that to make designs that "make sense." Visual Grammar [3] is a design reference book I refer to. It's like a SQL reference book - won't teach you the language (of design) but explains the options you have and when they could be useful. Things like "these types of alignments will produce this type of result."

   Just remember that it takes time to learn a skill. And design is definitely that - a skill that can be learned.

   [1] https://assets.awwwards.com/awards/images/2016/04/uxpin-teas... [2] https://www.amazon.com/Design-Hackers-Reverse-Engineering-Be... [3] https://www.barnesandnoble.com/p/visual-grammar-christian-le...

   Show morethread
3. wittysenseMay 2013
   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

   Show morethread
4. nsfmcFeb 2013
   a long long time ago, i wrote a post here on hn on how to get started on web design [0], but since you already have the technical bit, you can just skip ahead to the Design part.

   That said, I don't think that many "howto design" books are all that interesting (and the best design books are mystifying in a way which defies reason), but you will find books about the nuts and bolts of design which are very good even if you're totally green to the field. The other most important thing is that you keep making things. Even little things. Make them and show them to people and get feedback. Lather, rinse and repeat.

   Anyhow... You will want to specifically look for books on Typography, Color, Layout, Photography, Contrast/Scale, and Poster Design. Poster Design is actually sui generis despite appearing to be a subset of graphic design.[1]

   My belief is strongly on the side of typography being the most crucial skill a designer needs (since its use of space/contrast/layout) is basically design in a micro level, rather than on the macro (page) level. The skills you pick up in typography do translate over, but it takes lots of practice. Since illustrators are readily hopping into many design jobs, our best bet is to differentiate ourselves with our exhaustive knowledge of typography.

   A great book on "Book Typography" is Cyrus Highsmith's Inside Paragraphs.

   A good book on "Display Typography" is Wolfgang Weingart's My Way to Typography.

   Three good books on "Typographic Fundamentals" are: Ellen Lupton's Thinking With Type, John Kane's Type Primer and Erik Spiekermann's Stop Stealing Sheep (and find out how type works).

   One excellent "Typographic Reference" is Robert Bringhurst's Elements of Typographic Style.

   One good book about "Design Process" is Nancy Skolos & Tom Wedell's Graphic Design Process.

   No design book suggestion will be complete without mentioning Emil Ruder's Typographie, Josef Muller-Brockman's Grid Systems and Armin Hofmann's Graphic Design Manual.

   That said, a good starter is layout/formmaking Christian Leborg's "Visual Grammar," part of Princeton Architectural Press' Design Briefs series[2] (all of which are good for skimming the next time you find yourself in a bookstore/amazon showroom).

   Finally, I never realized it until I made a joke about it, but you can summarize many of the principles of good UI Design in PEP 20, which is to say that if you care about API Design and Code Cleanliness and all that stuff, then you probably already have the right attitude towards graphic/visual design. Take those principles and apply them visually when you make anything or use them as a rough litmus test for your designs then break the rules as you see fit.

   Have fun! Relax. Don't Panic!

   [0]: http://news.ycombinator.com/item?id=1605228 [1]: While poster design employs many of the same structural techniques as Capital-D Design, it has its own rules which are useful to know, but above all it is free to play with scale in a way which is difficult in web and book design. Still, knowing about it will inform your own work and probably make it wayyyy more fun. [2]: http://papress.com/html/book.list.page.tpl?action=seriessear...

   Show morethread
5. willifredFeb 2012
   This might be helpful too, a very good book on the basics:

   http://www.amazon.com/Visual-Grammar-Design-Briefs-Christian...

   thread
6. tuhinMay 2011
   At the risk of being seriously down-voted in a Hacker dominated community, please read the following:

   Not a designer? Here’s how to make your web apps look awesome

   A) Please hire a designer. You might hire someone who is not very costly and fits your budget but I cannot over emphasize the value someone who does this day in day out brings to the table.

   OR

   B) If you were a designer and wanted to build something, what would you do? Use one of the million ready made coding junks like "Digg Template" or "Twitter template"? No you know very well that innovation does not work that ways. You would pick up a book and learn to program or find someone who knows it and will help you.

   Just because "everybody" thinks they can design or make things "look" good, it does not mean it is design. Read a few books like the following to get started:

   1)The Design Of Everyday Things by Donald A. Norman, Don Norman (basics of design)

   2)Visual Grammar by Christian Leborg (basics of visual design)

   3)Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann (typography)

   4)Don't Make Me Think!: A Common Sense Approach To Web Usability by Steve Krug (basics of UX)

   5)Understanding Comics by Scott Mccloud (basics of storytelling- useful in web interfaces too)

   6)The Visual Display Of Quantitative Informations by Edward R. Tufte (useful in information design and dashboards)

   If you have read them and want to learn more, please feel free to contact via my HN Profile.

   Show morethread