There’s a look you know well, and try your best to avoid: beveled buttons shining enticingly from a gradient-laden background. Arrows swooping over to drop-shadowed special offer badges. Or maybe a booklets of information that look like an actual book, flippable pages and all. In general, the hyper-real, fussily-3D look that characterizes all these trends is the overarching style that designers are reacting against. We’re starting to embrace flatness and simplicity.
We’re stripping away all the tricks that we’ve used in the past to make web design look like it’s full of physical objects, and embracing the realization that pixels aren’t our enemy. Web design really can look like it’s for the web. Here’s what to avoid if you’re looking to stay up-to-date in your web designs:
Beveling, Embossing, and Glossing
We all know that there are important features to emphasize in web design, like buttons or key phrases. It’s essential that we direct user attention to them, so it makes sense that we got a bit carried away with all the effects we could use to do so. However, this has led to design that looks like this:
Another culprit of the complex 3D-effect trend was old graphics; in an attempt to add interest to the page, some icons looked like they were about to leap off of it entirely. More subdued and elegant designs are now the trend; ones that are flat and unadorned, and work well with the simple, clean type that often accompanies them, as seen in SkyCog. The good news is that these vector graphics are quite a bit easier to create.
In essence, this trend is the practice of copying design features from their counterparts in the real world. (Apple is especially guilty of this trend). For example the skeuomorphic calculator on the dashboard of a Mac looks and functions just like a calculator in real life. However, using it is a much slower process than simply opening the Spotlight function on your desktop and typing in query; instead of clicking all the correct buttons to get your answer, the entire process can be completed on your keyboard.
Skeuomorphic design makes sense to a certain extent, because a familiar interface is both comforting to look at and intuitive to use. However, that doesn’t mean that it’s better to use in any real sense; as shown in the example above, skeuomorphism often prevents an interface from working well, because it’s hampered by restrictions that make sense in the real world, but are non-existent in digital form.
Other Overworked Trends
Although ultra-3D effects and skeuomorphism are the most tired of recent web trends, there are others that are still acceptable in small amounts, but which have become cloying if used too frequently. These include:
Ribbon motifs: This is almost always a beautiful element that contributes to the balance and weight of a design in each individual example. But all the recent examples taken together, it’s become boring and “safe.” Other illustrational elements should be subbed in for a fresher look.
Script typefaces: Of course these still have their place in many good designs, but of late, we’ve been seeing websites that use them to excess. There has also been a flood of script-style logos, all trying to echo the established look of the Ford and Coca-Cola logos.
A letterpress effect: The example that’s been chosen shows a particularly blatant overuse of this effect, although it can still look good if used sparingly.
Grainy texture: There’s a world of textures to choose from, but many sites just go with the current norm. It used to be grunge, and now it’s grunge’s softer, more versatile cousin. Look for another pattern to add edge to your next textured design.
An Example of Inconsistency
In a few of the examples above, you can see updated elements right alongside the unfashionable ones that we discussed. The website below, LayerVaultmanages to combine both the old look of skeumorphic realism (created by using plenty of texture, glossing, beveling and drop shadows) in the large graphic on the left, with a clean, minimal interface on the right (the type is clean and simple, and the buttons are almost completely undecorated). As you can see, it’s a fairly bizarre juxtaposition. So while the prior examples have lambasted the old styles, it’s good to keep in mind that consistency is an incredibly important part of nailing down a design; work that tries to incorporate both the old and the new in an attempt to appease everyone, pleases no one.
Of course, just because these styles aren’t popular right at the moment, that doesn’t mean that they were ever “wrong” or that future designers won’t return to them once they get tired of the current trends. So if you were still a die-hard button beveler, keep your old files tucked away somewhere. You never know when you might want to dust them off again.