Relations

Relations are how we define visual objects in a composition that relate to the viewer, the format, and other elements within that composition. Relations are everywhere in our compositions and can be identified through different elements. One example is attraction, where objects are grouped together in a composition will either attract or repel one another. You can also find static objects in a composition, where objects don’t have any movement. In a composition you can find symmetry, where objects are identically arranged on both sides of an axis. Opposite of symmetry, is asymmetry, where there is no exact balance or symmetry in the composition. A composition will be balanced when all elements have optical equilibrium, and can be created between objects that have the same form but different positions. However, when an object is repeated it can form a group or a unit. Through this, groups can be named based on their underlying structures. Structures in a composition can actively define a direction, while a group of objects can define a position in the layout. Space can also dictate a composition when there is a dense and open area accompanied with white space in the layout. Compositions can often have different amounts of objects, which are not all most visually dominant.

Steven Bradley of Smashing Magazine described it perfectly when he said, “If you see graphic design as a process of arranging shapes on a canvas, then you’re only seeing half of what you work with. The negative space of the canvas is just as important as the positive elements that we place on the canvas.” This statement couldn’t be truer, as space is a huge tool that we can use as designers. Design is an arrangement of both shape and space. Space can establish contrast, add emphasis to your composition, and enhance the hierarchy in your image. Space can generate drama and tension, while also providing visual rest between groups of elements. An important function of space is to improve readability and legibility in your design. Without enough white or negative space in your composition, it can be hard to read. Space can also convey other attributes such as sophistication, simplicity, luxury, cleanliness, solitude, and openness. Without considering space you cannot do your design justice. Steven Bradley tells designs to not be afraid to use space, and to view it as an important design element under your control. He also says to make an effort to spend time observing how space is used in design, and to consciously analyze how you can best use space in your design.

In these two logos, the designer effectively used negative space to convey a deeper message in their logo. The cat is no longer just a cat, but shows the shape of a martini glass. The letter R also shows a steep mountain with a flag mounted on top, which may be a logo for an outdoor store. Through successful use of space, these logos were able to create more visual interest.

These websites show how space can enhance the visual interest of a website. The focal point and hierarchy of the webpages are very clear and clean thanks to effective use of space. The white space in the page adds movement in the overall composition. Your eye is easily able to navigate the site clearly, and all information is legible and clear.

Sources:

http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/

https://dribbble.com/shots/437870-Black-Cat-Lounge

https://dribbble.com/shots/510239-Unused-Mark

http://www.fromupnorth.com/web-design-inspiration-930/

Activities

In visual communication, what we perceive as an activity is actually a static representation that thus creates an illusion of an activity. For example, are eye may see movement on a page because of the use of line or shape, however we know that the actually lines aren’t really moving. This illusion can be caused by various different elements. For example there is repetition, when several objects with a singular shared characteristic are arranged and repeated in the composition. The objects can have differences, such as form, size, color, direction, or texture. If the distance between repeated objects is identical, we then have an even frequency. Another element used to create an activity illusion in a static image is mirroring, where the light waves emanating from an object are reflected off of a surface. Another common element used is rotation, where an object is moved around a point or axis. Upscaling or downscaling is also used, where objects are enlarged or scaled down along the x-axis and the y-axis of a page. When an object is scaled or enlarged proportionately the width-to-height ratio remains constant. Because we are talking about visual images, the only true movement we see is in the real world. However it is possible to create a representation of movement in your composition. The positioning of an object can suggest forces that will influence it and move it. The direction of a movement can be defined as the line that leads from the starting point of the movement and its presumed endpoint can then define the direction of a movement.

Movement in a visual image occurs when the viewer perceives the image as actually moving in real life. In design, movement is one of my favorite techniques and elements to incorporate in my images. This “phenomenon” in the design world is an optical illusion, and can only be achieved through certain techniques. Through various forms, lines, shapes, and curves, this movement in an image can pop off of the page. Direction is an important tool, which can easily create visual movement across the page. Direction such as a diagonal line can create more visual interest and cause one’s eye to move swiftly across the composition. Also using color as a technique can enhance movement in your image. You can have stark contrast or changes in value and tone to enhance your movement in your image. Intense use of repetition can also create movement, and at some points can almost make the image look like it is buzzing or jumping off of the page. Line is probably one of the biggest tools one can use in enhancing movement in your image. Our eye naturally wants to follow a line across a page, which easily creates movement for our eye. If you look at your image and your eye jumps from spot to spot, or if it moves in a swift swipe across the page, you may have successfully created movement in your piece.

This festival poster represents the use of movement through line. The vertical lines in this image fan out at the bottom and make my eye just run up and down the page. The colors also draw my eye in and make the entire image pop off the foreground.

In this image we clearly see the use of pattern and repetition. However I think the fact that the pattern isn’t quite perfect, and the use of diagonal lines really creates a nice movement across the page. My eye is jumping around going left to right without stopping.

These two logo marks show how we can even use movement through just the use of curved lines. The lines are beautifully in control, and my eyes dance along the curves and swirl around the mark. My eyes don’t stop and the image, while static, appears to have movement, which I think makes these logo marks a success.

