Home > Others > Beyond The Boring: The Hunt For The Web’s Lost Soul

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

July 6th, 2015 Leave a comment Go to comments
There are many simple and attractive websites.

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

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

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

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

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?

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

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

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

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

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 Style12 and Jigglist13; College Essay Guy14 and Get Busy Make Money15 (View large version16)

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.

Design Trends

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

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

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

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

Phases Magazine1917 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.18
Phases Magazine1917 uses an unconventional grid. (View large version2220)

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

A better implementation of a similar idea is Curious Space282523.

The layout of Curious Space.24
The layout of Curious Space282523. (View large version26)

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.27
Curious Space282523 adapts well to different devices. (View large version29)

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

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

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

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

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
Hexagonal layout.38
Built By Buffalo4139 uses hexagons for layout. (View large version40)

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

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

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.48
Anakin Design Studio’s portfolio. (View large version49)
Avex Designs; Mathilde Jacon

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

Examples of interesting shapes from Avex Designs and Mathilde Jacon.50
Avex Designs51 and Mathilde Jacon52 use unconventional shapes to create unique experiences. (View large version53)

Go Organic

Fixate; For Better Coffee

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

Complex illustrated layouts.56
Fixate5754 and For Better Coffee5855 use highly illustrated layouts to help them stand out.(View large version59)

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.60
A coffee bean falls toward a grinder as the page is scrolled. (View large version61)
Pouring coffee.62
Further down the page, scrolling pours fresh coffee into a cup. (View large version63)
HappyFunCorp

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

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

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

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

Three different color schemes.68
Three different color schemes from Vasilis van Gemert’s site6967. (View large version70)

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

Subpages also change their color schemes.71
Subpages also change their color schemes. (View large version72)

Create A Unique Visual Theme

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

Part of the retro-futuristic design for dConstruct 2015.74
Part of the retro-futuristic design of the dConstruct 20157573 site. (View large version76)

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

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

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

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

Use Stock As An Input, Not An End Result

I work at Creative Market85, 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

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

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

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

The post Beyond The Boring: The Hunt For The Web’s Lost Soul appeared first on Smashing Magazine.

Categories: Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.