Visual Techniques

Visual Techniques

-Contrast
-Balance
-Symmetry
-Depth
-Repetition

-Complex
-Active
-Harmony
-Repetition
-Consistant
-Sequence

        The two images I chose to represent good visual techniques are an old Polish movie poster for the movie "Cabaret" and an advertisement for Heinz ketchup.  Both these images are similar yet different in many ways.  Both images visually show a lot of repetition, for that is the main technique used to the viewer.  In the first ad the four legs are seen repeated in a circular motion around the head, and in the second ad the repetition of the stacked tomatoes goes all the way up to form a similar shape to what a ketchup bottle looks like.  The first image shows contrast, especially in color.  The foreground black and white contrast against each other, while contrasting against the red background at the same time.  The sharpness of these hues really stand out against one another making each color pop out.  In the second image, harmony is shown with the red tomatoes placed among the red background.  Although the tomatoes are still defined by the darkness of it's shadow, it still semi blends in with the red background and forces the reader to look at the image more closely.  Balance is shown in the first image because each leg is placed strategically around the head with the same amount of distance between each.  The legs look evenly placed and cause to look pleasing to the eye.  In the second photo, balance is also seen by the way the tomatoes are stacked on top of one another.  Although placed slightly offset, each and every other tomato tends to balance each other out at the end of the ad.  These visual techniques shown help us understand the meaning and content trying to be spread in these images.

Week 13: Contrast

CONTRAST

The photo above is a great example of an effective use of contrast.  The contrast shown is quite obvious with the use of shapes and colors present in the photo.  The main element us the contrast shown with the white background (wall) against the dark foreground in the front (the table cloth).  The dark shadows are contrasted with the lightness of the tea cups and saucers as well.  An example of contrast is used also within the thickness and thinness of the lines shown above.  The thick vs. thin effect and straight vs. curvy line effect is shown in the napkin lines, as well as the shadows rising from the coffee pot.  Contrast is easily shown in this photograph because of all the reasons listed above; each item and color strongly stand out against one another.  The use of dark and light shadows bounce off of each other and give the viewer clear hard lines on how the contrast is operating.

As I was searching for images that had poor contrast, I really liked this example that I found and thought it clearly showed a lack of contrast in many ways.  As a graphic designer, there are many things that I wish I could change about this photo, for a simple change could transform the entire outlook here.  First of all, it is extremely hard to read the messaged shown across the image because of the white font used.  The white has no contrast with any of the colors in the background, and does not stand out against anything in particular, making it hard to read.  It is also hard to read and lacks contrast because the image is too busy and has way too much going on, when simplicity could have been key.  The background lacks contrast as well because of every color being strewn together in one sequenced line.  There is no definition between the colors, and no shading is used to define certain lines and shadows.  If the photo here had less colors and a more solid background, the foreground (message) would easily have been more easy to read, overall creating a better effect on the image.

Source:  http://www.movoto.com/blog/real-estate-agent/3-quick-tips-to-a-better-brochure-font-edition/

Movement/Motion

Week 12: Option 1

The implied motion in this photograph is the liquid being poured out of the product which could be either a lamp shade or a cup.  Color and shading helps define the picture because the light coloring refers to the liquid and the darkness refers to the shade.  We can tell that the liquid is spilling because of the curvature of the shade, and the flowing movement of the liquid onto the table or floor.  We can also tell it is spilling because of the splatter/puddle it makes when it reaches the bottom.  The waves and curves in the liquid show that it is spreading horizontally as it hits the floor. The gradient of light on the liquid also helps us know it shows movement because it implies gravity, showing that the liquid is being pulled to the ground hence the darker the shading gets.  The smoothness of the liquid implies that we know it is a liquid, and the shiny part at the bottom shows us texture.  I think this picture is a great example of captured still motion.

There are many reasons why one could think movement/motion could be seen in this picture. Motion is created in this graphic by an implied motion of applied movement.  I was intrigued by this photo because it reminded me of a mannequin and I am interested in fashion and design.  You get the idea that the figure is walking because the figure is repeated in consistent form but slowly fading away in the background.  The fading away part makes it seem like the figure is moving closer to us, as if they were walking.  As the figure is walking, they are leaving impressions behind them, showing motion.  The shadowing also is a huge indicator for movement and motion.  The way the arms and legs are placed indicated that walking is being involved.

