Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Beyond The Boring: The Hunt For The Web’s Lost Soul

Has web design lost its soul? And is responsive design to blame? These questions, posed by my friend and colleague Noah Stokes1, are provocative to say the least. After all, the responsive web has made browsing on our ever increasing collection of Internet-connected screens not only possible, but enjoyable.

Our priority as designers must be to solve problems; perhaps more than anything else, this is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we’re called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio.

Further Reading on SmashingMag: Link

The question, then, becomes: can we succeed at solving both of these problems?

What We’ve Gained Link

There’s no doubt about it, the web has become an aesthetically beautiful place. Simple, attractive sites that are built on solid grid layouts have become the standard. The wild west of the web has been tamed. Law and order in the form of frameworks and fluid grids have taken over and peace reigns throughout the land.

All of this is a good thing. The benefits of simple, attractive sites are both clear and plentiful:

  1. Familiar and easy for users to navigate (when done correctly).
  2. Prototyping is (relatively) fast and easy.
  3. Heavy standardization of site-building techniques (assembly lines have replaced artisans).
  4. Fast layout leads to big cost savings (which may or may not be passed down to the customer).
  5. Strict grid layouts lend themselves to responsive design (the minimal layout trend is driven heavily by this need).
There are many simple and attractive websites.6
A stroll through a web design gallery like Awwwards7 reveals hundreds of fantastic sites that fit the criteria of simple and attractive sites. (View large version8)

It can’t be overstated that there is immense value in standardization and associated techniques. Countless individuals and small businesses benefit from having simple, attractive (and not at all unique) sites to share their brand with the world. However, that’s just one side of the story.

What We’ve Lost Link

Taken in individual doses, the average professional website today looks great. Compare even a lowly designer’s portfolio site today to the best design agency sites ten years ago, and you’ll have to concede that we’ve gotten a lot better at this web design thing. However, as you look around, it’s easy to come to the conclusion that everything is starting to look the same.

Have designers lost that pioneer spirit? Has creativity been sacrificed on the altar of convenience? Before answering these questions, let’s take a look at what’s causing the lack of variation in web design today.

Reasons Why Sites All Look The Same Link

What’s the driving force behind the feeling of sameness that we get as we look around the web today? What’s to blame? As it turns out, it’s not as simple as pinning it all on one tool or method. RWD might contribute, but it’s just one item in a long list. Here are a few of the likely suspects.

Layout Link

Limited layout ideas are one of the most prominent and obvious reasons for a lack of variation on the web. Strip out colors, animations, parallax scrolling effects and the like, and you start to see that a few basic layouts rule the web. How many sites can you name that use only slight variations of these five layouts?

Five common web layouts.9
Five common web layouts. (View large version10)

This is what Noah meant when he lamented that all he saw were “boxes and grids everywhere.” We seem to have reached a stagnation point where unique layouts are a lost art.

Responsive Web Design Link

Once upon a time, you could guarantee that everyone visiting your website would be doing so on a low-resolution desktop computer screen. These days, websites that look great on almost any viewport at any resolution aren’t a luxury, they’re a necessity. Basic, fluid-width, collapsing grids make responsive web design a much simpler process than more organic layouts.

Frameworks Link

Web design frameworks have the potential to rapidly speed up both design and development workflows. For many, they’re the safest, most straightforward route to a responsive, cross-browser website. As a bonus, they also take care of simple styling for all manner of common elements, from buttons to forms. The incredible popularity of tools like Bootstrap and Foundation leads to thousands of web designers using the exact same codebase, layouts, and even aesthetic style on every project they take on.

Prototyping Tools And Processes Link

Even our blank-canvas design process has intentionally reduced creativity from the design process. Most prototyping tools encourage and perhaps even force you to use standardized, boxy elements that conform to strict grid layouts.

Many prototyping tools encourage common grid layout structures.11
Many prototyping tools encourage common grid layout structures. (View large version12)

High-Quality Free Photos And Graphics Link

Never before have beautiful, free design assets been so readily available. Again, convenience and affordability reign supreme, so we see designers flocking to free photo sites, pulling from the same small (but growing) pool of resources.

Two free stock photographs.13
Two free stock photographs. (View large version14)

In the last two years, how many sites have you seen using one (or both) of the two photos above? If you browse the web regularly, I’d wager the number is in the dozens.

The same photographs used on different sites.15
The Village Style and Jigglist16; College Essay Guy17 and Get Busy Make Money18 (View large version19)

This goes way beyond photos, extending to icons, fonts, patterns, and so on. The upside here is that designers with zero budget can still make great looking sites; the downside is that every other designer is doing the same thing with the same resources.

To some designers, “trend” is a dirty word. It shouldn’t be though. Pick a decade in the 20th century and examine its design trends. What you find is fascinating. It gives that time period its own distinct style and personality, and is often a reflection of the entire culture. Even if you can’t see it, it’s happening right now in your work. Everything you see and experience is affecting what you do, and the web amplifies this like never before. The result is a lot of designers gaining inspiration from the same sources and pursuing the same trends.

You And Me Link

Every tool and resource listed above is incredibly valuable. These things make our jobs easier, open up web design and development to more people, and save clients money. I didn’t choose them arbitrarily, I use them. If we’re looking for someone to blame for a lack of variation in web design, I’ll raise my hand. It’s me. And while I don’t think every project merits a unique design, I’d like to tip my hat to the designers out there who are trying to do something more interesting.

It’s also important to note that you can use any or all of the above and still create a unique design. It’s all in how you wield the tools that are available to you.

How To Challenge The Status Quo Link

At this point, you’ve already decided whether or not you care if your site designs are unique. Maybe that’s not your thing — that’s completely acceptable. If you find yourself wanting to break out of your typical workflow, though, here are a few ideas to get you going and some sites that serve as great examples.

