<commit_before>#+TITLE: The Non-Designer's Design Book

* Table of Contents :TOC_2_gh:
 - [[#the-four-basic-principles][The Four Basic Principles]]
   - [[#proximity][Proximity]]
   - [[#alignment][Alignment]]
   - [[#repetition][Repetition]]
   - [[#contrast][Contrast]]
 - [[#design-with-color][Design with Color]]
 - [[#design-with-type][Design with Type]]

* The Four Basic Principles
** Proximity
[[file:img/screenshot_2017-03-15_08-55-08.png]]

-----

- Items relating to each other should be grouped together
- *To organize*
- If there are more than three to five items on the page(of course it depends on the piece),
  see which of the separate elements can be grouped together into close proximity
  to become one visual unit
- *Avoid too many separate elements* on a page
- *Don't stick things in the corners or in the middle* just because the space is empty

** Alignment
[[file:img/screenshot_2017-03-15_09-00-23.png]]

[[file:img/screenshot_2017-03-15_09-04-29.png]]

[[file:img/screenshot_2017-03-15_09-04-53.png]]

#+BEGIN_QUOTE
When items are aligned on the page, the result is *a stronger cohesive unit* (...)
Get in *the habit of drawing lines* between elements to determine where the connections are lacking
#+END_QUOTE

#+BEGIN_QUOTE
*A centered alignment often appears a bit weak*.
If text is aligned, instead, on the left or the right,
the invisible line that connects the text is much stronger
because it has a hard vertical edge to follow.
This give *left- and right-aligned text a cleaner and more dramatic look.*
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-15_09-05-21.png]]

#+BEGIN_QUOTE
The author's name is far from the title, but that invisible line connects the two text blocks.
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-16_08-05-43.png]]

#+BEGIN_QUOTE
If you're going to center text, then at least make it obvious that it is centered!
#+END_QUOTE

#+BEGIN_QUOTE
Until you have more training, stick to this guideline: *Choose one.*
That is, choose one text alignment on the page.
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-16_08-10-08.png]]

#+BEGIN_QUOTE
*Never center headlines over flush left body copy or text that has an indent*
because if the text does not have clear left and right edges, you cannot tell
that the headline is actually centered. It looks random.
#+END_QUOTE

#+BEGIN_QUOTE
*First paragraphs are traditionally not indented.* The purpose of indenting a paragraph is
to tell you there is a new paragraph, but you already know the first paragraph is a new paragraph.
*The professional typographic indent is one em, which is about two spaces, not five*.
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-16_08-17-06.png]]

#+BEGIN_QUOTE
*Find a strong line and use it.* If you have a photo or a graphic with a strong flush side,
align the side of the text along the straight edge of the photo, (...)
however, there is "trapped" white space, and the white space is an awkward shape, (...)
The whitespace now is floating free of the right edge.
#+END_QUOTE

-----

- *To unify and organize the page.*
- Avoid using *more than one text alignment on the page*

** Repetition
[[file:img/screenshot_2017-03-16_08-24-22.png]]

-----

- *To unify and to add visual interest*
- Avoid repeating the element *so much that it becomes annoying or overwhelming.*

#+BEGIN_QUOTE
At first, simple find existing repetitions and then strengthen them.
As you get used to the idea and the look, start to create
repetitions to enhance the design and the clarity of the information.
#+END_QUOTE

** Contrast

* Design with Color
* Design with Type<commit_msg>Working on the page<commit_after>#+TITLE: The Non-Designer's Design Book

* Table of Contents :TOC_2_gh:
 - [[#proximity][Proximity]]
 - [[#alignment][Alignment]]
 - [[#repetition][Repetition]]
 - [[#contrast][Contrast]]
 - [[#color][Color]]
 - [[#type][Type]]

* Proximity
[[file:img/screenshot_2017-03-15_08-55-08.png]]

-----

- Items relating to each other should be grouped together
- *To organize*
- If there are more than three to five items on the page(of course it depends on the piece),
  see which of the separate elements can be grouped together into close proximity
  to become one visual unit
- *Avoid too many separate elements* on a page
- *Don't stick things in the corners or in the middle* just because the space is empty

* Alignment
[[file:img/screenshot_2017-03-15_09-00-23.png]]

[[file:img/screenshot_2017-03-15_09-04-29.png]]

[[file:img/screenshot_2017-03-15_09-04-53.png]]

#+BEGIN_QUOTE
When items are aligned on the page, the result is *a stronger cohesive unit* (...)
Get in *the habit of drawing lines* between elements to determine where the connections are lacking
#+END_QUOTE

#+BEGIN_QUOTE
*A centered alignment often appears a bit weak*.
If text is aligned, instead, on the left or the right,
the invisible line that connects the text is much stronger
because it has a hard vertical edge to follow.
This give *left- and right-aligned text a cleaner and more dramatic look.*
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-15_09-05-21.png]]

#+BEGIN_QUOTE
The author's name is far from the title, but that invisible line connects the two text blocks.
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-16_08-05-43.png]]

#+BEGIN_QUOTE
If you're going to center text, then at least make it obvious that it is centered!
#+END_QUOTE

#+BEGIN_QUOTE
Until you have more training, stick to this guideline: *Choose one.*
That is, choose one text alignment on the page.
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-16_08-10-08.png]]

#+BEGIN_QUOTE
*Never center headlines over flush left body copy or text that has an indent*
because if the text does not have clear left and right edges, you cannot tell
that the headline is actually centered. It looks random.
#+END_QUOTE

#+BEGIN_QUOTE
*First paragraphs are traditionally not indented.* The purpose of indenting a paragraph is
to tell you there is a new paragraph, but you already know the first paragraph is a new paragraph.
*The professional typographic indent is one em, which is about two spaces, not five*.
#+END_QUOTE

-----

[[file:img/screenshot_2017-03-16_08-17-06.png]]

#+BEGIN_QUOTE
*Find a strong line and use it.* If you have a photo or a graphic with a strong flush side,
align the side of the text along the straight edge of the photo, (...)
however, there is "trapped" white space, and the white space is an awkward shape, (...)
The whitespace now is floating free of the right edge.
#+END_QUOTE

-----

- *To unify and organize the page.*
- Avoid using *more than one text alignment on the page*

* Repetition
[[file:img/screenshot_2017-03-16_08-24-22.png]]

-----

- *To unify and to add visual interest*
- Avoid repeating the element *so much that it becomes annoying or overwhelming.*

#+BEGIN_QUOTE
At first, simple find existing repetitions and then strengthen them.
As you get used to the idea and the look, start to create
repetitions to enhance the design and the clarity of the information.
#+END_QUOTE

* Contrast
[[file:img/screenshot_2017-03-16_08-36-15.png]]

#+BEGIN_QUOTE
Contrast various elements of the piece *to draw a reader's eye* into the page. (...)
*Contrast not only serves to draw in the eye, but you can use it to organize information*,
clarify the hierarchy, guide a reader around the page, and provide a focus.
#+END_QUOTE

#+BEGIN_QUOTE
If two elements are sort of different *but not really, then you don't have contrast, you have conflict*.
#+END_QUOTE

* Color
* Type
{'fraction_non_alphanumeric': 0.09840213049267643, 'fraction_numerical': 0.03568575233022637, 'mean_word_length': 4.162199312714777, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4377078', 'n_tokens_mistral': 2567, 'n_tokens_neox': 2286, 'n_words': 1011}