Facebook Evolution by Monica Rose Twaroski

Introduction (1)

mtwaroski — 2015-05-03 20:09:42 UTC

Everyone and their mother now has Facebook. It has become a way for parents to keep track of their kids, people to connect with their family members in different countries, and allow people to post comments and snoop about other people. Facebook has not stayed the same over the years. With every change comes different color choices, images and graphics that change to represent the change, and layouts that make the viewer re-naviagte the web-page. The icons with associated with Facebook also change. These small changes are in fact small but very important changes to signify to the viewer that there have been changes made. Zuckerberg uses his experience as a recent college grad to establish his ethos in creating a website that is suppose to be for college students. "The Facebook was only available to select networks" and you were required to have a university emil address (Buck, The Evolution of Facebook Profile). However as Facebook expanded their company their cliental did too. The webpage changes occur to keep the brand of Facebook current. Though most people hate the new Facebook updates when they occur, Facebook has only improved its webpage with every new update and change in layout.

At the Beginning (2)

mtwaroski — 2015-05-03 21:26:57 UTC

Facebook started in 2004, when mark Zuckerberg started the website. It was original called "[thefacebook]" which was placed inconsistently around the website (Facebook). The brackets are a very interesting choice when it comes to where they chose to put them. Because this is the first version of the webpage, there is an element of experimentation. According to Coates and Ellison, designers "look for new ways of doing, making, and ultimately communicating information and ideas" which reinforces the idea that these webpage designers were out to try something new ( Coates and Ellison, 138). Though this experimentation was ineffective because of the inconsistantcy. The logos of the initial webpage is very unique. Zuckerberg wanted to create a site in which people who are experiencing the same time of change and experience in their lives should still be able to remain connected without all of the clutter that the previously popular site of myspace was. The fact that there is limited access also creates pathos, because only college students can feel that special connection of being able to all be on the same website.

The Original Visuals (3)

mtwaroski — 2015-05-03 22:05:59 UTC

These images really highlight the beginning of the webpage. In the upper left hand corner you can see a man in binary code in shades of blue and white. This started out being the first icon that Facebook created for itself. "A symbol is an icon that has no relationship or resemblance to the object of c concept it represents" but instead creates a connection between the icon and what is it trying to represent (Coates and Ellison, 96). The man in binary code is making the attempt to be the icon for [thefacebook]. Icons "are useful and because they communicate information quickly," making the man in binary code almost synonymous with the phrase the [TheFacebook] (Coates and Ellison, 96). The brackets used become a secondary icon for the webpage layout. Facebook placed the brackets around the words [thefacebook] to make the bracket symbols necessary to the phrase TheFacebook.

Change in Colors (4)

mtwaroski — 2015-05-04 00:47:00 UTC

In 2006 the color of Facebook changed colors. They change from their darker blue with a fade to the left to one complete light blue band. This change is not obvious but to a viewer who frequently visits the website it becomes more notable. Instead of the dark with small white strips dividing the different sections of blue at the top of the webpage, we see in the style of the webpage that the blue is the same all the way across the top in a thin strip. Gone are the gradually changing hues, instead the visibility becomes the focus of the webpage. "Visibility is a priority with signage" which means that it is important for a viewer to actually be able to see what is on the webpage instead of have various shades of blue displayed all over the place (Coates and Ellison, 81). On the original page the light blue color of [TheFacebook] almost blends in into the back bar of blue that spans over the top of the webpage. Also it is necessary to mention that [thefacebook] has changed to just simply facebook.

Changes in Color Part 2 (6)

mtwaroski — 2015-05-04 16:52:18 UTC

Again Facebook decided to make another color change a couple years later. The new shade of blue has been sharpened up and changed to a solid blue with small accents of the lighter duller blue as a tool to breakup the darker sharper blue. This blue color change, though is not drastic, is still important. This 2009 change is important because Facebook is also reaching a larger audience at this point and can no longer be just simply making an attempt at design and experiment, but must have a solid design. This darker blue color creates a hierarchy on the webpage. The brighter blue draws the viewer into the webpage but also tells them where they look first when logging into the webpage. According to Lupton, "visual hierarchy helps readers scan a text, knowing where to enter and exit" which is what Facebook does with the sharper blue at the top of the webpage (Lupton, 132). The logos behind the decision then becomes quite clear because the previous color choice blended in with the rest of the webpage. With the newer color, a viewer can determine where they should look at first more easily and quickly.

Layout Changes (5)

mtwaroski — 2015-05-04 16:58:03 UTC

On both of these webpages we see actual newsfeed layout which was not something that was commonly seen in the very first Facebook layout. In the first layout, with the lighter blue color on the webpage, a viewer can see that each new post is separated within a grey box and darker grey shading around the box breaking up each post and contrasting well with the white space present. Before this 2006 change, "the News Feed didn't exist" and so the layout of a newsfeed on the first attempt becomes an overall success (Buck, The Evolution of the Facebook Profile). The newer and most recent change to the layout shows clear separation between each part of the screen as well as the separation between each post. The post are divided by a thin line but also with a light blue box and clear but thin strips of white space are what separate the posts making it look less cluttered and busy with fewer changes in color. "A complete visual identity can consist of color, patterns, icons, signage components, and a selection of typefaces" meaning that something as simple as a change in layout or color drastically changes the perception that a viewer has about the webpage based on what is highlighted or not (Lupton, 68).

New Layout (8)

