Wednesday, February 20, 2013

Typographic Posters and Thumbnails

1. Above is an image of one of the typographic posters I choose for this project. I choose it because I love the background color (even though I know the thumbnail is in black and white) and I love bikes, so I had a personal attachment to the saying. After selecting the poster I sketched a thumbnail of it in my sketchbook. Then, I scanned the sketch and arranged it with the original poster image on Photoshop.

I Think I did a good job at portraying the original poster in my thumbnail and I made it clear what the poster was asking for and displaying. On the other hand I may have gotten a little too caught up with the details, making it more of a drawing rather than simply a sketched thumbnail. Next time I can improve by sketching with faster precision, keep the quality level but be more efficient.

2. The second typographic poster I choose is above. I choose it because I like the quote meanwhile I loved the font that it is in; I love the complex elegance of the ribbon-like letters. For the development, I followed the same process as I did for the first thumbnail and poster, ultimately organizing the format in Photoshop.

For the final thumbnail I think I did a good job at mastering the complex font and accurately portraying the style of the poster. At the same time I may have focused a little too hard on perfecting the font and I maybe could have gently shaded the background of the thumbnail to acquire a sense of the dark/light contrast of the poster. Next time I could work to simplify my work as well as look to include more black and white shade variations to portray contrasts of light and dark.

3. Above is another one of the typographic poster and thumbnail I did for this project. As previously mentioned, I choose the poster then created the thumbnail in my sketchbook before scanning it into Photoshop to rearrange with the original image. I choose this poster because of the varying fonts it has and the use of layered backgrounds, such as the blue base and the black and white banners and underlines.

For this thumbnail I think I did a very good job at showing the variety of colors and shades in the original poster by shading in with my pencil what was black or dark on the poster and outlining what was white. On the other hand I maybe should have perfected the positioning of some of the words in relation to others to be a little more true to the original poster, such as centering the "of" above the "courage." In the future I could improve my thumbnails by aligning the text to match the poster better.

4. I choose the above poster generally because I like the message it is sending as well as the dot border around the edges. It is an imperfect design with a sketchy, hand written feel that I thought would give me a creative margin for error for the thumbnail. Like the first three posters, I created the thumbnail then scanned it into photoshop.

This thumbnail was actually the first one I did, so I was experimenting with sketching for the first time. I think I did a good job at sketching the letters in a loose, casual manner similar to that of the poster, which gives a good suggestion of what the real image is like. However I maybe was a little too careless when sketching the border. I got the general idea down just fine but I did not copy the scale or alignment very accurately. Next time I could improve by maybe starting with the words then adding the border so that it would fit better. 

5. I chose this poster because I liked the banners behind the text, the color, and the many different fonts that are used. Overall it is a very varied poster that is uniquely exciting. I followed the same steps by drawing the thumbnail and arranging the thumbnail next to the poster in photoshop.

I think I did a good job at shading the words in the thumbnail to suggest the use of color in the poster, like shading in text when it is black in the poster or drawing only the outline of a word when it is left white in the poster. On the other hand I did not portray the scale with complete accuracy and in some places I put two words closer together than they are in the poster. To improve this next time I could give myself more space to work with so that I don't feel like I am running out of room and instead begin to cramp the text together.  

Thursday, February 7, 2013

Gestalt Design Principles

The way that people see and visualize a design ultimately dictates what that design means to them. The Gestalt Principles of Design examine this process of recognizing and defining design through the use of unity and variety. The Gestalt Principles of Design allow for the artist to control the way a person views and interprets their art.

Origin: The word "gestalt" derives from a German word meaning "whole" or "form." The study of gestalt originated in Germany in the 1920s as a form of psychology that analyzes visual perception and how the mind interprets the parts of an object or composition as opposed to the whole body or figure. When figures are closer together, in a stronger, more defined group, the gestalt is stronger. The opposite effect is created by separating figures and drawing attention on something dissimilar to a group, this is called variety. The Gestalt Principles of design determine the mental perception of these two effects.
The Gestalt Design Principles support the theory that "the whole is greater than the sum of its parts." This idea supports that the the entirety of an image or figure is greater than the individual parts forming it and supports a greater meaning. Additionally it has been concluded that the mind analyzes the parts of a composition before piecing them together to identify the whole figure.

The Six Gestalt Design Principles:

  1. Similarity
  2. Continuation
  3. Closure
  4. Proximity
  5. Figure/ Ground
  6. Symmetry

