5 ms·

Designing with White Space: Why 1+1=3

33 points by kadavy 15y ago

starwed 15y ago
Weirdly, with the table designs, he switches to using italics for the %s without discussion. I assume that's because, in the absence of a dividing line, it provides an additional hint that the two blocks are separate? That seems to weaken his point about the importance white space for this example, though...
- kadavy 15y ago
  This post is based upon a part of my book, in which I do mention the italics, but I left it out on the first run. I've now edited to post so I do mention it. Thanks for noticing / commenting!
  - deleted 15y ago
    [deleted]
burgerbrain 15y ago
I don't really get how "1+1=3" is related here. With a proper grammar, such as the one used in infix arithmetic, whitespace is unnecessary. (and missing deliminators in postfix or prefix for 1+1 wouldn't yield three, just an error, or 11 if there's a unary + operator defined.
peng 15y ago
A decent, introductory write-up about white space. It's a bit difficult to take seriously since the design of the blog doesn't use whitespace effectively. Of course, "The shoemaker's children are often shoeless", and all that. Irrelevant aside: 'dogsfurry' can work. As someone who spends a lot of time with marketing firms and branding agencies, dogsfurry is not an inconceivable label for a high-end pet supplies company.
- kadavy 15y ago
  > the design of the blog doesn't use whitespace effectively. Could you be more specific? My blog definitely needs a design refresh (your quote is right – I've been writing a book the past year so haven't had the time to design), but I'm sure you don't mean that the entire blog design fails to use white space effectively :)
  - rwolf 15y ago
    First off, thanks for writing Design for Hackers. What distracted me when I was reading this post is that many parts of the page appear to be improperly aligned: http://i.imgur.com/77bVj.png http://i.imgur.com/77bVj.png
  - redthrowaway 15y ago
    I found the site jarring in general. The bright yellow hurt my eyes, and the babyshit brown type seemed out of place given that it was used only in the intro and first headline, and didn't fit in with the other colours there. The yellow was the biggest pain for me, however.
  - bsinger 15y ago
    Also, a little more padding around the text might look better. It's a little cramped.
deleted 15y ago
[deleted]
IvoDankolov 15y ago
To be honest, that analogy with 1+1=3 is really out of place. It feels like generalizing into an area without actually bothering to look whether it hold or not. Why is that? Because in just about every system of expressing arithmetic, the whitespace around the + carries literally no mathematical information at all. Whitespace on the whole has little role other than to serve for formatting purposes. On the whole, though, the premise is sound. Showing nothing at all can often be underestimated, but nothing is a concept that we all can easily grasp and distinguish, so it can be associated with all sorts of subtle (and not so subtle) hints. In fact, for a programming anecdote, I really like Haskell's decision to apply functions there with ... whitespace (add 2 3). After all, that is the most fundamental thing you are doing there, the most "obvious" as it were. I think that choice is not only convenient, but shows very good understanding of aesthetics. That is good whitespace management.
huhtenberg 15y ago
For a website that is concerned with design matters, it is odd that it uses @font-face typeface that makes it virtually unreadable on Windows. http://i51.tinypic.com/1jusfs.png http://i51.tinypic.com/1jusfs.png
- estel 15y ago
  I'm not sure what part of that screenshot is supposed to be unreadable?
d0m 15y ago
I could hardly believe that the author of the book designed that blog.. I mean, who would like to buy a book about design with such an ugly look and feel and 1990 taste. Ironically, even the white spaces are wrong :-/ IMO, it's way better to keep things simple and avoid ugly graphics and colors if you're not good enough to use them correctly.
mannicken 15y ago
http://illusion.scene360.com/wp-content/themes/sahara-10/submissions/american-architects-logo.jpg http://illusion.scene360.com/wp-content/themes/sahara-10/sub... this is why negative space is important. It can create unintended things if you are not aware that it exists.

33 points by kadavy 15y ago

Weirdly, with the table designs, he switches to using italics for the %s without discussion. I assume that's because, in the absence of a dividing line, it provides an additional hint that the two blocks are separate? That seems to weaken his point about the importance white space for this example, though...

kadavy 15y ago
This post is based upon a part of my book, in which I do mention the italics, but I left it out on the first run. I've now edited to post so I do mention it. Thanks for noticing / commenting!
- deleted 15y ago
  [deleted]

burgerbrain 15y ago

I don't really get how "1+1=3" is related here. With a proper grammar, such as the one used in infix arithmetic, whitespace is unnecessary. (and missing deliminators in postfix or prefix for 1+1 wouldn't yield three, just an error, or 11 if there's a unary + operator defined.

peng 15y ago

A decent, introductory write-up about white space. It's a bit difficult to take seriously since the design of the blog doesn't use whitespace effectively. Of course, "The shoemaker's children are often shoeless", and all that. Irrelevant aside: 'dogsfurry' can work. As someone who spends a lot of time with marketing firms and branding agencies, dogsfurry is not an inconceivable label for a high-end pet supplies company.

kadavy 15y ago
> the design of the blog doesn't use whitespace effectively. Could you be more specific? My blog definitely needs a design refresh (your quote is right – I've been writing a book the past year so haven't had the time to design), but I'm sure you don't mean that the entire blog design fails to use white space effectively :)
- rwolf 15y ago
  First off, thanks for writing Design for Hackers. What distracted me when I was reading this post is that many parts of the page appear to be improperly aligned: http://i.imgur.com/77bVj.png http://i.imgur.com/77bVj.png
- redthrowaway 15y ago
  I found the site jarring in general. The bright yellow hurt my eyes, and the babyshit brown type seemed out of place given that it was used only in the intro and first headline, and didn't fit in with the other colours there. The yellow was the biggest pain for me, however.
- bsinger 15y ago
  Also, a little more padding around the text might look better. It's a little cramped.

deleted 15y ago

[deleted]

IvoDankolov 15y ago

To be honest, that analogy with 1+1=3 is really out of place. It feels like generalizing into an area without actually bothering to look whether it hold or not. Why is that? Because in just about every system of expressing arithmetic, the whitespace around the + carries literally no mathematical information at all. Whitespace on the whole has little role other than to serve for formatting purposes. On the whole, though, the premise is sound. Showing nothing at all can often be underestimated, but nothing is a concept that we all can easily grasp and distinguish, so it can be associated with all sorts of subtle (and not so subtle) hints. In fact, for a programming anecdote, I really like Haskell's decision to apply functions there with ... whitespace (add 2 3). After all, that is the most fundamental thing you are doing there, the most "obvious" as it were. I think that choice is not only convenient, but shows very good understanding of aesthetics. That is good whitespace management.

huhtenberg 15y ago

For a website that is concerned with design matters, it is odd that it uses @font-face typeface that makes it virtually unreadable on Windows. http://i51.tinypic.com/1jusfs.png http://i51.tinypic.com/1jusfs.png

estel 15y ago
I'm not sure what part of that screenshot is supposed to be unreadable?

d0m 15y ago

I could hardly believe that the author of the book designed that blog.. I mean, who would like to buy a book about design with such an ugly look and feel and 1990 taste. Ironically, even the white spaces are wrong :-/ IMO, it's way better to keep things simple and avoid ugly graphics and colors if you're not good enough to use them correctly.

mannicken 15y ago

http://illusion.scene360.com/wp-content/themes/sahara-10/submissions/american-architects-logo.jpg http://illusion.scene360.com/wp-content/themes/sahara-10/sub... this is why negative space is important. It can create unintended things if you are not aware that it exists.