Mis-en-Scene: Hugo

Costume Designer Sandy Powell had quite the task ahead of her when she signed up to design the costumes for "Hugo", an award-winning film set in 1930s Paris. But, after receiving a handful of raving reviews, it looks like there couldn't have been a better costume designer for the film. According to IMDB, "Hugo" received the following nominations related to costume design:

Oscar:

Best Achievement in Costume Design 

 

CDG (Costume Designers Guild Award):

Excellence in Period Film

 

Critics Choice Award (Broadcast Film Critics Association):

Best Costume Design 

 

Saturn Award (Academy of Science Fiction, Fantasy and Horror Films):

 Best Costumes 

 

BAFTA Film Award (British Academy of Film and Television Arts):

Best Costume Design

 

PFCS (Phoenix Film Critics Society Award):

 Best Costume Design

Rather than simply listing the awards that "Hugo" won for its costume design, I wanted to take a more in-depth look into what it took to make such top-notch costumes.

A number of different journalists were able to ask Powell about her designs. They're listed below:

The following can be attributed to FIDM: Museum and Galleries:

1. Did you consult the book or its illustrations when designing costumes for the film?

A) They served as an inspiration for the feeling and tone of the whole look...
Martin Scorsese also screened films for us to watch...

2. How does this unified color scheme affect the mood of the film?

A) Since this is a film to capture the imagination of children as well as adults, I wanted to use a colour [sic] that would resonate...

3. Hugo is an active kid with a dirty, scrappy life. How did you account for this when making his striped sweater, jacket and short trousers?

A) I wanted his jacket and trousers to always be a bit small to show that he was alone, with no one to look after him and buy him new clothes once he had grown out of them.

The following can be attributed to The Huffington Post:

1. How did you start making the costumes for the film?

A) ...I have a bunch of clothes that I just found or rented from the period and we tried them all on. I try lots of different things on the actors when I first meet them and see what shapes work, what colors work.

2. What is it like when you first see the actors in their costumes?

A) When the actors become their character, that's really the moment when you've done your job...

3. Were there any costumes you didn't love?

A) ...There are a huge number of principal actors, and non of them have more than two changes of clothing. In a film like "Hugo" where there are only one or two costumes, you've got to get them all just right.

The following can be attributed to Frock Talk:

1. What were your initial discussions like with M. Scorsese about the look and feel of the film?

A) The look and feel of the film was largely influenced by the original book by Brian Selznick. Although I didn't copy the clothes from the illustrations in the book, they served as a stating point and inspiration. M. Scorsese wanted everything - sets and costumes - to be slightly heightened and unreal as if seen through the eyes of a child or like illustrations in a picture book. ...He screens films for the crew to see, things that he is using as reference either as a feeling or as a literal reconstruction.

2. I noticed a lot of really nice knits in the film - I presume you had them custom made.

A) Hugo's sweater was based on an original one I found, so I had to find wool to match. If the colours [sic] weren't right, I dyed them to the exact shades I wanted. ...Isabelle's colours [sic] weren't so unusual; I wanted a very 'French' look for her, so she is in a lot of navy and burgundy...

3. If I may, what was your budget?

About 1.2 Million British Pounds Sterling (Approximately $1.87 Million U.S. Dollars)

The following can be attributed to Below the Line:

Powell began her work, as she does on all Scorsese films, by watching films he has recommended. There were also photographs from the period along with photographs of Melies and his wife...

"Everything is seen as if through the eyes of a child, therefore I wanted to simplify the looks to just once, maybe two outfits for each character. I approached the actual costumes as if they were illustrations from a children's picture book, keeping the looks simple, graphic and colorful," Powell explained.

Hugo wears stripes as he runs through the idealized Paris of the 1930s... with his only ally, the plucky Isabelle, who also wears a striped sweater throughout the film. The result is... a consistent look for each character defining their personalities and helping to distinguish them among crowds in the busy railway station...

The following can be attributed to Clothes on Film:

The blue of the Station Inspector's uniform is deliberately intensified.

The stripes motif on orphan Hugo Cabret and his new friend, Melies goddaughter Isabelle, for example, helps to distinguish their fast moving bodies in the packed train station...

"I wanted the characters to be seen amongst the crowds in the station, especially since a lot of the time they are seen from Hugo's point of view from up high," Powell said.

...The sleeves on Hugo's Norfolk style jacket are too short, implying he has grown out of it since his father died, suggesting the passage of time and his dire circumstances: living alone in a train station on scraps, scurrying between levels like a rat. Hugo could not be any lower when we meet him. His existence is Dickensian in the worst sense of the word.

