Style & Design, Of Course

Like many segments of human life which use any type of styling, design or form, trends in website design have developed and evolved over time. With something so incredibly powerful, so vast, and which evolved relatively quickly (25 years, give or take), the history of the "World Wide Web" is fascinating. And in that history, we can see that certain time frames had their “own look,” or aesthetic.

Of course, there are plenty of other segments of human culture which demonstrate evolving aesthetics. For instance, a quick look at how clothing has changed over the last 200 years is one glaring example. Another more recent example would be the automobile and how swiftly designs have changed.

There is one huge difference, though, for websites and most things that are directly related to the Internet — trends and innovations evolve more quickly, many times over. If the automobile industry had evolved like our modern day Internet, what took 50 or 60 years might have taken only 5 or 10 years (or less).

The Early Days

Website design began very pragmatically, with most early sites presenting information in the form of relatively plain text. Slowly, styling techniques were introduced to enhance the text, to add pictures, to change page backgrounds, and so on.

As new design conventions emerged, website developers were quick to embrace them. Some elements were fundamental and proved over time to be universally helpful (and became part of universally accepted standards). Others were squarely in the “fad” category and fell out of use.

Despite the “hit-and-miss” success of some design components, all were an attempt to make websites more attractive, more engaging and just more pleasing (or fun) to look at.  As it became evident that business would forever be entrenched on the Internet, aesthetics became very important in driving traffic to websites, and for shaping the development of emerging standards.

As the “World Wide Web” went from many hundreds of sites to almost countless thousands, competition likewise became progressively more fierce. Why would someone, say in the year 2000, want to go to a boring site with loads of plain text when a competing site had the latest trending look, sure to be more entertaining and visually appealing?

Time Capsule

A designer based in Berlin, Germany has assembled a fascinating website which showcases how website design has evolved and changed. Fabian Burghardt is a digital designer who focuses on important elements of websites known as “user interface” (UI), “user experience” (UX) and various new website technologies.

For his tour of website evolution, he used a NASA site as an example.  His presentation is an intriguing glimpse into the early days of the “web aesthetic” up to the present.

The Influence of Equipment & Networks

Web standards and designer choice were not the only driving factors in web aesthetics. More tangible things also played a huge role.

For many years, the format of standard “CRT” computer monitors (large TV tube-type glass monitors) drove how web pages were formatted and designed. Most early color monitors could only display a simple palette of colors, and graphics were likewise low resolution. As monitor resolution got better and better, so did the options for website design.

Eventually, as the large glass CRT monitors fell out of favor for their much more sleek and energy efficient flat-panel replacements, the format of websites shifted dramatically.  The largest impact was due to a change in the overall aspect ratio.  CRT monitors typically had a somewhat square aspect ratio (hearkening to their television roots). Modern-day monitors have a wider aspect ratio (similar to movies shot on film, interestingly again tied to watching videos or movies, except now in their native aspects). With more screen real estate available, certain trends have been adopted to present the content in the best way possible.

Another huge influence has been bandwidth (overall capacity to handle data), whether it’s the networks that make up the Internet itself, or the capabilities of particular devices. Early on, website design was very much concerned with how a site's content and structure would affect bandwidth.  For example, early networks could easily get bogged down by a website that had lots of pictures, graphics, videos or anything other than the most simple of graphics and text. In fact, many web browsers had an option to load only text, disregarding images and other formatting elements that might load slowly.

In contrast, today’s networks are enormous compared to those of 10 or 15 years ago, and can carry and deliver astronomical amounts of website data. Likewise, the capabilities of devices to connect to and receive information from networks has changed exponentially. (Some of us may remember the days of using a “dial-up modem,” through a telephone line, to access the Internet via a desktop computer... access that was painstakingly slow and drudgerous.)

Past web design had to account for bandwidth and device capabilities compared against site content (especially graphical elements like backgrounds, pictures, buttons, and animation or videos). Too much heavy graphical content could make a site terribly slow; too little and the site could seem dull and unengaging. While some of these considerations remain, they're on a relatively modern scale where we can, most fortunately, include a huge amount of content compared to the past. This, then, all feeds right back into design and web aesthetics.

A Brief Revisit of Trends

As mentioned above, the early days of website design were far from the often dazzling or simply effective experiences we take for granted today. Just a few of the earlier trends:

The Gray Time. Many early websites were a drab gray page with dark text. There was very little formatting of the text, and pictures or illustrations were rare. While being able to access information on the new “World Wide Web” was indeed amazing, its presentation was indeed boring.

The Early Format Years. HTML (hypertext markup language) established standards for how information on the new "Web" should be formatted, though not every web browser nor every site adhered to the evolving standards. Despite varying conformance, most pages could at least display pictures or illustrations, change up how text was rendered, and entire pages could have different background colors or some sort of background image. There were, though, many mistakes made.

Sometimes background images were too prominent or “busy,” which destroyed any chance of clearly reading the text displayed on top of said offending background. Other sites used a palette of colors for text that clashed, either with the background, the background color, or with each other, making the simple act of reading a dizzying affair.

