3 Cases of Effective Fusing Modern and Traditional Web Design Ideas

Take a look at practical tips and examples of mixing traditions and innovations in web design effectively.

As any industry evolves and grows, so does its need for modernization. The same, of course, applies to any company’s website design, its public face, and the first contact with any customer. New design trends are constantly emerging, and identifying them all may be the natural first response. And sure, it’s easy to simply go for the absolute cutting edge of modernity, but it may not always be the ideal approach. Instead, it may be wiser – and more productive – to keep “one eye on the past, one eye on the future.” Whether one attributes the phrase to Janus, Qanglaagix, or Father John Doe, it may hold wisdom regardless. Fully “modern” designs may not in all cases be fit for purpose, and “traditional” designs may have functional merit too. So with that said, let us explore how one may try fusing modern and traditional design ideas and concepts.

Defining Modern and Traditional

As with all such matters, definitions may be highly useful. But since the matter is quite artistic at its core, clear definitions of those terms may be difficult. For example, minimalism was often considered a traditional approach, but in recent years it has regained popularity. It is thus less about clearly defining which artistic schools each term encapsulates, and more about how time defines them.

Another dichotomy one may bring up is “strictness” against “playfulness”, where one would define “modern” as “unconventional.” This seems to be closer to a definition, but is still relatively vague; vibrant colors and informal language have been used by such tech juggernauts as Microsoft for decades.

In the interest of simplicity, then, it might be ideal to simply define them as “old” and “new”. Less precise terms, to be sure, but “modern” does often translate to keeping up with emerging trends for most purposes.

Examples of Fusing Modern and Traditional Ideas in Design

Having said that, theory and definitions may only be so useful if you’re looking for actionable advice. Even if you’re hiring a designer, you may still need to research such matters in advance. What is a better way to explore this concept than by delving into examples of how it’s being done?

Discord

A truly unconventional public image in most regards, Discord has been wildly successful. Given that Discord mostly identifies gamers as its primary audience, it has drawn from gaming aesthetics. What’s more, it has adopted gaming lingo in much of its messaging. Yet it has found appeal in both those modern demographics, as well as in more traditional ones. What has it done, then, design-wise, to fuse modern and traditional?

As you can see above, the site uses a full-page header next to a playful image. It keeps their call-to-action (CTA) buttons to the top left, with pricing immediately underneath. Lastly, it uses shades of blue and purple, akin to mint – which is among the modern colors to use. The text remains written in white, making it easily readable.

Just underneath, its modern design gives way to a traditional black background. It lists the benefits of the service in white, which contrasts well, keeping it highly readable. Where this would be a fully traditional approach, however, the page also features light-hearted gaming lingo just above the CTAs – “Doitdoitdoitdoitdoitdoit.”

Right at the end, the modern design returns. At the very bottom, another figure advertises a cheaper version of the service against a blue, animated background. Just underneath, the traditional elements return – white CTAs against a plain black background.

Thus, we might summarize what Discord has done, fusing modern and traditional design ideas, into the following:

• Full-page headers
• Vibrant colors
• Animated figures and backgrounds
• Playful language
• Clear lists of service features
• Readable, traditional CTAs

Linkin Park

Far from just a music band, the Linkin Park brand has been commercially successful for nearly two decades. Granted, much of the brand’s intended audience is indeed rock music fans – hence the need for modernity. However, the brand also recognizes that traditional elements retain functionality and expand said demographic to other age groups. What its site has done, then, is quite a fine blend of both.

The homepage features a collage of the band performing, which is quite a postmodern element. Just underneath, it features multimedia, performance videos, shot by both the band and fans. Still, CTAs remain prominent both at the top right as well as at the very bottom of the page. They also remain written in white against a black background, which makes them easily readable.

The website’s store takes a sharper turn back into traditional approaches, however. The background becomes a stern, minimalistic white, and all CTAs are black for contrast. Still, the site still features an actionable reel of products at the top, which helps it maintain an air of modernity.

In short, we can summarize how Linkin Park is fusing modern and traditional design ideas:

• Collages
• Multimedia
• Straightforward yet informal language
• Traditional black and white color schemes
• Readable, traditional CTAs

Ars Technica

One of the oldest tech publications today, Ars Technica has also had to revamp its look over the years. One might assume its core demographic is younger, given its focus on tech news, but that’s far from being the case. In the Internet age, tech-savvy demographics are indeed getting wider age-wise. And as a publication that also delves in world news, it needs to appeal to all ages. So how does it fuse modern and traditional into a coherent whole?

The main page features a highly actionable central article panel, with CTAs in modern mint shades against black. The articles themselves sport a modern interface, featuring bubbles that are interaction indicators underneath. Still, the panel contrasts with an abstract grey background, which maintains a sense of traditionality.

Caption: A strict color palette and a clean structure offer a traditional look, but not without slight modern touches.
Alt. tag: A tech publication’s forum section, listing topics in black against a white background.

The website’s forum, on the other hand, is mostly traditional. Black, white, and grey are prominent, and it comes with a clear, strict, solid interface. Yet, slight dashes of color, as well as rounded edges, give it a discreet hint of modernity.

If we’re to summarize how Ars Technica is fusing modern and traditional design, then, we might pinpoint the following factors:

• Modern designs and templates against traditional backgrounds
• Brightly colored CTAs
• Modest use of black, white, and grey
• Use of both sharp and smooth edges

Conclusion

Fusing modern and traditional design ideas may not be easy, but it doesn’t have to be hard either. Simply keep one eye on trends and another on tried-and-tested, stricter designs, and fuse them as the above sites do. Striking the right balance will help your site be more engaging, while also remaining highly functional and readable.

About the author: this is the guest post by Morgan Kennedy, a freelance writer, mostly focusing on the fields of web design and maintenance, currently working for MoversDev and other digital marketing companies.

Title image from Pale pack on Ouch illustration library

Review the introduction into the retro design, check the popular UI trends and illustration trends in 2020, and read about effective UX design strategies for ecommerce websites.