Powell said: "I wanted the characters to be instantly recognisable [sic], like illustrations in a children's book, where characters usually stay in one outfit throughout so they can be remembered...

 

 The still frame our group chose is pictured above.

  

Design Analysis

Line:

Because the movie is intended to be seen through the eyes of a child, there were no more than two costumes for each character, and costume designs were simple. Stripes were used on a handful of the costumes, including Hugo's and Isabelle's sweaters. Similarly, Madame Emilie's coat and skirt had a zig-zag pattern. These particular patterns made it easy for the characters to stand out amongst the crowds in the station. As stated on the class blog, lines "lead your eye around the composition and can communicate information through their character and direction."

 

Form:

Similar to line, form is apparent throughout the rectangular shape of the lines of Hugo and Isabelle's sweaters. The station inspector's hat has an almost zig-zag pattern, which also adds depth to his costume.

 

Color:

Color was one of the most important aspects of costume design. One of the most prominent examples of color is illustrated by the station inspector's blue uniform. Powell described that a typical station inspector's uniform would be navy. However, navy would appear black on screen, so she exaggerated the intensity of the blue in his uniform to assure he would stand out on camera. The value of the blue is also associated with energy, which is perfect because the station inspector is constantly chasing Hugo, as well as other orphans, around the station.

Similar to the station inspector's uniform, Hugo's costume featured an intensified blue color, as well as shades of burgundy, orange and brown. Isabelle's costume was made of navy and burgundy, creating a "French" look. These colors are dull, portraying a serious mood. Isabelle's outfit matches well against Hugo's, which is important as the two characters are beside each other a majority of the movie. Together, the reds, oranges and browns are warm colors, while the blues are cool colors.
 

Texture:

There was plenty of knitwear throughout the differing costumes, as well as wool, heavy overcoats, hats and scarves. The film is set in the 1930s but includes costume designs from the 1920s as well. The winter coats and hats takes viewers to that specific time period. When I think of running my fingers along Hugo's coat, I imagine it and his shirt to be rough, as if he's worn these clothes a hundred times without a single wash. Isabelle's coat seems to have a leathery texture, accounting for the wealth her family has.

 

Gestalt Principles

Law of Similarity:

Items that are similar tend to be grouped together.

Hugo and Isabelle's clothes are similar in color and pattern, making it easy to group the children together.

 

Law of Continuity:

Lines are seen as following the smoothest path.

The horizontal lines in the stripes of Hugo and Isabelle's sweaters imply continuation. This is especially important as Hugo and Isabelle move from scene to scene but remain in character.

 

Contexts

Social:

Hugo's costume puts the viewer in the most obvious social context. His clothes were purposely too small, giving an illusion that he is alone and has no one to look after him or provide him with new clothes.

 

Cultural:

The setting is 1930s Paris, intending a "French" culture. This is most obvious in Isabelle's costume, as the colors are explained to create a "French" look.

 



Axioms of Web Design

The website I chose to analyze is Pottery Barn. I've analyzed it below using the axioms of web design (as outlined on the class blog).

Business/Communication Objectives

Pottery Barn's website fulfills its business objective as soon as you are at the landing site. It is obvious that Pottery Barn is a home furnishing and décor business. You are instantly drawn to three large photographs near the top of the webpage. Each of the three photographs is a link to a particular type of décor, such as décor for decorating, entertaining, and gifting. While the web designer could have made text links serving the same purpose, it is not as likely that someone would click on the link; the visual aspect draws the attention of the viewer and makes the viewer desire to see more.

Similarly, it is beneficial to have photographs of actual Pottery Barn décor so viewers have an idea of what to expect from the business. The photographs set the tone for the type of business that Pottery Barn is - elegant designs that are inviting and illustrate that this is what home feels like. While Pottery Barn products are on the more expensive end of the scale, the design of the webpage does not exclude the business to "poorer" viewers. The design doesn't make viewers feel as if they are not "rich" enough to buy their products but rather invites all customers to enjoy a taste of this type of elegance - whether it be limited to their time on the website with intriguing images or brought into their home through purchased products.

Strong Grid

Pottery Barn's website has a quiet structure. Unlike the information- (text-) based CNN website or similar text-based websites, Pottery Barn is picture-based, meaning that users don't go to Pottery Barn to read but instead to buy. While a quiet structure is easily defined in accordance to text, it can still be illustrated through the arrangement of photos and two or three word headings.

