Gestalt Principles

Gesundheit! No I didn't sneeze. Gestalt principles are known as the "Law of Simplicity" or the "Law of Pragnanz". The theory is that every stimulus is perceived in its most simple form. Gestalt theorists followed the basic principle that the whole is greater than the sum of its parts, like a car. A windshield wiper is great, but it's no good without the windshield, and the windshield is no good if it's not set inside the frame, etc. You get the point. The whole carries a different and altogether greater meaning than its individual components. In viewing the "whole," a cognitive process takes place – the mind makes a leap from comprehending the parts to realizing the whole. When you go to buy a car you don't start with looking at windshield wipers, you look at the whole car (and how cool you will look in it). We visually and psychologically attempt to make order out of chaos, to create harmony or structure from seemingly disconnected bits of information. Sound familiar? This relates to the work you do here, as well as your career path choice. We are visual communicators, and as such it is our responsibility to take all of the information, whether it's a chart or learning outcomes and unify and simplify the information so that it's visually easy to convey the greater meaning.

There are 5 Gestalt Principles:

• Similarity
• Continuity
• Closure
• Proximity
• Figure ground

Similarity

• Gestalt theory states that things which share visual characteristics such as shape, size, color, texture, or value will be seen as belonging together in the viewer’s mind
• Repetition of forms or colors in a composition is pleasing in much the same way rhythm is pleasing in music, the forms aren't necessarily identical - there may be tremendous variety within the repetition, yet the correspondence will still be discernible
• Like static and dynamic tension a deliberate use of similarity in composition can impart meaning to the viewer that is independent of the subject matter of the image
• Similarity or repetition in an image often has connotations of harmony and inter-relatedness, or rhythm and movement
• good composition: regardless of the subject matter, makes some use of similarity in arranging elements and space for aesthetic advantage
  
  

  

  Image Credit: Victor Ngai, New Yorker Interiors, 2014.

Image Credit: Kadir Nelson.

Continuity

• This Gestalt principle states that learners "tend to continue shapes beyond their ending points".
• The edge of one shape will continue into the space and meet up with other shapes or the edge of the picture plane.
• Continuity in the form of a line, an edge, or a direction from one form to another creates a fluid connection among compositional parts.
  
  

  

   Image Credit: Balthus, The Living Room, 1941-43.

Image Credit: Jing Jing Tsong, Twinkle Twinkle Small Hoku, 2014

Closure

• Closure is the effect of suggesting a visual connection or continuity between sets of elements which do not actually touch each other in a composition.
• The principle of closure applies when we tend to see complete figures even when part of the information is missing.
• Closure occurs when elements in a composition are aligned in such a way that the viewer perceives that "the information could be connected."
• Imaginary lines called vectors, or shapes called counter forms, are generated by these relationships, which the eye understands as part of the composition even though there is "nothing there.
• Vectors and counter forms exert forces and tensions that are as real in defining its underlying structure as the elements that are visible.
• Linear vectors direct the path of the eye through the composition and determine where the eye will go once it is attracted by the prominent features of the composition.
• A vector can be straight or curved, depending on the relationships that form it.
• Counter forms, (or negative spaces), determine to a great extent whether or not the composition will be perceived as a harmonious whole. Counter forms "echo" the positive visual elements with "similarity," or create powerful substructures that support and connect visible elements.
• Closure can be thought of as the tension or "glue" that holds a two-dimensional structure together
  
  
   

  

  Image Credit: Bev Doolittle

  
  
  
  
  Proximity

• The Gestalt law of proximity states that "objects or shapes that are close to one another appear to form groups". Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together.
• refers to the way smaller elements are "massed" in a composition
• Also called "grouping," the principle concerns the effect generated when the collective presence of the set of elements becomes more meaningful than their presence as separate elements
• Arranging words into sentences or titles is an obvious way to group unrelated elements to enhance their meaning (it also depends on a correct order for comprehension)
• Grouping the words also changes the visual and psychological meaning of the composition in non-verbal ways unrelated to their meaning
• Elements which are grouped together create the illusion of shapes or planes in space, even if the elements are not touching.
• Grouping of this sort can be achieved with:

• Tone / value
• Color
• Shape
• Size
• Or other physical attributes 

Image Credit: Seurat, Sunday at the Park.

Image Credit: Chuck Close

Figure Ground

