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.