The Web Is A Rectangle

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.

14 comments

  1. True post. I can safely say that I am guilty of this, I get inspiration from sites around me and I guess that is what leads to the similar look – each website is an individual but not enough to be “unique”.

    Like you’ve said, in time this will hopefully change and various shapes will ideally be more accessible and easier to create.

    Nice post.

    • Thanks Reece. I’m excited for when we can use shapes. I think it opens up so many more possibilities. It’ll mean everything isn’t a rectangle behind the scenes.

      I think the similar looks will always happen though. We all take inspiration from other sites and before you know it a new trend comes along.

  2. If structure follows function, then the structures of the successful websites are well adapted to their functions. The sites whose structure is poorly adapted people just won’t visit.
    Bootstrap and Foundation are both useful and beautiful enough to meet most of the everyday uses – plus they’re responsive.
    And copying what works is the driving force powering the development of the society.

    • Good point. The sites with a structure following function will be easier and probably more enjoyable to use.

      Completely agree about the copying. It’s been going on since the dawn of time I think.

  3. As people copy, as is expected to happen, they should understand what it is that they are copying so that they can expand upon it.

    Thus, copying is not inherently lazy, but can be an applied case study.

    • Very true. To me that’s what the the quote good artists copy and great artists steal means. The stealing means taking ownership and understanding what you’re copying to the point where you can build on it.

      Some just copy and can’t add more, but the best don’t really copy. They integrate what the work of others with their own work.

  4. I think there’s a train of thought behind similar looking websites that isn’t being discussed here which is that, similar to fashion or cliques in high school, we want our websites to appear like other sites that are considered ‘in’ or ‘cool’. We want them to belong to a visual group aesthetically so that an association can be formed between our site and other sites the user recognizes as modern and contemporary. If we were to go off on a tangent and do something totally different that frame of reference, that connection will be lost and that’s something a risk a lot of designers wouldn’t want to take.

    • That is a good point. I think copying and wanting to appear more like the things we like is normal human behavior. I don’t see it going away any time soon.

      At some point designers will break from the current trend. I’m sure some already are. Others will see the break, like it, and start copying it, and a new trend will be born.

      Then it will happen all over again.

  5. Very true points, as all creatively working people, designers and front end developers do look around for inspiration and ideas to copy. That is obviously a reason for a very unified look across many websites.

    What I wanted to share is a thought I had when you said that one day there might be other shaped than rectangles on the software side of things. There are: Your circle goes here. You can use SVG to draw any given 2D shape you can imagine and even fill those shapes with text. So there already is the technology and embedded SVG is actually accessible by software and therefore potentially accessible by screen readers, search engines etc. Its just a question of front end developers and designers picking up the SVG-Element’s abilities to get started on a web that no longer has rectangles backing it.

    • I think SVG is going to play a huge role in the very near future. If I’m not mistaken though, other elements around an SVG will still react and flow around it as though it’s a rectangle.

      You can make the SVG to look like anything you want, but other elements will still flow around it as though it’s a rectangle. Don’t hold me to that though. I’m not 100% sure, but I thought that’s what happens.

      I think where you see text flowing in and around an SVG some css shapes or exclusions have been added to the SVG

      • True, I’m not sure either and in the current state it might even be browser specific and behave differently depending on vendor. Since I’ve trashed my old site and am working to get a new one up, I’ll try things out a bit, for now I’ve just used SVG for buttons and backgrdrops. Especially with patterns SVG is awesome: SVG 1KB, GIF 8KB. and with embedded SVG the HTTP-requests are reduced. I’m aiming at a load time of 200ms… so…

        I’m excited to try out some CSS shapes and see how text flows around SVGs, but thinking on it logically, SVGs are rectangular HTML Elements just like any other, so yes, I’ll properly have to apply a shape to them through CSS. I just wish SVG allowed for keyframe-animations… imagine the power of a CSS mask or CSS shape that changes shape on hover for example!

        • I’d be interested in knowing how it goes after you’ve played around with SVG more. I looked into them about a year ago (I think). At the time they didn’t seem quite ready for production and I’ve held off using them.

          Lately I’ve been thinking it’s time to take another look and see where we are. Maybe I’ll use the comments here as inspiration and come up with a post. I’ve been collecting resources for awhile.

          I hear you about animation. Cool example! When I look at some of the css that’s on it’s way I get really excited about all the things we’re going to be able to do. We’ll have to wait for some older browsers to go away (looking at you IE) or maybe for a polyfill or two.

          Masking is really cool too. It seems like little by little some of the things we do in image editors are coming to css.

Leave a Reply

Your email address will not be published.

css.php