History of Web Design

Bardia Doosti, David Crandall, and Norman Makoto Su

Since its ambitious beginnings to create a hyperlinked information system, the web has evolved over 25 years to become our primary means of expression and communication. No longer limited to text, the evolving visual features of websites are important signals of larger societal shifts in humanity’s technologies, aesthetics, cultures, and industries. Just as paintings can be analyzed to study an era’s social norms and culture, techniques for systematically analyzing large-scale archives of the web could help unpack global changes in the visual appearance of websites and of modern society itself. In this paper, we propose automated techniques for characterizing the visual “style” of websites and use this analysis to discover and visualize shifts over time and across website domains. In particular, we use deep Convolutional Neural Networks to classify websites into 26 subject areas (e.g., technology, news media websites) and 4 design eras. The features produced by this process then allow us to quantitatively characterize the appearance of any given website. We demonstrate how to track changes in these features over time and introduce a technique using Hidden Markov Models (HMMs) to discover sudden, significant changes in these appearances. Finally, we visualize the features learned by our network to help reveal the distinctive visual elements that were discovered by the network.

Web Design Era Detection

For the design era detection task we used the internet archive to obtain snapshots of 35 websites from 1996 to 2014.

Genre Detections

For the Genre detection task we used CrowdFlower’s URL categorization dataset, which consists of more than 31,000 URL domains categorized in 26 genres.

Classification and Visualization

For the first step we trained two separate networks for detecting the category and design era of a website. But our focus is not on just getting the best result on classification; the more important issue was visualizing the features learned by the network.

We used the Class Activation Mapping (CAM) technique to visualize the most important part of a page’s web design for each class (web site category or web design era).

For example as websites in 90s were narrower, the network used this fact (white margins on the right and bottom of the website) to detect 90s websites.

As the speed of the internet increased, the size of the pictures in the webpages became larger and the network used this fact to classify the websites from the 2009-2013 era.

But for the genre detection it seems that the network’s attention is on the objects used from that class in the web design. For example for the Auto and Vehicle class, the network is trained to find Cars in the website.

Web Designs Across Eras

To understand how web design has changed over time and how major design pioneers influenced other websites, we trained a network with five major websites from different categories (apple.com, msn.com, cnn.com, slac.stanford.edu and whithouse.gov) and used other websites for testing the model. We plotted network confidence over time.

To make the sudden changes of the plots more visible we used Hidden Markov Model (HMM) to generate a smoothed plot revealing sudden moves of the graph.

As we can see in the plot below, indiana.edu which is an educational website, is detected to be very similar to slac.stanford.edu, another educational website.

The photos above show the similarity of indiana.edu to each canocial site.

Also in the plots below we see that yahoo.com was detected to be very similar to msn.com for a long time but in recent years it was detected to be very similar to apple.com.

Finally, we merged all the sites and plotted the confidence of the network to see how web design as a whole has changed over time.

As we see in this graph, these sites were detected to be very similar to msn.com until 2006, when they were detected to be more and more similar to apple.com. As we can also see in the HMM generated graph, the other three websites didn’t seem to change a lot in these years.

Image Generation

As we see in this graph, these sites were detected to be very similar to msn.com until 2006, when they were detected to be more and more similar to apple.com. As we can also see in the HMM generated graph, the other three websites didn’t seem to change a lot in these years.