At the top of the page, there are 11 headings that direct your search. If you put your cursor over one of the headings, a list of subheadings appear. The subheadings are again divided into categories, each divided by a vertical line and bold text for headings. The spatial relation are categories is well designed in that nothing is grouped too close or spread far apart. Similarly, as you scroll down the page, each major photo spread or block of text is separated with a clean, white line. This white line has the same width horizontally as it does vertically, minimizing visual noise. In simpler terms, it is a consistent grid. The lines are even throughout the page, side to side, top to bottom. Although there is no pattern to the background, the white color creates continuance throughout the website - as you click and are taken from page to page, the white background remains. This allows the user to feel comfortable in knowing what to expect of the entire website and its contents.

As you continue to scroll down the page, there are photos on the right with text on the left. In this horizontal layout, the reader can read from left to right, and the eyes do not have to move all around the page to obtain information. This is a great use of space and creates for a clean alignment. As the cursor is placed on several of the photos, a sentence appears explaining the particular product in the photo. However, the photo still appears in the background of the text, but the opacity of the photo is reduced so it isn't difficult to read. This, too, creates continuance in that the user isn't taken away from the photo but instead remains in contact with the photo and the information.

The Lower Right

The landing page of Pottery Barn does not execute a lower right. It simply has three, large photographs of different products. Because there isn't necessarily one product offered by Pottery Barn (unlike the GoPro website illustrated on the class blog and here), I don't think the lower right is necessary for the website. The three photographs act similarly to the use of the lower right by GoPro - they provide a visual example of what to expect out of a Pottery Barn product.

Continuity

As I said above, underneath the "Strong Grid" heading, Pottery Barn's website illustrates continuity quite well. With evenly spaced horizontal and vertical grids, the website is creating continuance for its users because the eyes aren't jarred up, down or all around in order to collect information. Also as explained above, the white background, though simple in pattern, allows for continuance from page to page of the website. The viewer comes to expect the white background as he/she scrolls pages or clicks images.

Intuitiveness

The design of the website allows for intuitiveness; the user can navigate throughout the website based upon previous experience of web navigation. There is nothing confusing or different in the web design. Also illustrating intuitiveness are the photographs of Pottery Barn products. Photos of dining rooms, living rooms and bedrooms provide intuition to the user - This is what the website is about. This is what the product is about - It isn't a surprise to click on an image of a dining room and be taken to a page where there are several more dining rooms. Perhaps better explained, the user knows that an image of a dining room won't take him/her to images of food. While dining rooms and food are related, the intuitiveness of the user is successfully put into place by the design of the website.

Another part of intuitiveness is whether or not the company logo represents what the product is truly about. Pottery Barn's logo is simple: a capital PB, white in color, inside a black box. The logo, in particular, isn't a product of intuitiveness. However, much like the different logos of cars or appliances, Pottery Barn's logo, if used on all products, can become intuitive to a user who buys from Pottery Barn often or shops at potterybarn.com frequently.

Affordance

The Pottery Barn website executes affordance because the user knows how the webpage is to be used because of its design. The landing page allows the user to scroll up and down and click from heading to heading, photo to photo. One website stated affordance as when you see it, you know what it means. Upon entering the potterybarn.com, you know it's a home furnishing and décor brand. You are not confused that it has to do with pottery or barns because there are headings and photos throughout the website that tell you what Pottery Barn sells.

Greatest Contrast

The contrast of Pottery Barn's website is illustrated in its colors. While the design is not a bold black and white contrast, the colors used still create a strong contrast. As I said above, under the "Intuitiveness" heading, the Pottery Barn logo is a capital PB in white, inside of a black box. The logo has the greatest contrast, but the rest of the webpage uses a less obvious contrast of colors ranging from white and ivory to shades of brown and reds. This palette of colors is warm and creates an inviting feeling. As explained in my introduction of this post, the photographs set the tone for the type of business that Pottery Barn is - illustrating that this is what home feels like. Just as the photographs do, the contrast in colors also illustrate a feeling of "home sweet home". The example of contrast on the class blog and here, is black and white photographs of testimonies from survivors of the 911 tragedy. The black and white contrast sets a mood for what is expected in the webpage. It sets a tone of tragedy, reality, determination, perseverance, etc. Pottery Barn's contrast, too, sets a particular mood and tone that users can be in touch with while on the website.

Good Looking Means Easy

This particular axiom relates to Pottery Barn because the website is, as explained in the seven axioms above, well-designed. It's clean and "good looking" - which, apparently, "means easy". One way I look at this axiom is that if the look of the website is good looking then the product is too; if the website is easy then the product (the timeliness of the service), is too. It's most likely a rarity that anyone would order products from a website that is confusing and doesn't execute the axioms of web design. It's more likely that someone is to actually purchase an online product if the website is "good looking". It's kind of like judging a book by it's cover.