• shows our perceptual tendency to separate whole figures from their backgrounds based on one or more of a number of possible variables, such as contrast, color, size, etc.
• A simple composition may have only one figure
• In a complex composition there will be several things to notice. As we look from one to another they each become figure in turn.
• Everything that is not figure is ground
• As our attention shifts, the ground also shifts so that an object can go from figure to ground and then back
• Ground is sometimes thought of as background or negative space
• Figure-ground refers to the relationship between an object and its surround. Sometimes the relationship is stable, meaning that it is easy to pick out the figure from the ground.
• Other times the relationship is unstable, meaning it is difficult to pick out the figure from the ground. Rarely, the relationship is ambiguous, meaning that the figure could be the ground or vice-versa
• Clearly differentiate between figure and ground in order to focus attention and minimize perceptual confusion
• Camouflage is the deliberate alteration of figure-ground so that the figure blends into the ground
  
  

  

  Image Credit: Stefano Vitale, On the Take, 2015

  

  Image Credit: Jon Krause, The Invisible Puppeteer, 2015.

  

  Image Credit: M.C. Escher, Day and Night, 1938.
  
  

  
  What Gestalt Principles are being used in this illustration?
  
  

  

  Image Credit: Curtis Parker, 2015.

   
  
  
  
  
  
  
  
  
  
  
  
  
  

   

Adobe Illustrator: What you need to know, Part 1

Arrows heads and tails without using the triangle tool

Illustrator has an arrow feature in the Stroke palette. Clicking on the left or right arrow you can determine the type of arrowhead or tail you wish to have on your line.

Once the arrowhead is chosen, you can decide if the scale of the arrowhead works and is not to big.

If you need to adjust the scale of the arrowhead to the line, the percentage scale below the arrowhead can be adjusted.

You can also adjust whether the arrowhead stays within the line length or goes beyond with the Align tool just below the Scale.

Blend tool does not make a smoothie 

But it does allow you to create multiples of an object, like grid lines, marks on charts, etc.

Start by creating a pair of objects, I'll create a graph for demo. So I made one vertical line and copy/pasted that duplicate to the right of the original. Like so.

The icon shown is the Blend tool.

Double click on the Blend tool and the Blend tool options box will open. Choose Specified Steps in the Spacing drop down.

In the field to the right, choose how many duplicates of the line you wish, I have chosen 5. Make sure the Orientation is selected as shown above. Click Ok.

Now we have 7 lines, evenly spaced apart. If you want to change that number, double-click on the Blend tool again and change the number of specified steps.

Now I have 10 lines.


To learn what other things you can do with the Blend tool, look at this tutorial https://helpx.adobe.com/illustrator/using/blending-objects.html

Transform Tool Palette

Did you know that there are options for the Transform tool? If it is not already in your palette options to the right, you can find it under Windows > Transform. Select it and an option dialogue box will appear.

At the bottom you will note the 3 boxes, if unchecked you'll need to check the Scale Strokes & Effects. Below is an example of what this selection does.

You can see from the example that when the selection is not checked and objects are transformed the stroke and effects that are attributed to the shape do not expand or contract with the transformation. But when the selection is checked, the stroke and effects modify based on the transformation.

Transparency Palette

Just like Photoshop, you have the option to manipulate the opacity and effects to the objects using the Transparency Palette. If it is not already in your palette options to the right, you can find it under Windows > Transparency. 

You can see the Opacity field, and the options you have clicking on the left drop down.

Remember these applications only apply themselves to the objects, not the layer.

Direct Selection Tool

I fondly name this the white arrow, maybe because the icon.

This arrow allows you to manipulate every object in Illustrator, by allowing you to select and move individual nodes. (blue square)

How to slice a pie

Creating our own charts and graphs does not pose to much of a problem. But pie charts are another problem. Illustrator has kindly provided us with a Pie Graph tool.

If you don't see it in the tool set, look under the Column Graph tool.

Once selected click and drag out an area on the art board, once released a pie chart will appear along with a table.

Illustrator automatically assigns the first slice as 1.00, you can change that in the grey field. You continue to add different slices to the pie graph going across to the next cell.

Once you have added all of your percentages, click on the check mark icon in the upper right corner of the table.

The slices of the pie graph are revealed. If you need to have a color graph, you'll need to use the Direct Selection tool to select the pieces of the graph and choose a color in the Swatches or Color palette.

