Week 6: Mini Art School #4

Storyboarding

First, please enjoy the storyboard for the process of creating my MMP.

In case you couldn't tell, drawing is not a specialty of mine.

Anyway, after watching the videos from last week, I took the suggestion of downloading a template and printing out several pages of paper that each had 6 4x3 aspect ratio boxes. I also thought that using a pen was a good idea to keep the process moving, as opposed to erasing my sketched whenever I  didn't like them.

I drew sketches of the process I would go through for the creation of the main part of my MMP, which is going to be a multi-media rich laboratory report. To summarize, I will capture multimedia from a lab while the students work on it, and then create a model report. After sharing with students, they will work collaboratively to create their own for a future lab.

While drawing, I tried not to clutter the sketches with too many details; instead I just wanted to make sure that the main point of each frame was obvious.

The two main design principles I tried to consider when putting together the video itself were continuity and transitions. First, in terms of continuity, I attempted to keep the frames moving at a rate that would allow me to briefly narrate what I tried to illustrate. I did not any time where there was no audio because a frame was on for too long.

As far as transitions, Movie Maker has many built in options for how to go from one scene to the next, but not all of them seemed appropriate at all times. For example, when going from once scene to another that is taking place at the same time, but simply showing a different point of view, I chose transitions that seemed to be softer or less noticeable. However, when the project timeline shifted from when I was making the model report to when the students were working on theirs, I felt it was more appropriate to have a more noticeable transition.

Reflection

In any case, the most difficult part of the process was getting started with the first sketch. Once I got used to fitting the images into the small frames, the process moved along quickly. On a side note, despite all of the time I spent for the MDMC looking at new moving media tools, Movie Maker, which is a free download from Microsoft, seems like the easiest and most functional of all.

 

Concept in 60 Seconds

The topic of my video is the key points to a good javelin throw.

Reflection

After making this video, I was able to come up with many ways to incorporate this technique for instruction in the classroom and for athletics. Realistically, it took more time to make the video's overall appearance comply with design rules and fit within the 60 second time than compiling all of the content.

I received permission from the parents of the student for the video. Where all students sign a media release, this is not for school use so having permission, although perhaps not legally required, was important to me. Also, using music that is part of Public Domain allows any use or modification. In other words, there was much less red tape.

Week 5: Mini Art School #3

Required exercise from p. 193

I will start by showing an uncropped image:

1. Here, a friend of mine is standing on a bridge that appears to have been damaged by a flood. ( I would not have walked out there...)  With a little bit of cropping, it only seems like the picture was taken at a funny angle, and you lose the sense of danger from the original picture.

2. The cropped image below shows a bluebird. Admittedly, I think this is a cool bird to see, but nothing special. 

 The image is a lot more interesting when you see it cropped like this...

...because now you get to see that he (I think) has a friend. Where the first image puts a bird right on a gridline, it loses a lot of what makes it more unique.

 

 

3. Here is another image that after cropped, you have no idea what anyone would take a picture of this. But again, when restored to the full size...

 

...you see that it was actually a small island in the middle of a lake.

 

4. This one starts off with a cropped image of what may seem like a harmless bug:

 



Ok, so as long as you run into her while outside, its no big deal. However, add back in the rest of the background and you get a better idea of where this harmless creature was...

 

 ... in my bathroom. (it was under construction at the time)  Oh, and without the rest of the image, you can't really tell how big or small it was. Those are 4 inch tiles...

5. Next we have a picture of my wife, taking a break from a bike ride by sitting on a log.

Not that there is anything wrong  with a picture that focuses on her, but this is not really anything special. (I am referring to the picture, not my wife) Although the original may not be as much of a portrait of her...

...by focusing only on her you miss the fact that this small downed tree is hanging over a lake.  Again, I would not have sat on it.

 

6. So for my last one, I will start with an un-cropped panoramic photo my wife took while hiking in Vermont.

 

 

 

If you have ever tried to take a picture using the panoramic setting, you know how difficult it can be to get one that doesn't look choppy. With a little bit of cropping and playing with effects...

 

 

