Top 10 Web Design Trends in 2018

Calgary Web design company

Web design is a constantly evolving and ever-changing monster. Each year we come across new ways to bring out our creativity to the world through the use of websites. Today we are going to talk about the different web design trends that have arisen in 2018 and why you should incorporate these elements into your website.


1. Asymmetrical Layouts


One of the biggest trends today is the use of asymmetrical designs in websites. Designers are taking steps to further express their creativity while still giving users a wonderful and enjoyable experience.

First of all, the definition of Asymmetry (as stated by means that something is not identical on both sides of a central line or something that lacks “symmetry”. Different examples of asymmetrical layouts can be found all over different abstract painters artwork. Arguably, the most famous asymmetrical painting would be “The Starry Night” by Vincent Van Goh.

Asymmetrical layouts are formed through different shapes and objects of text being placed in an “uneven” format throughout the site. Contrasting elements of complimenting nature form a sense of balance within the chaos, therefore allowing users to be drawn in swiftly and their interest held tightly.

One of my favorite examples of asymmetrical web design was done by Bang Olufson in their new Bronze Collection of wireless speakers.


Bang Olufson asymmetrical web design layout

The Bang Olufson Bronze Collection website is a prime example of asymmetrical layout done right


The site is eye-catching, and builds a branded theme around the entire line of products using a traditional bronze color palette, video backgrounds, and chopped up block elements.


2. Mobile Overtaking Desktop


it's no secret that mobile is becoming the most used form of technology to access the web. With mobile usage spiking in 2017 from 57% to 63% it's easy to predict that we will see a further rise in 2018.

Web designers are going to have to keep up with the philosophy of “Mobile First” now more than ever. Consumers are reaching for their phones to make a purchase, find a retailer, or call a service provider in record numbers each and every year on the web. This means designers will have to keep up with the demand for more responsive websites with a bigger push on user accessibility and creativity fused into one.

Here is a list of companies that really hit their mobile web design out of the park:


KISSmetrics website in iPad view

KISSmetrics Website - iPad view


3. AMP Web Design


One of the biggest trends to ever hit the web, concerning media and publishers, was the introduction of Accelerated Mobile Web Pages - otherwise known as AMP pages. Used mainly by magazines and newspaper websites, AMP pages have the ability to strip websites of their unnecessary files and functionality (fonts, images, JavaScript) and leave a simple, static version of the page that loads extremely quick.

Google released their new project in February of 2016 with hopes of raising mobile inclusiveness throughout the web by giving designers a set of parameters they needed to abide by. This was also paired with new CSS commands and HTML tags. Ultimately, these parameters can limit the designer’s creativity to a minimum, but helps greatly if pulled off right.

One benefit to AMP pages is possibly appearing in Google’s “Top Stories” slider at the top of the search results page.


Google AMP Mobile web pages slider

Snapshot of Google's AMP article slider


Google has been pushing for more website owners to implement AMP into their own sites and not without reward. Some benefits to AMP pages include better mobile rankings in search, and blazing fast page load times.


4. Illustrations


Digitally hand-drawn illustrations help create an inviting aura and build brand awareness within your website. They are increasingly being used in many different websites across the web.


NASA Prospect website example with custom illustrations

NASA Prospect story-telling website with hand-drawn illustrations is a fresh take on an old idea


One website that stands out to me the most is the NASA: Prospect website. Combining natural hand-drawn illustrations, with parallax scroll effects; NASA has created a story-book like experience about exploring the different planets of our solar system with a robot named “Ema”.


5. Simplistic Interactivity


Simplistic Interactivity is achieved through a charming use of eye-popping effects on a flat design. Vibrant color schemes with dense, thick text that convey a message quickly and leave a lasting imprint in the user’s mind.

Flat designs have been done thousands of times but the trend is not going anywhere. There is no other format that relates to Responsive design as well Flat designs do. The incorporation of simple interactions such as actionable hover effects, pleasing color schemes, and CSS animations allow for an amazing way to keep things clean while still grabbing the visitors’ attention.


Cyclemon website example of simplistic interactivity

Cyclemon's is an exceptional example of simplistic interactivity


Cyclemon is a great example of simplistic interactivity. They use an array of different hand-drawn illustrations to delightfully showcase their line of bicycles with a parallax animation. The site is fun, loaded with quirky one-liners, and each slide has just one large colorful title with a center focus on the bicycle.


6. More Animations


Over the last few years browser compatibility has improved greatly allowing for more additions to JS libraries, and CSS commands. This has given designers more power when creating fluid animations across their websites!

In previous years animation needed to be used in small doses or they used up copious amounts of resources making site load times awfully longer.

However, these new additions are highly optimized allowing designers to create complex animations while not bagging down page load times.


Signature Element Website - Discovery Development Execution

The Signature Element website is loaded with finesse and classy animations


Signature Element’s designers have created a finely executed site with a homepage littered with animated elements and video backgrounds while keeping things elegant and fast.


7. More Video


It’s no mistake that video has left such a huge mark on the digital landscape of today. Video has become the #1 way to get a message across online and if your website is not incorporating some form of video into it, you are at risk of being left behind.

Over the past few years we have seen incremental change in how websites use video, and how it's created for web. A great example of how video can be used to create a stunningly interactive website can be found at


Ringer Tokyo example of well done website with video

Ringer Tokyo gives us a sensational feeling with their interactive video website


Ringer has made placeholders that resemble television screens with their rounded-rectangle shape that expands once it's clicked on. Each screen changes size as the page scrolls down automatically. A highly interactive design which is sure to draw visitors in and keep them there.


8. The use of additional fonts in text (more than 2 in a website)


Traditionally, websites would be left with as little as two fonts to use throughout the entire design. Nowadays it's more common to see several different fonts used alongside one another!

Designers are taking more chances and are sometimes incorporating more than 4 fonts into their website. It’s good to remember that you should always be aiming for low page load times, and adding more fonts to your site can slow it down tremendously.

Fonts, like colors, have complementary aspects to them and can be paired based on these aspects. As red pairs well with green, the same effect can be seen with the Oswald and Lato fonts, so it's good to know which fonts relate to each other on the spectrum.

Find any gin drink, tonic or garnish with Ginventory has created a landing page for their app that finds different gin & tonic recipes and garnishes. It has a ton of elements with different typefaces, styles, and weights… but it all blends wonderfully together and gives a very fun sense of professionalism.


9. Data Visualization


Creating visually pleasing sets of data can be troublesome and difficult. For example, most financial institutions have a great deal of data they would like to share with the consumer. But how does one share such a large amount of data with an even larger audience? Through Data Visualization, of course.

Web design in 2018 has opened the doors for different opportunities concerning data visualization. Pie graphs, bar charts, and other simple graphs were all originally used in the past to help represent data visually online. Today, designers must be able to take data companies give them and appropriately represent that information on their website in an aesthetically pleasing way, while simultaneously maintaining the data.

A great example of data visualization was done by Urban Alternatives. They’ve been documenting different economic factors affecting urban areas in the UK and across Europe. They present their data with a extremely well done map. Click on the city you would like to view, and it shows statistics about economic growth and other in-depth factors about the status of the city.


Urban Alternatives website example for finding different economic metrics in europe

Urban Alternatives allows you to find information about economic movement in and around Europe



10. Kinetic Emails


Emails can be an amazing marketing tool! You can direct your message straight to your customer, so don't take this power for granted. The different trends that have arisen throughout web design in the past have a big impact on how email marketers can spread their message and get more sales.

Kinetic emails revolve around consumer interactions. A kinetic email may have several call to actions, a sign-up form, a previously saved cart, and much more. It serves to allow your customer to do as much as possible from the email itself.

Several big name companies have already started to develop and design email marketing campaigns that are kinetic - sending customers back to the storefront with personalized product sliders, and checkout options. Websites will have hard time competing with this one if it's done right!


BnQ kinetic email marketing example

BnQ brings its clients right back to the storefront with their kinetic email campaigns




From asymmetrical designs to kinetic emails, these are the top 10 web design trends of 2018. Keep checking back at the Go Top Shelf blog for more exciting topics on Website Design, Web Development, SEO & SEM tactics, and how to find your place in the digital ecosystem of today.

Go Top Shelf is a Calgary Web Design company with a mission to bring their clients beautifully secure websites that exceed expectations. If you require help with any web related services - give us a call today!


Tom Watts

Tom is the proud Owner of Go Top Shelf in Calgary, Alberta, Canada. He's a seasoned blogger who writes about all things related to online marketing, web design and SEO. Feel free to ask him anything!


Popular Articles

real estate referrals

4 Ways to Get More Real Estate Referrals From Clients

By Tom Watts | June 16, 2022

Real estate referrals get you higher quality leads for your business than any other strategy. Read on to find out how to get more referrals from your clients.

real estate ppc

Real Estate PPC: Google & Facebook Ads for Realtors

By Tom Watts | May 13, 2022

What is real estate PPC? Why should you use it for your business? Here’s everything you need to know about pay-per-click advertising for realtors.

landing page seo guide

Landing Page SEO: How to Rank Your Landing Pages on Google

By Tom Watts | May 9, 2022

Whether you’re a legal firm or a real estate agent, it’s important that you get eyes on your landing pages. Here’s how to do landing page SEO in 9 steps.

More Articles From Our Blog

real estate referrals

4 Ways to Get More Real Estate Referrals From Clients

By Tom Watts | June 16, 2022

Real estate referrals get you higher quality leads for your business than any other strategy. Read on to find out how to get more referrals from your clients.

real estate ppc

Real Estate PPC: Google & Facebook Ads for Realtors

By Tom Watts | May 13, 2022

What is real estate PPC? Why should you use it for your business? Here’s everything you need to know about pay-per-click advertising for realtors.