Dimension/Depth/Space/Scale

I chose this picture which depicts depth, dimension, and space because as a design major I tend to be more focused on interior design and the layout of rooms.  My mom is an interior designer so I grew up learning to love the colors, placement, layout, and pieces used to create a room.  This room pictured here is interesting because at first glance, the people in the picture look extremely small but then you realize they are sitting on a couch.  Because they are scaled and set much further back in the picture, the walls closest to us look much larger because they are closer to the camera.  This is known as relative size, for the further away the people are from the camera the smaller they look.  Depth is thrown off in this picture because since the same wall paper/pattern is used on every side, the walls look like they are shrinking further to where the people are.  The dimension of the room is also interesting because from the camera angles you would think at first the back of the room is indeed smaller, yet the entire room overall is actually the same size.  At first glance I wondered how the people could even fit into such a small place!  But then after noticing the tricks of depth and dimension I figured out it was just an illusion and my perception was thrown off.


Source: http://flickrhivemind.net/Tags/crazy,mind/Interesting

Blog Exercise:Week 10 Tone and Color

How Tone is Operating:

The poster for The Dark Knight is a great example of dark and light tones especially creating contrast because a certain mood is extended.  The image is using all mostly shades of blacks and blues, except for the red and orange fire which strongly stands apart from the rest of the image.  The shades of the blacks and blues are very strong and clear, for the poster is not dulled done but almost intensified by its color.

How Tone is Interacting:

            Tone is happening with Dondis’s element of movement.  Because of all the different variations of dark colors used, it gives off a erie feeling that something bad could or will possibly happen.  The tone makes the reader drawn in, and makes the reader want to see the movie to interact with what wrong could possibly happen because of the color palette chosen.

How Color is Operating:

            Color is operating in this picture by using blue and gray hues, contrasted by the bright, fiery red orange fire at the top of the image.  The fire is the complete opposite of the darkness surrounded it.  The different shades of colors used, whether it be the darkness of the batman or the brightness of the fire, display that negative imagery is taking place.

How Color is Interacting:

            I think color is working with the Dondis element of texture and lines.  The texture of the fire and the smoke and smog hazing around the sky represent and foreshadow for something wrong to take place.  The darkness of the colors interact with the reader because it brings them in to wonder what could actually take place in this movie.

Web Design

Week 10 - Basic Elements- Web Design

Movement

Urban Outfitters always have fun, unique web site displays that change constantly so you never expect what is next.  I always find that their site shows great movement and flow, for their ways of typography and placement always move your eye from one side to the other.  The curvature in their type (like the G and E letters) show movement, just like movement is seen as the header is shown in the shape of a half circle.  The images are large enough for the reader to see, and make you want to scroll either down or click next to see more images.  They do well on intriguing the reader to want to view more.

Color:

One of my favorite go-to websites, (and a magazine company I would love to work for) is Nylon magazine.  Nylon always uses a great use of color.  Surprisingly, although they usually have white background layouts and sometimes black headers/copy, they find ways to use huge pops of color that are not overwhelming in the least.  They usually still to different shades of CMYK, whether it be pastels to the hottest hue there is.  They use a great contrast between black and white versus color, and the way they use pull quotes and other captions in color always draws in my attention.  Color is important because it can make your web design better than the next.  The right use of color always brings in the readers attention and gets them wanting to view more.

Lines:

Not only is the website Cool Huntings great for finding new design, it also is a great example of the use of design, especially when using lines.  Cool Huntings uses very clean and straight lines for organization, and makes it very easy and convenient to navigate the site.  I think their use of lines gives for a cool architectural appeal to the web site.  They go for a very modern look on the site, and it is attractive to readers because the information is constantly changing yet the design layout usually stays the same.  There are multiple lines that connect and interconnect, drawing in the readers eye to see where each line can lead to.

Blog Exercise: Visual Thinking Research

Puzzle 1:

I thought this puzzle looked to be the easiest, but it actually was a little trickier than I though it would be.  The goal was to count as many squares as possible, even if some were overlapping.  I started by counting the smallest squares first and then moving on to the bigger ones.  I accidentally messed up at first because I started counting the rectangle squares as well.  I ended up counting 11 squares overall.  The aim of this puzzle is to look at the bigger picture rather then look at the squares close in detail.  When I examined the squares as a whole, I was able to spot bigger squares that were not easily as visible.

