Part I

1. Joshua Trees

parable about tree identification: seeing a picture of a Joshua tree in a book, he thought to himself, I must've never seen this tree before, only to subsequently realize his neighborhood was full of them.

Once I was conscious of the tree—once I could name it—I saw it everywhere. Which is exactly my point: Once you can name something, you’re conscious of it. You have power over it.

the 4 principles: contrast, repetition, alignment, proximity.

2. Proximity

Robin's principle of proximity: group related items together. use proximity to give your page organization, and to give the viewer a sense of where to start and end.

compare this:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/68a79e70-5170-4f61-b531-3512e21e0ba8/Untitled.png

to this:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ee4c2122-7af3-4824-9fc6-8315b69166a1/Untitled.png

whitespace helps to organize your content and it also gives your eyes "space" to rest.

to determine if your page uses proximity well, squint your eyes and count the number of visual elements on the page. if there are more than 3-5 elements (depending on the medium), consider how to group some elements to become one visual unit.

3. Alignment

“Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.”

essentially, we're creating invisible lines that connect the elements on our page.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/aa97f1e5-d03c-4fa2-8323-417f62544f59/Untitled.png

left- and right-aligned text is cleaner than center-aligned, because the invisible line connecting elements is easier to "see". center-alignment gives a more "formal and sedate" look—only choose it consciously, rather than by default.

you can use both the alignment of your text and the alignment of the blocks that contain your text to give your design a unified look.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f135f827-91ab-46f1-923b-d9fe0f631338/Untitled.png