1. Similarity - In Gestalt Theory, objects or figures that share visual properties such as size, shape, color, texture, or value will be perceived by the mind to belong together in the same group. These relations between objects that define them as one group is called similarity.
The shapes in the above image all share multiple visual properties, they are all similar. Their similarities lead the viewer to bring them together as one group (link to website for image).
The use of similarity to group together multiple objects allows the artist or creator to establish the visual effect of disunity or anomaly by making one shape dissimilar from the group. Now the dissimilar figure attracts attention and becomes a focal point (link to website for image).

2. Continuation - This Gestalt Principle of Design is used to move the viewers eye from one object to another, to fluidly continue the image as a whole. Additionally continuation is an attempt to continue an object or figure beyond it's end points or edges into a new figure.
For example one would view the above image as two crossed lines rather than four lines meeting in the middle, one naturally continues the image by connecting the lines (link to website for image).

3. Closure - Closure is the affect used when objects are placed close together or in a specific arrangement to suggest the formation of a full image meanwhile the objects themselves are not touching. The mind groups the individual objects together to complete the full image even though some information is missing.
The logo for WWF is a good example of closure because, although the individual shapes of the image do not form a full, complete shape, we naturally fill in the missing information and see a panda (link to website for image).

4. Proximity - Proximity is when multiple individual objects are placed in relation to one another to create a different image. When objects have close proximity with one another, we group them together to form a single, greater image (such as the raindrops below), while when objects are farther apart, we view them as separate pieces of a composition. Link to website for image

5. Figure/ Ground - When objects have contrasting qualities in an image, we naturally try to divide the objects into figure and ground. The focal point of an image is the figure, more complex images have multiple objects to view and thus have more figures. What is not a figure is the ground; as our attention switches something may go from figure to ground and back again. We often associate ground with negative space or background. Sometimes it is difficult to differentiate what in a composition is the figure and what is the ground.
The image below shows a complex ground and figure set up in how at times one may view a tree as the figure while at other moments one may see leaves and water as the figures (link to website for image).

Meanwhile in the image below, it is clear that the square is the figure while the blue circle is the ground (link to website for image).

6. Symmetry - Symmetry creates a unified sense of balance in a composition so that the viewer is not distracted by any discrepancies. Symmetry provides consistency, order, and structure while asymmetry would provide the opposite, causing the viewer to try to figure out what was missing or off-balance before proceeding to analyze the composition.

The image below represents complete symmetry of both the ground and figure. It is arguable as to what exactly is the figure and what is the ground, but the image nonetheless has balance and symmetry that focuses the viewer (link to website for image).

Useful Terminology:

Gestalt - "a configuration, pattern, or organized field having specific properties that cannot be derived from the summation of its component parts; a unified whole".

Balance - "a state of equilibrium or equipoise; equal distribution of weight, amount, etc." (in the case of design, balance would be portrayed between objects or pieces of a composition through size, color, texture etc.)

Composition - "manner of being composed; structure. Also the combination of parts to form a whole" (in art and design: the completion of an image, drawing, painting etc. and the set up of the parts).

Property - in design: the characteristics of an object or image; its appearance or traits.
Unity - the state of being one; the combination of parts into one; whole (in design: used to complete a composition or augment the principles of design of similarity, proximity, and symmetry).

Interpret - in design: the way an individual views a piece of design/art and comes upon different meanings for the work; analyze.

Analyze - in design: the way an individual investigates a design to extract greater meaning; interpret.

Whole - existing as one, the combination of parts to form a total figure; unity.

Consistency - "steadfast agreement to the same principles; harmony, agreement, unity." In design: used to portray similarity and symmetry, the formation of balance in a composition.

Anomaly - "a deviation from the common rule or form." In design: used to differ from similarity, a contrasting element or figure that does not follow a pattern otherwise expressed in the composition.

Asymmetry - "not identical on both sides of a central line; lacking symmetry." In design: the contrast to the principle of symmetry, a confusion of complex disagreement in shapes.

(any above definition under terminology that has been "quoted" has been directly copied from, sentences not "quoted" or beginning with "In design" are my own summaries of the term) 

Works Cited

"Gestalt Principles." Gestalt Principles. N.p., n.d. Web. 21 Feb. 2013.

Hussam, Ahmed. "The Gestalt Principle: Design Theory for Web Designers."Webdesigntuts RSS. Envato, 12 Jan. 2011. Web. 21 Feb. 2013.

Saw, James T. "Design Notes: Gestalt." Design Notes: Gestalt., 2000. Web. 21 Feb. 2013.

"The Gestalt Principles." The Gestalt Principles. N.p., n.d. Web. 21 Feb. 2013.