Author: ehrhardta

Posted on by — Leave a comment

Cover Averages: The Process

Accessing the Data

We used the Wayback Machine as our source for records of carleton.edu. Each year, we opened the final snapshot from that year and took a screenshot. To try to keep all of the screenshots identical in size, we took them in full-screen mode and zoomed out as much as we could so that the entire page would fit in the screen. All of the screenshots were added into a desktop folder.

Processing the Data

We used Adobe Photoshop to construct the average covers. The screenshots were layered on top of one another, with the earlier screen-captures being at higher opacity and the recent ones being at lower opacity so that the layers at the bottom are still visible. Since our main goal with this average website design was to see how the site has changed, we manually aligned and layered the screenshots so that any repetition of elements in the design would align as perfectly as possible. This ensured that the repetitive elements would create the strongest pattern and stand out in the overall averaged design.

We decided to break the 1996-2020 cover average into three separate ones, a new one each time there was a drastic change to the design. This is because we noticed that every year, the design was either identical to the last year, or completely new. Therefore, it seemed pointless to break it up into any smaller timeframes because some of the averages would look the same. To make the cover average across 1996-2020, we layered every screenshot we took. To make the others, we layered only the screenshots within the given timeframe. For example, when making the cover average across 1996-2007, only the screenshots from those years were used.

We want to point out that the website screen-captures that were on the Wayback Machine might have been modified in size so that it fits the current-day laptop screen better. Our entire data acquisition and analyzing process was done on an Apple MacBook Air, which is obviously very different from the devices that were used during the 1990s and 2000s. Therefore, the screenshots we took and these cover averages may have looked very different if we had taken them on an older computer where the website would not have been modified or distorted. This opens up an idea for a future study, where the process is identical to what we did here but the data acquisition is done on an older computer–one that is similar to the ones that would have been used at the time of a given carleton.edu design.

Posted on by — Leave a comment

Image Histogram: The Process

Accessing the Data

The Wayback Machine was our source for the images. Initially, we downloaded the link to every screen-capture we wanted to use, but then our data also included the text. The image processing software that we used to make the histogram, ImageJ, does not like analyzing text so we needed another way to extract just the pictures.

We ended up going through and taking screenshots of all of the images instead. In the recent years, there have been up to 100 screen-captures saved on the Wayback Machine every year, so instead of going through each one, we chose one screen-capture per month, per year. We decided to collect our data on a per-month basis because we assumed that the images are probably not replaced any more frequently than that. Furthermore, because we were doing everything manually, we limited our data to only the images that were on the front page, not the ones that appeared on subpages of carleton.edu. Even with these restrictions, we built a dataset with a total of 136 images. We then added all of them into a desktop folder.

Processing the Data

We used the software called ImageJ to perform color analysis and to create our graph. ImageJ is a Java-based processing software that uses macros to organize, analyze, and edit image datasets. We downloaded an ImageJ bundle file, which included both the actual software, as well as the txt files “ImageMeasure” and “ImagePlot.”

First, we used ImageMeasure to open our dataset. ImageMeasure is an image-analyzing macro that produces a txt file containing numerical values for the brightness, saturation, and hue of each image that you open in ImageJ. With the txt file that we got from opening our dataset in ImageMeasure, we then ran it through the macro ImagePlot. ImagePlot allows you to make a histogram with images as the data point icons. So, we created a histogram with the images in our dataset as the icons, the saturation values from the txt file on the y-axis, and the year in which the image appeared on the front page on the x-axis.

We also created a histogram with brightness values on the y-axis, but we did not see any notable patterns. Based on this, we think that Carleton has not placed as much emphasis on the brightness of the pictures they use, and instead focused on the content and tone of the images.

Posted on by — Leave a comment

Looking Ahead

Given the current circumstances of the world, it is quite possible that Carleton may consider making another change to its site. These slight alterations could reflect how they are committed to supporting their student, how the institutions had responded to a global pandemic, the steps the school took to improve and support marginalized students, aid available for students in need, etc. All of those suggestions could be implemented to better appeal to prospective students and families that Carleton is responsible, fun, caring, and innovative when it comes to its community.  Additionally, Carleton could continue to employ some of their current visual techniques to further emphasize their commitment to the Carleton community.

Posted on by — Leave a comment

Image Histogram

We created a histogram of all of the images that have appeared on the front page of carleton.edu, plotting the saturation of the image against the year.

With 250 being the highest level of saturation, we noticed that the majority of the images are below 125. In other words, pretty low in saturation. Considering just how many are in the bottom portion of the graph, it seems like it has been a conscious decision by Carleton to use images of lower saturation. This seemed odd at first, but after some online digging, we found a possible reason behind it.

Some say that pictures of lower saturation can feel more personal and convey the emotion of the content better, as opposed to fully-saturated pictures. Since most of the pictures (at least the most recent ones) show scenes of students having fun or friendly faculty-student interactions, we think that Carleton could be trying to convey these happy moments to prospective students by slightly de-saturating the images. Something so subtle like changing the tone of an image could help convey the sense of the tight-knit Carleton community to the viewers of carleton.edu.

Posted on by — Leave a comment

Cover Averages

To the left is the average cover of carleton.edu between 1996 and 2020. We noticed that there was not a clear pattern– “Carleton” appears in three different places on the screen, for example. This indicates that the site has undergone many drastic changes just in the past 25 years. So, we broke this average down into multiples averages so that we could take a closer look at each change.

Here is the average cover across 1996-2007. It consists mostly of blue hyperlinks, with a few pictures here and there. Some of the blurriness you see is due to a design change that occurred in 1997, where the site went from just a few words and one picture on the entire homepage, to the design that you see on the right. This change could have been in response to the increasing traffic that began in 1996 as a result from an overall massive jump in the number of internet users.

Next, we made an average cover across 2008-2013. It looks very different from the previous one–it includes more colors, a menu bar, and a large picture in the center. Interestingly, the release of iPhones in 2007 brought about new challenges for website designers. For example, websites now needed to be accessible both on a small smartphone screen and a large computer screen. Carleton resolved this problem by moving all of the content of the homepage into a single column, so that it would then fill up the entire screen on a smartphone.

Finally, we have the average cover across 2014-2020. Pictures fill up the majority of the screen now, the content is very organized into tabs and menus, and both of Carleton’s school colors are in use–blue and maize yellow. Overall, the site is a lot more interactive and easier to navigate, compared to the early versions, making it more attractive for prospective students viewing the site.