Sources:

http://www.educ.kent.edu/community/vlo/design/principles/movement/index.html

https://sites.google.com/site/principlesofdesignsite/home/rhythm-movement

https://www.behance.net/CasmicLab

http://www.sarahdeveydesign.co.uk/animal.html

https://dribbble.com/george-bokhua

http://la-selection.net/stream/

Concrete Objects & Structures

Concrete objects are objects perceived within defined lines. These lines are what ultimately define the shape or form, and can be called contour lines. The form of a surface can be defined by its contours, which can be straight or curved. A form is a very loose statement- it can be found in so many different ways. An example of form is geometric forms, which hence the name, come from mathematical facts about points, lines, surfaces, and solids. We also can find organic forms, which are often seen in shapes that can’t really be described as “perfect” or exact. These organic forms are created by living organisms and are based on living organisms. Random forms are also very straightforward because of their name. They are “random”, often very abstract, and we gain influence on these objects from things we see in nature. The size of a concrete objects is always relative to the perspective of the viewer. What I consider “large” would be different to what an insect would view as “large”. The size of an object needs to be examined in relation to its placement and how it will function as an object. Color as a definition, is simply different wavelengths of light. When we see an object as red, the object and the materials of which it is made of reflect the entirety of the light spectrum except red, so therefore it appears as if it is red. Concrete structures are also important, as a structure is defined as concrete when the structure lines are visible or actively influence the form of the objects within the structure. Examples of concrete structures are visible structures, where the structure lines in the object are clearly visible. Active structures are when the structure lines influence the form in the object, but may not necessarily be visible. Finally, we see texture, where a structure can be seen or felt. The texture can include structure lines, and can have different ornamentation, random, or mechanical design. We see lots of examples of abstract structures in texture, such as formal, spiral, or gradation.

Color in concrete objects has many different properties, including hue, tone, and saturation. Hue is usually one property of three when it is used to determine a certain color. Hue defines pure color in terms of what we would think of as ROYGBIV, or basic colors we learn the names of as children. Tone is softer than the original color, and can be defined as a result of mixing a pure color with any neutral or gray scale color including black and white. Saturation is a term very commonly used by designers and photographers. It defines a range from pure color to gray at a constant lightness level. It is really obvious when a photo or image is over saturated, as the colors are way too rich and tend to become very bright.

This photo of central park is clearly way over saturated and over processed all together. The color intensity is bumped way up, creating a loss of detail in certain areas, making it not look natural.

Texture is defined as the surface characteristics of a material that can be experienced through the sense of touch or the illusion of touch. Texture is an important tool for designs to keep in their “back pocket” if you will. Although flat design is very popular right now, texture still has a huge place in design. It can be used to enhance the user experience by accenting an area so another area becomes more dominant, or it can give the illusion that it is on a different surface (like wood, sand, concrete, paper), even though the viewer is looking at an image on a computer screen. Texture can even be found in patterns, which can always add visual interest to you piece. When used tastefully and even in really small details, texture can enhance your image.

On this website we can see texture in the type and in the background on the wood paneling. For a website that clearly is selling spices, this added texture gives an old word feeling to the image. It looks rustic, homemade, and vintage, all while being on a computer screen.

For this brewing company, we see texture in the background of the image as well as in the type. The background clearly has a map or pattern of some sort and looks like it is on old paper. The type has very subtle texture, but this adds to the depth and overall vintage hand-brewed feel of the site.

I love the use of texture in this piece as the background for the site. The texture makes the background look like an old plastered side of a building or Mexican villa. Even the little texture on the type makes it look like it was hand painted a long time ago.

Sources:

http://www.workwithcolor.com/color-properties-definitions-0101.htm

http://www.educ.kent.edu/community/vlo/design/elements/texture/index.html

http://www.awwwards.com/brilliant-uses-of-texture-in-website-design-and-some-resources.html

www.oldtownspiceshop.com

www.uintabrewing.com

www.jarritos.com

https://www.flickr.com/photos/aizhol/6324499301/

Abstract Structures

Abstract structures are essentially when objects are placed in relation to one another, it establishes a structure. However, we can only describe a structure if we are able to recognize its pattern. Without any visible structure lines, it is called abstract. These types of structures are all very different from each other.

They are all very distinct, like the formal structures; where the objects are evenly distributed in a grid like structure in a composition, with visible structured lines. Another very distinct structure type is radiation, where a formal repetitive structure is situated around a common center, creating a centrifugal force. There is also the informal structure, when no regularities in the arrangement of objects can be seen. A structure can even be formal as long as the objects do not follow straight structure lines. There is also such thing as an invisible or inactive structure, in which the structure lines are invisible, but our brain fills in the missing pieces so we know where they are. We also see a gradated structure, which works in the same way as a repetitive structure but instead the structure units change in size or form at an even rate. Visual distribution is when objects are positioned in a structure judging by the eye, which can also be called a similarity structure. Every composition has an invisible force that is bound by the limits of the surface with varying degrees of energy following certain axes with regard to form and proportions. These axes or paths found in this invisible force can be called the compositions structural skeleton.

