Individual Artifact

http://mandalynnwilson.wix.com/luva

mobile version:

I was really inspired by the concept of "quiet structure" when working on this project.  I wanted to make the content (such as the videos done by my team mates and the images of the product) speak for itself.  I removed any boxes or lines from around the images.  I also left out any lines dividing the different sections from one another and let the clean lines of the grid do the dividing for me.  The strong and clean grid is most apparent on the front page, where the majority of the content lies.  I wanted to be sure that I could engage viewers without overwhelming them.

From the front page alone the customer has many options, each put in place to help accomplish the company's business objectives.  First, there is the commercial.  Attached to the commercial I placed the first of many opportunities that customers will have to purchase the item.  Below the commercial there are three photos of the current product, each image a link to add the item to their shopping cart. I used the bodies of the models in the photograph as frames, and to create more contrast in the figure-ground relationship between the photos and the actual website background.  I also used the log cabin background in this manner.  Additionally, I used the texture of the log cabin and the sweaters of the models to create contrast and evoke feelings of cold winter days.  I placed the product name and the price in the bottom right corner to increase the intuitiveness, however, one can purchase the item by clicking on the wording or the photos themselves.

The customer is also able to view images from the company's Instagram account as well as click on a photo to follow them.  I thought this was important to include because our company's primary target audience is youthful and hip.  This idea is echoed by the fun font choice.  Just below the Instagram images there is a form that can be filled out if the viewer has question, and links to Facebook and Twitter.  Virtually everything the customer could want or need from the website is located right on the front page.  The menu is almost obsolete, though I did include additional information and images on the other pages.

Our color concept was inspired by the changing colors of a winter sky.  I used the color palette we came up with to effectively improve our continuity.  I continued the ombre effect from our logo throughout the website by keeping the lighter colors up top and then moving into the darker palette as you scroll down.  I think this gives the psychological effect of reminding one of cold night air as the sun disappears, which, in turn, should make the viewer want to seek warmth.

Business objectives accomplished by the site:
1) Explain the uses and functions of the product.
2) Give customers the opportunity to purchase the product.
3) Keep customers engaged and in touch with the business.

Design elements:

Law of similarity, proximity (keeping sections clear.)
Figure ground relationships
Color, contrast, line, texture
Used color and texture in psychological context, cold, warmth
Heart logo and photo play into the social context, love, relationships

Axioms of Web Design

Bodega's name speaks for itself.  It is a small bodega located in downtown Salt Lake City, specializing in beers, empanadas, and small knick-knack type items.  However, below it lies a speakeasy bar and restaurant.  To keep the restaurant's (known as The Rest) mystery, the owners do not advertise it anywhere.  One has to hear about it through word of mouth.  This makes the goal of the website a little different than the average website, a challenge that I believe the designers conquered.

This is a picture of the main screen on the mobile version.  (It should be noted that the mobile and web version are identical.)  You can see that it simply features a photograph of the face of the bodega; the colors are muted blacks and grays allowing for the name of the shop to really pop as it is a bright green.  This presentation is extremely simple and, I believe also intuitive.  In the top left corner there is a button which is the universal symbol for "menu."  If one clicks on this link it will bring them to a list of essential information which a customer would seek from a website.  These include the menu, the hours and reviews.  Again, the color palette and the fonts are simple and sleek.  Overall, this is an effective approach, but one that some may find boring.  However, the fun lies in the portion of the website that is not quite so intuitive.

If one clicks on the green glowing sign that says "restroom" it will automatically scroll the visitor down, through creepy black and white images that eventually lead to a small button allowing the visitor to make a reservation at the speakeasy.  I love this little feature because I think the fact that clicking on the link is not something a visitor would intuitively do adds to the secrecy and the "word of mouth" feel that makes The Rest so unique.  Additionally, the creepy old photographs play into the psychological context, making the visitor feel that they are participating in something dangerous and wild.  Also, the fact that it scrolls the visitor down, literally gives the feeling of going underground.  It's perfect really.

The only thing that I do not understand about this site, and that I would probably change, is the other glowing sign that appears on the main photo.  I don't understand why they chose to make this sign color among all the other black and white images.  It makes one think that perhaps it is also a button, but it is not.  I would prefer the stark contrast of the all black and white site up against the two bright green signs.  I think this leads and points to the idea that the visitor should click on the glowing green sign, without making it too obvious.  The other glowing sign just seems to add confusion and clutter to an otherwise really clean design.

The site is incredibly consistent if one clicks on the various menu options.  Each features a prominent black and white image that serves as a background for the text.  Though the images are interesting and large in size, they do not distract from the important information on the page.  Also, they provide continuity between the site and the actual store, as one will find some of these images on the walls of the bodega.

