For the purpose of this paper, I chose the burger chains McDonalds and Wendy’s. Both websites have a good sense of balance, unity, emphasis and layout. However, I think that McDonald’s has the better grasp of these tools.
Wendy’s web pages have a pretty good sense of balance. Most of the information doesn’t set the page off balance by putting too much on information on one side. On the “Our Menu” page for example, the image of the onions and lettuce is balanced out by the menu on the left and the quote on the right. The same is done lower on the page where the food items balance each other out into a horizontal axis.
Or on their Wendy’s Ads page which manages a symmetrical balance by separating the different videos into sections. The three smaller videos on the side are used to keep the page from being overpowered by the larger video on the right.
However, Wendy’s pages do seem bit off balance at times. Their Wendy’s Kids Meal page for instance has a large image that overwhelms the page while the menu is smaller and seems to be pushed to the side. Perhaps if they had made the larger image a little smaller and moved it more to the center they could have achieved and asymmetrical balance.
McDonald’s web pages meanwhile have strong balance. Most of their pages have the design of the page separated into neat segments with information on one side which is balanced on the other by information on the other. Sometimes this is asymmetrical like the Training and Education subpage which sets the text on the left and images higher and on the right. The images keep the page from being too heavy on one side, like a scale that is offered equal weight to keep it from toppling over.
Both websites have strong unity. With McDonalds there is a consistent use of white in the background that ties the pages together. Also, there are splashes of red and yellow here and there that of course comes from the logo’s famous colors. The McDonalds website also uses consistent fonts. The font at the head of the page almost always uses the same font style and indeed the same color. The text in the body uses the same font for most of the pages as well. Alignment is a big part of the unity of the website. As mentioned before, the font is placed at eye level in the same spot. The text is placed directly underneath. And for most of the pages, an image is placed in the same spot. These things act as separate pieces that when viewed, pulls the website together as a whole.
The Wendy’s website is much the same way. The navigational bar at the top of the page is a dark red color. Each page has dark red in the page somewhere, whether it be the text, or a colored box. Visually, this pulls the page together. While not all the pages look the same you can see recurring patterns where the text and the images a kept in the same place to create repetition On the Careers page, the images are kept to the right, and the text on the left. Even when you click on the subpages, this pattern is kept the same. Also most of the pages keep the same font in the same color, a dark red as stated before. These little tricks keep the pages whole rather than loosely joined.
When it comes to emphasis, both websites have a strong grasp of it. McDonald’s frequently utilizes a white background with an image over top that automatically pulls your eyes to it. Or it places the title of the page right at eye level in white against a darker background or image. This really emphasizes the point of whatever page your on. McDonald’s also has an interesting bit of emphasis on the navigation bar that sends you to the different pages. The most important pages are in white and planted at the top. The less important pages are in a muted pink and at the bottom of the navigation.
Wendy’s has a navigation bar as well. The bar at the top of each page leads you to different parts of the website. If you hover your mouse over them, a drop down menu appears. Unfortunately the text in the drop down menu is a muted orange against dark red, which is no where near as eye catching as McDonald’s navigation bar.
Also Wendy’s uses motion for emphasis. The homepage for example, has a slideshow that moves back and forth periodically. This pulls in the viewer since the human eye is automatically attracted to motion. This tactic can also be seen on the “Quality of our Recipe” page and the “Wendy’s Ads” page which has a video that plays automatically, and pulls in your interest.
On the career page, there are three human figures. If you hover your mouse over them they move and a sign appears in their hands which leads you to important parts of the website. McDonald’s uses little movement, except for their promotions page. So I would say that Wendy’s does a better job of emphasis, and catching the viewers’ eye but only by a little bit.
When it comes to layout, McDonald’s had a clean-cut layout. Most of the webpages consisted of an image with an image underneath, or over it. This makes it simple to navigate through.
For example, the home page consists of an image, large text to explain what it is and a few gimmicks at the bottom.
Wendy’s on the other hand had a lot more going on. There are moving images and text boxes on different parts of the page. Unfortunately this makes the webpages a bit busy and less straight forward. Also while McDonalds puts its most important text at eye level, Wendy’s tends to place it to the side or below eye level. This makes it harder to tell what’s the most important part of the page.
On Wendy’s Our Menu page for instance the actual menu is off to the side and the textbox for it is smaller than a quote from Dave Thomas. In the middle is a picture of onions and lettuce, which doesn’t really tell us what’s on the menu. And pictures of the actual items on the menu are on the bottom of the page rather than on the top where they would be easier to see. So in this case, McDonald’s has the better layout.
So I would say that while both websites have a strong use of balance, unity, emphasis and layout McDonald’s has a stronger grasp of these principles.