... I can make it look like she was hiking on the surface of Mars.

 

Reflections:

By simply changing what is included or excluded in a picture, you can completely change its meaning and focus. I know that I have often broken rules about where the focus of a picture should appear by trying to include extra background in order to put the focal point into better perspective with its environment.

 

Part 2: Border Variations, p.197

I want to start by briefly explaining the picture I am using. My wife and I were visiting the Camden Aquarium, where they have a glass tunnel that goes through a huge tank filled with sharks. Because of that it kind of looks like we are under water. Also, just to explain the forced look of happiness, it took her several attempts before she got one she liked. Anyway, here is the image with a few different borders:

 I don't feel that this border is to distracting, but I also don't think it serves much purpose other than separating the picture from the background of the webpage.

This one is not too distracting either, although a little less plain than the previous one. I do like how this one makes the picture to appear to be somewhat blending in with the background.

I don't really like this one. First, I don't think it make sense to have a "wood" frame around a water themed picture. Also, I feel like the brown is such a big contrast to the cooler, light colors of the picture that it becomes too distracting.

Both this one and the next one are based off of the same them, with two different colors on the outside of the stamp-looking edge. Even though the top one uses colors close to our skin tones, it simply looks funny to me. However, when that peach color is replaced with a baby blue...

...I feel it better matches the theme of the picture instead of clashing with it.

Finally, where this is the busiest border of all of the ones I chose, I feel that the sea-shells are subtle enough to not draw attention away from the actual picture, but at the same time work as more than a divider between the image and page background.

 

Part #3: Color Echo, p. 219

I started with a picture of my wife at the top of a mountain.

The top, left image is the original. Added a short caption to describe the feeling of accomplishment portrayed in the picture, as well as an up arrow, because...well... it was pretty high up. Using the dropper in Microsoft Paint, I first tried to grab a green from the grass. This took a few attempts because of the fact that although it all appears green, there are so many pixels that make up that part of the picture that are actually black or other color. Where I felt having the caption in green did not seem to take anything away from the rest of the image, it simply did not seem to fit the idea I was trying to convey. Next, I tried the using a grey from the rocks, but it seemed to get lost in the sky. Where I could have avoided this by putting the caption somewhere else, it just did not make sense to put it at the bottom, or cover the focal point of the image (my wife, of course). The last one, where I took the orange from her shirt is the one I like the best. First, I feel that it helps the caption stand out; which makes it feel more exclamatory. Second, I think that it helps to better clarify that the focus of the image is the hiker, not the background. Even though the orange represents only a small part of the colors that appear in the image, by adding the caption in that same color it seems to be the best fit.

 



Blog Post #4, Mini Art School #2

Part 1: Word Portrait

 On each of the slides below, the name of the font appears at the top, followed by two words that seem to go with it. At the bottom of each slide appears a word that does not seem to fit.

 

 

Reflections:

 

When I first started this activity, it was going pretty quickly. I simply chose a font available in Microsoft Office 2013, and just typed the first two words that came into my head. For the word that did not fit the font, I just tried to think of a word that is typically associated with a very different feeling that the first two.

 

As I got further into the excercise, it started to take longer, and longer to come up with words that I have not used. I feel like I got the point after around five or six of these; making twelve felt like torture. It is obvious that fonts can help convey more meaning than words themselves. This effect is proportional to how unconventional a font is; the further a font is from looking like Times New Roman, the more it stands out.

 

Where it would have been easier to simply use the fonts available in blogger, it does not offer very many. Also, when I tried to upload the PowerPoint I created to Google Drive, most of the fonts did not translate.

 

Part 2: Comparison of Competing Organizations Websites

For this task, I chose to compare the "our party" sites for both the GOP and the Democrats. The links can be found below:

Our Party GOP

Our Party: Democrats

 

 

Also, a zoomed out side-by side comparison appears below: (Dems on the left, GOP on the right)

 

 

 

