fundamentals of design

_color_theory_101.md

Two types of color:

• subtractive: "color you can touch" (e.g., skin of an apple)
  • controlled by CMYK colorspace
• additive: "color you can't touch" (e.g., light from a computer screen)
  • controlled by RBG colorspace

Humans process color in HSL (Hue, Saturation, Lightness):

• best visualized as a colorwheel:
  • hue is measured in degrees (red: 0º, green: 120º, blue: 240º)
  • saturation goes from 0 to 100% where 0% is grey and 100% is as vivid as possible
  • lightness goes from 0 to 100% where 0% is black, 50% is the most vibrant form of the hue, and 100% is white.

Contrast

• Contrast of Hue: two colors have the same S and L but vary in H
• Contrast of Saturation: H and L remain constant
• Contrast of Lightness: H and S remain constant
• Most contrasts are multi-faceted (combinations of the above contrasts)
• The WCAG2 (Web Content Accessibility Guidelines) standardize how much contrast there needs to be for accessibility purposes

HSL vs. HSB

• L is lightness; at 100% the color is white
• B is brightness; at 100% the color is as vivid as possible

Color Schemes

Western interpretations of colors:

• Red:
  • color of heat, excitement or passion
• Orange:
  • warmth, vitality, reliability, playfulness
• Yellow:
  • optimism creativity sunshine cheer hapiness
• Green:
  • serenity health growth nature freshness
• Blue:
  • security truth stability loyalty reliability open communication
• Purple:
  • spirituality intelligence wealth -- royal sentimental creative sophisticated
• Pink:
  • youthful intensity energy fun excitement
• Brown:
  • durability class (age stability relaxation)
• Black:
  • power drama (serious bold strong)
• White:
  • simplicity cleanliness (youthful mild pure)

Monochromatic Color Schemes:

• all have the same hue
• vary their S and L (saturation and lightness)
• easiest to create but lack versatility

Analogous

• varies S and L
• but hue increases and decreases

Complementary

• includes a base hue and the hue opposite to it on the colorwheel (180º away)
• varies S and L

_typography_101.md

Font styles (and classes)

• Humanist:
  • emulates caligraphy
  • serif:
    • some contrast in the strokes
    • good for journalism or historical
  • sans:
    • minimal contrast in the strokes
    • good for education or finance or government
• Transitional:
  • serif:
    • sharper serif and more contrasting strokes than Humanist
    • good for academia or legal
  • sans:
    • upright or uniform characters
    • strong strokes
    • good for tech or transport
• Modern:
  • serif:
    • very thin horizontal serif
    • high contrast between strokes
    • good for arts or culture
  • sans:
• Egyptian (Slab):
  • serif:
    • heavy boxy serifs
    • almost no contrast in the stroke
    • good for marketing or promotional
• Geometric:
  • sans:
    • geometric shapes form the backbones of the letters
    • good for science or architecture

Design suggestions when mixing fonts:

1. Avoid choosing 2 fonts from the same style. E.g., Epic (humanist serif) and Garamond (humanist serif)

• this is a lot like clashing colors.

2. Avoid choosing 2 fonts from the same class. E.g., Epic (humanist serif) and Agora (slab serif).
3. When mixing classes, find a a similar trait. E.g., Epic and Myriad are both humanist style fonts.
4. Strive for contrast over harmony:

• either keep it the same or change it a lot.

Style guide (formulation and suggestions):

Your style guide prototypes the copy of your site. It should demonstrate what the following elements look like:

• Headline Text (~ 260-300% size of Body copy)
• B-Head (or Sub-Head) Text (~ 150% size of Body copy)
• Nav items (100% size of Body copy)
• Body copy (suggest at 16px but isn't set in stone)
  • Leading -- the distance between lines -- should be demonstrated in here.
  • Good leading is ~ 120-150% size of body copy
  • Line width is measured in Characters Per Line (CPL) and 50-70 CPL is ideal.
• Byline (e.g. a footer) text (~ 75% size of Body copy -- maybe 2-4px smaller)

Save the widows and orphans:

• Widows are single words in a line
• Orphans are single lines in a column or page

Tweak font size, leading, and line width to avoid widows and orphans as much as possible. At the very least, endeavor to make headings widow free.

CSS

• Leading is controlled with line-height and the value is relative to font-size. Hence, line-height: 1.5; will yield acceptable leading.
• CPL can be controlled with max-width. E.g., with a font-size: 26px; and a window of 1000px, setting max-width: 630px; will keep the CPL to 55-65.

style_guide.md

Headline Text

B-Head (Or Sub-Head) Text

Nav Item 1 | Nav Item 2 | ...

This is body copy. Lorem ipsum dolor sit amet,...

^{Byline Text...}