10 Web Design Trends We Absolutely Love

Designers have an … anxious … relationship with the idea of trends. On one hand, following the crowd feels wrong — after all, isn’t creativity doing anything but what everyone else is doing? To this line of thinking, the only value in knowing what’s trendy is knowing what you’re pushing against. You can’t simply do the opposite of a trend, of course. But knowing what the trends are makes it easier to subtly comment on and/or critique them.

On the other hand, there’s the idea that

“creativity is knowing how to hide your sources”

Albert Einstein

though more likely coined by humorist C.E.M. Joad. (Appropriate, no?) 

Either way, it’s not hard to know what’s trendy. Just lift your eyes off your smartphone and take a look around — or don’t! 

What matters is understanding the hows and whys of trends’ emergence and adoption. Because at the end of the day, trends have a lot to tell us about our cultural moment: what we love, what we hate, what we want to move toward. The closer we get to understanding those things, the closer we get to getting inside others’ heads — to empathizing with them. And, really, to understanding ourselves. 

After all, when the art historians, fashion critics, and web designers of the future look back on our current era, what they’ll see and comment on will be the foremost trends of our day. When they discuss the aesthetics of the 20teens, they’ll really be discussing what was trendy — and what bucked the trends.

Trends, then, are history in the making.

1. Mobile-First Website Optimization

This is not a new trend. It has already been established for the past number of years that more people have access to a smartphone with internet capabilities than ever before. As a result, the number of visitors to your website from mobile devices will continue to increase significantly throughout 2019. In fact, the majority of visitors to your site will likely be mobile users in the near future.

To address this need, more companies are implementing a mobile-first approach to their web design and optimization. Many websites do not adapt well to mobile devices, frustrating users who then leave the site in favour of an optimized competitor. Google tracks how long users spend on your page and if they leave quickly, you will be penalized in your search result ranking.

You will need a website that is fast and fully optimized for mobile devices, as well as traditional screens. With these features, you will significantly improve your search engine rankings and receive more web traffic. Luckily, optimizing your site for mobile devices is a relatively simple process that many web designers can accomplish through the use of frameworks such as Bootstrap.

2. Website Accessibility

Alright, this last one isn’t a trend, but it is a movement that can’t be ignored in 2019.

If you’re new to accessibility, it has to do with the design of a website for individuals with disabilities. When websites are properly designed and coded, people with disabilities can easily use them. Unfortunately, there are currently many sites out there with accessibility barriers making it difficult for those with disabilities to use.

As WCAG 2.0 (Web Content Accessibility Guidelines) become more commonly enforced, it’s going to be increasingly important to make sure your website is up to par.

The web is an important resource in all of our lives so it’s important to make sure it  provides equal experience and opportunity, regardless of how it is being accessed.

If you’re looking for some helpful resources to get your site up-to-code, you can visit the full list of tools recommended by W3C, the community responsible for developing the standards for the web, here.

3. 3-dimensional illustration

‍

Just when you thought the future was flat, brands like Pitch and Stripe are throwing their brand weight behind a new-old-fashioned form of illustration: 3D. 

Not content with the cut-out illustration style popularized by Slack, designers are looking to add depth and realism to graphics designed to blur the boundaries between the digital and physical worlds. 

In a sense, this sharpens the contrast between digital products and human beings, even as it brings them together into imaginary spaces where people can grasp and manipulate digital elements (like the graphs and icons in Pitch’s hero section). You can’t help but think of the popular assertion that Facebook’s real disruption is the way it makes us, its users, into the product — and wonder if designers aren’t subconsciously pushing against this notion.

Of course, if that’s the case, this feels like a merely incremental evolution. These designs don’t so much grant people their humanity back as render them from flat illustrations into cartoons. 

With that in mind, perhaps Stripe’s much more realistic credit card animation offers a glimpse of a future where the physical and digital can be rendered as such. 

4. More enhanced/elevated image treatments

Images have always presented unique design opportunities, especially on the web. Putting images in circles, making them black and white, adding a drop shadow behind them – all of these are techniques that designers have been using to enhance and/or draw attention to images on websites (and just about any other type of design).

KOBU’s website features imagery that has the subjects cut out instead of a standard image, allowing the design to flow between the “cut-outs” of their team members.