Although it took my roommate sometime to figure this out, she was able to find all 11 squares as well.  She interrupted the directions differently than me and did not think to include the rectangles at all (which shows I read the directions wrong!) Overall she thought this puzzle was pretty easy in comparison to other puzzles she has done.

Puzzle 2:
This puzzle was extremely difficult for me.  It took me several tries to finally figure this out, and I even had to look at the solution for some answers.  While doing the puzzle, I never thought to extend the lines past the 4 corners of the square.  Because I never considered that option, I was always stuck with using more than 6 connecting lines to reach each star.  I really did think this puzzle would be a breeze!  It taught me to think outside the box more, and to make sure I brainstorm all the possible solutions before I attempt something.  This puzzle definitely works the brain in that it makes you think outside the norm.

My roommate could not figure this puzzle out as well.  She was as stumped as me, and we were both shocked and confused when we ended up looking at the solution.  We both attempted many tries at this puzzle, each failing time after time.  We both were losing patience as we could not figure out the answer to this puzzle.

Visual Search / Feature Hierarchy

  
        There are many primary visual feature channels that are apparent in this piece of design work by Juanma Teixido.  Color is a huge visual feature because it visually takes up most of the space of the design work.  Different color hues are contrasted against each other, and the red, being placed in the center, tends to pop out a little more against the competing colors around it.  Spatial grouping is the next thing that comes to mind about this poster because the text is placed towards the top against a neutral backdrop, making it stand out. The rest of the poster is taken up by different geometric colored blocks, drawing your eye to the type as soon as the mind takes in the different colors contrasting with one another.  I think motion is seen in this design because of the patterns and textures inside the blocks of color.  The multiple lines give off a rippling motion of color, and the straight edges used add a nice overall effect to the space.  Depth is important in this because by using different hues and tones of the colors, a shadow effect is given to the design.  I think this design is smart, efficient, and pleasing to the eye, while still having many different visual feature channels prominent.


Designer: Juanma Teixido <http://designreviver.com/inspiration/30-inspiring-poster-designs/>

Visual Perception 1 / Top-Down Visual Processing

This is an image from the well known puzzle book, "I-Spy," that most of us owned and played with as children with friends and family.  This puzzle from "I-Spy" denotes top-down visual processing because it allows us to create a goal in trying to find all the pictures listed in this picture to move on to the next picture, and then so to completing the book.  You first start with the larger concept of the idea here, then work your way down to the finer details in completing your task.  This means we first take the image in as a whole, then focus in on one particular item we must find.  Once we are set on that item, we scan the image consistently and quickly, looking for the image with rapid eye movement.  When we register the item we are looking for, we set a goal to find the next listed item on our list and so on.  Top-down processing is just starting out with the high-concept ideas and then focusing in on the minor and finer details.  I also like this particular image from the book because of its graphic layout, and the glow in the dark overlay they used in the pictures.

Design Success and Failure / Syntactical Guidelines

Success:

This piece of graphic design work succeeds in the fact it has been put to good use by all of the syntactical guidelines.  It is extremely balanced in color and space, with equal proportions of the text squares and hands presented.  It is leveled, with all of it's work in the center as the main focus.  The typography is easy and clear to read, and the white and black text is easy on the eyes against the colored background.  I like the use of color for the text boxes and the contrast with the color against the black hand images.  (http://www.manystuff.org/?p=3294)



