Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. 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.

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.2
A stroll through a web design gallery like Awwwards3 reveals hundreds of fantastic sites that fit the criteria of simple and attractive sites. (View large version4)

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.5
Five common web layouts. (View large version6)

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.7
Many prototyping tools encourage common grid layout structures. (View large version8)

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.9
Two free stock photographs. (View large version10)

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.11
The Village Style and Jigglist12; College Essay Guy13 and Get Busy Make Money14 (View large version15)

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 Magazine1816 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.17
Phases Magazine1816 uses an unconventional grid. (View large version19)

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.20
Phases Magazine’s layout breaks on smaller screens. (View large version21)
Curious Space Link

A better implementation of a similar idea is Curious Space272422.

The layout of Curious Space.23
The layout of Curious Space272422. (View large version25)

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.26
Curious Space272422 adapts well to different devices. (View large version28)

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.29
Hovering with a mouse brings content to the foreground. (View large version30)

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.31
The letters of the logo fall into place as you scroll. (View large version32)
Le Temps D’un Trajet Link

Another interesting example is Le Temps d’un trajet3533. 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.34
The homepage layout of Le Temps d’un trajet3533. (View large version36)

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.37
Built By Buffalo4038 uses hexagons for layout. (View large version39)

Check out the hexagon hive that Built By Buffalo4038 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.41
The layout switches to rectangles on narrower viewports. (View large version42)
Anakin Design Studio Link

One of my favorite sites in this vein that I’ve seen recently is Anakin Design Studio4543. 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.44
Anakin Design Studio4543‘s homepage. (View large version46)

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.47
Anakin Design Studio’s portfolio. (View large version48)
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.49
Avex Designs50 and Mathilde Jacon51 use unconventional shapes to create unique experiences. (View large version52)

Go Organic Link

Fixate; For Better Coffee Link

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

Complex illustrated layouts.55
Fixate5653 and For Better Coffee5754 use highly illustrated layouts to help them stand out.(View large version58)

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.59
A coffee bean falls toward a grinder as the page is scrolled. (View large version60)
Pouring coffee.61
Further down the page, scrolling pours fresh coffee into a cup. (View large version62)
HappyFunCorp Link

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

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.64
Following a link zooms in to a detail. (View large version65)

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 site6866 not only uses a unique, overlapping box layout, it also changes its entire color scheme for every visit.

Three different color schemes.67
Three different color schemes from Vasilis van Gemert’s site6866. (View large version69)

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

Subpages also change their color schemes.70
Subpages also change their color schemes. (View large version71)

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 20157472 is a great example of this idea.

Part of the retro-futuristic design for dConstruct 2015.73
Part of the retro-futuristic design of the dConstruct 20157472 site. (View large version75)

As you can see, they went for a retro-futuristic vibe, heavily reminiscent of The Jetsons76. 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.77
A detail from the dConstruct design. (View large version78)

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.79
With creative use of styled web fonts, all the text is selectable. (View large version80)

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-small81
For narrow viewports, the ticket flips from horizontal to vertical. (View large version82)

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

Use Stock As An Input, Not An End Result Link

I work at Creative Market84, 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/web-design/why-web-design-losing-its-soul-51514950
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2015/06/01-awwwards-opt.jpg
  3. 3 http://www.awwwards.com/nominees/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2015/06/01-awwwards-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2015/06/02-layout-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/06/02-layout-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/06/03-prototyping-tools-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/06/03-prototyping-tools-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/06/04-free-stockphotos-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/06/04-free-stockphotos-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/06/05-stockphoto-examples-opt.jpg
  12. 12 http://jigglist.com
  13. 13 http://www.collegeessayguy.com/
  14. 14 http://www.getbusymakemoney.com
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/06/05-stockphoto-examples-opt.jpg
  16. 16 http://www.phasesmag.com
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/06/06-phases-magazine-opt.jpg
  18. 18 http://www.phasesmag.com
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/06/06-phases-magazine-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/06/07-phases-magazine-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/06/07-phases-magazine-opt.jpg
  22. 22 http://www.curiousspace.com
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/06/08-curious-space-opt.jpg
  24. 24 http://www.curiousspace.com
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/06/08-curious-space-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/06/09-curious-space-opt.jpg
  27. 27 http://www.curiousspace.com
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/06/09-curious-space-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-curious-space-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-curious-space-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/06/11-curious-space-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/06/11-curious-space-opt.jpg
  33. 33 http://letempsduntrajet.fr
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12-le-temps-dun-trajet-opt.jpg
  35. 35 http://letempsduntrajet.fr
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12-le-temps-dun-trajet-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12b-build-by-buffalo-opt.jpg
  38. 38 http://builtbybuffalo.com
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2015/06/12b-build-by-buffalo-opt.jpg
  40. 40 http://builtbybuffalo.com
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/06/13-build-by-bufallo-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2015/06/13-build-by-bufallo-opt.jpg
  43. 43 http://www.anakin.co/en
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2015/06/14-anakin-opt.jpg
  45. 45 http://www.anakin.co/en
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2015/06/14-anakin-opt.jpg
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2015/06/15-anakin-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2015/06/15-anakin-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2015/06/16-interesting-shapes-opt.png
  50. 50 http://avexdesigns.com/
  51. 51 http://www.mathildejacon.com/
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2015/06/16-interesting-shapes-opt.png
  53. 53 http://fixate.it
  54. 54 http://forbetter.coffee
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2015/06/17-organic-sites-opt.png
  56. 56 http://fixate.it
  57. 57 http://forbetter.coffee
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2015/06/17-organic-sites-opt.png
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2015/06/18-for-better-coffee-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2015/06/18-for-better-coffee-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2015/06/19-for-better-coffee-opt.png
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2015/06/19-for-better-coffee-opt.png
  63. 63 http://happyfuncorp.com/#home
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2015/06/20-happy-fun-corp-opt.png
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2015/06/20-happy-fun-corp-opt.png
  66. 66 https://vasilis.nl/
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2015/06/21-vasilis-van-gemert-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://www.smashingmagazine.com/wp-content/uploads/2015/06/22-vasilis-van-gemert-opt.png
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2015/06/22-vasilis-van-gemert-opt.png
  72. 72 http://2015.dconstruct.org
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2015/06/23-dconstruct-opt.jpg
  74. 74 http://2015.dconstruct.org
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2015/06/23-dconstruct-opt.jpg
  76. 76 https://en.wikipedia.org/wiki/The_Jetsons
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2015/06/24-dconstruct-opt.jpg
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2015/06/24-dconstruct-opt.jpg
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2015/06/25-dconstruct-opt.jpg
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2015/06/25-dconstruct-opt.jpg
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2015/06/26-dconstruct-opt.jpg
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2015/06/26-dconstruct-opt.jpg
  83. 83 http://clearleft.com
  84. 84 https://creativemarket.com
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

    38
    • 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.

      3
      • 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.

        -17
        • 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.

      -1
      • 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.

    15
    • 16

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

      2
      • 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.

      6
  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.

    13
  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.

    2
    • 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

    0
  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”.

      1
  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

↑ Back to top