Mis-en-Scene: The Virgin Suicides

I am analyzing the 1999 film, The Virgin Suicides, directed by Sofia Coppola.  This was Sofia's first full length film as a director and she was just 27 years old when they began filming.  Adapted from the Jeffrey Eugenides novel, Sofia has said that she began thinking of the film the moment she read the book. And while she was true to the beauty of the novel she definitely added her own touch to the film.

This is a story of the awkward phase between childhood and adulthood.  Of the aches and pains of your first love and the obsessive behavior of adolescents learning about the ins and outs of infatuation.  I chose to analyze this scene in which the boys across the street are desperately trying to contact the girls.  There is something iconically American about the narration by the boys in this film.  This is one of my favorite elements of Sofia's interpretation.

Her vision for this story is evident in many of the little details.  For example, this clip begins with a note written by the girls.  Notice that it is on stationary with a rainbow in the background.  This is one of many little pieces of ephemera that reflect the youth and the femininity of the main characters.  The art director really brought this idea of youth to life with lots of clutter and chaos.  The girls' rooms seem littered with clothing items, teddy bears, records and makeup.  However, with the help of the costume designer, Sofia also toys with the idea that they are budding into adulthood by use of clothing and makeup.

Notice the colors of the film and the feelings they evoke.  Everything is tinged with a vintage tone that gives a feeling of nostalgia, but the shades turn quickly from yellow and warm to cold and blue which triggers a psychological response in the viewer.  The viewer gets a cold and sad feeling from the clips of the girls in their room.  Whereas the boys seem warm and cheery.

This isn't the only contrast I see in this scene.  Throughout the film you may notice that the girls are usually dressed in light colors and they all have blonde hair, whereas the male characters wear a lot of brown and dark blue and have darker hair.  This is extremely evident when the director uses a split screen to show the two side by side.  This has the effect of really separating the two genders for the sake of the story line.

She worked closely with the director of photography, Edward Lachman, who filmed many of the shots in very tight.  This gives the viewer a feeling of inclusion, almost like you are sitting with the boys as they dial the girl's phone number.  He filmed lots of little shots of the girls hair, their eyes, their smiles.  This makes the viewer almost understand what the boys across the street must be seeing when they look at the girls.  There are other brilliantly shot scenes that show the girls through trees or other obstacles that make the viewer feel like a voyeur.  Again, this is done to put the viewer in the shoes of the narrator.

Composing Your Frame

First off, my dog is cuter than your dog.  Had to say it!  I snapped this while out for a walk with my dog Waylon.  It's a great example of the rule of thirds, with the dominant subjects (the little lamb and Waylon) placed right at the points where the vertical lines would be drawn and both of their faces located in the middle section of the horizontal.  The fence serves as a diagonal line and your eye follows it along before being stopped by the tree, which serves as a natural frame, and then bouncing back down to the dog.  In this manner, one could bounce around the picture for quite some time.  I offered a cropped version which frames the photo a little better.  I suppose that follows the "rules" of a good photo a bit more but I enjoy seeing the donkey and the cow on the left also looking right at the camera.  I also think the diagonal line of the fence is more powerful when you don't cut it off at the post, but that's just me.

Design Evaluation

I will be comparing and contrasting two print advertisements for dental pet treats.  These ads each ran in different issues of Martha Stewart Living and were marketed to a similar audience.  In addition, these products sell for a similar price point.

The first advertisement is for "Feline Greenies" and I cannot lie about the fact that I find it absolutely horrible.  Can I make an underhanded immature comment before I move on to the actual design evaluation?  It looks like a layout I would have designed for my 7th grade yearbook.  So...why do I find it so awful?  It is incredibly busy in many ways while being too simplistic in others.  Let me elaborate.

When I step back and view the image as a whole it gives me a headache.  There is too much going on.  One possible reason that this ad makes my head spin so much is the concept of pragnanz, or figure-ground relationships.  The blue swirls and flowers were most likely intended to be the background but because they are larger and more colorful than the photographs my eye goes toward them before it goes to anything else.  My eye actually started with the blue line in the upper left hand corner and moved from blue swirl to blue swirl before I noticed the photographs.   In a better design the background would compliment and highlight the foreground, not over take it.

In addition, I do not find the placement of the photographs (in relation to the type they are placed beside nor in relation to one another) at all pleasing.  My eye cannot find a good line to follow and it does not perceive any pleasing type of symmetry to the ad as a whole.