The two sites do have very similar grid structures. Both have the typical header area with a few tabs up top, and then two columns underneath. In fact, both of the sites column seem to come close to following the rule of thirds, where the left column takes up about two-thirds of the width, and then the right column takes up the remaining third. Not only are the columns practically the same, but the content in them is as well. Both have text describing the purpose or goals of their party on the left, and then a few other graphics or frames that appear on every page on their site on the right. They also both have a footer area, which is again typical of many websites.

 

There are some other themes in common as well. Both use a lot of "patriotic" colors (red, white, and blue), but the democrats have only a few shades of blue, where the GOP uses both reds and blue. Also, on both of their homepages, they have a headline slideshow, and one of the slides has a picture of Barack Obama. Of course, where the democrats have him smiling, the republicans show him holding his head as if he were in pain. In addition, some of the tabs that appear on the website header are very similar as well.

 

 

Reflections:

Of course, there are several possibilities here. Are these things common because they are common to all websites? Or are these two competing organizations copying off of each other? As soon as one posts something, does the other act quickly to create a response? Does neither want to take a risk of being to creative and as a result alienating some potential recruits? 

 



Week #3: Mini Art School Part 1

Part 1

So, for this weeks blog, I will analyze MF Athletic's Everythingtrackandfield.com website, according to the framework suggested in  this weeks reading, 10 Web Design Rules That You Can Break (Penner 2009), as well as a few rules from the two text readings from this week.

Before reading the article, I have always considered the Everythingtrackandfield website easy to navigate and well designed. Let's see which rules they break...

"Rule #1: Do Not Display the Horizontal Scroll Bar." (Penner, 2009)

When the page is displayed full screen, there is no scroll bar. Also, it is not needed because the content is centered and has a wide margin on each side of it. Of course, if you are trying to look at their website in split-screen mode, on a cell-phone, or zoomed in your browser will add the scroll bar for you.

If you go to look at some of the items they are selling in a category with a lot of items, the page are set up to scroll vertically.

Rule Broken? No!

"Rule #2: Use a Minimal Number of Font Faces." (Penner, 2009)

Other than text that appears as part of their or someone else's logo, the fonts are all the same whether they are links, headings, captions, or descriptions. There is variation when it comes to the color, in order to be easier to read on different background colors, and also in the size in order to distinguish between major categories, headings, captions, etc.

Rule Broken? No!

"Rule #3: Do Not Use Too Many Colors."(Penner, 2009)

 Let me start by saying that this website is not meant to be artistic, and definitely was not designed to push any boundaries as some of the examples mentioned under exceptions to this rule. The site uses a gray, almost chain-link, background in the margins, has the majority of its text being black on a white background, and uses either red or yellow background to highlight its links or captions. I would describe the overall appearance of the colors as being neat and not distracting.

Rule Broken? No!

"Rule #4: Make Your Site’s Goal Obvious."(Penner, 2009)

I think this website makes their goal pretty obvious. First, its name of "Everythingtrackandfield.com" does not leave much open for interpretation. If the name were not enough, its description at the very top of the browser window says: "Equipment, Training, Camps & Clinics."

Rule Broken? No! (as I imagine is the case for any website that is trying to sell you something)

"Rule #5: Navigation Should Be Easy To Figure Out."(Penner, 2009)

 Just under the top of the main page where they have their logo banner, there are drop-down tabs that include: Shop Departments, On Sale, Training Zone, Camps/Clinics, and Extras. If you know exactly what you want within the menu, you can continue to make your selections until you get to the specific category you want. One of the biggest things that has annoyed me when working with drop down menus, especially when using a tablet of mobile phone for browsing, is that all of your selections disappear if you accidentally scroll off of the menu. Evertyhingtrackandfield.com has solved that problem by allowing you to click on each selection in the menu and that takes you to a new page where you can then make further selections if you prefer that way instead.

In addition to the easy category navigation, the site has the standard ability to search the site by product name or sku.

Rule Broken? No! It doesn't get any easier...

"Rule #6: Use Different Colors for the Text and Background."(Penner, 2009)

