The Web Is A Rectangle

Posted: 24 Apr 2014 05:30 AM PDT

Have you ever noticed how many websites look the same? How many are just a bunch of rectangles? How many seem to copy from one another? Where’s the uniqueness and creativity?

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

These questions have come to my attention several times in recent weeks via a couple of podcasts and a tweet and its follow up posts. I want to take some time today to talk about the sameness and rectangularity on the web.

The two podcasts, On the Grid and The Web Ahead, both talked about the web’s sameness as a structural problem. Every element on a web page is a rectangle behind the scenes. The tweet by Mark Boulton and the follow up posts below talk more about responsive design possibly leading to sameness.

People always seem to ask questions about something leading to a perceived lack of creativity. You don’t have to look far to find articles about how technique x or tool y limits creativity. Many of these articles assert some common tool or popular technique is really doing us harm. I’ve written posts in reply to these assertions before and likely will again.

What can we do? Is our current practice leading to sameness? Is it the rectangular nature of the web? Is it our tools? Maybe the design industry simply lacks creativity. Why do so many sites look the same and what can we do about it?

Why Do So Many Websites Look the Same?

Please understand that much of what follows is me thinking out loud. I apologize in advance if this post doesn’t lead nicely to a cohesive point. It’s more random thoughts I’ve had and want to share. Let’s start with the underlying rectangular structure of the web.

The web itself appears to us as a rectangle as we view it through different rectangular screens. Our designs inevitably fill up a rectangle. Fundamentally everything you see on the web is a rectangle.

No matter how individual elements look there’s a rectangle behind them. This rectangle behaves according to the css box model and one of several different layout modules. You might see a circle, but that circle sits inside a box. You don’t see the box, but all the other elements on the page see it and respond accordingly.

And let’s face it. Rectangles work. They may get boring sometimes, but they work. Is everything being a rectangle behind the scenes a limitation prohibiting creativity? We’ve always been dealing with these rectangles. Why would they now limit creativity as opposed to a few years ago.

As we’re learning to design responsively many of us are currently more focused on the boxes. We’re working out the mechanics of responsive design and forming best practices. We’re less focused on aesthetics because we’re so focused on the structure behind the scenes.

Speaking of responsive design, Mark Boulton’s tweet was as follows:

I wonder if #RWD looks the way it does because so many projects aren't being run by designers, but by front-end dev teams

I’m not sure I agree. I don’t work with enough teams to truly know, but I have a feeling this isn’t about devs leading things as opposed to designers. It’s an interesting thought, though.

More likely it’s about the people who are becoming web designers and what their backgrounds were prior to going into web design. The person who becomes a web designer isn’t necessarily the same person who becomes a graphic designer.

I started my web design career as front end coder. I have no formal graphic design training and have taught myself whatever I know. My guess is many other web designers are in a similar place. Perhaps it’s not so much devs leading things, but web designers without graphic design training that are leading things.

One of the follow up articles to Mark’s tweet was by Stephen Hay who makes 3 interesting points to explain the sameness of designs.

Lack of a solid graphic design foundation
Excessive reliance on tools
Lack of critical design thinking when ~~copying~~ being influenced by the work of other designers

I agree with all 3 points. Like I said, I’d guess a majority of web designers don’t have graphic design training or schooling and started as web designers because they could work in html and css.

Our reliance on tools might be part of the creativity vs productivity debate. Designers use frameworks like Bootstrap and Foundation to speed development and be more productive. We make use of themes for content management systems. When a lot of sites are starting from a common point, it only makes sense the final products will share a lot and look similar.

Our clients want things to cost less. We want them to cost less. There’s always this tension between creativity and productivity. To a degree sameness could come from what people are willing to pay for. The less they want to pay, the less unique and starting from scratch they likely get. Some clients even ask for the same. They want their site to look like another site they like.

I’d also agree with the lack of critical design thinking. I think some comes from a lack of understanding design fundamentals. Many designers learn techniques and tips, but they learn them out of context.

Perhaps the problem is one of workflow. Even if designers are leading the process, perhaps something is getting lost in communication between designer and developer. Maybe it’s the process that leads to sameness.

The shift to responsive design affects most everything we do, from our tools to our processes. With so much changing and so many moving parts is it surprising that we’re focusing on a few at a time? We’re working with the layouts now and that’s what we see when we look at the finished sites.

Another reason for sameness is trends and people’s nature of copying. People have always copied what works. This isn’t something only happening now or in web design. A handful of people do something truly unique and once it’s shown to work, others copy it hoping for similar success.

The current trend in web design is flat design. It’s characterized by large flat rectangles and solid blocks of rectangular color. It’s a trend. People copy it.

