Art & Design Basics

Art & Design Basics

Elements of Art

These elements are the building blocks, or ingredients, of art and design:

Space: An element of art by which positive and negative areas are defined or a sense of depth achieved in a work of art . 

Color: An element of art made up of three properties: hue, value, and intensity.

Shape: An element of art that is two-dimensional, flat, or limited to height and width. A Shape can be organic (free-form) or geometric (regular).

Form: An element of art that is three-dimensional and encloses volume. Implied Form is created using light, shadow, and perspective to create the illusion of depth when working in a 2-D workspace.

Value: The lightness or darkness of tones or colors. White is the lightest value; black is the darkest.

Texture: The visual quality of a surface. Texture can be implied or three- dimensional (physical).

Line: An element of art defined by a point moving in space. Lines can vary greatly in weight, texture, and style.

 

 

Principles of Design

The principles of design are essentially a set of criteria which are used to explain how the visual elements are arranged in a work of art

Pattern: A regular arrangement of alternated or repeated elements (shapes, lines, colors) or motifs.

Contrast: The juxtaposition of different elements of design in order to highlight their differences and/or create visual interest, or a focal point. 

Emphasis: Special attention/importance given to one part of a work of art. Emphasis can be achieved through placement, contract, color, size, repetition, etc.. Relates to focal point.

Balance: A way of combining elements to add a feeling of equilibrium or stability to a work of art. Balance can be affected by: color, size, quantity, and  space. Symmetrical designs are the same or similar on both sides of an axis. Asymmetrical designs are different on each side, but weight is still evenly distributed.

Scale: The Relationship between objects with respect to size, number, and so on, including the relation between parts of a whole.

Unity (Harmony): The arrangement of elements to give the viewer the feeling that all the parts os the piece form a coherent whole.  

Movement (Rhythm): The use of recurring elements to direct the eye through the image; the way elements are organized to lead the eye to the focal area. The eye can be directed, for example, along edges and by means of shape and color.

Variety: A principle of design concerned with diversity or contrast. Variety is achieved by using different shapes, sizes, and/or colors in a work of art.

 

 

Color Theory

Primary Colors = Red, Blue & Yellow

Secondary Colors = Orange, Green & Purple


 

HUE = Color



SATURATION  = Intensity

VALUE = Dark/Light (Black-White)

 

Color Wheel

 

Color Schemes

Monochromatic: Only 1 color but different variations of saturation and value.

Analogous: Uses colors that are next to each other on the color wheel.

Complementary: Uses colors that are opposite each other on the color wheel.

Split Complementary: Uses colors on either side of the complement.

Triadic: Uses 3 colors that are evenly spaced on the color wheel, forming a perfect triangle.

Tetradic: Uses 4 colors that forms a rectangle on the color wheel, including 2 complementary color pairs. This formula works best if you let one color dominate while the others serve as an accent.

 

 

Typography

Typography: Style of appearance of text and the art of working with text.

Serif Fonts: Have little strokes, or feet, called serifs attached to the main part of the letter. Serif fonts are a good choice for more traditional projects. An example of a serif font would be Times New Roman.

Sans Serif Fonts: Do NOT have the extra stroke (serif). Sans Serif is French for “Without Serif”. They are clean and modern looking and ideal for easy reading on computer screens. 
 An example of a sans serif font would be Helvetica.

Display Fonts: Decorative in nature. Comes in many styles such as: Script, Black letter, All Caps, and Fancy. Display fonts are best used for small amounts of texts (titles, headers, and graphic heavy designs).

 

Kerning: Space between specific characters.
Tracking: Overall space between characters.
Leading: Space between lines of text.

 

 

Typography Tips

LESS IS MORE — Limit yourself to 1 or 2 fonts per project.
 To create more contrast, use the same font but with different weight, size, or style.
OPPOSITES ATTRACT — Try combining font styles that are different but complementary.

 

Anatomy of a Letterform

 

Baseline: Majority of the characters sit on this imaginary horizontal line.

Cap Height: The capline or cap height is another imaginary line wherein the heights of all the capital letters are marked in a typeface. However one has to keep in mind that the cap height is below the maximum height of the typeface.

Crossbar: The crossbar is a stroke that connects 2 lines in capital letterforms of “A” and “H”. Again a cross stroke implies a horizontal stroke that does not connect two lines, for example, the lower case of “f” or “t”.

Serif: The name assigned to the finishing strokes at the tops and bottoms of some typefaces.

Mean Line: The mean line better is known as midline is another imaginary horizontal line that marks the top edges of the lower case letters. You go wrong if you go by the literal definition of the term “mean line” because it actually doesn’t imply the central line between the baseline and the cap height.

Bowl: The rounded curve that covered the negative space in a letter form. It can be easily viewed in the following letters “I”, “e”, “D”, “o” and “g”.

Descender: Descender happens to be the bottom part of the lowercase letter (like “g”, “j”, “p”, “q”, “y” etc) that usually goes below the baseline of a typeface. 

Counter: Counter refers to the negative space within a letter, particularly if you consider letters like “A”, “o” and “P” etc where the counter is fully enclosed. In letters like “G”, “u” and “c” the non enclosed negative space is reflected and they are also called counters.

Stem: The main vertical or diagonal stroke depicted in a letterform is known as Stem. They consists of the vertical parts of the letters like “I” and “H” and also simultaneously all the strokes in the letter “W”.

Tittle: The tittle is defined as the dot above the lowercase “j” and “i”.

Terminal: The terminal is the culmination point of the stroke or stem that has no serif.

Ascender: It is an extension that goes above the meanline and is generally found in some lowercase letters. These letters are, “b”, “d”, “f”, “h”, “k”, “l” and “t”.

Leg (Tails): Legs are the lower angled strokes which you can see in the letters “K”, “R” and “Q”. They are also known as tails.

Ligature: This addition of two characters to create another character is called ligature. They are commonly seen in serif faces .It is present to give space between certain characters and give the characters an aesthetic imprint.

X-Height: The space that exists in the vertical direction for the lowercase “x” in any typeface is known as X-Height. It is the distance the baseline and mean line of the body of characters in lowercase form. The X-Height is very important in the context of font shapes as the fonts with greater X-heights are easier to read.

 

 

Gestalt Psychology

What is Gestalt Psychology?

In the 1920s, a group of psychologists in Germany developed a series of theories of visual perception known as the Gestalt Principles, or Gestalt Theory. The term Gestalt means 'unified whole', which is a good way of describing the over-arching theme behind the Gestalt principles. These refer to the way in which humans, when looking at a group of objects, will see the whole before we see the individual parts.

It's important for graphic and web designers to learn these principles. If you understand what they tell us about how we perceive visual objects and their arrangements, you'll be able to create a more coherent design that will better connect with your audience.

 

The 6 Gestalt Principles

Figure- Ground: The thought that when we look at a a scene we separate objects so the focus or figure and others of the background.
Similarity: The notion that we place objects with similar characteristics in a group.
Proximity: The belief that we group together objects that are close to each other.
Closure: The idea that our minds close objects that are not necessarily together or complete in order to create a whole.
Continuity: The theory that we continue to follow objects that are visually aligned until they are interrupted.
Order: The belief that alignment and symmetry are attractive and essential elements of design.

 

WATCH: Gestalt Psychology and Why It's Essential for Good Design