Ok, so when MF Athletic designed their site, they did brake a rule... but barely. The only instance of text being even close to the same color as the background can be seen if you scroll all the way down to the bottom of any page. Here, the headings on the major categories for their site map are a light grey on a darker grey background. This, in combination with the fact that the font is relatively small, do make these a little difficult to read. However, they appear much larger, and in a more contrasting font all over the rest of the site.

Rule Broken? Barely; I say we let them go with just a warning.

"Rule #7: Don’t Put Animation in the Way of Your Content." (Penner, 2009)

There is very little movement on the page. There is one part of the main page that has a window that rotates through a few headlines, but other than that in order to see movement or animation you need to click to open a video.

Rule Broken? No!

Composition and Grouping (Krause, 2004)

This section of Krause's book discusses the importance of layout, especially when it comes to putting things into groups that have some sort of a relationship. In addition, he discusses the importance of making a good first impression on the viewer in order to keep their attention. I will discuss how both of these ideas are applied on the Everythingtrackandfield.com site.

Grouping

On page 46, Krause (2004) compares the layouts of two sites that contain the same exact content and notes how one is better than the other because it is more organized where the other appears more scattered. As I have previously mentioned, the website I chose is organized in a very simple manner, where you can get to almost anything you want from one of five main links close to the top of the page. There is not anything on the page it is unnecessary or that appears cluttered. The Everythingtrackandfield.com site looks a lot like the "better" option on page 46, but it has even less clutter.

First Impression

As soon as you go to the website, the first thing you see is a giant "FREE SHIPPING" caption in a window that rotates through a few headlines. Obviously, if someone is going to the website they are going to be interested in purchasing supplies or learning about track and field. One of the perspective customer's major concerns is going to be the cost of the supplies or information, and the "FREE SHIPPING" may produce a sigh of relief for customers. This could be a difference maker in keeping customers on this site as opposed to going to look somewhere else.

What about the "no tables" rule? (Penner, 2009)

I want to start by saying that I took this to mean that websites should not include a table such as one that could be generated using Microsoft Excel. It was not until I read a few of the comments where I picked up that it was a joke. Am I the only one who didn't get it?

That being said, when you attempt to be humorous on what is supposed to be an informative site, perhaps you should make sure everyone knows it is a joke. If Everythingtrackandfield.com put a joke on their list of ways to prevent injuries, it would not be appropriate. I am all for comedy and entertainment where appropriate, but other times I prefer when things just get right to the point and avoid fluff, which is exactly what the Everythingtrackandfield.com site accomplishes. It may not be a work of art, but it is simple, not distracting, and gets to the point.

Part 2

First, for my work of "art."

 

 

 

Click here  to be redirected to the full size image.

To create the image above, I used Microsoft Publisher. I started with a blank 11"x17" document, and then added the frames by drawing rectangles with both hard and soft corners. I then used a variety of the built-in shapes to fill those frames, changing options for fill color, fill pattern, etc. I am very thankful that it was an option to do this exercise using a computer...

My goals for this exercise were to apply some of the ideas we have been reading about related to design. Other than attempting to keep some of these in mind, I did the best I could to try not to think to hard about what I was doing. This was a huge challenge! Where I consider myself very creative, my creativity has always been geared towards solving a problem or developing something with a specific function or purpose. With this exercise lacking all of those (at least in terms of my educational and career backgrounds), it was definitely outside of my comfort zone.

So, where are they aspects of design? When describing these, I do not want to point out specific frames where they were applied. If the reader is unable to determine where a rule was either followed (or broken), then I clearly failed at its application. Can you find the only frame in the image where I attempted to use the geometric shapes to make a real-life object?

1. White Space

This was probably the only aspect of design that I kept track of throughout every single frame. Where there are a wide range of how crowded a frame is, I tried my best to ensure that there was no part of the exercise that did not leave some space. I attempted to vary whether the space was uniform throughout or more random. I also made sure to keep some white space between the frames.

2. Alignment

Another one of the challenges I tried to overcome had to do with the fact that whenever I create designs, whether they are for a PowerPoint or a diagram, was to vary how the shapes were aligned within a frame. Instead of having every design start from the bottom (as if the objects were subject to the force of gravity), I tried to ensure that some were starting from various positions.