Fail:

 This logo for Precision Well & Pump Systems definitely fails as a graphic design. The typography was a horrible choice for it makes everything difficult to read, and the drop shadow used for the raindrop makes it difficult to tell what the image originally was.  The 3D effect used on the text also makes it difficult to read and the letters tend to blend in together.  The blue color used is too dark and does not mesh well used in the gradient tool.  The design is ambiguous, with no real alignment used. (http://logodesignerblog.com/bad-ugly-worst-logo-designs/)

Visual vs Symbolic Language

     In this picture it looks as if there is being a ceremony held of some kind.  The man in front wearing a uniform has a missing hand, and it looks like perhaps a ceremony is being held honoring him and his bravery and strength as a soldier for our country. Perhaps he is being rewarded for all he has done and given up for our country.  Everyone in this picture is smiling, so it tells us that it is likely it is a positive type ceremony being held.  The man hugging the solider is also in tears, so perhaps he was his captain or knew him well, and knew all that the soldier did in battle.

     If I were describing this event to a visual impaired person,  I would tell them that someone lost a hand while fighting for our country and was being honored for it.  I would tell them that the ceremony is representing his strength, courage, and bravery to the world.  I would also mention the American flag hanging in the background and how that is a key symbol for our soldiers today.

Responses or feelings:

Gratitude

Happiness

Courage

Loyalty

Proud

America

Patriotism

Symbols:

Some symbols shown in this picture are the American flag- which denotes freedom, security, pride, and is a well known symbol to all Americans that brings unity to the United States.  Another symbol is the army print on one mans uniform- army print shows he is fighting for our country, could have been in battle, and is loyal to America.

Composition:

I think the composition of this photo holds mixed emotions.  Although it shows a soldier possibly losing his hand in combat, the positing of the two men hugging with tears and smiles on their faces gives the viewer hope, optimism, and positivity.  I think the placement of the flag in the background gives off that it is a certain ceremony, and that the structural height difference of the people behind the main soldier shows that they could be possibly on a podium standing in front of a large crowd.

Meaning 2: Interactions Between the 3 Levels of Meaning

Although a visual communications major, I still find myself interested in the designs of certain products and how their logos are incorporated with them.  I found a link between representational, abstract, and symbols within the Starbucks corporation and their designs.

Representational- This Starbucks coffee cup plays the role of reality to the viewer.  This is a straight representation of a coffee cup because it is what people buy day in and day out at their local coffee shops.  The cardboard cup is standard for coffee and the flat lid with the square whole is known to be the lid of most all coffee cups wherever you go.  It appeals to the viewer because they have experienced using cups like this when they buy/drink their coffee, and they know what this cup is used for even if there was no logo presented.

 Abstract- The black outlines and detail of this images shape lets the viewer know this is a simple version of a coffee cup.  The viewer still understands what this image represents, but knows it is not the reality of a coffee cup they would actually use.  This image shows something that a viewer has not yet first handed experienced yet still understands what the concept of it is.  The outlined coffee cup relates to the other two levels of meaning because it fits right in between what is real and what is just used as a symbol to communicate with.

Symbol - This is the Starbucks logo for the company.  This is a universal world symbol and is known to mean coffee wherever represented.  The symbol shows a woman with a crown and star above it which is featured at every Starbucks globally.  When the viewer sees this symbol, they instantly know it means coffee.  This symbol correlates with the other images posted because they all mean and represent the same product.

Meaning 1-Symbol

The symbol I chose to represent is the "at" sign.  The "at" sign is symbolic because from this one character image, we know it has the same meaning as the word "at."  This symbol is effective because not only can it be seen and recognized, but it can also be reproduced.  We use this "at" symbol in our emails, when taking notes, and to visually display the word "at" differently.  It does not have a great deal of information, but still shows that it represents a word.  The viewer would know what this symbol means for it is commonly seen in our everyday lives, and the "a" in the symbol gives us a great hint for its true definition.

Meaning 1-Abstract

This image of a fish is abstract because it clearly shows us a fish, but is not real enough to be representational yet not simple enough to become a symbol.  It shows us a clear concept of a fish underwater.  It is a simplification toward a more distilled meaning of a fish.  Our human perception is able to strip away surface detail and realize that this is an abstract version of a real living fish.  Although abstract images don't always need to connect with representation, in this case it does.  Even with certain off characteristics, we can define this image as a fish and know where it derives from.

Meaning 1-Representational

"A representation is something we see and recognize from environment and experience" (Dondis 67).  I think a sunset is representational because it is something that can be identified by anyone and is seen from all over different parts of the world.  Sunsets are defined in elemental visual terms, and we get the direct experience of seeing one most daily.  Whether you are on the west coast or the east, you will see the same sun set day in and day out. We know the sun moves downward, changes the sky colors, and moves quickly all from past visual experiences. A sunset is a reality and actuality that the sun exists and we see it with our own eyes.