Friday, May 4, 2012

The final project for this class was to help our fellow students in an instructional design class by designing visuals for them to help them with a project they were working on with the local HARTS thermal shelter. The group I was working with was assigned to help at the Catholic Campus Ministry building. We had to create various signs and posters for them and the following images are what we made upon the group's request.
This poster was made for the lead volunteers to use to sign in during their visit. I was asked to create this poster and make it 17 x 11 inches. I based the design off of the CCM logo that I place in the top corner. Since the ministry's colors are purple and yellow I used those on the rest of the page. I continued the lines of the cross on the top and left side of the page to make a border to contain the information. I wanted to keep the design simple and use a lot of white space so that the information would be clearly visible and legible. This sign will be placed in the CCM building and used while HARTS uses the building. The purpose and the audience of this poster are clearly visible and stated. The poster is simple and there are no distracting elements and I think overall it is an effective poster.
The next poster we were asked to create was a floor plan of the building. We took a map that was on the HARTS website and edited it and changed it to fit the needs and requirements for this project. We wanted to make the rooms clearly visible and easy to find. We also wanted to clearly show which rooms were off limits so we filled them in with blue to make it stand out. We clearly stated the heading and each room name so that viewers could understand the purpose of the poster and we also put a key at the bottom for the off limits rooms. Since the HARTS organization has a lot of new people at new locations, we wanted to give these volunteers a clear guide to the building that they would be able to easily understand.
For the next sign, we were asked to create a map that clearly shows the emergency exits and fire extinguisher in case of any emergencies. This map is really important and needs to be easily readable for all viewers so that they can quickly locate the emergency exits and fire extinguishers without any confusion. We used the same simple map that we used in the previous poster to also minimize any confusion since the users would be familiar with it. We used dotted red lines to show the emergency exits to make it very prominent and we used little blue circles to show the locations of all the fire extinguishers. We added a key at the bottom of the page so the volunteers could understand exactly what each element is for and we placed emergency contact information at the top to make the numbers easily acessible to them. I think this map effectively shows it purpose and includes all the necessary components to make it logical for the viewers.
The final poster we were asked to make was for the locations of the appliances in the kitchen. I created this poster by sectioning off the kitchen from the previous map and enlarging it. I wanted to make it consistent with the other posters so I continued to use the red font and big red arrows to make everything clearly visible for the volunteers. The volunteers should not have to spend a lot of time trying to find all the appliances so we made it simple and everything clearly stated. This image will also be included in the HARTS volunteer manual to use as needed. We kept the words outside of the map so that the volunteers would be able to easily locate each appliance. I think this poster does and effective job at achieving its purpose.




Tuesday, April 10, 2012

Practice with Photoshop: Shapes

For this assignment we were given the following instructions:

After given the above instructions I created the following images. 
1. For this images I started off with the shape of a sun. For the edited shape, I copied the sun multiple times and gave each one a different color to add a cool effect to the shape.
2. For the second image I started with a plain black butterfly. I then edited in photoshop, using different shades of blue to create a gradient that I filled in the butterfly with. I then added the stain glass filter to add to the effect.
3. In order to demonstrate the use of different styles in photoshop, I used an image of a crescent moon. I started with a black moon and then changed the color and style. I gave it a grey color and added the style called "wind".
4. For the final image I used a heart and then selected the inverse and added and image of a flower field into it. 

Icons and Supporting Elements: Infographic of Conceptual Framework

For this image we were given the following assignment: 

Your challenge is to apply what you have learned about designing visuals for learning, and about creating icons, connection, alignment and priority, to design a solution for students.
Choose a final format (ex. poster, flyer...) for your work. Consider where your final work will appear and how it will be shared with students. Making this framework visible in classrooms is a good thing and the College would like to be transparent in sharing our conceptual understanding with students in this way.
Create visual icons that represent the competencies in the COE conceptual framework. Convey a simple, visual message (using icons) about each competency so that students may easily recognize, recall and describe each competency.
Later, use “supporting elements” to quietly enforce your message and theme.

After given this assignment, me and partner brainstormed ways to effectively demonstrate the content that needed to go on the poster. We wanted to show how each of the concepts to be understood need to work together as building blocks for effective teaching. After thinking of this, we created a building block for each of the different concepts and stacked them on top of each other to show how they all work together. We incorporate the colors of the College of Education (blue and white) along with the colors of James Madison University (purple and gold) and also combined the color combinations by adding some of the gold to the blocks.