Once you are done with the table, you can close it.

Art Board + and -

You can change the size of your Artboard or even add more of them, but clicking on the Artboard tool.

This will change the tool set in the bar at the top and will change the desktop, you'll be in the artboard space.

You'll notice the bar at the top to the right has fields for width and height, you can change the size manually there, or you can just pull the sides or corners of the artboard to change the size. If you wish to add another artboard, there is an icon of a turned up page on the artboard menu that when clicked will give you another artboard attached to your cursor. Find a place on the desktop and click to release it to the desktop.

Now I have 2 artboards and they are labeled as such in the upper left corners.

Agile and what it means to you

Agile development is traditionally used in software development, the format is to take an idea and quickly turn it into a working model and launched. From there it is updated constantly with changes and fixes to become the product it needs to be to function according to the needs of the user.

At Independent Study, we are using this same development model to create courses with the idea that they will change and morph according to students/faculty needs as they are being used.

The information below is from a document created for all members of the development group within Independent Study, but I have pulled out the information that I feel is important for our teams needs.

The Mission for the IS Development team:
We create middle school, high school, and university for-credit online courses for universities, schools, teachers, and homeschools so students can successfully achieve their learning  outcomes in an affordable manner.

What does this mission mean?

It means the "We" is all of us, working together on the same time, trying to achieve our mission. We work together lending our expertise as a means to help the whole team in achieving this mission.

The "students" are our main audience, they are the users of our courses. We strive to understand who they are and how to serve them, remembering both their diversity and learning conditions.

Our courses enable students to succeed. Because of good design and aligned content. While we cannot ensure students will choose to learn, we "can successfully achieve" our part by influencing them with good design, support, feedback and by the quality of the courses.

Generally our courses fall within a unique market of lower price and high credit value. To maintain this low cost, we need to make a conscious effort to produce the courses in an "affordable manner". Our responsibility is to complete our tasks in a timely manner and of a quality that doesn't require frequent corrections or updates.

Agile Development Process

The process begins with approvals, from university and Independent Study administrators. Once approval has been granted for a course, the next stage is Design. During the Design stage, the author (teacher/faculty) member will meet with the Instructional Designer to begin outlining the course and all of the components. Once the design is set, the author begins to write the first lesson(s) and a scrum team is formed. A scrum team is made up of an Instructional Designer, art lead, media production lead, QC lead, editor, Instructional Design Assistant, programmer, and TA lead. That team will be together during the duration of the course and possibly longer. The Instructional Designer is the scrum team leader and all work and management of the team lie with them. The Development stage is where you as scrum team members begin and finish your work. Following the Development Stage of the course is the Release stage, and finally the Pilot stage. 

Art Lead Responsibilities

The Art Lead is responsible for the overall aesthetic and instructional value of all the visual aspects of the course. The artist creates, finds, and adapts illustrations, graphics, images, maps, powerpoints, etc for the course. The artist works with the author to improve any presentations used in video lectures. The artist also ensures that all images are in the proper format, resolution, size so they display correctly in different devices and media. The artist works with the author and the designer suggesting ideas for how to best portray concepts, ideas, or relationships visually to enhance the course. As a graphic artist, I would ask myself, "How can I best help visual learners understand this content? How can I better represent these ideas?" 

Sometimes the best graphical solution for visual artifacts in a course may be different from the style or artistic abilities of the illustrator assigned to the scrum team. In those cases, the Art Lead should consult and coordinate with the Art Director (Suzy) to delegate specific tasks to other members of the department's Art team (also inform the instructional designer about these changed assignments).

Charts + Graphs

What is wrong with this chart?

Graphs, Charts, etc Checklist

• accessibility (color, readability)
• hierarchy of information (labeling to clarify information)
• sans-serif fonts preferable
• spell check

Colors will be difficult to distinguish for color blindness, but use of different line styles can be used as the identifier instead.

The original

The recreated

The original

The recreated

Try something new, maybe the information can be presented in a more interesting way.

Stockphoto resources

https://unsplash.com/
http://www.comelycatch.com/
https://www.cia.gov/about-cia/cia-museum/experience-the-collection/index.html#!/collection
http://digitalcollections.nypl.org/
http://makerbook.net/photography/
https://www.pexels.com/
https://www.loc.gov/