Get Weird With Layout Link

Close your prototyping app, take out a pen and some paper, and think about how you can make an interesting, usable layout that’s not something you’ve ever done before.

Phases Magazine Link

Phases Magazine2220 is a good example of a site doing something unexpected with layout. It’s boxy — there is a grid at play here — and yet somehow they made it feel totally outside the typical web design experience (the screenshot doesn’t really give you a good feel for it; be sure to visit the site). If you see this and think, “Whoa, that’s weird,” good! That’s what they’re going for. Some will love it, some will hate it, but I really like that they’re trying something different.

Phases Magazine uses an unconventional grid.21
Phases Magazine2220 uses an unconventional grid. (View large version23)

Unfortunately, the site’s overall experience is quite poor. There’s some unnecessary scrolljacking, and the seemingly responsive layout breaks massively in certain viewports.

Phases Magazine's layout breaks on smaller screens.24
Phases Magazine’s layout breaks on smaller screens. (View large version25)
Curious Space Link

A better implementation of a similar idea is Curious Space312826.

The layout of Curious Space.27
The layout of Curious Space312826. (View large version29)

Here the grid still has a more organic feel, but scrolling functionality is normal and the breakpoints are perfectly functional.

Curious Space adapts well to different devices.30
Curious Space312826 adapts well to different devices. (View large version32)

There are a lot of nice little design touches that you notice as you interact with the site. For instance, the image stack order changes on hover:

Hovering with a mouse brings content to the foreground.33
Hovering with a mouse brings content to the foreground. (View large version34)

Also, they have a bit of fun with scrolling, but it’s not disrupting in the least, and it fits with the haphazard visual theme of the site. The logo starts off as a jumble of letters, but as you scroll, they fall into place and form “Curious Space” in the navigation bar.

The letters of the logo fall into place as you scroll.35
The letters of the logo fall into place as you scroll. (View large version36)
Le Temps D’un Trajet Link

Another interesting example is Le Temps d’un trajet3937. Once again, we see a non-standard grid, but instead of being sporadic, the layout is more intentional and clustered.

The homepage layout of Le Temps d'un trajet.38
The homepage layout of Le Temps d’un trajet3937. (View large version40)

Each block in the arrangement is a static image that turns into a short video on hover. The coolest part, though, is how the grid shifts fluidly to accommodate focusing on different nodes.

Don’t Be A Square Link

One easy way to give your site a different atmosphere is to think outside the box. As cringeworthy as that sounds, when you open yourself up to different geometry, things can get really interesting.

Built By Buffalo Link
Hexagonal layout.41
Built By Buffalo4442 uses hexagons for layout. (View large version43)

Check out the hexagon hive that Built By Buffalo4442 has going on. This gallery design doesn’t translate nicely to mobile, so they simply switch to rectangles at one of their breakpoints. This is a great example of doing something unique where appropriate, but realizing where the boundary should be drawn to give your users the best possible experience.

The layout switches to rectangles on narrower viewports.45
The layout switches to rectangles on narrower viewports. (View large version46)
Anakin Design Studio Link

One of my favorite sites in this vein that I’ve seen recently is Anakin Design Studio4947. Not only is the layout beautiful and unpredictable, the shapes at play here are all far outside what you’d expect scrolling through today’s websites.

Homepage of Anakin Design Studio.48
Anakin Design Studio4947‘s homepage. (View large version50)

As you can see, the huge, masked typography makes a bold impression. Beyond that though, if you move down the page you see a display of recent work. Most designers would put a simple rectangular thumbnail grid here and call it a day, but Anakin has played with the shapes to make it a lot more interesting. They’re still rectangular images, but they’ve used white backgrounds to create the illusion of varying shapes.

Anakin Design Studio's portfolio of work.51
Anakin Design Studio’s portfolio. (View large version52)
Avex Designs; Mathilde Jacon Link

Here are some other sites doing unexpected experiments with interesting shapes.

Examples of interesting shapes from Avex Designs and Mathilde Jacon.53
Avex Designs54 and Mathilde Jacon55 use unconventional shapes to create unique experiences. (View large version56)

Go Organic Link

Fixate; For Better Coffee Link

Sites like Fixate5957 and For Better Coffee combine illustration with organic, crazy-busy layouts that make for powerful and memorable experiences.

Complex illustrated layouts.58
Fixate5957 and For Better Coffee use highly illustrated layouts to help them stand out.(View large version60)

The layouts above only seem complex because of the artwork; in reality, they can be pulled off fairly easily. Custom illustration work is a fantastic way to communicate a unique brand personality in a world lost in minimal thumbnail grids that all look the same.

For Better Coffee uses entertaining animations to track the coffee bean through the coffee creation process as you scroll. The experience is smooth, and it doesn’t jump the page to predefined points, so scrolling becomes a story-telling feature.

Coffee bean story.61
A coffee bean falls toward a grinder as the page is scrolled. (View large version62)
Pouring coffee.63
Further down the page, scrolling pours fresh coffee into a cup. (View large version64)
HappyFunCorp Link

While we’re on the topic of beautifully illustrated sites, you should check out HappyFunCorp65.

At first, it seems like a fairly normal site with some fun little animations. The cool part happens when you start to navigate. The scene on the homepage serves as the basis for the rest of the site, so when you follow a link, instead of loading a brand-new page it zooms in to a detail of the whole scene.

A zoomed-in section of the HappyFunCorp site.66
Following a link zooms in to a detail. (View large version67)

It’s quirky, but I love the original thinking that went into it. Also, because the navigation is still presented in a standard way means that there’s no learning curve for users. The whole experience in delightfully unexpected, but in a way that doesn’t contradict how you normally interact with a site.

Vary The Experience Link