While creating this poster we were able to keep Krause's advice for creating icons in mind
- "As designers, it's important to understand the power and influence that well designed and properly presented images can have on their human audience: we ought to take seriously - and learn well - the knack of their creation."
- Give the elements "the recognition they deserve and treating them as the potentially powerful building, binding and theme-setting agents that they are. And while the casual observer might miss the subtleties of a supporting background or bordering element, designers ought to keep a sharp eye out for examples of their use - both successful and otherwise."

After reading the information provided from Krause, my partner and I put a lot of thought into the creation of each symbol. We wanted to make sure that each image effectively and clearly demonstrated the concept it was resembling. We kept a consistency to the "cartoonish" feel of each icon and kept them all within the same color range. Here is our final project:


Gestalt

For this assignment we were asked to create four posters resembling for different words: Closure, Proximity, Similarity, and Continuity. We had to use different shapes to create each poster and they had to be in black and white. Each of the terms were defined as follows by Gestalt:

- Closure: We attach meaning to visual displays.
- Proximity: We group things that are physically close to one another, in a meaningful way.
- Similarity: We group similar objects together in a meaningful way.
- Continuity: We look for unity in objects.

Gestalts main concept is that "The whole is greater than the sum of the parts". While creating these posters I was able to demonstrate Gestalt's theory by evaluating the components that you create, both by themselves and within the context of the layouts in which they are appearing. Three things I focused on while creating the posters were:

Connotation
Does the visual style of this component tie in with the theme it ought to convey? Is every sub-component within the element working toward the same thematic goal? Would if be helpful to show the logo or compositional element to others in order to find out if they perceive it the same way as you?

All of the posters I created effectively demonstrated the connotations of the words they were representing. I was able to use different black and white shapes to demonstrate each word. For the Closure poster, all of the elements are working together to create the same thematic goal: the appearance of the white circle. All of the elements in the Proximity poster are working together to demonstrate the word because if one was missing, the connotation would not be understand because there would be no clearly defined grouping arrangement. For the Similarity poster I was able to demonstrate the connotation of this word by arranging multiple small shapes, into one large image of that shape. This shows how you can group similar objects together in a meaningful way. For the continuity poster I was able to use two different shapes, a circle and a rectangle to demonstrate the connotation of the word. The human eye is able to connect the rectangle on all sides of the triangle by seeing the unity in the objects.

Attributes
Are you satisfied with the visual weight, structure, color and presentation style of the logo or graphic element? Do the elements stand out clearly and are they in thematic agreement with the backdrop? Will the color scheme of each element fit in well with the scheme of the larger layout in which they are placed? Are the elements intended for broad use (i.e., a logo?) If so, have they been designed in such a way that they can be presented in a wide variety of sizes and displayed in various sorts of media?

When creating all of my posters, I kept the above question about attributes in mind. In this case, there wasn't much attributes to change for each poster since they all had to be in black and white. I mainly focused on the visual weight and size of each of the shapes I used. I made sure they were all equally sized to the other shapes so that the grouping and arrangement would be obvious. They are all able to effectively stand out on the back drop because of the great amount of contrast between black and white. All of these posters were designed so that they can be presented in a different variety of sizes or colors if one wished to do so.

Placement
Should this component be given a starring or a supporting role within the layout? Should it call attention to itself or go virtually unnoticed? What sort of placement should this graphic element be given within composition? Should it's edges align with other elements with the layout?

Placement was one of, if not the most important things to thing about while creating these posters. All of the words were demonstrated with shapes and the connotations of these words could only be understand through appropriate alignment and arrangement of the shapes. Each of the shapes in each poster were placed in that position with purpose. Each of the edges had to line up with one another and although this was on purpose, it should go unnoticed. By this I mean that the viewer should be able to see that white circle in the closure poster without noticing that it was created by what was missing from the black squares.

I think this poster effectively exemplifies the connotation of closure. I was able to use for black squares, missing the inner bottom corners, to create a white circle with the blank space.

This poster effectively demonstrates the connotation of proximity. I create two different groupings of a + sign to show the difference of grouping things close together as opposed to farther apart. Both use the same image to show how proximity differs.