The law of similarity states that we will group objects that look similar together.  The font appears to be identical all throughout the ad other than the change is size.  This has the affect of grouping it all together in my brain.  I think this is an area where a little bit of change is a good thing.  Differences in font can let us know which parts of the text in the ad are the most important.  It can differentiate between each idea being shared.  For example, the ad says "free a free sample visit greenies.com." This idea does not flow with the other information in that paragraph.  Why not make it stand out in a different color or font and a different placement? Free things are great!  But I hardly noticed this because I lumped it in with the rest of the text written in that same font.  I would have NEVER bothered to read that whole chunky paragraph if I were not writing about this ad for a class.

Let's move over to the good example of an advertisement.  Here, there are 3 different fonts used, 2 colors and 5 different font sizes.  One may think that this could make things more complicated but in reality it simplifies.  Because my mind groups together each piece of text by font, I know that the top font is the most important text to read, I know that the tiny print at the bottom is less essential.  This makes taking in all the text less daunting of a task. In fact, I can even tell without actually reading the print that the large print up top consists of a question and an answer.  This is because of the change in font and the law of similarity.

The happy dog chewing on his bone is solidly in the foreground whereas the owner, who represents the reader, is in the background and out of focus.  This tells us that this is about your dog!!! My eye moves from the dog in the photograph to the dog on the package making certain that I link this ad to this specific product.  The colors tie in wonderfully together and are simplistic and pleasing.

Let's move back to the Greenies ad for just another moment (before I go burn it) and talk about this awful logo.  The logo is placed in the bottom corner and is incredibly tiny compared to the rest of the ad.  The size probably contributed to the confusion but when I saw it I thought it said "Creepies."  I think this is because, if you look closely, the cat's ear cuts off the "n" at a very strange place and it almost seems to flow into the green leaf below it.  My brain connected these parts and turned the "n" into a "p" and at that point it didn't even bother to look at the "g" it just said, "creepies!"  This is an example of the law of closure and it could easily be fixed with just a little better positioning.

Also, the treat placed over the cat's mouth is just wrong.  This cat does not look like he is eating a delicious treat, he looks as though he's being silenced.  To me, the horrible placement of the green blob says, "shut up and eat your treat!"

Contrast, Balance and Harmony

Imagevia
www.msafdie.com

As a life long book nerd I have had a long time love affair with libraries.  There are quite a few libraries across the world that have my heart, but the downtown Salt Lake Public Library might have the top spot.  When I look at this aerial shot the harmony in the design really becomes apparent. First, there are beautiful fountains and water pools located all around the building that come together perfectly with all of the large windows.  The water reflects onto the glass and gives the appearance of fluidity and movement.  I think there is also something very fluid about the large semi-circle on the right hand side of the building.  The way it climbs upward makes it reminiscent of a wave.  Second, the beautiful green grounds all around the library are echoed by the peaceful rooftop garden.  If you are standing on the rooftop you are surrounded by tall grass blowing in the breeze, making movement a consistent and well balanced theme through out the design. 

All of this greenery contrasts pleasingly with the concrete and glass that comprises most of the building.  Aside from contrasting on the nature versus man-made front, these conflicting materials offer a contrast of hard and soft.  In addition to the curved lines featured there are many hard lines and rectangular shapes.  These shapes convey power and strength to me.  And while light dances through the glass the large concrete rectangles create heavy shadows through out most of the day.

Viewing this building from a social context I think about the function that libraries serve in our society.  The design of this library functions so well because it offers an innumerable amount of small enclaves and cubbies for people to read quietly as well as large gardens for families to picnic.  There is a massive children's area full of caves and computers as well as coffee shops and art galleries for adults.  This design functions so well because it balances the needs of every one in the community with grace. 

Visceral Response

Imogen Cunningham, Self Portrait, Mendocino Ca, 1971

This image is breath taking to me for many reasons.  When I first look at it I am drawn to the forms of the shadows on the wall.  I see their car and I get filled with excitement.  Where are they going?  Where did they come from?  I am reminded of all my favorite road trips, of the highway disappearing behind me and stretching out in front of me.  Because we can only see their shapes and not their faces it gives a wonderful aspect of mystery to the photo.  I wonder who they are and what their relationship is.  Next, my eye moves to the structure.  We discussed in class that horizontal lines feel peaceful and I think this is true of the lines the wood makes across the house.  The bits of white space above the house also add to this feeling of calm and serenity.  The texture of the boards convey age and weather.  You get the feeling that this structure has seen a lot and you wonder about its history.  Lastly, the empty and intensely dark space in the window makes me envision people walking up to the window and waving down to the woman taking the photo.  Of course, no one appears there and it leaves me with a bit of an empty feeling.  I envision that perhaps this empty structure meant something to the person taking the photo.  Was it an old family residence?  Was it at one time filled with loved ones?  It reminds me so much of the feelings I've gotten when driving through states like Iowa and Nebraska and seeing empty barns, empty towns.  Like those experiences this photo fills me with an enjoyable melancholy.