One basic expectation that users have is that everyone who lands on the same site will receive the same experience; a fun way to do something different is to toss that out the window. Vasilis van Gemert’s site7068 not only uses a unique, overlapping box layout, it also changes its entire color scheme for every visit.

Three different color schemes.69
Three different color schemes from Vasilis van Gemert’s site7068. (View large version71)

This creative feature extends beyond the homepage to all of the major subpages.

Subpages also change their color schemes.72
Subpages also change their color schemes. (View large version73)

Create A Unique Visual Theme Link

Another way to make your site design unique is to decide on an entertaining or interesting theme that you can use as the basis of all your design decisions. This provides a nice framework for everything you do and encourages you to explore beyond traditional UI.

While not appropriate for all sites (a government website, for instance), for things like event announcements or small company pages it can be refreshing. The new site for dConstruct 20157674 is a great example of this idea.

Part of the retro-futuristic design for dConstruct 2015.75
Part of the retro-futuristic design of the dConstruct 20157674 site. (View large version77)

As you can see, they went for a retro-futuristic vibe, heavily reminiscent of The Jetsons78. The result is a site that’s flat out fun to scroll through as you discover the how they present each new section.

A detail from the dConstruct design.79
A detail from the dConstruct design. (View large version80)

There are a couple of really great things to note about this site. First of all, the headline treatments are wonderfully retro, using a combination of Lamplighter Script and Andes.

The best part, though, is that these are live web fonts with the diagonal direction implemented via a simple CSS skew. The repetition of diagonal lines throughout the site helps the design feel both consistent and creative.

Styled web fonts mean selectable text.81
With creative use of styled web fonts, all the text is selectable. (View large version82)

This site is a great example of how responsive design doesn’t have to be boring. The layout doesn’t feel boxy or typical, and yet it manages to reflow nicely to any viewport size. In fact, I really love how creative they were with transforming elements for smaller screens. For instance, as your viewport shrinks, the ticket graphic shown below jumps into an animated transform that shifts from horizontal to vertical orientation. It’s a tiny detail, but it’s clever and shows how much thought was put into every aspect of the layout.

26-dconstruct-opt-small83
For narrow viewports, the ticket flips from horizontal to vertical. (View large version84)

Hats off to Clearleft85 for the great work on this one.

Use Stock As An Input, Not An End Result Link

I work at Creative Market86, so I’m absolutely in favor of using great stock graphics, fonts, photos, and more. Quality stock resources can be immensely helpful for every designer, but how you use them is an important consideration. Whether you’re using some interesting vector artwork, an icon set, or a full-blown website theme, consider putting in some extra effort so that your implementation doesn’t look exactly like that of everyone else. The vast majority of people downloading that asset won’t bother with much or any customization, so a little bit goes a long way.

The Trouble With Unique Sites Link

Finding sites that are truly surprising and unique is a tall order. I put in hours of site searching to prepare for this article and still feel like I have very little to show for it. One overwhelming trend I’ve found is that it often feels like the only designers really pursuing unique web design are producing sites with wonky user experiences.

Experimentation is great, but sites that confuse users with weird, unexpected and unpleasant UX often fall short of their goals. Many of these sites take a step backwards by presenting us with Flash-like experiences: long loading times, overly ornate animations, jumpy scrolling, and complex user flows. There is a middle ground. You can create beautiful, unique looking websites without trying to reinvent the interaction wheel.

Web Design Lives Link

Standardization and predictable design will always have their place on the web. In fact, they may be the best possible solution for presenting most types of content to most screens. That said, we should let our creative instincts fight it out with our analytical instincts from time to time.

Let’s do our part to make sure the web remains what it has always been: a place for technology, art and design to overlap in new and interesting ways. Be a pioneer, try something you’ve never seen anyone do — and yes, make lots of mistakes along the way. It’s great to create something weird every now and then, even if other people hate it. That’s how this crazy thing called the web was built, and that’s how we’ll keep pushing it forward.

Ultimately, despite the fact that plenty of sites look pretty similar, I don’t believe that web design has reached a point of stagnation. There are countless extremely talented designers creating unbelievable sites, constantly raising the bar for their peers. This topic is wide open for debate, though. I’d love to hear your thoughts about the state of design on the web, and who you think is doing the most interesting work.

(ml, og)