This poster appropriately demonstrates the connotation of Similarity. I used to different groupings of small shapes to create a large image of the shape. In the first grouping, I used lots of small triangles and arranged them to appear as one large triangle. For the second grouping, I used lots of small circles and arranged them to appear as one large circle.

This poster effectively demonstrates the connotation of Continuity. I was able to use a circle and a  rectangle to create this poster. Even though one half of the rectangle is underneath one side of the circle it appears as though the rectangle is continuous through the entire circle's edge.

Special Topics Presentation


For this assignment we were to work with a partner to present our assigned topic using text and relevant visuals at your computer station area, as people walk around to see your work. Include the following:
 - Topic or genre name, A thematic design that clearly reflects the nature of the visuals/visual genre described in your article, key words in a font and style that reflect the nature, purpose, impact and significance of the genre
We were also asked to incorporate 10 high-quality visuals that exemplify the genre or topic, and state briefly why they do in a caption near each visual. Avoid using the same imagery that is already displayed in the article. Instead locate other works to create your own.

The topic we received was politics, specifically an article on Palin. A link to the article can be found here: http://www.ohio.edu/visualliteracy/JVL_ISSUE_ARCHIVES/JVL29%281%29/29_1_FlowerYoung.pdf

 Summary of the article:
This article was all about how the depiction of Sarah Palin as a political parody affected her campaign. Saturday Night Live is infamous for impersonating political figures and shining a closer light on the things that they say. In Sarah Palin’s case, it was obvious right away that Tina Fey would be able to do a pretty close impression, because their looks were so similar already. With a few key changes, SNL staff was able to transform Fey into an over exaggerated version of Palin, at times saying the exact words that she had said in some of her interviews, but using hand gestures, exaggeration and comedic timing to turn her words into pure humor. Ratings sky rocketed for SNL, and everyone wanted to see Fey’s impersonation. Our project depicts some of the key elements that went into turning Fey into Palin, as well as how this has also happened to other political figures. We also ask the question, will political parody continue to affect politicians?

After receiving the above assignment and summarizing the article, me and my partner created the following presentation: 















Thursday, April 5, 2012

Today in class we learned about the different effects of primary, secondary, and complementary colors. We were asked to create a poster using two of the different color schemes for an upcoming project. Before creating these posters, we learned some important things about the effects of the different colors from Krause.

"Creating harmonious and effective combinations of color is a matter of instinct (honed through practice and observation), awareness of trends, and understanding of color theory basics."


Primary Colors
The primary colors - blue, red, and yellow - occupy the three foundational spokes of the color wheel. Other colors are created through blends of the primary colors.

Secondary Colors
The secondary colors, orange, green, and violet, are positioned halfway between each of the three primary colors.

Complementary Colors
Complementary colors are those that are direct opposite on the color wheel. Violet and yellow, for example.

In the first image, I used complementary colors to create the poster. In the second image I used the primary colors Red, Yellow, and Blue to create the poster.



Tuesday, February 28, 2012

Emphasis

For this assignment we were asked to choose an image and pick one aspect of the image to emphasize using color or value. I found this image of a little girl and was immediately captivated by the color of her eyes and lips. I knew right away that I wanted to emphasize them.

Orginal Image:
After Emphasizing:

I worked in photoshop to edit this image. I decided to use color and value when editing this picture. As our book states, Color is an extremely effective tool when it comes to making one element stand out above others and value (the relative light-to-dark measure of a specific hure) can also be used to bring notice to one element above others. I made the entire photo black and white except for her eyes and lips, I think this really makes the colors pop.

Alignment

This assignment require us to recreate an image from the book located on page 85. It is a flyer created from furniture and the design feature a lot of specific alignments. The following is a description of the original flyer from the book, "Strict alignment need not appear stodgy. Nearly every element in this composition is tightly anchored to a horizontal or vertical detail of another element. A creative application of the rules of alignment can lead to a dynamic conveyance of variety and verve."

I redesigned the flyer but kept to the same alignment techniques that were used in the original. However I used shoes instead of the chairs that were used in the original. I chose a bright colored pump that would easily stand out with the different colored backgrounds. I kept the two columns of text equally aligned and spaced. The titles on the page are also aligned with the edges of the columns of text. I wanted the word PUMPS to really stand out so I made the letters very large and I stretched them across the entire width of the page. I used the colors from the images on the right for the different words and lettering in the headings.