Taking image treatment a step further can draw attention to an image, or even draw attention away from an image. Where most websites feature a very large hero-style image that spans the entire width of their website, taking up a great deal of height and not changing the image much at all, changing up the way images are presented is a design trend that I believe will start picking up more traction in 2019.

Drip’s website shows images that have been cut out and have added drawings and shapes to enhance the image even further, which also places more emphasis on the design of the site itself.

Instead of executing one type of image treatment, expect to see websites layer image treatments to push the image as far as it can go to either draw more attention to them or to pull attention away from them. Stacking design treatments like making an image monochromatic, cutting out the subject, or adding a pattern on top to make a brand new image, will likely be more prominent in web design in 2019.

5. Overlapping design elements

Falling closely in line with broken grid layouts and asymmetry, having items overlap each other can bring visual interest to specific types of content on a page. This can bring an element of the unexpected as we’ve grown accustomed to elements on a web page having their own space and separate from the elements around them (generally not touching one another).

Mad Studio’s website features overlapping elements as the main design aesthetic throughout the site, enhanced by subtle animations that make the website feel three-dimensional.

When done with careful consideration, the trend of overlapping elements on a page can help enhance the overall aesthetic of the site. This can also be pretty difficult to execute giving the mobile-first world we live in, as overlapping elements if not done well can cause confusion and frustration of users when elements overlap in the wrong ways.

Hers’ website showcases overlapping elements in parts of their website, including their main hero area on the home page.

Using overlapping elements where they share similar space is a trend I see growing more common as we move into 2019 and start experimenting more with a website being three dimensional.

6. Bright, Eye-Catching Colors

Colour is one of the most potent tools in web design. Bright, eye-catching colours are becoming the norm across company sites for many reasons:

• Bright colours can improve readability and make the site easier to understand.
• Attractive colour schemes make websites more visually appealing and make users more likely to peruse the site for longer.
• The longer a consumer stays on your site, the more likely they are to purchase something.

Using the right colour scheme can improve your web traffic and lead conversion significantly. Opt for bright, candy-coloured tones contrasted with a light-coloured background. As always, make sure your text is easy to read. Choose bolder fonts in a darker colour to contrast against your site background.

7. Fewer Loading Spinners

No one likes loading spinners. In fact, we often call these images “wheels of death” and they add to the frustration of the user experience. More companies will retire the loading spinner in favour of a more progressive loading screen. Besides, companies will continue to use cached data to decrease loading time and boost their page ranking in Google search results.

8. Integrated, But Not Invasive, Video

Autoplay video can be a nuisance in some circumstances, so many websites are starting to scale back on this feature. Instead of a pop-up that plays sound automatically, many sites are integrating video in their header that auto-plays once a visitor lands on the page.

Instead of blocking other text on the screen, the feature plays in a way that attracts customers without making the website difficult to navigate. Videos help retain visitors on your site and induces them to purchase your product, depending on your message.

9. Large, Bold Titles And Headers

People spend less time on websites than ever before. As a result, a web page will need to implement features to get its message across as quickly as possible. A large, bold title and eye-catching headers help break up the copy and allow for fast audience engagement.

Companies are adding large, catchy text to the top of their web pages to get their message and purpose across quickly. When they publish posts and pages, they use bold, informative headlines so that customers can skim a page and retain information without having to read the body copy – kind of like this article.

10. Animated GIFs

Today’s user is in an “instant gratification” mindset when it comes to finding the information they’re looking for.

That means we only have a small window of time to capture their attention and provide them with what they’re looking for.

This is where animated GIFs really shine.

GIFs can convey complex ideas in a short period of time while being engaging and entertaining. An added bonus is they also work on most browsers and mobile devices, making them accessible to everyone.

In the example below CarLens, a car identification app, uses an animated GIF in its hero section to quickly show the type of information you can find about a car using their app. The GIF is engaging and makes users interested to learn more.

We’re in a post flat design world, and it looks like web design takes a more experimental approach than we’ve seen in years past. Virtually no element on the web page is safe from experimentation as we progress in this 2019 and we are loving the trend.

source: webflowblog, Usability geek, thenextweb.com