Footnotes Link

  1. 1 http://www.creativebloq.com/design/noah-stokes-projects-meaning-1135838
  2. 2 https://www.smashingmagazine.com/2015/07/web-design-is-dead-no-it-isnt/
  3. 3 https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity/
  4. 4 https://www.smashingmagazine.com/2012/09/not-all-doom-gloom-web-community/
  5. 5 https://www.smashingmagazine.com/2009/12/the-wow-factor-in-web-design/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/06/01-awwwards-opt.jpg
  7. 7 http://www.awwwards.com/nominees/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/06/01-awwwards-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/06/02-layout-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/06/02-layout-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/06/03-prototyping-tools-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/06/03-prototyping-tools-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/06/04-free-stockphotos-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/06/04-free-stockphotos-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/06/05-stockphoto-examples-opt.jpg
  16. 16 http://jigglist.com
  17. 17 http://www.collegeessayguy.com/
  18. 18 http://www.getbusymakemoney.com
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/06/05-stockphoto-examples-opt.jpg
  20. 20 http://www.phasesmag.com
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/06/06-phases-magazine-opt.jpg
  22. 22 http://www.phasesmag.com
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/06/06-phases-magazine-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/06/07-phases-magazine-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/06/07-phases-magazine-opt.jpg
  26. 26 http://www.curiousspace.com
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/06/08-curious-space-opt.jpg
  28. 28 http://www.curiousspace.com
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/06/08-curious-space-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/06/09-curious-space-opt.jpg
  31. 31 http://www.curiousspace.com
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/06/09-curious-space-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-curious-space-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-curious-space-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/06/11-curious-space-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/06/11-curious-space-opt.jpg
  37. 37 http://letempsduntrajet.fr
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12-le-temps-dun-trajet-opt.jpg
  39. 39 http://letempsduntrajet.fr
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12-le-temps-dun-trajet-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12b-build-by-buffalo-opt.jpg
  42. 42 http://builtbybuffalo.com
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12b-build-by-buffalo-opt.jpg
  44. 44 http://builtbybuffalo.com
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2015/06/13-build-by-bufallo-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2015/06/13-build-by-bufallo-opt.jpg
  47. 47 http://www.anakin.co/en
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2015/06/14-anakin-opt.jpg
  49. 49 http://www.anakin.co/en
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2015/06/14-anakin-opt.jpg
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2015/06/15-anakin-opt.jpg
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2015/06/15-anakin-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2015/06/16-interesting-shapes-opt.png
  54. 54 http://avexdesigns.com/
  55. 55 http://www.mathildejacon.com/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2015/06/16-interesting-shapes-opt.png
  57. 57 http://fixate.it
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2015/06/17-organic-sites-opt.png
  59. 59 http://fixate.it
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2015/06/17-organic-sites-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2015/06/18-for-better-coffee-opt.png
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2015/06/18-for-better-coffee-opt.png
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2015/06/19-for-better-coffee-opt.png
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2015/06/19-for-better-coffee-opt.png
  65. 65 http://happyfuncorp.com/#home
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2015/06/20-happy-fun-corp-opt.png
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2015/06/20-happy-fun-corp-opt.png
  68. 68 https://vasilis.nl/
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2015/06/21-vasilis-van-gemert-opt.png
  70. 70 https://vasilis.nl/
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2015/06/21-vasilis-van-gemert-opt.png
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2015/06/22-vasilis-van-gemert-opt.png
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2015/06/22-vasilis-van-gemert-opt.png
  74. 74 http://2015.dconstruct.org
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2015/06/23-dconstruct-opt.jpg
  76. 76 http://2015.dconstruct.org
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2015/06/23-dconstruct-opt.jpg
  78. 78 https://en.wikipedia.org/wiki/The_Jetsons
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2015/06/24-dconstruct-opt.jpg
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2015/06/24-dconstruct-opt.jpg
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2015/06/25-dconstruct-opt.jpg
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2015/06/25-dconstruct-opt.jpg
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2015/06/26-dconstruct-opt.jpg
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2015/06/26-dconstruct-opt.jpg
  85. 85 http://clearleft.com
  86. 86 https://creativemarket.com

↑ Back to top Tweet itShare on Facebook