When the trend changes to something with more aesthetic style, more original illustration, and more detail, the copies will be less exact copy. They’ll be more unique for a time before everyone gets good at copying again.

Designers are also looking more to statistics. We’re concerned with conversion metrics and seo and marketing in general. Here too we copy what works. If a certain design works well on landing pages you can be sure you’ll see more landing pages designed the same way.

Is it possible it’s something more? Is it possible the current slate of web designers simply lacks creativity? I don’t think so, but it’s fair to ask. Do we lack some kind of unifying theme, some conceptual core that pushes our designs forward? I think we lack both. The few times I’ve talked about elevating web design to something a little more than building websites, the talk has encountered resistance.

Maybe in the end the reason sites look the same is because fundamentally they’re all the same thing. They’re all information organized into pages connected by links. They all need navigation. Many are expected to have similar pages like about, contact, and home.

If form follows function and the function of most sites is similar, is it any wonder those sites end up looking similar? I think there are enough difference in site content for site designs to be different, but perhaps those differences aren’t as great as we might think.

Convention enters the picture here as well. We follow what works and cater to expectations to make our sites more usable. Navigation is placed across the top of the page or down the left or right sides, because people expect it to be there. We could create a new way to navigate, but then we run the risk of no one understanding how to get around our sites.

What Can We Do?

If we can do something to break out of this sameness what is it? What should we do to have more unique and less of the same?

Where there are issues caused by the shift to responsive design I think it will just take time for designers to get used to a new way of doing things. We’ll work out the layouts and get used to the workflows and deliverables and once we do more focus will be back on the aesthetics. Isn’t this how it’s always been?

In the very early days of the web there was no design. Elements just followed one another on the page. It worked, but it was visually boring. Then we used tables for layout and at first they were probably boring too. Soon someone realized you could slice and dice a Photoshop comp and reassemble it inside your html table and the aesthetics of a web page no longer followed the structure of the page.

Eventually we moved from tables to css and the focus was back on the layouts and everything looked rectangular and boxy. The same arguments about a lack of creativity were made then as they are now. Then we got used to css layouts and the aesthetics came back. The move to responsive design is just more of the same.

We can wait out trends or start the next one. The trend today is boxy. Is it any wonder that websites look boxy? A couple of years from now and illustration and depth will be back in and sites will look different.

Today’s trend strips away the ornamentation. It strips away the realistic details. It strips away little tricks we could use to cover a less than great decision. With less to work with there’s less variation.

For those who get flat design’s focus on fundamentals there’s plenty to explore aesthetically. For those that don’t all there is to do is copy. Hopefully in time the understanding of fundamentals will sink in with the copiers and we’ll see less exact copies and more inspired by other designs.

A certain amount of copying will always happen, though. It’s more productive and sadly feeds laziness. Again hopefully as designers gain more understanding of design fundamentals they’ll be able to look more critically at their own work and the work of others.

Time and waiting will also help with the structural problem of web pages being built from rectangles. CSS shapes especially, and to a lesser extent modules like exclusions, will help us break free from the box. We won’t be bound to rectangles only. Objets on the page will be able to look and behave like different shapes. Other elements on the page will react to the same triangle we see.

New shapes will open up more creative possibilities. They aren’t here yet, but they’re coming relatively soon.

Why do we have to show a presentation layer that shows the page’s structure? Do we have to show the grid behind the design? Can’t we have elements cross grid lines or look like circles when they’re really rectangles? Some might say it’s more honest to have your aesthetics match your structure. Maybe those people are right, but again I’ll ask if there’s anything wrong in our aesthetics looking like they sit on a different structure than what’s actually present?

One last thought about convention. We could and should be willing to try new things. We can’t do crazy things with client sites, but most of us work on our own projects and we can experiment with those. We’ll fail a lot and it will take people time to understand some of the new things we create, but we’ll learn before creating what becomes a new convention.

Of course, once we do everyone will copy the new convention and we’ll be having this discussion yet again.

Summary

A certain amount of sameness is inevitable. We learn from one another. We follow the same trends. We use the same tools, and work out the same problems often in front of each other. There will also be those who only copy and never do more.

The rest of us can experiment when and where it’s appropriate. We can try to work with new forms and new structures. We’ll see what works and what doesn’t and with that knowledge we’ll create less of the same old thing.

Give it time. In time the web will allow us to do more. We’ll have more shapes than rectangles to work with. In time trends will change and the next one may lead to more unique designs. In time we’ll have worked through the issues with responsive layouts and workflows.

In time we’ll move the focus back to the aesthetic layer. Much will be new again and then the new will get copied and we’ll be once again asking why so many websites look the same.

Download a free sample from my book Design Fundamentals.

The post The Web Is A Rectangle appeared first on Vanseo Design.