As graphic designers, we use abstract structures much more than we realize. Generally you may not even notice that its there, and often the viewer won’t either. But the great thing about abstract structures is that when they are there, it makes the composition way better than before. Abstract structures have been around for centuries- from Futurism to Dadaism, and de Stijl to Expressionism. Each of these movements had an impact on the abstract structure, and has influenced how we use it today. Abstract structure is aesthetically pleasing to the eye and something we desire in a composition. Structure in general is something that we as designers crave in our compositions, and as humans our eye searches for it. Structures are formulaic solutions for where things go on the page. Structure gives meaning to our compositions, allowing something for our eye to follow. Although the use of grids in graphic design is the most common use of structure, including abstract structures in design creates a whole new level of visual interest. Structure isn’t just a bunch of horizontal and vertical lines on our Photoshop art board- structure is an important tool we as graphic designers need to use to our advantage.

 

These trippy photos are the perfect example of the abstract structure of radiation. The structure is all situated around a common center, which is at the center of the image. A spiral effect is created, creating a hybrid between a concentric and centrifugal structure. This occurs because the lines have an unequal distance from the center while also having a helical line emerge from the center. It’s pretty amazing what someone can do with some paint and an old drill.

   

These photos show examples of different types of gradation. The one with the confetti shows gradation of size. From left to right we see the little confetti pieces go from very small, to much larger. The negative space also changes as the confetti gets larger, as the right side of the image is much fuller. The image with the nails shows a very popular trend right now: nail gradation. It showcases the same technique as the confetti image, just on fingernails. At the base of the nail the gold glitter is more repetitive and there is little negative space. It gradually thins out and becomes mostly black at the tip of the nail, creating a even gradation.

Sources:

http://www.graphics.com/article-old/brief-history-grids

http://gizmodo.com/5989899/paint-plus-power-drill-shows-just-how-beautiful-centrifugal-force-can-be

https://www.flickr.com/photos/simoncpage/3578616870/in/set-72157618942330467/

Abstract Objects

Abstract objects are essentially ideal shapes that cannot be physically created. The example with drawing a point is perfect to describe what an abstract object really is. Although it may look like you’ve only drawn a point, you really have created a surface, or drawn a minuscule circle. Abstract objects are the optical illusions of design- you may not be able to even see or feel it. Many abstract objects are composed of one another, like a line is composed of points that are adjacent to each other.

Abstract objects in design are reminiscent of a high school geometry class; dealing with volume, surface, points, and dimensions. Almost mathematical, abstract objects are the blueprints behind every design. Without even realizing it we experience these abstract objects in our daily lives- we and everything around us has abstract qualities such as dimension, volume, and surface.

Donis A. Dondis of A Primer of Visual Literacy wraps your head around the idea that concept of abstract breaks through the “conscious to the unconscious, from experience of the substance in the sensory field directly to the nervous system, from the event to perception.” These different examples of abstract objects are present in all design, yet often hidden in the background without us realizing it.

Steven Bradley of Vanseo Design, writes a perfectly written response after reading himself Christian Leborg’s Visual Grammar. He says as a designer, he thinks the phrase “communication design” correctly describes the goal as a designer to communicate something to an audience. Essentially, that is why we call it visual communication: we as designed are tasked with the job of communicating a message to an audience, using images to convey our meaning. He then goes into saying how communication needs a language. When it comes to design, design principles are our letters and words. With that we form visual grammar. Objects- whether abstract or concrete- are the basic elements we have to work with when speaking the language of design.

He describes how abstract objects are idealized shapes that can’t be physically created. In his words, “It can only exist as an abstract concept and not as a physical thing.” The external limit to everything we see is the format. He uses an example of a browser window. This post is seen and defined in relation to the format of your browser window, created these invisible boundaries. The same thought process could be applied to the edges of a poster, or a page in a book. Steven Bradley describes the idea of abstract objects in simple terms, so we can enable ourselves to communicate visually.

           

Every person has his or her own visual dictionary, whether we realize it or not. This “visual dictionary” can be composed of visual objects that are influenced by the world around us. We are influenced by all that we see and certain things come to symbol other things, which then creates a visual language. One method to learn about this visual language is to study the different abstract objects within the visual language.

For example, look at the relationship between the objects in the different squares. You can study the variations of thickness, the orientation, the size or scale, the lines in the grid; the list goes on and on. These abstract objects are the building blocks for our visual language.

            

One of the concepts that stuck with me the most in the reading about abstract objects was point. Points are essentially the DNA of design: you cannot see or feel a point, however they are crucial. Points do not exist in the physical world however they are important in design.

These images show different types of graphs, each highlighting the importance of points in design. While you may not be able to see the surface area of each point, you know it’s there and it holds a distinct purpose in the design.

Sources:

http://www.vanseodesign.com/web-design/visual-grammar/

http://roopadesigns.blogspot.com/2010/09/visual-grammar-101-102-103.html

http://designbeep.com/2012/08/13/showcase-of-creatively-designed-chart-and-graph-examples/