Klare

Everything Looks the Same: Convergence of Web Design

To preface, this was my original proposed topic for Contrary Con. If you've never prepped for a talk for a conference before, it's a lot of hard work. Being that it was my first official conference speaking experience, it took most nights (and some mornings) the week of plus extra concepting the week prior. I have a lot more respect now for speakers who can craft engaging and cohesive talks that aren't focused around their work.

While I enjoyed speaking on the principles I practice for trying to create quality work and how it transcends one project to affect my future work and the work of my peers, a lot of attendees really wanted to hear about the original topic.

So here we go.

How did we get here?

If you were designing two or three years ago, you'll remember most homepages had four elements. A header, a carousel, a three column section with more content that no one read, and a very large footer with a complete sitemap and contact information.

In short, something very similar to this:

2010 era websites

During that time, most people thought this was the perfect layout. We kept seeing more clients request this and never stray from it. Conveniently, it worked well for clients who always wanted their content "above the fold". We thought things wouldn't change too much.

But things did change.

Not too long after, responsive design emerged. Some people (including myself) adopted it early on, while others were skeptical for a long while, arguing that separate mobile sites were better. Regardless, responsive design became the norm, and as creators of the web, we adapted to this.

What we ended up with were longer websites where content could be delivered in more interesting layouts. These layouts were based on strict grid systems that could be easily reconfigured into a single column for small screens.

They ended up looking a bit like this:

2013 era websites Created with One Page Wireframes

But frankly, things still look the same.

Why is it that today we have more flexibility in delivering content, yet we're creating websites that look nearly identical to one another?

Visual trends as response

If you remember (or maybe you'd like to forget), highly texturized, drop shadowed websites were popular at the same time we were creating websites that were only 800 pixels tall. I think a lot of the justification for creating these was based off of our layouts being so rigid. Creating a website with personality was tough when services such as Typekit and Fontdeck were just emerging.

Additionally, after so many of our websites were just links for a long while, it was nice to be able to include a lot of images that didn't take forever to load. It was pretty much commonplace to create websites where all the text had a 1px shadow to make it feel inset on the page, echoing actual letter-pressed, real type.

Pendulum

In contrast, the minimalistic flat design was a response to this highly texturized trend. If you remember, responsive design emerged during this time. While we were reluctant to let go of sites that could be designed 'pixel perfect', we realized it was simply easier to create responsive designs for existing websites if they had less decoration and less superfluous content.

Pendulum

But it was more than that.


Let's take a look at some of the things that have influenced how we currently design for the web.

Responsive Design

Things had to change, literally.

As mentioned before, responsive design was a huge influence on simplifying websites.

Starting out, designers and developers needed to get familiar with responsive design. To accommodate changing sizes and placement of elements within responsive layouts, websites were mostly distilled down into a collection of large boxes.

Creating a website became more difficult to complete within the same timeframe. It's understandable that websites got simpler in response to this.

Flexibility has become a more valuable currency than specificity.

Matt Griffin — Client Relationships and the Multi-Device Web

Type

I like to joke that everything is either set in Proxima Nova or Brandon Grotesque. Or maybe Gotham if the client is really "progressive" (aka, was convinced to pay a lot for a Hoefler & Co typeface).

It's mostly true. Take a look at Land Book and you'll see the most recent startup homepages featured are set in these typefaces.

They're all modern sans-serifs that are easy to read and work with a variety of different logos. In short, very flexible. Yet, overuse dilutes any uniqueness.

Bootstrap

I get it. It's easy to use. Bootstrap can be a great tool for quickly creating prototypes. However, when a product gets built using Bootstrap, it can be easy to think the work has been done.

It works. It feels like a real product. It has whitespace.

However, over time we've noticed that websites built with bootstrap still look like bootstrap. Heck, even toolkits based off bootstrap look like bootstrap.

Deciding all the components in a toolkit before starting design is limiting designers to what's already been done, not what's possible.

How similar is too similar?

When I came across these two websites in May of 2014, my initial thought was that someone took a hell of a lot of influence from the other. I posted to twitter with a simple reaction of 'huh'.

May 2014

Immediately after, I was reminded that this trend is prevalent in a lot of places. Take for example InVision's latest redesign, which also uses similar placement of user interface elements and the same font and treatment.

May 2014

So how similar is too similar? Is this a reflection of trends and influence or designers drawing the same conclusions?

What should we do (if anything)?

Most people are quick to judge today's websites, but there are some positives to their similarity.

  1. Users know where to go. Most of the common elements on a page are in similar places and take advantage of users scanning the page in an 'F' shaped pattern.
  2. It's easy for startups to build first, validate their product and then add on uniqueness.
  3. The design similarities make websites of today look a hell of a lot better than their predecessors.

We can do better than that.

The web community has done a great job recently asking why certain trends exist and whether they add to the sites being created. But we shouldn't be critical for the sake of being critical.

As technology changes, our common web design philosophy will also change. It could be a positive response to having more flexibility in the way we create websites, or a negative responsive to using new technology in the same way.

We'll see. Change is inevitable.

Not all of the solutions we've used in today's very minimalist era work for every project. Web designers have already moved away from exceedingly flat design trends (such as long shadows). I predict that we'll see some bit of texture emerge as the pendulum swings back away from highly minimal.

I'd challenge all of you creating websites to think about creating something that enhances the work with ever step.