Another common element that came into use at the time was clip art... cartoonish illustrations, some of which were animated in some way. They added a lot of “zing” to otherwise dull web pages, but were quickly outpaced as high quality illustrations and particularly photographs became more common.

The Flash Era. In the mid-1990s, “Flash” (or “Flash Player”), a type of software, became very common, and was installed on most desktop computers in conjunction with major web browsers. The software could play animations, videos, video games and other interactive content.

Many websites made some use of Flash, but perhaps most common was a “Flash Intro,” an animation that played directly before entering a website. Granted, these animations were new and visually exciting. Over time, though, their real value fell into question since many seemed to provide only “visual excitement” and not useful content. There were also a number of sites that were entirely developed in Flash, often with a lot of "whiz-bang" animation and movement. This might have seemed engaging, but it usually made such sites very slow, and onerous to maintain.

Some sites were examples of overblown animation (designers adding elements such as explosions, lighting bolts, moving components, flying text, extraneous sound effects and the like), all of which came to be viewed as kitschy in addition to not being helpful or valuable. Plus, Flash elements were often very “heavy,” meaning they had large files which could delay the loading of a website substantially. There were also huge issues with the evolving field of SEO (search engine optimization).

Into the late 2000s, Flash was the center of a professional debate regarding its general merits, including some serious security concerns. A significant blow to the product emerged during a market battle in 2009-2010 between Adobe (Flash's parent organization) and Apple Computer, which refused to support Flash in its new operating systems. Another blow arrived as many video sites, including titan YouTube, began replacing Flash as a video platform. For good or bad, Flash started rapidly falling out of mainstream use, simply disappearing from many websites. That said, it did find an appropriate life in some sites, such as video animation and gaming, that took proper advantage of its talents. 2020 Update: Adobe, Flash's creator, has stated that it will end support for Flash Player, which will bring the software's usage as part of web browser display to a full close in the short-term future.

The "Sliced Images" Era. Although very technical and cumbersome to achieve, the web aesthetic was broadened significantly when a technique fell into popularity that allowed a table structure (like a spreadsheet, with rows and columns) to hold pieces of a large graphical image. Graphics designers could create an endless array of site layouts, some very fanciful (and essentially the size of an entire page in some cases). The image was then divided into many smaller pieces known as "slices," and each slice fit into one of the table's cells, like a gigantic puzzle. The web browser would assemble the table until the entire page was constructed.

HTML, the language of the Web, was not designed for this strategy per se, but it proved to be a successful way to implement highly stylized websites. It was, however, laden with its own set of problems. If not cleverly done, it could make a website agonizingly slow, and due to its dependence on static graphical images (the "slices"), updating such sites could be very time consuming. The strategy was eventually retired as new sets of HTML standards and a powerful convention known as "CSS" (cascading style sheets) were fully adopted.

The “Rounded Frames” Era. As more and more design sophistication emerged in websites, various themes became popular. A very popular design trend was the use of rounded corners, for everything from input fields, to frames around photos, to entire page borders. This was likely due to a deliberate departure from earlier design trends that, by the nature of the technology at the time, made anything other than squared right angles difficult. Simultaneously, the aesthetic shifted to using lighter colors (white backgrounds became very popular) and avoided deeply textured or colored backgrounds.

Where We Are Now — The "Responsive" Era. At this time, website design aesthetics are overwhelmingly driven by the array of devices people use to access the Web. A website is responsive when it automatically adapts its presentation based on the device (and/or screen type and size) that the site visitor is using.

Gone are the days when a web designer could design for a desktop user experience, and feel confident that this would serve most if not all site visitors. Today, sites must be able to adapt to desktop systems; notebook computers; tablet devices; and smartphones. That is a wide array of viewing methods, and presents new challenges for design and function. It's also a time of great practicality regarding information access and availability, and of being more succinct with the information provided.

What It All Means

The Web has obviously gone through progressive design trends, with each advancing its sophistication and producing a better user experience. Today’s websites must be responsive, and this clearly affects design and layout. This doesn't mean that a given site will look and behave identically on different devices. A person using a desktop system may indeed have a different experience from someone who uses a small smartphone, but they each should be able to get the information they need and conduct whatever business is at hand.

Keeping websites and associated online assets up-to-date — that they have current information and that their overall design is not out of touch — is very important. A website cannot, by its nature, be constructed once and left alone. At the least, it must be updated and refreshed from time to time, taking into account the general web aesthetic contemporary at the time.

It is also true that the web aesthetic can encourage similarity in overall design, with the effect being that sometimes, sites can look similar. A website should be able to standout amongst it competitors, but, on the other hand, reflect an up-to-date, modern structure so as to not look dated (which is not the same as having a vintage look, which is something entirely different). Professional designers seasoned in selective use of design elements and placement can usually devise a site that embraces modern strategies without looking like a lot of other sites.

More to Come

Just as the web aesthetic has evolved over the years, it will continue to evolve as we head into the future. As access methods change, as new devices emerge, and network and device capability continue to expand, what lies ahead remains an exciting unknown.

What we can safely predict is that we will have fuller, more robust websites, with richer content than ever before (and maybe some fun conventions yet to be imagined), all supported by the continuously growing and organically changing web aesthetic.