Skip to content

Latest commit

 

History

History
executable file
·
6 lines (5 loc) · 11.9 KB

Test.md

File metadata and controls

executable file
·
6 lines (5 loc) · 11.9 KB
Raw
layout
page

Go Home.

Graphic Design Ontology

Color

Property in graphic design used to highlight important points, to evoke emotional mood, as an abstraction of a physical thing.

  • Color
    • Channels (RGB/CMYK/HSB)
    • Hue
      • Black
      • White
      • Red
      • Orange
      • Yellow
      • Cyan
      • Green
      • Blue
      • Purple
      • Pink
    • Shade
      • Light
      • Dark
      • Bright
      • Weak
      • Neutral
      • Fresh
      • Soft
      • Hard

Aesthetics

1) Hue evokes mood:
http://www.uhh.hawaii.edu/academics/hohonu/writing.php?id=73
Black: dark, night, death, mourning, gloomy, sorrow, dirt, wicked, evil, drama
White: winter, peace, glory, dignity, purity, innocence, clean, pale, weak, harsh
Red: rage, blood, fire, danger, courage, bravery, excitement, passion, sex
Orange: warmth, autumn, energy, tension, cheer, life
Yellow: caution, heat, sun, light, brightness, radiance, joy, cowardness, jaundiced, intellect
Cyan: ice, depression, sadness
Green: growth, nature, hope, fresh, fertility, gentle, pastoral, envy
Blue: wisdom, truth, water, sky, heaven, cold, distance, masculinity, rest, melancholy
Purple: shadow, religion, fantasy, magic, royalty, dignity
Pink: sex, lust, love, joy, sweetness, happiness, affection, kindness

 

Photographic Image

A 2D reproduction of the human eye with an emotional connotation or an informational goal.

  • Image
    • Format (vertical/horizontal)
    • Focus
    • Angle (up/down/level/wide)
    • Lighting
      • Color
      • Direction (front/side/flat)
    • Motion effects

Aesthetics

1) Focus : rule of thirds
http://en.wikipedia.org/wiki/Ruleofthirds
Rule of thirds: an image can be divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines. The four points formed by the intersections of these lines can be used to align features in the photograph. Proponents of this technique claim that aligning a photograph with these points creates more depth, tension, energy and interest in the photo than simply centering the feature would.

2) Lighting color:
Twilight produces mystery and gloom, early morning light safety and memory. A light subject will have more impact if placed against a dark background and vice versa.

3) Lighting direction:
Front light produces bright, well-exposed colors but lacks sense of depth. Side light produces shadows, modelled surfaces and saturated colors and is ideal for landscapes. Back light produces theatrical, dramatic effect. Flat light is ideal for soft, natural close-ups

4) Rules of thumb:

  1. Avoid blur
  2. Put the sun behind you
  3. Move closer, remove any clutter, keep it simple
  4. Include a scale reference (person, car, ...)
  5. Add depth
  6. Look for details
  7. Level the horizon
  8. Follow lines (leading into the picture)

 

Layered Image

A 2D image of superimposed (photographic) pixel layers that form a composition.
http://en.wikipedia.org/wiki/Alphacompositing
http://www.adobe.com/products/photoshop/family/

  • Canvas
    • Size
    • Resolution
    • Color profile
    • Layer(s)
      • Source (image/fill/gradient/texture)
      • Index
      • Origin point
      • Size
      • Transformations
        • Scale
        • Rotation
        • Flip
        • Distortion
      • Blend
        • Opacity
        • Merge mode
      • Mask Layer
      • Adjustments
        • Brightness
        • Contrast
        • Hue
        • Saturation
      • Filters
        • Blur
        • Sharpness

 

Vector Graphics

A 2D or 3D scalable, mathematical representation of an image typically used for text, logo's, color planes and decorative elements in a composition.
http://www.w3.org/TR/SVG/

  • Path(s)
    • Stroke width
    • Stroke color
    • Fill
    • Contour(s)
      • Segment(s)
        • Command (line/curve/move/close)
        • Position
        • Control handles
    • Transformations
      • Scale
      • Rotation
      • Flip
      • Distortion
    • Filters

 

Typeface

A coordinated set of characters (alphabetical, numeral, punctuation) with a stylistic unity.
http://www.w3.org/TR/REC-CSS2/fonts.html

  • Font
    • Family
      • Serif
      • Sans-serif
      • Script
      • Monospace
      • Blackletter
      • Display
      • Symbol
    • Style
      • Regular
      • Italic
      • Bold
      • Bold Italic
    • Glyphs
    • Metrics
    • Kerning

