Web Design Comparisons: Then vs. Now

April 16, 2015

The medium of designing for the web is constantly changing. As designers, we must always be aware of the developments of our field in order to ensure that our creations push the technology of our time. Visual parameters are now seemingly endless, while many award-worthy websites have key similarities in their designs, and for good reason. Although web design has changed drastically, there are elements that have become standard user expectations. Great designs are the perfect balance of challenging those standards while adhering to user expectations.

Let’s take a closer look at how a few specific elements of web design have changed throughout the years:

1. Animations

Then: Since the era of flash websites died out, animations were rarely used in web design until about a year or two ago. If you wanted to include animations as part of your website interaction, the process of doing so would limit your load time due to file size restraints and the animations themselves were clunky an unrefined. For many designers, these limitations were enough to steer clear of using them at all in their designs.

Alectia.com’s Denmark website shows the design before implementing a refresh and including transitions through animations.

Now: With the widely used and improved languages, CSS3 and HTML5, developers and designers can work together to create virtually anything they can conceive. The coding language has been refined to a point that page load time can be minimally affected even with the most complex animations. As a result, designers have found animations to be a great source of direction for users. Visual design can be much more subtle and clean when relying on well thought out animated transitions to guide the user through the flow that we are trying to create.

Alectia.com refreshed their U.S. website with complete transitions through every step of the user experience.

2. Webfonts

Then: There was a time in web design when considering typography did not require quite as much thought as say, print design. The limitations were clear and the choices were few. Helvetica, Georgia and Verdana were the go-to’s for many designers. This lead to most websites looking very much the same and somewhat dull.

The Uber.com website circa 2011 uses simple Helvetica typography.

Now: Designers now have an endless toolbox of font choices compatible with most browsers. Resources like Typekit, Google Web Fonts and Font Squirrel have changed the way we think about layout on the web. It is no longer an issue to sacrifice SEO for the sake of an evocative font. Now we can appeal to the marketer and the creative in us by allowing each aspect to be fully utilized in our designs. Not only can we use a vast array of fonts, we also have the ability to manipulate our words into interesting animations or give them a unique visual effect using HTML5 and CSS3.

Uber.com now has a custom webfont that completes the sleek, refined look they are trying to achieve.

3. Navigation

Then: With transitions and animated visual cues almost non-existent, the navigation tended to suffer. The priority was not clean design; it was the ability to provide a lot of information upfront. Rather than condensing and organizing the information, users saw many tabs and breadcrumb links to keep them informed as to where they were on the site. The result was intrusive and the abundance of information was overbearing.

The Bloomberg.com website circa 2013 shows the navigation in a long, tabbed format.

Now: I’m sure we are all aware of the ever-present ‘hamburger nav’ by now. It is a creation that became popular in web designs due to the many aspects we’ve mentioned so far. It is a reflection of the clutter of previous forms of navigation, an evolution due to the many advances in coding languages and a result of web designs that need to function across devices. There are many variations of this type of consolidated navigation, the ‘hamburger nav’ being one of them, but the main objective remains the same: reduce clutter and increase accessibility for the user.

The current Bloomberg.com website showcases all of their different article postings in one consolidated full-screen navigation. It is accessed by a single down arrow and closed by a single ‘x’ in the corner.

4. Devices

Then: When web design first became a profession, there was – for the most part – only one screen to consider: a desktop. The variations were minimal, and they were all generally the same size with the same functionality. So wrapping your head around a project was easy, as there was only one final format.

The Worldwildlife.org website circa 2012 does not scale down to adjust for different devices, it was only optimized for desktop.

Now: When we think about design, there are so many different devices to consider. “Does it look good on mobile?” That is a question we undoubtedly end up asking ourselves with each and every web design, and it is at the forefront of the project. When we think about problem solving for the web, the specifications are endless. This should be a given in our thought process and our solution. Our designs should not only function on mobile, tablet and web, they should look great on all devices.

The current Worldwildlife.org website is responsive. It adjusts the navigation, call to action buttons, grid system and many more elements to be optimized for whatever device it is viewed on.

5. Style

Then: What seems recent is now completely dated. Skeumorphism, the visual effect to make something flat look dimensional and textural, was the pinnacle of good web design. With the many limitations, this visual style was another outlet to give the user a cue as to what the site was trying to convey. It may have been represented in a big shiny button cuing the user to click here, or even realistic books on a wood grain shelf to create dimension and layering.

The Squarespace.com website circa 2010 shows many dimensional elements. The button, for example, contains multiple shadows and highlights to convey that it is clickable.

Now: So many of those visual styles created for the medium of web design have been completely stripped away and brought back to it’s roots in print design. This means we see many more styles that reflect clean, flat design. Since we no longer rely on all of the clutter developed in previous visual styles for user guidance, it only makes sense that design has evolved to a much more purposeful and white-space driven style.