In addition, there were times where I utilized Publisher's feature of telling you when two objects were in a row, and other times where I made sure they were not. Again, this was something that goes against all of my previous designs, where I have ignored the more artistic side and simply paid more attention to maximizing neatness, simplicity, and function.

 

3. Fibonacci Sequence

It should be pretty obvious where this idea was applied. As one of the few things I have seen before this course, I felt that I should pay some homage to it.

4. Color Schemes

Where I started off conservatively, sticking to only one color, I tried to vary the colors as I progressed. When I wanted to objects to appear related, I would go with similar colors (such as various shades of blue). When I wanted objects to appear like they were competing, I went for more contrasting colors. I also wanted to avoid making the mistake of using too many colors when you look at the entire exercise.

Final Reflections

After having the opportunity to create the image above and then stop and think about it, I can honestly say that I am not 100% what the point of this was. Sure, it was a chance to apply some of the design ideas and rules. Again, it definitely made me think outside of my "comfort zone." Perhaps this is just me trying to rationalize, over-analyze, and find a specific use for something in a field that is more about how to communicate instead of what to communicate. (Guess which of those two things I am more comfortable with)

Part 3

For the last part, I am going to use some of the principles discussed in Chapter 5 of Hagen and Golombisky (2013) to first select a photograph, and then use some photo editing software to edit it.

I want to start by introducing some background about the pictures I am going to choose from. My wife has recently started to be interested in bird watching. Where I am not an expert in all of the different species, I still enjoy walking with her and watching her excitement as she sees a new or rare bird. I do the best I can to take some pictures for her using a digital camera, which is not always easy to do because a lot of birds do not like to sit still. Because of that, a lot of the time I switch the camera into burst mode and just hope that some of them come out ok. Obviously, that leaves me with a lot of very similar pictures.

Below are some examples of unedited pictures I took this winter around our neighborhood of what is one of her favorite birds, the pileated woodpecker:

When deciding which photo to choose for further editing, the first thing I considered was the focal point of the picture. I could easily crop a picture to align the focal point with a gridline, but because these pictures are slightly different, I first need to decide what I want the focal point to be, and each of them have something that sets them apart. The top left picture has the most of the wooded background, and also shows the bright red crest of the bird. The top middle picture actually captures small bits of wood either flying from the tree or the bird's beak. The top right picture does not show all of the colors on the side of the bird's head, but does provide a better view of the hole in the tree. The bottom picture is the only one where you can actually see the size of the tree in relation to the bird. Considering the strengths and weaknesses of each photo, I believe the top middle one is the best choice. I feel the fact that you can actually see the wood flying in the picture is what really makes it stand out, and that outweighs the fact that it does not show the entire width of the tree.

The next step is to crop the picture so that my intended focal point lies on a gridline. The digital camera takes pictures with a resolution of 3216x4288, which scales down to 3x4. Because I would want to put this picture into an 8x10 frame, I also need to account for the change in aspect ratio.

If I were to follow the suggestion of placing the focal point on a gridline to the letter, the picture would look like the following:

 

 

If cropped this way, I feel that too much of the bird's tail is cut off. Therefore I will bend the rule here in order to have more of the bird in the picture. As cropped below, the bird's head is on the gridlines, and I feel that the white streak of feathers may guide the viewer's eye towards the beak where the wood is anyway.

 



 

 

After playing around with some of the scene presets available in the software, there are none of them that improve the image without distorting some of the natural colors. With many of the settings, the read feathers look too bright and fake.

 

The only adjustment I decided t make was to slightly increase the contrast on the photo. Where it appeared to sharpen the bird itself, at also took away a little bit of the blur on the background.

 

Here is the final image:

 



 

 

As a final note, I wanted to see what the image looked like in black and white:

As the text suggested, because there are not a wide range of colors in the original photo, it does not look good in black and white. One of the main problems is that the bird's crest seems to get lost in the background. In addition, without the red crest, it is harder to recognize the bird.