Josh Johnson is the Product Manager for Creative Market. He's also a writer, designer, and photographer, and currently lives in Phoenix.

  1. 1

    While I agree that websites look much the same nowadays, I don’t think it’s bad for the web. The web is still meant for content and as you write, weird experiments makes it harder to access it. So the good thing with that all the websites look so similar is, that I may find what I’m looking for in the first moment. In my opinion, it only mirrors what we have in print. There aren’t many big differences in layouts in most magazines you find trough the day. And it seems those concepts work well, no matter if we speak of print or the web.

    37
    • 2

      Marcos Vinicius da Fonseca

      July 6, 2015 12:02 pm

      Exactly. We fought long and hard to get where we are, and for browsers to behave the way they do today (although far from ideal, much better than 5-10 years ago) that I sincerely don’t see “all sites look the same” as a bad thing.

      Having similar layouts mean having consistency, while you can still create and keep a recognisable and memorable identity through other means. A striking logo, a colour palette, typography, etc…

      Not only print and web, but mobile apps, software in general and real life manufacturers all strive for this thin line between “different, but familiar” and “different, but unusable”. I, personally, think the web is in a great place and it will only get better. Give me more of the same, I say.

      4
    • 3

      Joshua Johnson

      July 6, 2015 3:02 pm

      I actually agree with you here. As I mentioned in the article, standardization has tons of benefits.

      4
      • 4

        I’d really love it sometimes if editors wouldn’t answer every other post, just to say hello. Comment count counts? Think of my experience.

        -16
        • 5

          Tirthankar Basu

          September 25, 2015 2:50 am

          Hi Joshua,

          Thanks for sharing such a beautiful, controversial stuff with the most obvious problems with the designers nowadays. I think, we can create innovative things like a cool logo, typos and illustration instead of using just an image with multiply effect background by maintaining the grid standardization. Also thanks for sharing the beautiful links here.

          Appreciate this stuff.

          0
  2. 6

    Bjarni Wark

    July 6, 2015 11:49 am

    It’s interesting to compare the delivery of content when it comes to print and that of a website. Think of books, the way the content is delivered uses the same formula from book to book. Cover, TOC, pages, index, blurb etc. Content structure / layout shift to some degree. Okay I have not fully thought this comparison out completely but you may be getting the comparion of the two.

    1
    • 7

      Joshua Johnson

      July 6, 2015 3:03 pm

      Definitely some good insight. I was a print designer for over six years and often miss the freedom of an Illustrator file when I’m fiddling with web layouts.

      0
      • 8

        James Deering

        July 7, 2015 10:07 pm

        What you fail to see is that Illustrator allows you to have a web layout file, it’s called SVG. Instead of thinking of the web as a fixed magnifying glass that you scroll a “Page” under, think instead of screen design. 100% width and 100% height is the same on any screen device. Though my thoughts and methods are disparaged, if you understand the change of design perception you have quite a lot of room for creativity. http://svgdesign.guru

        -4
      • 9

        Larry Botha

        July 10, 2015 9:30 am

        Joshua, we only use Illustrator for web design :)

        It makes sense to use Illustrator in many cases:
        1. it’s far faster to edit files than in Photoshop, with ties in well with an agile approach, and quickly responding to change
        2. files are generally smaller
        3. Illustrator as an application is less resource intensive; a boost to productivity
        4. you’re working in SVG, and fewer rasterised graphics. This is beneficial in keeping asset sizes down, and also providing retina ready graphics
        5. multiple artboards let you view large sections of a project at once – no hiding layers / opening multiple files

        If you need a rasterised asset – do the grunt work in Photoshop, import it into Illustrator if you need.

        We find doing web design in Photoshop akin to swimming with your hands tied behind your back!

        5
        • 10

          I’ve to admin, that I left Illustrator looong behind, and even moved from Fireworks (which is, though it doesnt seem to see further development these days, still an awesome Web (!) Graphic Editor) on to Inkscape. All my layouts are started in there, and then I move over to simple HTML drafts, sketching around, pushing stuff to and fro between both Inkscape and the IDE / browser.

          cu, w0lf.

          0
  3. 11

    Yofie Setiawan

    July 6, 2015 11:53 am

    Nice landing pages, but i think, in the end, other pages will stay boring xD

    3
  4. 12

    sujata mondol

    July 6, 2015 1:35 pm

    Great post , thanks for sharing this with us.

    2
  5. 13

    Very nice article.
    Just to throw my 5 cents in: I think that standardization is the best thing that ever happened to the web! We’ve been making sites for 15 years now and remember so many crazy-popular trends that were crap from UX point of view. And now we finally feel as if web design as a field has come to its scenes. Considering that of all design fields, web design is one of the youngest, we got to the good place relatively fast.
    Now, at a risk of pissing some people off: let all of us please, pleeeease understand already that creativity in design means finding better, faster way for building ergonomic things, NOT making things look pretty.

    9
    • 14

      Joshua Johnson

      July 6, 2015 4:58 pm

      Great point about how much creativity we’ve seen in such a young industry. I love that.

      0
  6. 15

    Thomas Edwards

    July 6, 2015 2:03 pm

    Every car looks the same, every plane looks the same, every pair of glasses looks the same, every clock looks the same, every door looks the same. There is an entropy to functional design that falls in after a while. To design a site that is deliberately different to be different would be like designing a door that had the hinges on the ceiling like a cat flap.

    “Sometimes a thing is just that thing. It does the job you need it to do, it’s not going to change the world, and that’s OK.” https://twitter.com/RGA/status/558366088116060160

    I don’t think design is in a bad place, I think that the bigger problem is that this trend for a lot sites requires users to have 4G internet on their phone or super-fast broadband. 18% of the world don’t have access to electricity – that is the bigger problem.

    14
    • 16

      We also don’t use dozens (or more) of different cars, planes or glasses every day.

      4
      • 17

        @mazurka
        You use dozens of doors every day. Do they all work completely differently?

        1
    • 18

      Joshua Johnson

      July 7, 2015 4:12 pm

      In the article, I actually bash sites that attempt to reinvent the wheel functionally, as it tends to be confusing to users. The great thing about cars is that if you can drive a VW Beetle, you can probably drive a Tesla. Drastically different styling, drastically different guts, but both have the expected method of interaction (a steering wheel and a couple of pedals). It’s fun and inspiring to occasionally recognize the web designers who are trying to do something different.

      7
  7. 19

    Vinish Garg

    July 6, 2015 2:41 pm

    While I agree with the core message where the author asks for ‘what next in creativity’; lets not forget the stakes and the trade-off in creativity and purpose of design.

    We struggled for this kind of consistency because we were working towards the common goal, to address the common pain points. To think out of the box at the cost of usability is not really desirable and not really welcome in the community. I say this when I look at the examples in this article. At the same time, if there ‘disruption in design’ does not really raise usability concerns even if they don’t solve existing problems (such as adaptive content of multi-channel publishing capabilities), that should be welcome, because small evolving steps are always a sign of next big thing!

    0
  8. 20

    There is a difference between art and design:

    One is to be disruptive and make you think.
    The other is to NOT make you think, and to get out of the way so you can get a task done.

    Both involve creativity – but yearning to create Art when practical design is what is called for comes off as selfish. We always have to be mindful of our users.

    14
  9. 23

    Kelsey Vere

    July 6, 2015 6:08 pm

    Awesome post! You’ve given us lots to think about and lots of great examples. Overall I think that since having a website is no longer a ‘nice to have’ but rather a ‘must-have’ along with many other digital marketing tactics, it can get quite pricey to be unique online.

    The biggest hurdle I believe, which you’ve highlighted here, is functionality of unique themes. We use WordPress to create websites for our clients simply because it’s easy for them to maintain after the design and development is complete. However, we only choose themes that are up-to-date with recent updates and an active theme designer responding to issues and questions as we can’t take the chance that a website will be broken. I think customers are more concerned about their audience being able to effectively use their site and get high quality information from it. Most clients only know web design from what they’ve seen. So they base their vision for their site on what’s already out there. They don’t take too kindly to alternatives. Being similar to everyone else out there means customers won’t have difficulty navigating your site because its something they’re already used to.

    That being said, a unique AND functional design is optimal and should be recognized. However, unique design isn’t necessarily going to help you land a new customer or client.

    0
    • 24

      I agree, most of the “references” i receive from clients, they all have similar kind of feel Square boxes everywhere. But, they demand to make their website look “something” like that only.
      I totally agree on your point “unique design isn’t necessarily going to help you land a new customer or client”.

      0
  10. 25

    David Desjardins

    July 6, 2015 7:04 pm

    I think I’m in agreement with most of the posters here. Standardization has been an absolute boon to our industry. Navigation, content display, and even design makes for a better overall customer experience.

    This doesn’t mean that bold, and unique designs don’t have a place in our industry. But when we’re designing for customers who do a million+ a day in sales associated directly or indirectly with the website, creative and ‘new’ methodologies represent risky experiments. While I’d love to try something new, the business metrics says no.

    One last point – I want to say I don’t design by metrics. I absolutely loathe that description. But while a single change to a site can add or subtract 100K in sales, I’m not inclined to be the risk taker.

    0
  11. 26

    What happens to the web right now is very similar to what happened in other industries, like print design, and even architecture. The difference is, web design evolves much faster and while the whole industry is just over 20 years old, bauhaus is already taking over from art deco. And this is a good sign, since in web, function and usability are above all (there are exceptions to this, of course, depending on the purpose of a site). However, while avoiding risks and sticking to what works may be a good business strategy, only those who can challenge the trends can push the evolution of web design further. At the same time, as it is obvious from some examples in the article, being different just for the sake of it often jeopardizes usability. So it is our tasks as designers to constantly search and iterate and challenge the established formulas to create a better web.

    1
  12. 27

    Alex Perham

    July 6, 2015 8:34 pm

    I’ve personally struggled with this concept recently in redesigning my firm’s site. Ultimately, I think if more sites were unique in their layout, it would no longer be unique. It’s like back 8-10 years ago when everything was made with Photoshop slices and iFrames, the whole Web2.0 concept seemed like a breath of fresh air.

    I’ve wondered if we were reaching the point of a design singularity until technology changes again.

    2
  13. 28

    Jared Throne

    July 6, 2015 8:56 pm

    The issue for me isn’t that I don’t have the capability of creating unique designs, it’s the common issue that most client’s WANT boring and straight forward. They see their site as primarily information even before branding or sales. It’s fine to have boring clients if it pays right, but finding a client who actually wants me to exercise some unique creativity is a rare, rare find.

    3
    • 29

      C.S. Rhymes

      July 6, 2015 9:29 pm

      Firstly this is a great article and very inspiring, but as I was reading it I was thinking the same as Jared, that clients often lack imagination and want the same as everyone else.

      A lot of web design now is about optimising click through rates to a predefined goal, rather than making people stop and think. I think a great designed site will work better in the long term as it will stick in people’s mind and get people talking about your site, and therefore, your business.

      0
    • 30

      Joshua Johnson

      July 6, 2015 11:48 pm

      I think you’re spot on. In fact, I think that many, or even most, clients would be ill served to have a really unique design. Lots of businesses need something simple, straightforward, and predictable. That being said, it’s fun to look for cases such as design conference websites, personal portfolios, artist websites, etc. where creativity is expected, giving us the freedom to be a little more unique in our approach.

      1
    • 31

      This article was pretty on point. It’s somewhat an elephant in the room in parts of the web community. I’m glad that there are many that are sensing the ‘uniformity’ of web design these days. One of the valid points is the influence/pressure of client requirements as some have mentioned. There really is a fine balancing act of client/business sustainability, time/budget and ‘out of the norm’ creativity.

      In terms of what that looks like for each individual/project team, it will be varied and possibly unique. So if people are looking for a ‘golden rule’ on this, there’s unfortunately (or fortunately!) no universal guideline of this balance. It’s great to get people thinking about breaking out of their standard approach to projects though – the vital element in the creativity of web design rather than providing a mere service to clients.

      1
  14. 32

    The link to Noah’s article is not working….

    0
  15. 33

    And, thanks for the article. I recently saw Jen Simmons give a talk about this, too (Modern Layouts: Getting Out of Our Ruts at An Even Apart.). I agree that it is good to give users experiences that feel comfortable and that they can understand quickly. Plus, we are still in the baby phase of responsive design and how to make complex sites simple(r) for a mobile/multi-device world. I have full faith this will work itself out.

    0
  16. 34

    Great article. The phenomenon you are referring to I call the sterilization of the web. The frame now defines the art. Instead of the art defining the frame. Limiting creativity for the sacrifice of perfection and responsive yet dull soulless sites.. That is why when I build sites I create the art first and then make the frame fit the art. People care more about looking perfect even if they all look the same. Pixel perfect at the sacrifice of everything else. I will fight this one mundane website at a time

    Thanks
    Billy

    1
  17. 36

    I am saddened after reading the comments of others how they seem defeated the way websites are headed and just act like victims instead of fighters for creativity and originality. That sickens me.. Rage in my creative brethren to the sterilization of the web!

    2
    • 37

      Hear Hear. Imagine applying the web’s current approach to other design. For example direct mail. Let’s say we standardize all direct mail to a piece of A5 paper, double sized. No more unusual shapes, no more unusual themes. No cut outs, no folding stuff. Just something that fits into a standard envelope and doesn’t require any interaction from the user beyond dismissing it as “another of those”.

      2
  18. 38

    I think you raise some incredibly interesting points. Creativity has definitely taken a hit. I wonder if it’s just that grid based frameworks are still new in the grand timeline of the internet… Maybe people are getting lazy, maybe they’re still coming to grips with it, or maybe the grid layouts actually inhibit creativity or ‘what is possible’ in some ways… or you know, maybe it’s for all of these reasons (and more) in small portions.

    Regardless of what ‘has’ happened, it’s up to us to push the boundaries of what ‘will’ happen in digital design and ux. We need to concentrate on the user – functionally and aesthetically. Some sites will need to focus almost entirely on the functional (buy, read, do), and some will want to take users on a journey/experience they get lost in (lose track of time).

    Content is still king, but the best designers and ux pro’s will know exactly how to disseminate content in a way that works both for the needs of the audience and the goals of the client.

    0
  19. 39

    Thomas is the antithesis of how I believe and thank the heavens for that.

    0
  20. 40

    I think you need to add Huge to this list of interesting site’s. I love the way they intergrate their latest work within their own large H on the main page. Great article! http://www.hugeinc.com/

    0
    • 41

      Huge? Just a play on the ubiquitous “scroll down” experience in my humble opinion.

      0
  21. 42

    Christopher Schell

    July 7, 2015 4:49 am

    Thanks for writing about a timely topic that I think is on the mind of many designers. It’s great to hear different opinions and see through different lenses.

    For me it comes down to personality. If you think about people, it’s their personalities that make them truly unique. We all know someone that has a personality that attracts everyone around them. The kind of person that’s outgoing, yet genuine. Classy but still fun. Some external traits may be easy to see – clothes, tone-of-voice, body language – while others may be tougher to define. They’re probably not zany or wearing crazy outfits or trying too hard. They’re just… personable.

    I don’t fear grid systems or parameters or frameworks. My fear is that sites may be losing their personalities (and thus their soul) or trying to imitate others instead of being themselves. Just like a person, it’s no single trait that makes them feel this way, it’s the entire package. Design, layout, photography, messaging, tone, experience, delight, storytelling and trust (just to name a few) all work together to create the personality of a website.

    We all mimic to some degree and look to innovators and leaders to help us define our own style, but we all have our own unique voice . When organizations don’t understand their brand, don’t want to take the time to discover their traits or worse yet, bury them to look like someone else this is when web design really suffers.

    So does the modern web enforce a sameness? On a surface level, yes. But only in the same way that our physical design makes us all the same. It’s up to each of us to let our personalities and creativity shine through.

    4
  22. 43

    Dennis Chow

    July 7, 2015 6:13 am

    Great read Joshua Johnson.

    Personally I pretty like this paragraph. This is how we lead the trend instead of be a follower.

    “Be a pioneer, try something you’ve never seen anyone do — and yes, make lots of mistakes along the way. It’s great to create something weird every now and then, even if other people hate it. That’s how this crazy thing called the web was built, and that’s how we’ll keep pushing it forward.”

    Thanks!

    2
  23. 44

    http://www.phasesmag.com is damn slow. They need to work hard on how to load it faster…

    1
  24. 45

    Hey Joshua,

    thanks for your article. Here’s my opinion after 17 years of web development:

    The problem is not best practises such as responsive web design or progressive enhancement. The problem is people who ignore them. Right now, every day.

    The problem is not people crafting specific solutions to a problem by hand (like myself). The problem is people not doing that, but using badly written jquery addons and CSS frameworks (you mentioned 2 of them) instead without even knowing what they’re doing.

    Another reason why the internet sucks today is Javascript and how people use it. In the last few years, more and more web sites have stopped working on test devices and browsers we’re using just because their scripting has become bloated beyond repair. For example: Twitter, Facebook, Jira, Buzzfeed.

    Bottomline: As long as the web keeps getting slower and less valid and less open and less usable, your concern for style and layout variety is one of my least.

    1
  25. 46

    Jan Klosowski

    July 7, 2015 12:35 pm

    Majority of websites should look “the same”. Compare it to books. Do we need hexagonal books? Yes, it’s interesting and it’s cool to have one. But 99% of book are “the same”. That’s what happens when design is getting mature enough to put functionality before designer’s ego.

    5
    • 47

      This is misguided on two fronts.
      1.) Books are the container for the content, just like the browser is the container for a site. Resize your browser, and you’re effectively resizing the “book”. All browser have rectangular viewports, like the majority of book shapes, but the presentation of content inside the books can vary wildly. It’s the innards of a book – the design, typography, use of images, etc – that should be different, and have soul.

      2.) Books are a static medium, not inherently interactive like the digital web. Sure, you can have a popup book, or a fold-out flap, but these are vastly different from what we can do with the web interactions.

      2
  26. 48

    Spot on, we need to start pushing the boundaries and stop being so safe!

    0
  27. 49

    Marion Schwab

    July 7, 2015 3:04 pm

    Thank you so much for this article! I agree with you. There are so many beautiful websites, looking all not very different. It’s our job to create real new stuff, that’s why we are designers. Why should pay the customer for a website, that looks a bit like wix or jimdo? And all these WP-Templates!
    But often the customers don’t accept something totally new and different. And then the price … shoud be quite cheap :-)
    Anyway your article inspired me to try to variate more … Thanks.

    0
  28. 50

    I’m not sure that this is really a new trend. There have always been a few dominant design trends on the web. On the one hand you could say it’s lazy. On the other hand, conventions generally emerge from good practice becoming widely adopted and it’s often sensible do so.

    3
  29. 51

    Great article.
    IMHO. If the goal is better design.
    – Write before you design. Content is king.
    – Use original art. Forget stock anything.
    – Study typography from someone who knows nothing about the web.

    It’s a poor carpenter who blames her tools. Bootstrap is not to blame for the boring. Write a better headline, design your own icons and learn what a river is in typography.

    4
  30. 52

    Good read. Got the blood pumping.

    For the designer who’s on the fence or just starting out, I’m a 46yr old who leads a successful design practice and has a few additional words of advice…

    If you want to be involved in anything bigger than yourself—if you want contribute something meaningful for its own sake and not your own—work hard and long to understand and appreciate your medium. Try to develop enough humility to be influenced by its idiosyncrasies and constraints. Become an expert in that before you presume to have a better idea. But, by all means, pursue better ideas. Just be honest with yourself about whether you’re practicing design, or indulging in art. Both are noble pursuits, but it takes a lot more than confidence, ability and bold assertions to reconcile them.

    Consider grid systems in digital design as analogous to form factors in car design. With cars, there’s really only four or five distinct variants on form factor, and yet within such an oppressive constraints you have everything from the Model T Ford to the Bugatti Veyron.

    Constraints are your best friend. Among other things, they focus your creativity on what is good for others instead of yourself. Be that person and you’ll be much happier and successful in life.

    6
  31. 53

    Thanks for including Phases Magazine in your article.

    Trying something different was the exact starting point to get this design. It was a long and hard work and the solution finally appeared when I turned off my computer, took books, pen and papers, trying to think about which design concept would be the good one for this project (publishing weekly a selection of 3 portfolios from talented emerging photographers). After this it was incredibly easy to come back on screen and to prototype the website, really.

    I thought no one was going to care about mobile lanscape viewport so I didn’t debug it but apparently I was wrong ;-)

    Thanks again.

    1
  32. 54

    One thing I couldn’t help noticing in your list of creative sites: for all the variety in layout there’s not a lot of variety in colors. In a quick scan through I counted 8 out of 11 sites that use minor variations of the teal/seafoam and orangey-red/salmon that are so popular nowadays. And of course lots of grey and white. Where are the yellows, purples, burgundys, jewel tones?

    1
  33. 55

    Jeff Caldwell

    July 7, 2015 11:27 pm

    The web has become the digital equivalent of the suburbs, template driven vanilla all in the name of responsiveness and consistency. Designers need to wake up and realize there are no rules, this new aesthetic driven by developer’s logic hampers innovation and limits creative expression. As Design history has taught us, there is always a backlash to the mundane and this time will be no different.

    The revolution is coming people..

    1
  34. 56

    Designing websites is like writing a good song. The crowd will judge if it is an all-time favorite, a top100 song for a few weeks, or just something in the mass of things. And there are so many genres for music. Web development is heading there, too.

    0
  35. 57

    Spot on. “The dumbing of the Web” . . . You know your web page sucks if … it looks like everyone else’s! :-)

    0
  36. 58

    Jai Brinkofski

    July 9, 2015 10:59 pm

    There’s nothing inherently wrong with designing “inside the box”. There’s nothing inherently wrong with designing “outside the box”. Context of use should dictate when each approach is appropriate.

    I believe that it’s usually a good idea to start in the box, keeping to the familiar constructs our users expect, and then looking for places where breaking out of the box won’t annoy or frustrate users. That way your design is both partly unique AND partly familiar.

    Your design will be more interesting than the cookie-cutters designs, yet just as usable.

    And that’s hard to do – but worth it.

    1
  37. 59

    Larry Botha

    July 10, 2015 9:32 am

    Thanks for featuring Fixate :D

    Exciting to be part of the ‘soulful’ web experience!

    0
  38. 60

    I find a consolidation of Weblayouts not that bad.
    It certainly is easier for user to surf the web these days.

    What I really find annoying is those free high-quality Stock photos.

    They are the worst. You can see them about everywhere. And because they are content I really blame them for this web-design fatigue.

    I mean why has a programmer who works +10h a day in an indoor Office a full-page image with some pretty mountain range on his/her page?

    It doesn’t make any sense. This drives me nuts.

    1
  39. 61

    Maybe this is a shameless plug, but this article resonated with me and is at the heart of what I tried to do with our new company’s website:

    http://www.traverstodd.com

    Fair warning: it’s in “beta” mode and still needs some work, including warnings for old browsers. It’s really designed for newer, modern browsers, and I haven’t put fallbacks in place. But the goal was to make the site feel unconventional, and a bit more like a web application than a traditional website.

    1
  40. 62

    I consider this article just as a look-out or .. hm .. teaser. For inspiration. What could be, use your brains, there could be so much more.

    Back, way back in time, when I started with web design, still going to school, I jotted down a simply, fresh and artist-oriented design for my school website. But in 1999 / 2000, there was nothing like the tools we got nowadays, ie. CSS 3 to skew and twist text and images into different forms, so most of it was done the classic image map or “PS-lets-cut-it-up-and-export-it-as-static-image” way. Not to mention spacer GIFs and table layout ;)

    What is holding us back to renew our efforts for .. real art? Form follows function, but then take a look at eg. Colani(s) design – organic, interesting, inspiring .. one could always try to bring in some more spirit than just “doing a good job”.

    So, if you folks got the chance to do some than “just your job”, try to add a bit more of spirit and soul. Flat and blank isn’t really what I look forward to in the near future ;)

    Just my .02 cents of though,
    cu, w0lf.

    1
  41. 63

    Alistair Williams

    September 1, 2015 4:32 pm

    Like other commenters the web has evolved nicely to deliver content in a way that people expect, which has made it easier for people to understand the conventions of navigation and find what they need… quickly.

    This does limit creativity to an extent, but strong creativity is demanded from greater restraints. It just weeds out those who are or are not creative. Of course the execution of web design doers also largely depend on sector. Business to business customers (which we largely serve: orbital.co.uk/work/ don’t need flashy, complex or hard to understand navigation, where-as a coffee shop or art studio will.

    It’s about pushing boundaries, meeting expectations and working within the context of the users world.

    1
  42. 64

    While I agree standardisation is in general positive, and the constraints of the medium can indeed be helpful, I see a lot of comments here along the lines of “lets compare webdesign to books” or “lets compare webdesign to cars”. This is incredibly shortsighted, we should be comparing the web to a book, a business card, a brick & mortar store, a runway show, a concert poster, a bank branch office, and a community center. These are all experiences that are are trying to be achieved on the we by organisations around the globe, and I think the problem is that right now we’re trying to present all of them in book format. This is where creativity and point of difference are vital.

    0
  43. 65

    I love this article by Joshua. And there are some great and well considered comments too.

    I read article this as I was half way through my little side project End The Echo. It started from a very similar desire to Joshua’s – to see less boring design online (where appropriate).

    It’s finally live:

    http://www.endtheecho.com

    -1

↑ Back to top