mtwaroski — 2015-05-05 17:17:28 UTC

The next layout change happened in 2012. At this time Facebook changed its layout on the profile pages from just a simple list played out chronologically, changed into a timeline set-up. The "new profile will act like a virtual scrapbook" making the pictures the highlight of the webpage (Buck, The Evolution of the Facebook Profile). The layout allows for updates to flow by year for overall searching and then by month and and weeks to get to more specific about a search. The fact that Facebook is creating a webpage that is focused more on photos than on actual text. There is also a focus on activities that can be shared in on social media rather than just the random posts that were ever so popular before the change. The more photos from each individual that are made available the less actual web design additions Facebook itself has to make. The other change in the layout is the back ground behind all of the photos and other information. It has changed from a stark white to blue/grey allowing the image to standout but there is no harsh background to pose against.

Original Login (9)

mtwaroski — 2015-05-05 19:20:06 UTC

The original login page is very limited is what is depicted, though the page looks very busy. The list of the colleges that the webpage allows access too displays a pathos for school pride for students looking to login and begin to connect with other students at their same school as well as friends who attend a different school. This pathos triggers a desire in students to want to be on the webpage and connect with fellow students, as it says directly on their webpage in the bottom left hand corner. "You can use Thefacebook to: Search for people at your school / Find out who is in your classes" making each student want to create a Facebook page to be successful in the college social sphere (Facebook Webpage). The shades of blue that are present in this web page are consistent but still very dull on the web page, creating confusion for the viewer as to where to look first. The hierarchy of the webpage should be organized as what "needs to be seen and read by your audience and in what sequence" (Coates & Ellison, 58). One way hierarchy can be established is differentiation on color, which is not done in the very first Facebook webpage

First Change in Login (10)

mtwaroski — 2015-05-06 01:57:40 UTC

The first change in the login page is a very crucial change. Gone is the attempt of making the man designed out of binary code, and in its place as solid blue strip with the phrase "facebook" on the left hand side. The webpage contains icons about what a potential viewer would be able to experience once signing in. These icons establish pathos, by interesting a viewer into logging in and seeing exactly what they do on the webpage. The small image are a type of "resemblance icon" which "directly portrays the object it refers to" (Coates and Ellison, 96). These icons portray adding friends, sharing pictures, connecting with people you used to know, and being safely online. These icons show the important parts of what Facebook is trying to offer.

Second Change in Login (11)

mtwaroski — 2015-05-08 01:39:28 UTC

The pathos of this webpage stems from the "Facebook helps you connect and share with the people in your life" creating the need in for a individual to feel as if they are missing out on what is going on and in order to feel more connect, they must join Facebook (Facebook Webpage). This pathos, along with the established ethos from years of creating the same product, Facebook has established a clear following. What is something that is interesting to notice, is that when the background layout of the newsfeed and profile webpages changes, so does the login page creating a great consistency throughout their entire database.

Last Login Change - So Far (1)

mtwaroski — 2015-05-08 02:07:31 UTC

The last login change seems as if Facebook is reverting back to a similar layout. This is an interesting change because though every thing seems a little more muted there is a clear hierarchy at play. The viewers eye moves to three places when first viewing the page. The first is the solid stark white Facebook in the upper left hand corner. This is because the rest of the webpage is all in a shade of blue so the white logo stands out, catching the viewers eye. The second place the viewers eye goes is dependent on if they are already a member of Facebook or they are looking to sign up. If they are already a member, the viewer looks directly across form the Facebook logo the login information with the yellow back ground. The soft shade of yellow contrasted against the sharp dark blue really highlights the yellow bars drawing the viewer to look at that section of the webpage. If the viewer is looking to sign up, then their eye will look to the green sign up button on the bottom right hand corner of the webpage. Granted this button has stayed the throughout many of the login webpage remodels, the viewers eye still ends up going there, just because the lighter green stands out against the grey blue background.

Layout Tabs (7)

mtwaroski — 2015-05-08 03:58:22 UTC

The tabs on the profile wall tell the viewer where to look and what they can click on to connect with another individual. These tabs create a hierarchy on a page that was previously lacking in instructing where the viewer should look. Hierarchy on the webpage is crucial because otherwise the viewer cannot determine where the important things no the webpage are, which is what the tabs do. They are just a shade darker than the background when they are not chosen and then become a white tab when that is the tab being looked at. The shift in colors highlights this hierarchy.

Conclusion (13)

mtwaroski — 2015-05-08 04:22:53 UTC

Facebook started out as webpage that was strictly designed to entice college student to participate in the webpage. As the changes have been made every year, the webpage has improved to make a clearer hierarchy that makes the viewer the focal point of every webpage but also tells a viewer where they need to look first so that the most important information is noticed right away instead getting lost on blue headline and white background like in the original webpage. Though some of the change may not seem very important, little tweaks improve the hierarchy of the webpage. The shades of blue are a good fit for the Facebook webpage, it keeps the consistancy of the overall product that is Facebook.

Works Cited (14)

mtwaroski — 2015-05-08 04:36:22 UTC

Buck, Stephanie. "The Evolution of the Facebook Profile." Mashable. 22 Sept. 2011. Web. http://mashable.com/2011/09/22/facebook-profile-evolution/#_

Coates, Kathryn, and Andy Ellison. An Introduction to Information Design. London: Laurence King, 2014. Print.

Lupton, Ellen. Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. New York: Princeton Architectural, 2004. Print.