Harmony

For this assignment we had to choose a subject such as history, math, language, technology, social studies, etc and pick a simple concept to teach someone in that area. We were asked to demonstrate harmony using repetition and visual echo through at least one of the following: color, style, content, or typography.

Monday, February 27, 2012

Personal Poster


We were asked to create a poster about ourselves using photoshop. I chose all of my favorite things in my life including my family, my friends, going on vacations, and my sorority, Delta Delta Delta. I decided to make the deltas the main aspect of my poster because I knew I would be able to place pictures inside of them. The colors of my sorority are blue and yellow so I stuck to this color scheme for the entire poster.

Thursday, February 16, 2012

After being given the above assignment I created the following poster:


After being asked the create a poster using a word or a few words that describes us, without writing that word on there I created this poster. I decided to use a phrase instead of a word that I feel describes me. I created this using Powerpoint so it is very simple but I like the outcome. I stuck to one color theme and I love the way it looks!

Wednesday, February 15, 2012

Grouping Practice

In class we were given the above assignment. After reading the instructions, I created the following slides using only one basic shape on each slide:
For the word "unity", I used 10 different circles to create a pyramid. I think pyramid's a symbol of unity, and when making a human pyramid, it requires a lot of cooperation and work from everyone.

In order to represent "celebration", I used squiggly lines of all different colors and sizes to represent confetti.

To represent the word "isolation" I used 10 different circles, 9 of which were green and 1 of which was blue. I created a circle with the 9 green circles in the bottom corner, and placed the blue circle way off in the upper corner to show that it was being isolated.

In order to make an image representing the word "escape" I used 10 different wavy rectangles. I made them all blue and made each one a different size. I wanted them to represent little fish escaping, so I put them all of the one side of the slide, making it appear as if they're about to swim off the page.

To create a slide representing "intimidation" i used 10 different cylinders. I made one of the cylinders large and colored it black and I made the other 9 very small and purple. The large black one is towering over the group of purple ones to appear intimidating.

I had a hard time coming up with a slide to represent "logic". Finally, I decided to use 10 red and green squares in a checkerboard pattern to represent order and logic.

To create a slide to represent "anarchy" I used 10 different lighting bolt shapes. I made each of them either yellow, orange and red to represent fire and they are all different sizes. I think this shows chaos and anarchy.

Tuesday, January 24, 2012

Design Principles Practice


In class we were given the above images and asked to:
  1. Rotate the shapes consistently
  2. Group by shape
  3. Resize each group of shapes for consistency


 While doing this, we had to keep in mind the four basic principles of design:
  1. Proximity
    • Group related items
  2. Alignment
    • Create a hard edge, line or margin by aligning items within each group.
  3. Repetition
    • Add consistency - Give grouped items similar fonts styles & sizes
  4. Contrast
    • Make one item (title) or one group's font size large and another small
After receiving the previous images and instructions, I created the following:

I tried to use the four basic principles of design when designing the above image. I chose the shapes that were all similar in shape and grouped them together. I used repetition in all of the images to add special effects and I also used interesting alignments. I added contrast by changing the colors and thicknesses of some of the shapes.



The above image is a business card that I created when given the first slide of information. I chose a very subtle color scheme to keep the card simple. I used two different shades of green from the information and then black and white text. I used white for the heading because it makes the group name stand out. For the watering can I changed the effect on powerpoint to make it look like a sketched out drawing. I really like the effect it gives and I think it goes along with the color scheme as well.

Creating an Arbitrary Graphic


For this assignment, we were asked to complete the following instructions:
A researcher is asked to create a visual that depicts her research design.  The design includes strategies, data collection methods and a sequenced timeline.   The researcher will do the following in her study:
1.Obtain informed consent from a class of students and their 2 teachers, May 2
2.Administer an online pre-test survey to the 24 students, May 2-May 9.
3.Observe 2 teachers and 24 students in a classroom once a week,  May 2-June 1.
4.Administer an online, post-test survey to students, June 1-8.
5.Interview 2 teachers individually on June 2.
6.Analyze the data.
7.Close the study.
8.Write a paper about the results of the study.
¡Using just PowerPoint, create a visual that depicts each of these elements as indicated.  Post to your blog.  Use shape and color and placement to contribute to your message design.