Aesthetics

1) Type
http://hubel.sfasu.edu/courseinfo/SL99/typography.html
Serif is used for printed, readable blocks of texts, the serifs forming visual anchor between letters. Sans-serif is used for display typography (signage, headings) that demand visual clarity and impact. Sans-serif has a higher readibilty than serif on web pages however. Script is used to simulate handwriting and evokes elegance and personal touch. Monospace is used for programming code or to emulate an old-style typewriter, or to simulate an impersonal, bureacratic feel. Blackletter is usually used for diplomas, certificates and formal invitations, evoking weight, etiquette and formality.

2) Style
Italic is used for titles and proper names or to create subtle (subjective) emphasis to small amounts of text. Bold is used for contrast, to highlight important words, instructions, statements and facts.

 

Typography

Typography is the art and techniques of type design, modifying type glyphs, and arranging type. Type glyphs (characters) are created and modified using a variety of illustration techniques. The arrangement of type is the selection of typefaces, point size, line length, leading (line spacing) and letter spacing.

  • Typography block
    • Heading (single line paragraph)
    • Paragraph(s)
      • Width
      • Font size
      • Font family
      • Alignment (left/center/right/justify)
      • Spacing
        • Indentation
        • Line spacing
        • Letter spacing
        • Top
        • Bottom
      • Rotation
      • Words
        • Font style (regular/bold/italic)
        • Fill color
      • Background (color/vector/image)
      • Vector graphic

Aesthetics

1) Headings:
Use a tpyeface that is bigger and bolder than the paragraph font. Reuse the same typeface for each type of heading. The heading text is a summarisation of the paragraph text that draws attention to it.

2) Paragraphs:
Paragraphs communicate information and should be legible. Don't change the font in mid sentence unless you have a very good reason. Don't use more than three fonts on any one page. Limit the width of a paragraph to a hundred characters.


Layout

  • Layout
    • Color scheme (inherited)
    • Typography styles (inherited)
    • Composition
      • Golden ratio
      • Grid (rows/columns)
      • Dynamic (recursion/particles/agents)
      • Superimposed
      • Symmetrical
      • Radial
    • Contrast
    • Coherence
    • Consistency
    • Element(s)
      • Image(s)
      • Vector graphic(s)
      • Typography block(s)
      • Layout
    • Whitespace
    • Texture

Aesthetics

1) Contrast | Highlighted center of attention
The focus of the layout: where is the center of attention? More contrast highlights the focal point while dimming the other elements. Also: the distinction between types of elements (e.g. making headings bigger and paragraph text smaller, color images and black-white typography). Contrast influences size, color, type.

2) Coherence | Alignment and proximity of peer elements
http://chd.gmu.edu/immersion/knowledgebase/strategies/cognitivism/gestalt/gestalt.htm
Gestalt Law of Proximity: how close together or far apart elements are placed suggests a relationship (or lack of) between otherwise disparate parts. Unity is also achieved by using a third element to connect distant parts. Multiple images are usually kept connected both through alignment and proximity - grouping the images so that they form a single visual unit and aligning them in a similar fashion. Essentially, everything relates to everything in a layout.

3) Consistency | Repetition of similar forms
http://ezinearticles.com/?Gestalt:-Law-of-Similarity&id=118395
Gestalt Law of Similarity: the human mind is excellent at patterns recognition. We like to look at how the pattern flows together. We love designs with repeating shapes, forms, colors, and textures. All stop signs are white text on red background. Repeating design elements and consistent use of type and graphics styles within a layout evokes reliability. Variation (anomaly) inside the repetition counters dullness - the anomaly becomes a focal point. Repeated variation is rhythm.

4) Whitespace
A composition needs visual breathing room to avoid tension. The best place for white space is around the edges of the layout and the edges of text or graphic elements so it doesn't get trapped in the middle of the layout but increased paragraph, line, and letterspacing can also improve a layout.
See also: golden ratio (http://en.wikipedia.org/wiki/Goldenratio)

5) Balance
Symmetrical balance or the use of even elements such as two or four columns or a block of 4 pictures generally produces a formal, more static layout. Odd numbers tend to create a more dynamic layout.

6) Form follows function

 

Page

  • Page
    • Paper
    • Format
    • Layout