Call
608.845.2900
Visit
330 Locust Dr.
Verona, WI 53593
Message
info@powderkegwebdesign.com
Powderkeg Web Design
Menu
Message Us
Brittany
Brittany

2019 Web Design Trends

January 08, 2019

2019 is here! Along with the new year come new trends and directions in the web design industry. With ever-evolving technology, designers and developers have been pushing (and even breaking) the boundaries in really exciting ways.

Here are 5 trends that we think will dominate in 2019:


1. Speed

According to Google, 53% of mobile site visits leave a page that takes longer than three seconds to load.

Increased page load time results in more bounces
Source: Think With Google, Google/SOASTA Research, 2017.

Typically, this is looked at as a problem to be solved in the development phase of a website, not design. While developers do have the responsibility to code efficiently, the weight of this problem doesn’t fall entirely on their shoulders. Web and visual designers also need to think ahead to how their work will impact the speed of the website they’re crafting.

In general, the more layered and complex a design, the more elements that need to be loaded. Starting out with a more minimal, smart design can help avoid a lot of problems that will affect your website’s loading speed.

In 2019, designers will be even more focused on what they can do to lighten the development load and make sites as fast and efficient as possible without sacrificing design.


2. Video

Video continues to be huge and won’t be going anywhere soon. Whether you use video as a background element, as a resource for your customers, or for people to learn more about your company, it’s hard to go wrong. A quality video can take your website and branding to an entirely different level. Oftentimes, an image and copy can’t achieve what a video can. As the ability to compress and use videos on websites gets more efficient, we’ll definitely be seeing new ways to use them.

Examples:


Seedlip Drinks Home Page
Seedlip Drinks:
The background video helps build the story and character of this brand in a way that images wouldn’t be able to!



Jveb Studio Home Page
Jveb Studio:
This studio’s brand video on the homepage showcases their work in a really fun way with their video. Notice that it also only plays as you hover over it!



Pumper Interactive Music Video
MAI LAN Pumper Music Video:
This music video is actually interactive!


3. Pushing Design Boundaries

 

a. Breaking the Grid

The “grid” has been the designer’s guide for websites for quite a while. Structure and order have been our mantras. However, as coding technology continues to advance, it allows designers to experiment with how content is presented. Unexpected and asymmetrical layouts are becoming a lot more popular and will continue to be a trend in 2019.

Examples:

Times Talks Home Page
Times Talks:
There’s definitely no strict grid here, and it’s amazing!


Rezo Zero Home Page
Rezo Zero:
This is reminiscent of a print layout, and I love that we can do this on web today!


Puree Maison Home Page
Puree Maison:
This site breaks the grid in some spots and sticks to it in others resulting in a visually intriguing layout.


b. Organic Shapes

Along with being able to take liberties with the grid, designers are pulling away from the typical shapes you see on many websites. Instead of using squares, rectangles, squares, and straight lines only, designers are pulling inspiration from more organic sources. 2019 will bring even more curves, angles, and overall fun in websites.

Examples:

Crowd Rise Home Page
CrowdRise:
CrowdRise uses lots of organic curves and shapes in their graphics, giving the site a friendly, human feel.


Zenbu Home Page
Zenbu:
As you scroll down the page, you see so many curves that make you want to keep exploring.


Mawla Home Page
Mawla:
There are so many different shapes, but it doesn’t feel overwhelming–it feels fun!


Conspire Agency Home Page
Conspire:
Wild shapes! Wild shapes everywhere!


c. Overlapping Elements

Another boundary-pushing trend is intentionally creating overlapping elements on the page. This technique can help boost visual interest on a page and give depth to a website that you wouldn’t get otherwise.

Examples:

Taproot Home Page
Taproot Agency:
The use of overlapping elements and shadows gives this website a very 3-dimensional feel.


Timeless Living Home Page
Timeless Living:
This is a good example of text overlapping images–the light and bright images ensure the text is still legible.


Stripe Home Page
Stripe:
The angles and tilted images at the top make this site stand out.


4. Micro-Animations

Micro-animations are small animations triggered by a user’s interaction with a website or app. For example, when you hit the Like button on a Facebook post, there’s a small animation of the hand. Even though you might not even notice the animation, it’s a small thing that enhances your experience with the website. Another example would be animations that are triggered as you scroll down the page. These types of micro-animations tend to be more noticeable and sometimes can be overwhelming. When done thoughtfully, though, they serve their purpose to guide and delight the user.

Micro-animations are everywhere, and in 2019, we’ll continue to see them popping up on sites that didn’t previously have them, as well as websites and apps using them in new ways.

Examples:

Powderkeg Portfolio Page
Powderkeg:
Hovering over each project in our portfolio brings up more to see.


Filament Ag Home Page
Filament Ag:
At the bottom of the home page, when you hover over the photo boxes, they darken and the button fills in. These are pretty simple micro-animations, but they’re really successful at giving the user obvious feedback when they hover over something they can click on.


Mailchimp Home Page
Mailchimp:
Hover over the logo 🙂


KOOX Home Page
KOOX:
As you scroll down, the animations are subtle and quick, but very delightful.


5. Accessibility

Over a billion people (or roughly 15% of the world’s population) have some form of disability. Many of these disabilities impact someone’s daily life–and that includes using the internet. If your website is unusable to 15% of the population, you are missing out on a huge audience. Not only that, but it’s the right thing to do to lower barriers of participation and make room for everybody.

Some of the most common accessibility issues are:

  1. Color contrast catio: If there isn’t enough contrast between important items (like the text and the background), many users may not even be able to read it.
  2. Ways of navigation: Many people may use only their keyboards to navigate a website (by using the tab key and/or space bar). An accessible site should easily allow for this.
  3. Plays well with modern browsers and assistive technologies: Your website should render well in all modern browsers and should work with assistive technologies like screen readers.
  4. Easily understandable and consistent: The overall language should have clear formatting that is easy to read. Your website’s navigation should be the same throughout the site.

Accessibility in web design has been gaining more and more traction during the last few years. 2019 is going to be the year that many companies start seriously auditing their existing websites for accessibility issues, which is a great first step. Even better, we’ll also see more companies start their website from scratch, with accessibility in the forefront of their goals (which is referred to as Inclusive Design).


Final Thoughts

These are by no means the only exciting things that will be happening in 2019! Trends come and go and most of them only make sense in certain applications. It pays to be thoughtful about your own brand and website when deciding what makes the most sense for your audience. For example, big and flashy micro-animations will not be suited well to a healthcare website. Improving accessibility, however, could be crucial.

Our team is excited to see what 2019 brings to the web!

Brittany
Brittany
Senior Web Designer

As a child, Brittany would ask her parents for new pens and notebooks instead of toys, which tells you a lot about her hobbies! When not designing client websites, you will find Brittany at home with her husband and twins, camera and coffee close by.