The History of Architecture and the Future of Web Design
Mia Ellis-Lee is a Toronto-based web developer and designer currently working at Flywheel Strategic
Much of history is ruled by reaction. The Bretton Woods conference was held in response to the world’s economic uncertainty following World War II, the League of Nations was founded as a response to the events of World War I, the 2008 financial crisis occurred (partly) in reaction to insecure lending practices by banks, the rise of communism as a common ideology was spurred by imbalanced power structures that were reinforced following the industrial revolution. To list all the reactionary events in human history would be to list much of history itself.
Art, design, and technology are often similarly reactionary — especially when considering various movements or phases in a given media’s history. Many art historians characterize the advent of the expressionist period of painting as partly reactionary to the prevailing styles of the time: naturalism and impressionism. Similarly, the period of Classical Hollywood Cinema was followed by the style of American New Wave, whose narratives and stylistic devices marked a shift away from the classic styles of narratives that served as the status quo. Reaction is not limited to previous artistic phases either, but also exists in consideration of social, historic, and economic contexts. Italian neo-realist cinema had trademark characteristics: narratives following the Italian poor and working class, use of non-professional actors, and on-location shooting — much of this was in part due to the social context and economic realities of working in post-World War II Italy.
History has shown us that what came before often shapes what is to come. Therefore, how can we extrapolate reactionary phases of the past to think about our future? In understanding the history of one field, can this help us hypothesize the future of another? More to the point, what can the history of architecture teach us about the future of web design?
There are a few similarities between architecture and web design that make them a natural fit for comparison. First — technology and technological advancements are incredibly important in both fields. Innovations such as reinforced concrete, elevators, and structural steel allowed for the first skyscrapers to be built. Similarly, responsive coding, mobile devices, content management systems, and advancements in APIs and libraries allow us to build digital experiences that would have been impossible during the early days of the web. Second, both web design and architecture are both strongly influenced by the economic circumstances surrounding them as they serve as not only tools of expression, but also as commerce. The balance between art and commerce also plays a role within both fields: when constructing a warehouse, aesthetic beauty is often not a priority; when building a one-page web toy, monetization is often not a priority. Finally, both fields share a common language. Transparency, depth, light and shadows, colours, materials, scale, shape, and structure are of paramount importance in both. Considerations of interaction, feedback, and accessibility are indelible to the two fields. They share a commonality of being designed objects for people to use.
The discourse, pedagogy, and practice of design (as a whole) have helped to shape how we think about both architecture and web design and given rise to a shared vernacular between the two. Of course, architecture is a much older discipline than web design, and the history of architecture has influenced much of how we talk about design too. Architect Louis Sullivan’s line “form ever follows function” has been applied to countless fields, and web design is no different. Of course, web design in turn feeds back into and continues this ongoing dialogue surrounding design.
Modernism, The International Style and the History of Web Design
In our comparison of web design and architecture, parallels can be drawn between the history of architecture and the (albeit brief) history of web design. Understanding shared patterns in their history will hopefully point towards what lies ahead. These shared historical patterns between web design and architecture are perhaps most evident through the shifts over the last decade towards “flat design” (in web design) that mirror the Modernist architectural movement (and the International Style that developed subsequently) of the first half of the 20th century.
The rise of Modernist architecture began roughly at the turn of the 19th century into the 20th. The industrial revolution of the 19th century led to both the emergence of the modern capitalist economy as well as previously unheard-of technological innovations. Demand for new structures fitting the burgeoning capitalist economy gave rise to offices, factories, apartments, and new forms of public spaces. Advancements in engineering and technology allowed for buildings to take new shapes. However, it was not only societal and technological changes that gave Modernist architecture the tenets that would shape its characteristics.
Although it would be composed of many styles, the Modernist movement generally rejected the dominant architectural styles of the late 19th century: Victorian, Edwardian, neoclassical, and the Beaux-Art school of architecture and sought to devise a new style of architecture for the modern age. In contrast with these styles, Modernist architecture emphasized simple geometry, unornamented surfaces, use of modern technology and materials, the building materials themselves (glass, steel, concrete), function, utility, and honesty (of the materials used and of a building’s function). For most Modernist styles, the ornamentation of a building was to be defined by its structure and purpose.
The International Style built upon the tenets of Modernism but placed even greater emphasis on simplification of form, rejection of ornament, transparency, volumetric spaces, and industrialization and mass production. Even more so than other styles of Modernist architecture, structures within the International style sought to exist outside of the context of history and location (hence the name “International”) and in a place where function was the most important aspect of a structure. Works like Mies van der Rohe’s Farnsworth House and Seagram Building, Le Courbusier’s Villa Savoye, Richard Neutra’s Lovell House, Philip Johnson’s Glass House, and Walter Gropius’ The Bauhaus School all exemplify this style.
The early discourse of Modernist architecture and the discourse of the International style clearly set out the tenets of movement. In his 1929 book titled “Towards a New Architecture” (Vers Une Nouveau Architecture) Le Corbusier summarized many of these ideals. “Architecture is stifled by custom. The “styles” are a lie… The house is a machine for living in,” (Towards a New Architecture, pg 4), he plainly states. Much like Louis Sullivan’s line about form and function before, famed Modernist architects Mies van der Rohe and Peter Behrens both plainly stated, “less is more”. The discourse surrounding the Modernist movement was also notable for the way it held itself in a utopian light. For many Modernist architects the advent of new technology, new social and economic structures, new theories of urban planning, and their new style of architecture signalled the possibility of a promising new epoch for humanity. Despite being couched in racist rhetoric, Alfred Loos’ collection of essays “Ornament and Crime”, helped to popularize the conception of Modernist architecture as able to solve many of the world’s ills (if not in the minds of the public at large, at least for Modernist architects). Newness, technological advancements and a distinctly “modern” architecture held this promise.
“Every period had its style: why was it that our period was the only one to be denied a style? By “style” was meant ornament. I said, “weep not. Behold! What makes our period so important is that it is incapable of producing new ornament. We have out-grown ornament, we have struggled through to a state without ornament. Behold, the time is at hand, fulfillment awaits us. Soon the streets of the cities will glow like white walls! Like Zion, the Holy City, the capital of heaven. It is then that fulfillment will have come.”
― Adolf Loos, Ornament and Crime
Major (usually theoretical) urban planning projects and social housing projects like Le Corbusier’s Plan Voisin, Unite d’Habitation, Frank Lloyd Wright’s Broadacre City, and Minoru Yamasaki’s Pruitt-Igoe continued this tradition of utopian thinking. For instance, Plan Voisin called for bulldozing the central Paris neighborhood of the Marais and erecting 18 60-storey towers organized within a grid set on multiple tiers. One tier was for a huge amount of urban green space, while another tier was dedicated to transportation. Corbusier believed that this plan could reorganize society more efficiently and raise the standard of living for all people. In his writing of Plan Voisin, Le Corbusier asks us to imagine ourselves within the plan.
“You are under the shade of trees, vast lawns spread all round you. The air is clear and pure; there is hardly any noise. What, you cannot see where the buildings are ? Look through the charmingly diapered arabesques of branches out into the sky towards those widely-spaced crystal towers which soar higher than any pinnacle on earth.”
The context surrounding web design as trends began to shift towards flat design was also one of rapid technological change and promise. In the two decades since Tim Berners-Lee pioneered the World Wide Web in 1989, internet use grew exponentially. Some estimates reveal that the number of internet users grew from 73.9 million to 2.94 billion between 1996 and 2014. Moreover, between 2004 and 2014, the number of users grew by approximately 2 billion. An deluge of new hardware helped to spur the popularity of the internet. The first generation iPhone was released in 2007 and competitors would follow nearly immediately after. Tablets were soon to follow, with the first generation iPad and the first generation Galaxy Tab released in 2010. This new hardware also brought about new ways of interacting with technology. Touch interfaces were finally responsive, easy-to-use, and offered users the possibility of pinching, rotating, and double tapping too. Gyroscopes in mobile devices allowed users to literally flip or rotate their devices to interact with them.
Not only was internet use growing exponentially, but the uses of the internet were growing too. Sites like Facebook, YouTube, MySpace, Tumblr, Twitter, and Flickr all launched between 2004 and 2007. Apps like Instagram, Snapchat, WhatsApp, Waze, and Spotify were all launched between 2008 and 2011. Our relationship with the internet was rapidly changing and rapidly becoming more important as services all across society began to digitize. Both the advent of Modernism and the advent of flat design saw rapid technological progress made within a short time period, bringing about the promise of redefining and reimagining our world. This desire for newness, for eschewing tradition and ushering in the modern world played out similarly in the aesthetics of architecture and web design.
In the realm of web design (and interface design at large), skeuomorphism was the prevailing trend of the early 21st century. Skeuomorphism can roughly be defined as the practice of designing things with cues that point to the real world. Designs that referenced real life through wood grain textures, buttons with extreme drop shadows, and reflective textures were the status quo. Put simply, the calculator app looked like a calculator.
Writer’s note: You can read more about skeuomorphism and flat design in my previous piece, Let’s Get Physical: When Skeuomorphism and Flat Design Meet
While no doctrines or manifestos were written in the same manner as in Modernist architecture, the advent of flat design was pushed forward by industry titans. The shift away from skeuomorphism and towards flat design in interface design (and web design) is often roughly marked by the release of iOS 7 in 2013. The update from iOS 6 featured a major user interface overhaul for Apple mobile devices. The UI no longer featured bezels, reflections, or shadows. Icons were simplified and applications themselves removed skeuomorphic elements such as wood and velvet texturing or reflective buttons. Similarly, Microsoft shifted away from skeuomorphism between the releases of Windows 7 and 8. This change towards flat design actually predated Apple’s own (Windows 8 being released in 2012). Similar to modernism, flat design was about stripping out details in favor of simplicity. Rounded edges often became right angles, gradients became single tones of color, any excess ornamentation removed, and layouts more rigidly defined by grids as designers felt they needed less reference to real life in their digital products.
Similarly, around 2012 Google refined the design of their homepage — reducing the number of buttons/links surrounding the search bar from 13 to 2, removing shadowing surrounding the search bar itself, and shifting the logo itself towards a more flat design by removing some highlighting and shadowing (Google would eventually move towards a fully flat logo in 2015). We can also see these trends occur on YouTube between 2009 and 2013, as the number of colours used are gradually pared away as are borders and drop shadows. They also drop the “Broadcast Yourself” slogan by their logo and remove the level of shadowing and highlighting.
Design updates and redesigns on sites like PayPal.com, Pitchfork, and IMDB embodied characteristics of this trend too. On PayPal, buttons become lose their gradients and reflections. Gradients as a whole disappear from the site — we can see on the 2011 version of the site that almost all elements that aren’t simply positioned above a white background have gradients whereas the 2014 site is almost devoid of gradients . Calls to action and other sections are expanded, becoming larger full width sections that are more clearly gridded. The overall page is simplified by adding more negative space between different bodies of content and the flow of information becomes clearer.
Pitchfork also increases the amount of negative space between content — resulting in a more simplified look overall. For both sites, content becomes more visually distinguishable between other content due to this. Colour palettes are also reduced on both sites. Paypal almost entirely removes their use of yellow and grey-blue hues, and Pitchfork ditches their blues in favour of a monochrome and red-accented palette. Pitchfork also removes their textured abstract background in favor of a simple grey in addition to losing the serif font for headings. Dashed borders are also gone between 2008 and 2012.
IMDB redesigned their site slightly (less drastically than PayPal or Pitchfork) between 2014 and 2015 but still reflects a shift to flat design. Gone are the grey-black gradient buttons with a white border, replaced with simple white triangles with a circle surrounding them. The use of gold gradually decreases, with only the “Watchlist” using the colour by 2015. Excess borders separating sections are removed, consider the right-hand column for instance. In 2014 each section is separated from the background by way of slight grey gradients and drop shadows. Each section is also separated by one another, giving the appearance of four separate bodies. By 2015 the colour difference from the background, the borders, and the drop shadows are removed — the right hand side becomes one singular body that is sectioned rather than something composed of four distinct units.
Much like Modernism, web design’s move to flat design was concerned with stripping out excessive ornamentation. Clarity and simplicity were valued by both flat design and modernism and both were concerned with replacing the status quo with the new. For flat design, the increased user base of the Internet meant that digital literacy was improving. Interface designers no longer had to mimic the real world as strongly in their products in hopes that this would help users understand how to use their products — the assumption became that people already knew how to interact with the digital world. This meant that the skeuomorphic elements of the past (like reflections, texturing, shadows, gradients, and highlights) that helped set elements apart gave way to flat panes of colour, simple geometries, and gridded layouts — elements that seemed to lay the structure of digital experiences out clearly and transparently.
“When we sat down last November (to work on iOS 7), we understood that people had already become comfortable with touching glass, they didn’t need physical buttons, they understood the benefits,” says Ive. “So there was an incredible liberty in not having to reference the physical world so literally. We were trying to create an environment that was less specific. It got design out of the way.”
― Jony Ive
Architectural modernism emphasized similar qualities. As a rejection of older and more ornate styles of architecture, modernism emphasized an unornamented aesthetic, with an emphasis on the materials that made up the building itself (these materials were usually glass, concrete, and steel). These materials were to be as “honestly” presented as possible — an idea pioneered in the Bauhaus as “truth to materials”. Structures were to make their function evident through their form. For Modernists, the Edwardian and Victorian architecture sought to obscure the function of buildings through ornamentation and de-emphasis on the building materials. Moreover, the emphasis on using modern building materials of glass, concrete and steel meant that structures were frequently built of frames, grids, and flat planes.
Flat design and modernism dually arose during periods of significant technological advancement. These advancements brought with them new possibilities of what both web design and architecture could be — designers and architects saw this possibility and both sought to eschew old patterns of design and introduce new patterns. Part of this was borne out of a desire to rethink the relationship between humans and the concerns of their fields. Modernists wanted their buildings to embody modernity and to reorganize living and structures into more efficient patterns. Conversely, web and interface designers wanted digital products to move into a language of their own.
For both, they wanted to grow an evolving relationship between their products and their users and create a new visual language for this relationship. Similarly, both featured abstraction away from real world references and towards a new form outside of context. For Modernist architects this meant eschewing ornamentation and references to architectural styles of the past and creating an architectural style that would exist outside of context. For proponents of flat design, this meant eschewing skeuomorphic elements and references to the non-digital in favour of a style that could exist without needing to reference the physical world. In both fields, reference to pre-existing bodies was the norm — therefore these new epochs pushed for design that existed outside of reference. Since the prevailing designs in both architecture and web design emphasized ornamentation and external reference the reactionary trends of Modernism and flat design resulted in the similar values of simplicity, functionality, and abstraction away from reference.
Both flat design and Modernism were concerned with redefining the visual identity of their fields as a response to the status quo, and did so in formally similar ways. Moreover, both fields sought to integrate society’s new understanding of their fields by way of their aesthetic. Buildings and the internet both held new possibilities for what they could be and architects and designers reflected this in their stylistic shifts. Newness and modernity embodied the contexts during which flat design and modernism emerged and are reflected in how both trends moved forward stylistically. Both trends praised usability, transparency, clarity, simplicity, and universality (in web design, specific reference to the real world was removed, in modernism, references to specific time periods and styles were removed). For web designers and architects, design in the modern age was to be rational, clear, and universal and needed a suitable visual style.
Postmodern Architecture and the Present of Web Design
Movement and time never truly stop, and what was once a challenge to the status quo often becomes the status quo itself.
The demise of the Modernist movement is often linked with the failure of the Pruitt Igoe housing project in St. Louis, Missouri (designed by architect Minoru Yamasaki). The complex promised to revitalize St. Louis and transform its slums into vibrant neighborhoods. The project was highly publicized and seemed to embody the utopian promises of Modernism put forth in projects like Le Corbusier’s Plan Voisin. However, only two years after the completion of the complex in 1955, the project already began to see occupancy rates decline. By 1971, the Pruitt-Igoe housed just six hundred people in seventeen buildings, with sixteen other buildings boarded up. The complex had turned into a dangerous, crime-ridden area and the infrastructure itself began to fall into disrepair. The promise of transforming St. Louis’ slums had reversed itself in dramatic fashion, and the complex was planned for demolition in 1971. The demolition of the Pruitt-Igoe in 1972 was one of the first instances of Modernist architecture being torn down. Famously, architectural historian Charles Jencks called the destruction of the Pruitt-Igoe “the day Modern architecture died” (Charles Jencks, The Language of Post-Modern Architecture, 1977).
But the failure of the Pruitt-Igoe was not the only cause for the criticism of the Modernist movement. By the 1960s, the doctrines of Modernism faced criticism from both critics and architects who desired buildings that featured more imagination and expressivity than the functional, simple, and unadorned buildings of Modernism. From this, the Postmodern movement of architecture began as architects sought to reestablish ornamentation, complexity, and historicism in the field. Riffing on Mies van der Rohe and Peter Behrens, architect and historian Robert Venturi quipped, “less is a bore” in his book Learning from Las Vegas. In this book and its predecessor Complexity and Contradiction in Architecture, Venturi laid out his argument against modernity in greater detail.
“I like complexity and contradiction in architecture. .. I speak of a complex and contradictory architecture based on the richness and ambiguity of modern experience…By embracing contradiction as well as complexity, I aim for vitality as well as validity. Architects can no longer afford to be intimidated by the puritanically moral language of orthodox Modern architecture. I like elements which are hybrid rather than ‘’pure,” compromising rather than “clean,” distorted rather than “straightforward,” ambiguous rather than “articulated,” perverse as well as impersonal, boring as well as “interesting,” conventional rather than “designed,” accommodating rather than excluding, redundant rather than simple, vestigial as well as innovating, inconsistent and equivocal rather than direct and clear. I am for messy vitality over obvious unity. I include the non sequitur and proclaim the duality. I am for richness of meaning rather than clarity of meaning; for the implicit function as well as the explicit function. I prefer “both-and” to “either-or,” black and white, and sometimes gray, to black or white. An architecture of complexity and contradiction has a special obligation toward the whole: its truth must be in its totality or its implications of totality. It must embody the difficult unity of inclusion rather than the easy unity of exclusion. More is not less.”
―Robert Venturi, Complexity and Contradiction in Architecture
Venturi’s early works the Guild House, the Lieb House, the Vanna Venturi House, and Fire Station Number 4 embodied the ideas that he espoused in his books and other architects began to take notice. Works by Michael Graves, Charles Moore, Frank Gehry, Philip Johnson, and James Sterling continued to refine and define the postmodern style.
The complexity and contradiction that Venturi spoke of in his writings became evident in these postmodern works. His own work, the Vanna Venturi House, perhaps best exemplifies these ideas. The house was designed as a direct contradiction of the Modernist principles that defined the dominant movement of the era. The house featured a classic sloped roof, contrasting with the entirely flat roofs of Modernist structures. Moreover, the facade of the building lived up to its name, obscuring the real roof and real chimney behind the appearance of a chimney and a roof. The purely decorative arch on the front, oversized fireplace, and staircase that went nowhere directly challenged the tenets of modernism — particularly that function should rule over all other considerations when designing buildings. The house embraced awkwardness and confusion, contradiction and complexity, the uncertain middle ground between dichotomies that Venturi spoke so much of.
The traits of fragmentation, asymmetry, use of oblique forms, bold colours, humor and double-meaning, and consideration of history that defined the Postmodern movement flew directly in the face of Modernism. Michael Graves’ Denver Public Library appears to be composed of a myriad of disparate forms in contrast to the monolithic structures of Modernist architects. Frank Gehry’s Gehry Residence and James Stirling’s Neue Staatsgalerie used curved lines and lines positioned at oblique angles to great effect. Another of Graves’ iconic Postmodern works, the Portland Building, used pinks, browns, and teals — a far cry from the monotone palettes associated with architects like Le Corbusier and Mies. Charles Moore’s Piazza d’Italia in New Orleans (built to celebrate the history of Italian immigrants in New Orleans) has a fountain shaped like the Italian peninsula itself flanked by classically-inspired colonnades humorously built in the modern materials of stainless steel and neon.
Like the response of architects to Modernism, we can see similar shifts in thinking and visual style in web design. Trends are shifting to respond to (and evolve beyond) the dominant style of flat design. Many sites are beginning to reintroduce gradients and shadows in a way that merges both skeuomorphism and flat design. Others seek to differentiate themselves with bold colours, strong typography, and illustrations to add visual interest. Others still eschew the highly gridded layout and straight lines of flat design with asymmetrical designs, oblique lines, and ungridded layouts.
Google’s Material Design was a project instrumental in pushing forward this evolution of flat design (often called Flat 2.0, coined by designer Ryan Allen in 2014). Material Design was born out of the goal of developing a uniform design language that could be used across Google products and digital experiences overall. Material Design sought to integrate cues from the real world with digital design. The use of the word “material” reflects this agenda. The design language was inspired by the study of paper, ink, and other tactile materials — “surfaces and edges of the material provide visual cues that are grounded in reality… the fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other” explains Material Design’s documentation. Shadows and lighting are used to bring depth to digital designs and “form a spatial model that is familiar to users”. This emphasis on reference to the physical world is key in differentiating Flat 2.0 (and Material Design) with flat design. Flat 2.0 and material design seek to use physical reference to help users form an easily digestible mental model of a digital experience. Occasionally this can be through the use of shadowing (as seen below), other times this can take shape through adding skeuomorphic details to icons or illustrations.
Material Design also encourages designers to use typography, grids, space, scale, colour and imagery to create meaning and focus. Since colour is meant to create meaning, Material Design emphasizes the use of “bold hues juxtaposed with muted environments, deep shadows, and bright highlights”, in contrast with the often monochrome colour palettes of flat design. However, Material Design still emphasized the characteristics of gridding, simple geometric shapes, and use of sans-serif fonts that are prevalent in flat design.
Qualities of modularity and fragmentation were also evident in the spirit of Material Design as they were in postmodernist architecture, but played out in different ways. For one, it provides various separate components to be used across designs that use Material Design. These components (cards, sliders, buttons, tabs) are meant to be reusable across applications and different contexts. Moreover, they are meant to be modular and able to be arranged differently according to their contexts. All these separate pieces form a cohesive experience when brought together. The screenshot of the app “Fabulous — Motivate Me!” (winner of a 2016 Material Design Award) exemplifies this. The second and third screens show individual cards that fragment and break up the digital experience, but they all share a common structure.
We can see the tenets of Material Design at work in their Santa Tracker. We can clearly see the integration of skeuomorphic elements with flat design at play here: slight gradients, drop shadows, reflections, and illustrative details add depth and complexity to an otherwise flat design. Similarly, experiences are broken up to form a cohesive whole (each building represents an individual game that, when all brought together, form the experience of the “Santa Tracker” as a whole).
As principles of Material Design began to be adopted by designers, other formal qualities in web design began to grow in popularity too and the style of Flat 2.0 began to emerge. Sites began to move outside of using solely right angles, with some using oblique lines to set themselves apart (see PayPal and Stripe below). Others introduced rounded edges, like the Dropbox User Guide below. Gradients and brighter colours began to make more frequent appearances on the web, and extra details (like the sketched effect on the Dropbox illustrations below) bucked some the trends of flat design. The use of shadows, highlighting, and illustrative details (for instance the “sketched” effect of the illustrations in the Dropbox User Guide”) helped to bring context back to sites and pulled design back slightly from abstraction. Flat 2.0 argues that these references help users form a stronger mental model of a digital product — bringing a great awareness of what the digital product is trying to communicate or enable the user to do.
However, whereas Postmodernist architecture sought to fly in the face of Modernism, Flat 2.0 only sought to evolve flat design. It is here where we turn to the trend of brutalist websites for a similar ethos to Postmodernism. Brutalism in web design is more of a direct contradictory reaction to the prevailing styles of design than Flat 2.0 and in this way acts as something of a spiritual successor to Postmodernism.
Flat 2.0 and Brutalism seem to share similar reactions to flat design at their root. For instance, both are concerned with reintroducing decorative elements to web design. But while Flat 2.0 designs do so by way of subtlety and evolving flat design, brutalism does so through extremes and throwing established design principles out the door. Some brutalist sites feature entirely ungridded layouts, some feature overlapping elements, some feature repeated elements ,some little/no white space, and others GIFs and other imagery reminiscent of the early days of the internet (hello dancing baby GIF!). What brutalist sites share in common is a flagrant disregard for popular design conventions/usability and an emphasis on a raw, unpolished character. The rough edges of brutalist sites clearly set them apart from the slick polish of flat design and Flat 2.0 and often give these sites a memorable first impression.
Like Flat 2.0, Brutalism is a reaction to the prevalence of flat design. It is because of this root that Flat 2.0 and Brutalism share some of the same formal qualities: reintroduction of oblique angles, strong typography, and bold colour palettes. However, something that both Postmodernist architecture and some brutalist sites share (that Flat 2.0 does not) is historical reference. Where Flat 2.0 brings physical reference back to flat design through skeuomorphic elements like shadows and lighting, brutalism often references internet design and digital interface trends that predate flat design as a direct reaction to the “best practice” design patterns that you see so often on contemporary websites. Imagery that hearkens back to the early days of the internet like bitmap fonts, frequent use of GIFs, and patterned backgrounds make frequent appearances.
Brutalism, Flat 2.0, and postmodernism sought to reinject complexity and reference (whether to history or to the physical world) as a response to the status quo by way of a self-reflexivity that was emblematic of postmodernism at large (referring to the broad movement of thinking that encapsulated philosophy, art, and criticism). These three styles turned inwards and looked within web design and architecture respectively to critique themselves. Postmodernist architecture and brutalism in particular captured this postmodernist attitude through their emphasis on individuality, irreverence, irony, self-referentiality, and rejection of the idea of “universal” styles. Interestingly, it is notable that the early development of Flat 2.0, Google’s Material Design, echoes Modernism by way of an emphasis on specific principles and tenets. Moreover, the principles of Material Design emphasize homogeneity and universality by way of a design language that would work across devices and across contexts, much like Modernism. While Material Design and Flat 2.0 are not one and the same, in this origin of Flat 2.0 we can see how brutalism is more diametrically opposed to flat design than Flat 2.0.
As it emerged in the 1960s, Postmodernism came about during a period of immense societal change, particularly in North America. The zeitgeist of this time period was informed by events like the “Summer of Love”, the sexual revolution, the Vietnam war, and Watergate. Arguably, these events helped to inform the qualities of architectural postmodernism by way of emphasizing individuality, disregard for previous societal norms, and self-reflexivity (brought about by Americans being forced to reevaluate their own government and position in the world as a result of protests to the Vietnam war and the events of Watergate). Similarly, brutalism in web design appeared at a time when groups (for instance LGBTQ individuals and racial minorities) were demanding greater acceptance and greater representation within society. Moreover, our life was becoming increasingly digitized, and the web itself was becoming increasingly corporatized with companies like Google and Facebook becoming Fortune 500 companies and businesses at large seeking to capitalize on the possibilities of technology. Partly due to this, we see brutalist websites turn to the early, unpolished, and “uncorporatized” days of the internet and also emphasize diversity in web design rather than homogeneity.
In conjunction with these external events, Postmodernism, Flat 2.0, and brutalism arose as a response to a response. Where Postmodernist architecture reacted to Modernist architecture, Flat 2.0 and brutalism reacted to the prevalence of flat design. While brutalism echoed the more strongly reactive ethos of Postmodernism by way of direct contradiction and flying in the face of the status quo, Flat 2.0 reacted to flat design by evolution. However, all wanted to explore new possibilities outside the prevailing styles of the time and reintroduce reference to fields that emphasized abstraction. And, much like Modernism and flat design shared formal qualities because of the conditions of their reactivity, Postmodernism, Flat 2.0, and brutalism share commonalities because of the same reason. The common formal qualities of Modernism and flat design resulted in common formal qualities between Postmodernism, Flat 2.0, and brutalism as they reacted to similar conditions in differing ways.
Contemporary Architecture and the Future of Web Design
We’ve traced the history of architecture as the Modernist movement came into prominence and then as the Postmodern movement responded in turn. We’ve then seen how web design mirrored this progression in architecture by way of its own styles: flat design, flat 2.0, and brutalism. This course has taken us from past to present, but what of the future? We’ve learnt what architectural history can tell us about yesterday and today’s web design, but what about tomorrow’s? Perhaps we can interpret the changes that have occured in contemporary architecture following the advent of the Postmodern movement to shed some light on where web design might be headed in the future. In order to do so, we turn to contemporary architecture.
Contemporary architecture is not ruled by any one particular movement or style. Classical architecture rears its head in New classical projects like the Schermerhorn Symphony Center in Nashville, Tennessee (2006). Neomodern structures like the Bay Adelaide Center in Toronto (2009) echo the principles of Modernist design. The Pinnacle (Guangzhou, 2012) takes clear influences from Art Deco. The increasingly global nature of society and the borderless transfer of information through digital channels means that styles from the past and present can be combined, recontextualized, and reimagined around the world.
However, there are common trends across present day architecture that we can recognize. Newly designed and constructed buildings often feature an emphasis on environmental sustainability. For instance, this can be embodied in material (for instance using double-paned glass to reduce the need for artificial cooling and heating) or in structure (such as shaping buildings to benefit from natural light or air flow or implementing features such as green roofs). Some structures seek to integrate even more strongly with their natural environment. The Vancouver Convention Center features a series of concrete steps where the complex meets the shoreline, providing an artificial reef for marine wildlife while runnels underneath the building help to flush and feed the artificial reef. The structure also features a large green roof with local flora connected to the natural environment through a series of nearby parks. Contemporary architecture often features new forms and structures made possible through advances in materials, building technology and computer-aided design. Sometimes this takes the form of organic, undulating shapes like Zaha Hadid’s Heydar Aliyev Center in Baku, Azerbaijan (completed 2012). Other times, the structure uses negative space to stretch our notion of what a building can look like — as in the CCTV Headquarters Building in Beijing (Rem Koolhaas, completed 2012). Technological advances are also used to push structures to greater and greater heights. Of the ten current tallest buildings in the world, nine were built between 2010 and 2018.
These improvements in technology have also given rise to prefabricated and modular structures. Modular structures are composed of separate sections (modules), that can be joined together in differing configurations, allowing great flexibility and variation in the style of the final structure. Modular structures are often prefabricated, built in a separate facility and then shipped to their site (although prefabricated structures are not necessarily modular, and modular structures are not necessarily prefabricated). Prefabricated (or “prefab”) structures often offer an increased rate of construction — the 57-storey skyscraper Mini Sky City was built in 19 days using prefabrication. Additionally, these structures offer flexibility as well as the ability to provide structures in locations where building on-site would be too resource intensive or physically impossible. The building practices of prefab structures are also frequently more environmentally friendly than on-site builds since site disturbance is kept to a minimum.
Although kinetic architecture (architecture which moves) has existed at least since the Middle Ages through structures like drawbridges, contemporary improvements in computing, robotics, and mechanics have allowed for new forms of kinetic architecture. The Gateshead Millennium bridge tilts upwards to allow boats to pass underneath, and myriads of stadiums since the late 20th century feature retractable roofs (for instance, Wembley Stadium and Rogers Centre). Moreover, the advancements in the last decade have allowed for kinetic architecture on smaller scales and more dexterous forms of kinetic architecture. The private, single-occupant Gemma observatory in New Hampshire allows the central observatory to be rotated and the central hatch opened. Next Office’s Sharif-Ha House features rooms that rotate outwards and inwards to help residents adapt to changing temperatures in Tehran. dRMM’s Sliding House features a barn-like home that exposes its glass-clad skeleton at the press of a button — the facade of the building moves along a pair of tracks. Kinetic architecture continues to innovate even without the use of electronics — Richard Murphy’s Murphy House features immensely clever folding panels that allow residents to vary the amount of light and privacy afforded to the house and sliding walls alter the sense of space within easily.
Kinetic architecture can intersect with responsive architecture too. Responsive architecture has historically been used to refer to architecture that alters its form, shape, color, or other characteristic as the environmental conditions around itself shift. In recent years there is an increased focus on tying together technology and responsive architecture — buildings can use sensors to record empirical data and in turn use this data to alter themselves. At the most run-of-the-mill level, this can be seen in buildings that use temperature sensors to automatically adjust building temperature, but more interesting examples exist too. The Campus Kolding Building at the Syddansk Universitet in Denmark (designed by Henning Larsen) uses heat and light sensors to programmatically control facade panels to open and close. The Prairie House by ORAMBRA implements building materials that allow the envelope of the house to contract and expand based on fluctuating temperatures to reduce cooling and heating loads. The Prairie House also uses thermo and photo-sensitive inks to make the building lighter on warmer days and darker on colder days to further improve efficiency. Not all responsive, kinetic architecture is necessarily high tech though. The Cloud Seeding Pavillion in Holon, Israel ingeniously uses mesh fabric and small white plastic balls to create a constantly shifting canopy overhead that responds to wind velocity and direction.
Architecture has also become an increasingly globalized field. Like in the past, most landmark architectural achievements are still constructed by a small group of architects. However, where this group was almost entirely composed of white European or North American men (as was the case in both the Modernist and Postmodern movements), we are seeing greater diversity within these types of small cohorts. Architects such as Zaha Hadid, Shigeru Ban, Carme Pigem, Wang Shu, Kazuyo Sejima, and Eduardo Souto de Moura have all won the prestigious Prtizker Architecture Prize in the last 14 years. Moreover, increasing numbers of architectural landmarks have been built outside Europe and North America.
These trends of diversity, environmental sustainability, new forms, modularity, kinesis, responsivity, and a growing global nature are not only present in architecture, but in web design too. This should come as no surprise, especially as in our comparison between architecture and web design the two fields now begin to converge on the same time period (and therefore, the same zeitgeist).
Perhaps more so than architecture, web design (and development) are becoming increasingly globalized. Plunging hardware costs and increased global access to networks has allowed for growing numbers of people around the world to use the internet. Statistics estimate that between 2000 and 2017, internet users in Africa grew from 4.5 million to ~388 million, users in Asia grew from 114 million to nearly 2 billion, and users in the Middle East grew from 3.2 million to ~146 million. Unfortunately, it is difficult to estimate the current number of web designers worldwide. This is for a multitude of reasons. First, web design is not a strictly regulated profession with no governing bodies. Official numbers would be difficult to acquire with no lists of certified web designers belonging to these bodies existing. Second, there are no official certifications to be a web designer. Consider architects, who usually must be certified and hold specific credentials to even be called an “architect”. Web designers have no such constraints. Hobbyists, dabblers, and professionals can all call themselves “web designers”. However, one can assume that with the dramatic growth of internet users worldwide, the number of designers (and developers) has grown accordingly.
This democratizing effect of growing internet access and increasingly accessible technology has had other effects too. As the number of web designers grows, visual diversity across the web grows too.This, in conjunction with the improvements in technology themselves, particularly as they pertain to multimedia, has allowed for web designers to harness their creativity. Now, more than ever, we see divergent and various styles across the web — some echo traits of styles of other fields: art deco, the Memphis Group style, or psychedelic art for instance. Others are inspired by media: magazine layouts, filmic effects, or the structure of video games. Technology has relaxed the limits of design and in turn we see diversity in the appearance of websites.
Much like in contemporary architecture (where we see buildings that push our conception of what buildings are), new forms of digital experiences are also enabled by technology and redefine what website can be. We’ve seen long form content integrated with multimedia, animations, interactions and clever design to create truly dynamic storytelling (check out National Geographic’s story on bears in Yellowstone National Park for a great example of this). Progressive web apps that are often indistinguishable from native applications are growing in prevalence as well, leveraging capabilities on the web that didn’t exist half a decade ago. Progressive web apps make it possible for websites to harness a device’s native functions and hardware (like cameras, gyroscopes, brightness sensors) and provide native app-like experiences on the web. In conjunction with these native features and functions, progressive web apps often harness UX and UI patterns from native apps. This is forcing us to reconsider the boundaries between native and web applications. Increasingly, device and browser improvements make it possible for more sites to use technology like WebGL and three.JS to create 3D experiences on the web, and technologies like WebVR and WebAR push the envelope even further by allowing developers to create virtual reality and augmented reality experiences through websites.
Concerns about environmental sustainability are growing across all industries, and the web is no different. As we’ve seen architecture implement design patterns and technology oriented towards environmental sustainability (and often, as a result, efficiency), concerns in web design surrounding environmental sustainability have grown too. Researchers from the Centre for Energy-Efficient Telecommunications and Bell Lab found that, in 2013, the information communications and technology industry produced over 830 million tons of carbon dioxide annually or about 2% of global carbon dioxide emissions (this figure has almost certainly grown in the past 5 years since then). Although hardware and server technology plays a huge role in developing a sustainable internet, some web designers contribute by implementing green design practices. Efforts to make content more findable (resulting in fewer page loads), optimize performance through efficient asset loading, and efforts to design mobile first (since these designs will often orient towards less data to load) all help to contribute towards more energy efficient designs are often driven by monetary concerns but nonetheless help to contribute to developing environmentally sustainable web designs nonetheless.
Finally, like architecture today, web design is “responsive”. By this I’m not only referring to the ability of websites to change their designs based on the device and browser size viewing them (as the word “responsive” is traditionally used in web design) but their ability to adjust to external stimulus at large (including device and browser size). Much like almost all modern structures react to the changing conditions around them in some way, almost all dynamic websites today do the same. Often, the external stimulus exists as data being passed through the system. For instance, everybody has an Instagram feed, but the content you get on your Instagram feed is algorithmically generated based on your previous likes, who you follow, and so on. Content is becoming increasingly tailored to the individual — all across digital platforms, not just the web.
These similarities between the progression of architecture and web design indicate how both fields are reacting and dealing with the current conditions of our world. The convergence and divergence of both architecture and web design in how they are changing underlines the striking similarities and the obvious differences between the two fields. However, the contemporary is bringing a convergence not only in how architecture and web design react, but is also spurring a convergence in architecture and web design themselves.
The massive growth in internet usage (and the subsequent importance of the internet at large) meant that architecture has had to begin to integrate the web into itself. Offices and public spaces in particular have had to implement strategies for integrating internet infrastructure. Routers and wireless signals are often affected by their placement, so strategic planning can help to improve WiFi signals in a structure. Moreover, certain buildings may require server rooms. Temperature, fire protection, air quality, and moisture are just a few factors architects and engineers must consider when constructing server rooms. Server farms must also consider these factors in their architecture, albeit at a much larger scale.
The internet of things is continuing to integrate the functions of a structure with digital products as well. Although we often think of residential dwellings first when we think of architecture and the internet of things (usually through commercial products like NEST), proposed applications of the internet of things can be found in structures of all scale and program. For instance, Virginia-based Kastle Systems currently offers a security system for buildings centered around allowing visitors to register directly from their email client. Appropriate permissions will then be granted to the individual based on their user credentials.
We might consider the aforementioned internet of things to be where architecture “absorbs” the web. Conversely, the growth of 3D VR spaces on the web is where we see the web “absorb” architecture. VR technology on the web has grown immensely over the last five years — technology like WebVR, Three.JS, A-Frame, and React VR has made it increasingly easy to develop 3D VR experiences for the web. 3D spaces (both in reality and in virtual reality) intrinsically have an architecture to them (even if just a flat outdoor plain). Even the boilerplate template for the React VR framework has an intrinsic architecture to it. Architecture as a whole will therefore have an increasingly important role to play in the digital world as virtual reality grows. These virtual spaces will need to be built and designed with considerations of how the shape, structure, materials, and space used will affect the end user. It is here where we might see web designers and architects intersect into a new field — one where the built environment and the digital environment are the same. In this realm of digital experiences, your Facebook “wall” might literally end up being a wall.
What else does the future hold for web design and architecture? What common lines and goals will these fields follow as they seek to deal with contemporary and burgeoning problems? I propose four concerns that both architecture and web design will seek to address as the fields evolve: responsiveness, new forms, sustainability, and seamlessness.
Both architecture and the web at large will become more responsive. Deeper integration with the Internet of Things will enable buildings to respond to their surroundings in unprecedented ways. Buildings that keep track of occupancy (either through sensors, cameras, or a check-in system) might be able to adjust their heating and cooling patterns based on their current occupancy load. Similarly, buildings that use responsively tensile materials might be able to adjust their structural rigidity based on the external wind forces. Moreover, responsive materials like we see in ORAMBRA’s Prairie House will be usable at larger scales thanks to improvements in manufacturing and installation costs. Integrating emerging technology like Otto Ng’s “wallbot” with the Internet of Things will also enable more and more structures (and their interiors) to respond to changing contexts in ways that seem ripped straight from science fiction. The web too, will become increasingly responsive — particularly in regards to data and modular programming. More and more sites will become data-driven, using user data to customize the experience for each individual user. Dynamic sites will become more tailored to each specific user. Similarly, individual modules of code will be able to integrate incoming data to adapt their appearance, rules, and behavior in increasingly complex ways. As websites begin to harness the power of hardware’s native features (like cameras, gyroscopes, etc) through progressive web apps and other emerging technology, websites will be able to respond to changing physical environments too. Imagine sites that change their colour palettes based on the relative brightness of your surroundings or sites that change their layout depending on where your eye is tracking.
Amphibious architecture, flexible structures, and vertical farms are some of the emerging new forms of architecture that we see contemporarily and may continue to see in the future. Changing environmental and social contexts are demanding new kinds of buildings, and technology is opening the door. New forms will open for the web too. The aforementioned progressive web apps are currently gaining ground in popularity, and with their clear benefits, will likely only increase in popularity going forward. Browsing the web through virtual reality hardware and augmented reality hardware too will force us to reimagine what the web is and what it can be used for. What kind of shape the VR and AR versions of the web might take is yet unknown. Existing hardware like the Samsung Gear VR uses a relatively traditional interface as their current solution to a 3D web. In contrast, products like Beloola envision a VR-enabled 3D space (think web browsing meets Second Life) where users will congregate. New hardware like wearables and flexible displays might enable new possibilities in site design — ones which leverage changing display sizes, curves, and depth in exciting ways.
Look for sustainability to continue to be a pressing concern of architecture, and to increase in importance in the realm of web design. Building technology will continue to improve building efficiency, and innovative design measures can help structures step towards self-sustainability. Conversely, the web will likely have to address it’s growing environmental impact with greater awareness — for developers, users, infrastructure experts, and anybody who uses the web. Moreover, expect more companies to switch to hosting that utilizes sustainable power sources as fossil fuels inevitably decrease in supply (and increase in price). You can likely expect hosting companies to begin to switch to sustainable sources of power too, where possible. Particularly, look for a growing number of designers to implement more energy-efficient designs as sustainability becomes a more important goal overall. Darker colours, less emphasis on heavy content (large images and videos) and more easily findable information to reduce page load counts. Easily findable information and lighter content also benefit mobile users, so look for the growth of mobile web use to drive environmentally sustainable practices as a byproduct.
Finally, architecture and the web will seek to become increasingly seamless going forward. More structures at various scales are placing greater importance on integrating structure and site into a cohesive experience. Of course, some projects will seek to strongly differentiate itself from its surroundings, but a growing number are concerned with minimizing site disturbance. Projects are more frequently using existing facades with new projects to preserve the history and architectural character of the surrounding area, both in urban and rural areas. In Manhattan, the newly redone exterior of the Garment District’s Fashion Tower used the building’s historic art deco styling as a point of inspiration when restoring the facade from the grey stucco that covered the detailed sandstone during past renovations. In China, Vector Architects used the structure of an existing sugar mill as the basis for a luxury hotel. Newer methods of preserving a site’s character are appearing too. Structures like Asif Khan’s Vantablack Pavillion and Tatiana Bilbao’s Los Terrenos use their facade materials to blend in (although in Khan’s case, only half the time). Khan’s Vantablack Pavillion uses a material named Vantablack VBx2 to create an incredibly dark building (the substance absorbs over 99% of light) peppered with miniscule white lights on the exterior. The structure was designed in such a way in order to appear like a “window cut into space”. During day, the structure is at once strikingly present and a formless void (thanks to the super dark material). At night, the structure starts to blend seamlessly into the sky. Conversely, Los Terrenos uses mirrored glass to both reflect and become the surrounding forest.
The internet, at large, will continue to become increasingly seamless. The Internet of Things, wearables, and augmented reality in particular are striving to create increasingly seamless digital experience today. The border between the digital and the physical is increasingly disappearing. As these three technologies grow in popularity and improve, our conception of digital experiences as happening solely on a laptop, desktop, or phone will evaporate — the physical world is becoming an increasingly important part of the digital one. Wearable tech like glasses and watches seek to further reduce the “seams” in internet use by integrating the web with everyday products that are always on the user. Design will naturally follow this pattern of seamlessness by integrating with the physical environment surrounding it (for instance, interfaces suited specifically for wearable smart-glasses or mobile AR technology). Moreover, as hardware capabilities improve, the difference between mobile and desktop experiences will grow smaller and smaller, making digital experiences seamless between devices themselves. Web and interface design will adapt themselves for their new contexts, and be able to change on the fly as users move from device to device. The ultimate promise of a seamless digital experience resides in a seemingly-fictional combination of ocular displays, microchips, and biometric technology — displays and interfaces that are always with us because they are a part of us. Huge steps towards an entirely seamlessness digital world often seem like sci-fi conjecture but are closer than we think. In 2014, a 76 year old patient’s vision was restored after 20 years of blindness through a combination of a microchip and a pair of glasses equipped with a video camera and a transmitter. The camera transmits the images as an electric signal which is in turn relayed to the patient’s optic nerve.
The history of architecture and web design have been shaped by reacting to and absorbing the world around them. The context surrounding periods of growth and change is hugely important to understanding the way that both fields have evolved. For architecture, the economic, technologic, and social changes the early 20th century in addition to the existence of dominant and well-established styles of architecture proved to be the ground on which the Modernist style developed. In web design the expanding presence of the internet, the growth of digital literacy among users, advances in technology (particularly the advent of smartphones) and (once again) the existence of a dominant style among digital products led to the advent of the style of flat design. The tradition of self-reflexivity that we’ve seen in a myriad of fields (painting, sculpture, film, to name a few) was continued in how architecture and web design continued to evolve, exemplified by the architectural movement of Postmodernism and the styles of Flat 2.0 and brutalism. Postmodernism architecture and brutalist web design in particular embodied reacting to the world that surrounded them as they concerned themselves with growing corporatization, individuality, and challenging established societal norms.
Going forward, the fields of architecture and web design will continue to use the contexts that surround them to inform their formal characteristics. In order to creatively solve the issues that the world puts forth these fields will of course have to look outwards — towards at the world itself. However, looking inwards at the history of their fields can help architects and web designers understand how far they have come, what they still have yet to learn, the patterns of their fields, and how architects and web designers of the past solved the problems that faced them. In understanding how we responded to the past, maybe we can understand how to respond to the present, and how we can respond to our impending future.