A concept in 60 seconds

Another challenge for this week: to film from different and interesting angles, edit our footage, and strip the audio to layer music or a voice over on top of it, and the final product can only be 60 seconds.

I decided to continue using the capoeira kids class that I assist in as my inspiration. I used both my iPhone and my Flip camera to shoot the footage, just to test out how both would look. I also tried to get different views in the class, but that was a little difficult. The gym gives us the training cage space during our time, and I was a bit too close to get a nice view zoomed out. The best I could do was to span the space.

Using the iMovie program on my computer proved to be handy. This was the second time I used it for this class, the first being the podcast introduction, where I edited a video I recorded right from the webcam. This was the first time I put together footage I had to import. There was some experimenting and playing around, but I finally figured it out. *This video was measured at 1 minute in my iMovie program; somehow a second was added when uploading to YouTube. I'm not sure why that is, but at least it was not excessively over one minute.

I'm in your boards...sketching your stories...

I apologize, I'm in a bit of a wonky mood after a couple of packed and busy days; I'm not sure if anyone will get the reference in my blog title. However, I think we can tell that I'm talking about story boarding.

Here, we can look at the storyboard that I made for my Multimedia Montage Project. There are four panels, one for each of the sub-pages I plan to have for my whole website.

Again, I revert to my "snap a photo and post it" method in showing my work, but I digress...As described in my screencast update, I have a Home page, an announcements page for the center I work at, an announcements page for the classroom I work in, and a page for bilingual and bicultural families of the center. I sketched out the general layout I have for them right now, but put in the changes and content I would like to include.
1.  In the Home page, I would like to take a picture from the actual center or classroom to make it more personal. The website is for the center and for my classroom, why not showcase it?
2.  In the Center's announcement page, I would like to again use an image from the center, and get rid of a link button that was included in the blog header theme. The content of the blogs are pretty straightforward, as I would be following the lead of my director who generates the announcements for the parents.
3.  In the classroom announcement page, I would like to make the same changes mentioned above. The content in this blog would be updates on what theme we are currently learning, copies of the lesson plans, and pictures of activities that we're doing in the classroom. The updates can also include resources that we may have used in the classroom that the children really enjoyed and could be further explored at home with the families.
4.  In the Bicultural-Bilingual Education page, I would like to make similar revisions to the layout. Like the classroom blog, the content will include relevant resources that can be extended to home, but they would be more focused on how to incorporate learning in both the family's first language and English. The key is for the parents to not feel pressured about forcing English on their child for the sake of progress in a mostly English environment. This learning experience is about creating an open and comfortable environment and balance where children can express what they know, what they're learning and be creative.

Looking at my storyboard, I feel like I have accomplished a decent amount, considering that this is a "redo" at an attempt of a class website as a project in the previous course. However, there is much to discover and create. The one thing about my website is that it will be a continuous project, as the content is meant to be updated on a regular basis, at least twice a week. The frequent announcement updates may also give me opportunities to include resources, tools and ideas that I intend to share with the families.

Good things come in small packages

     We have been looking at elements of typogrophy, color and photography lately, looking at how much you can really get out of a word or two, a color combination of a few colors and focusing on only a part of a photo.

1.  Photo Cropping Activity - Krause, 2004, p. 193
Here, we were challenged to take 6 photos, and crop them in different ways for any reason that we saw fit. I decided to go on good ol' Facebook and dig out some pictures I have taken so that I did not have to worry about any copyright issues.  At first, I thought that this activity would be simple, but it was really difficult for me to decide which picture to choose, what to look for in each picture, and find the right space in that picture to produce something interesting. I also think my general indecisive nature complicates things even more, but let's see what I've got...

Here is a cropped photo of a structure from Cobá, Mexico. It's part of a game court, where there are walls of the same structure that encloses a space. The idea of the game is for each team to get a ball through the hoops that are spaced apart along the top of the walls (as pictured). The winners of the game are the ones sacrificed to the gods (to offer them the best). One reason why I decided to focus on one goal along the wall is because I found the round shape in the midst of a pretty linear structure interesting; the slant of the bottom creates lines, there is a line when the slanted wall meets the vertical wall, and the stones that make up the walls create lines. Also, the circle is the goal of the game, it's the important part to adding points and making one's self worthy of being offered.

Here is a picture I took inside the central area of a cruise that I went on with my family. From the open balcony of one of the higher floors you can see beams running from one side to the other, supporting this large planters pot that holds a tree.  I cropped out the view of the other open floors below me, trying to focus on the tree against the elevator columns. To me, this was another idea of contrast: the organic shape of the tree against the linear beams that support the linear planter's pot that is viewed against the linear columns of the elevators. Also, the plant and it's pot provide rich colors against a very "clean" color scheme (the blues, silver, black).

This is a view of the beach at St. Kitts. It was a large open picture that had a view of sand, water and sky.  The only objects in the picture was the boat, and beach chair & umbrella set in the right corner that I decided to include.  I could have tried to make the chair more centered, but I also wanted to include the boat.  Also, I feel that by leaving the chair on the side, it still conveys that the view of the beach was vast and open.  As I cropped this, I pictured the placement of white text in the sky for a brochure or and advertisement.

This is a picture of my parents walking through a town in San Juan. In the photo, this part appeared towards the right, but I wanted to crop out the tan building and bench that extended towards the left. To me, this picture has movement and can guide the eyes towards the right. I pictured the next frame would be a view of my parents in the V of the tree, and the next frame would be my parents on the right of the tree.

This is a picture from Grounds for Sculpture in Hamilton. The original picture had a view of the whole statue standing over the water, and the greenery that surrounds it.  I cropped it down to this view because I found it interesting that although it's a reflection, you get an idea of what the original sculpture is, and there are different effects in the water in the same view: large ripples on the top left, smooth on the bottom, and smaller ripples on the top right. With a view of the original picture, the water adds special effects for me!

This, too came from Grounds for Sculpture in Hamilton, and was cropped for similar reasons as above.  The picture had a view of the Rats restaurant and the pond in front of it. I decided to focus on the bottom right corner of the picture to focus on the boat, the lily pads next to it, and the green color scheme with a hint of the establishment that surrounds it. The picture focuses on the nature aspect of the environment.

2. Typography Conveyance Activity - Krause, 2004, p. 299
In this activity, we needed to take a list of words and present them in a way that conveys what we think they represent. I do not have any fancy programs that can do the work that was exemplified in the text, but I do have Word, which includes Word Art, which works for me. hah. I'm not very creative, so I did literal representations of the words listed for the exercise.

For the word "lightly," I wasn't sure if the Word Art shows two possible meanings: lightly in color, and possibly the idea of illumination since the text is in white with slight gray shadowing around it.  For the word "brick," I had the Word Art represent what a brick looks like in addition to the imagery of brick laying, how they line up in a staggered pattern. For "XXL," I originally thought of t-shirt sizes, but I also thought of a men's big & tall kind of shop, so it was really an idea of grand size altogether. I wish I was more creative and had the tools and the knowledge to come up with something like the splat example in the text, but I think I have ways to go before reaching that level.

3. Paint Color Combination Activity - Krause, 2004, p. 227
Here, we were basically given the freedom to take the brush to the paper and come up with whatever we could think of. I started taking the prompt literally, as the activity suggested going to the park to get inspiration, but then I decided to combine colors in random ways as I thought of them.

The green and brown in the tree didn't really blend very well as the other colors did, but it did remind me something that I have noticed before: brown is a very underestimated color.  Though it's hard to get a bold pigment from water colors, that doesn't take the fact away that when paired with brighter or lighter colors, brown is great to include in a color scheme.  On the right of the paper, you can see that I started playing with paint strokes of color, either as a gradient with blending in the middle, or just bold stripes of color.  I tried to play around with colors that I've seen together before. Besides the tree, I tried combining other natural colors on the far, top right: brown twigs, green leaves, reddish berries or flower petals. To its left, I originally wanted to play around with red and black; besides being on a Rutgers campus, I see the color combination in the rubber composite that the floor of our playground is made from. However, the paint turned out to be blue once I added water. I tried yellow and blue, the colors that are in my current capoeira belt, and I threw in some orange since I knew blue and orange are complimentary. The purple and yellow were inspired from some flowers that were in my sister's wedding bouquet, and they actually work well in a gradient as one color turns into the next.  Last, I played around with blue and green because I love a nice, rich teal color. One overarching thing I realized while doing this exercise: there is a lot to layering colors.  With watercolor paints, you get a light pigment of the color that you're selecting, so each time you take the brush to paper, you're adding more of that color. You can control which parts are bolder, which are more transparent, when to have different layers of different colors, etc. I guess in addition to the purpose of exploring different colors that can go together, the activity allows the person to visualize what effects layering colors can have.

Epic fonts and epic battles...sort of

     In this round of design and layout attempts, I chose exercises that looked at font selections of epic proportions in addition to two websites with a battle that is just as epic, if not even more so. (I'm not sure why, but I am enjoying the word epic today...) Again, I will be looking at elements discussed in Golombisky & Hagen's (2010) text White Space Is Not Your Enemy:  A beginner's guide to communicating visually through graphic, web & multimedia design and Krause's (2004) Design Basics Index:  A graphic designer's guide to designing effective compositions. 

1.  Word portraits Exercise - Krause, 2004, p. 241
     As if the ultimate example of personification, Krause discusses fonts' ability to have a voice, but different voices according to their family, size, spacing, and so on. In this exercise, I had to look through a dozen different fonts available in my computer's collection, generate two words that describes the voice or message it conveys, and one word that is contradictory to its voice. To complete this exercise, I underlined the name of the font, followed by two words associated with the appearance of the font and the third word being the contrast. I had a hard time choosing just one word answers to describe twelve different fonts without sounding repetitive; I used some phrases that just happened to come to mind when thinking about how to describe or how to contradict the voices of these fonts.
     I knew I wanted to do screen shots of what I did in my Word document, so I chose to select 24 point size for the font, and they are organized in two columns on each page.

     As mentioned by Krause (2004), fonts sharing the same point size does not mean they share the same spacing or the same height.  My choice of fonts was completely random, to be honest. I clicked on that drop down menu and scrolled down to find some interesting ones; some I use regularly, some I may have used a few times before, and others that I rarely or never used at all but have thought of using them.  In the back of my mind, I must have had a reason to choose the fonts that I did.  I presume that I did want to take a closer look at fonts that have held my attention before.  It is hard to put into words what their appearance is, and thus, why I would want to use them.

2.  What is a Grid? activity #1 - Golombisky & Hagen, 2010, p. 67
     Here, we are asked to look at two websites who are competing with their content and compare the organization of those pages.  I figured that one of the biggest technology battles is Apple vs. Microsoft.  I will have to provide the links to these websites for you to visit, as it is hard for me to take a screen picture of the entire home page; both home pages require scrolling down to see all of the initial content.

Apple
     It is quite apparent that Apple is known for using the white to black color gradient to convey their clean and streamlined appearance (mostly focusing on white and light grays).  Once you visit the home page, you are hit with a lot of white negative space, allowing the most current product to pop.  Smart thinking, Apple, using the visual within your product to create the focal point, when the new innovation of said product is its retina display.  So, when you visit the home page, bam, your eyes are slapped with the large image of their new MacBook Pro.  The beautiful image of the zebras, not coming from the Apple website, but from the display in the image of the newest product pop in a lightly boxed in area of white space. It's as if Apple's website is the poster child of this textbook.
     As you scroll down, you see four other featured products from Apple, not taking up as much space as the MacBook Pro, but three of them still given the same treatment:  framed white space with the color coming from the image in the middle and neutral colored, centered text.  The fourth box is entirely made up of color, but considering that it is advertising back to school preparedness, it could be alluding to the playfulness and excitement that is often associated with that time of year.
     Aside from the menu at the top, I would have to say that the boxed in images of the products on Apple's home page would probably be a 4x4 or a 4x5 grid. I can't tell if the MacBook Pro's image is 4 or 5 times the height of the images featured on the bottom.  Though there are alleys between the boxes of the products, there is still a unified overall look, as if they all make up one large square.

Microsoft
      The first thing I noticed about Microsoft's home page is that it definitely incorporates more color than Apple. Perhaps this is to convey a more casual and easy feel for Microsoft products.  Like Apple, it has a large block dedicated to a new product; however this block is a slideshow of a few of their new items. The slide show loops through three images, two of which are photos of people using their products, perhaps to show ease of use. 
     Microsoft also has two neutral colored boxes on the right for the navigator to choose if they are looking to use Microsoft for personal use or office use, in addition to featured products on the bottom of the large image block in distinguished boxes.  These boxes are also filled with color to advertise programs that are hosted by Microsoft.  Altogether, I would say that the live space of the boxes would be 6x4.  Since the two gray boxes on the right seem to just "hang" off from the main block of media, all of the boxes do not appear to create one uniform unit as described for Apple's home page.
     Further below the bottom three boxes, there are other menus organized in a mix of columns and more image boxes.  These appear to break the grid, as one set of columns is three, and the last set of columns on the very bottom of the page is of four.  These columns also follow the clothesline model of gridwork, and the bottom edges are not evened out.

     I am a little disappointed in how much I still don't understand about layouts and grids.  I do understand the purpose of them, and their uses, but I feel like with the level of nit-picking in my being, I should understand more of the gritty details on how to come up with proportions and whatnot when it comes to drafting a grid and continuing your layout from there. Perhaps that would come with personal experience in trying to create a grid for a working space myself rather than trying to estimate the grid dimensions off of a website.

Monkey see, Monkey...attempt.

     This week, I've been challenged to look at examples of layouts and designs with a more critical eye after reading chapters from Golombisky & Hagen's (2010) text White Space Is Not Your Enemy:  A beginner's guide to communicating visually through graphic, web & multimedia design, Krause's (2004) Design Basics Index:  A graphic designer's guide to designing effective compositions, and other online how to's.  I cannot say that a week's worth of reading makes me knowledgeable or skilled enough by any means, but that doesn't mean I can't try to take guidelines to the drawing board, be it a sketch pad or computer monitor.

     First, we were asked to select a design example and point out 10 elements that either work or doesn't work based on what we've gathered thus far.  I apologize in advance for the excessively feminine nature of my example of choice, but I get a ton of these e-mail fliers, and it only makes sense for me to analyze what is in front of my face...

1.  Minimal font selection:  I am only recognizing two, maybe three different kinds of fonts, which prevents the advertisement from looking "busy."  The fonts used are also reader friendly, and it allows me to focus on the content; had the text been in a more fanciful font, then I would be straining to read the words rather than get the message as a whole.
2.  Font weight:  Where the selection of the fonts are good, there is an excessive use of capital lettering.  I did not think much of it before the readings, but after glancing through Golombisky & Hagen's don'ts of designing, I do realize it.
3.  Text grouping:  The information is in chunks, an element that is part of Golombisky & Hagen's "works every time" layout.  When similar and important information is grouped together, the reader feels that less energy is needed to read all of the content.  The groupings in this ad make sense: the special gift at the top along with the picture, an eye catching phrase along with subtext, and short-but-sweet details on the product.
4.  Text alignment:  Another "don't" from Golombisky & Hagen is aligning everything in the center.  Here, we see that the text follows different kinds of alignment, but none of them centered.  The key title and subtext are aligned to the right, where the rest is aligned to the left.  I feel that the ad's alignment and grouping of text works well, which helps alleviate the fact that a lot of text is all capitalized; its as if it is spacious enough to still be easy on the eyes.
5.  Properly proportioned photo:  Yes, the product looks huge in the advertisement, but the reader can tell that it is a close-up of the product or an enlarged version of the photo.  Using a close-up of the product allows the reader to focus on the product without the distraction of anything looking out of place.
6.  Distinct photo:  This is not what Golombisky & Hagen would call a "naked photo."  The edges of the photo are distinct and do not blend into the negative space that is between the main ad and the promotional offer at the top.
7.  Line placement:  The most clear cut line is the black bar that is set towards the top of the advertisement, with contrast colored font alerting the reader how to redeem the special offer.  This line creates and interesting break as Krause would explain.  It is not set in the center of the advertisement; its placement at the top generates space proportions that are interesting.  There is also interesting line placement in the photo itself.  The arrangement of the product in the photo creates interesting lines in an atypical way (slanted instead of horizontal/vertical, creating more uneven space, etc.).
8.  Harmony:  From the give-away to the pictured product to the background, there is a color scheme that just works.  All of the colors work well together, nothing clashes.  We can also see repetition in one specific color (purple), but at the same time, it is not overpowering.
9.  Font in reverse:  Golombisky & Hagen say that text can get lost when its color is "reversed," that is, light against a darker color.  However, I think the grouping of the main phrase and its subtext works, and it also accents the "shine" effect in the photo of the product.
10.  Focal point:  To piggy-back on the element of the font color in reverse, I think this subtly groups together the intended focal points.  First, the shine effect in the photo captures the reader.  With a light font color to match, the reader notices the key phrase next to the photo, which would bring the reader in to look into the product detail.

     What follows are the assignments to accompany the advertisement critique.
1.   Repetition Exercise - Krause, 2004, p. 57
     Doing what I can with Power Point, I decided to attempt making fliers for capoeira kid's class that I participate in (I assist my professor).  I used the circle as my repeating object.  The concept of the circle is important when playing  capoeira, and I wanted to show that in different ways that (I hope) are not overbearing.  I also wanted to play with our group's colors, which are mainly in the red and gray color scheme.  All of them have the tag of our group logo and website on the bottom right.

 

 2.  Decisive Presentation Exercise - Krause, 2004, p. 71

     I was happy to take a pencil to my sketchbook again after what seemed like an eternity.  I found this activity refreshing since I felt like it was forcing me to create, but in an abstract way, which is something I haven't really done before (I was never strong at just "doodling").  I just created circles and lines that eventually turned into other rectangles or triangles.  I also played with different kinds of spaces and lines.  I think I enjoyed the pencil and paper too much, as I had fun with texture and shading as well.  I apologize if it is hard to see, as I used my phone to take a picture of my sketchpad page.  I didn't have access to a scanner at the time.